24.06.27

client/src/App.css

@@ -7,8 +7,72 @@
   --main-cardBackground-color: #D8E9FD !important
 }
 
+/* image CSS */
+.centered-image {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+.inline-content img {
+  margin-right: 10px; /* Space between image and text */
+}
+
+.loading-icon {
+  display: inline-block;
+  animation: spin 1s linear infinite;
+  width: 50px;
+  height: 50px;
+  background: transparent;
+}
+
+/* content/text CSS */
+.inline-content {
+  display: flex;
+  align-items: center; /* Align items vertically center */
+}
 /* About page- BCOnexus.js CSS Components */
 
+.About-half-width-box{
+  min-height: 650px; /* Ensure both boxes have a minimum height */
+  min-width: 350px;/* min-width: 275px; Ensure both boxes have a minimum width */
+  width: 90%; /* Half the width of the container minus spacing */
+  margin: 0 auto; /* Add spacing between the boxes */
+  border: 1px solid #ccc; /* Add a border for visual separation */
+  border-radius: 8px; /* Add border radius for rounded corners */
+  display: flex; /* Use flexbox */
+  justify-content: center !important;
+  align-items: center; /* Center content horizontally */
+  text-align: left;
+  padding: 16px;
+}
+
+.centered-title {
+  text-align: center;
+}
+
+.About-Full-Width-Box{
+  width: 100%;
+  min-width: 275px; 
+  border: 1px #ccc; 
+  border-radius: 5%; 
+  display: flex;
+  justify-content: flex-start; 
+  align-items: flex-start;
+  align-content: flex-start;
+  text-align: left;
+  margin-bottom: 50px;
+  margin-top: 20px;
+} 
+
+.about-text {
+  font-family:"lato", sans-serif !important;
+  font-size: x-large !important;
+  margin: left 80px !important;
+  /* color: red; */
+}
+
 .About-bullet {
   /* display: "inline-block";
   margin: "0 2px";
@@ -45,7 +109,10 @@
 
 /* about pages */
 .about-main {
-  margin: 2%;
+  margin-top: 3%;
+  margin-left: 20%;
+  margin-right: 20%;
+  margin-bottom: 2%;
 }
 
 .member-image {
@@ -274,6 +341,7 @@
 .home-intro-title {
   font-size: 28px !important;
   font-weight: bold !important;
+  text-align: center !important;
 }
 
 .home-position {

client/src/components/FullWidthBox.js

@@ -1,4 +1,4 @@
-// src/views/home/HomeView/FdaBox.js
+// 
 
 import React from "react";
 import {
@@ -8,28 +8,51 @@ import {
   CardContent,
   Typography
 } from "@mui/material";
+import PropTypes from 'prop-types';
 
-export default function FullWidthBox({link, title, content, image, imageAlt, cssClass}) {
+export default function FullWidthBox({ link, title, content, image, imageAlt, cssClass }) {
 
   const handleClickOpen = () => {
     if (link !== "") {
-      global.window.open(link)
+      global.window.open(link);
     }
   };
 
   return (
-    <Card className="home-notice">
+    <Card className="About-Full-Width-Box">
       <Box className={cssClass}>
         <CardActionArea onClick={handleClickOpen}>
-          <CardContent >
+          <CardContent>
             <Typography className="home-intro-title">
               {title}
             </Typography>
-            {image && <img src={image} height={100} alt={imageAlt} />} 
-            <Typography >{content}</Typography>
+            <br></br>
+            <div className="inline-content">
+            <Typography className="about-text" component="div" dangerouslySetInnerHTML={{ __html: content }} />
+              {image && <img src={image} height={100} alt={imageAlt} className="centered-image" />} 
+
+            </div>
+            {/* {image && <img src={image} height={100} alt={imageAlt} className="centered-image" />} 
+            <Typography className="about-text" component="div" dangerouslySetInnerHTML={{ __html: content }} /> */}
           </CardContent>
         </CardActionArea>
       </Box>
     </Card>
   );
 }
+
+FullWidthBox.propTypes = {
+  link: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+  image: PropTypes.string,
+  imageAlt: PropTypes.string,
+  cssClass: PropTypes.string
+};
+
+FullWidthBox.defaultProps = {
+  link: '',
+  image: '',
+  imageAlt: 'Image',
+  cssClass: ''
+};

client/src/components/HalfWidthBox.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { Card, CardActionArea, CardContent, Typography } from "@mui/material";
+import PropTypes from 'prop-types';
+
+export default function HalfWidthBox({ link, title, content, image, imageAlt, cssClass }) {
+  const handleClickOpen = () => {
+    if (link !== "") {
+      global.window.open(link);
+    }
+  };
+
+  return (
+    <Card className="About-half-width-box"> {/* Define a CSS class for half-width box */}
+      <CardActionArea onClick={handleClickOpen}>
+        <CardContent>
+          <Typography className="home-intro-title">
+            {title}
+          </Typography >
+          <br></br>
+          {image && <img src={image} height={100} alt={imageAlt} className="centered-image"/>}
+          <Typography className="about-text" dangerouslySetInnerHTML={{ __html: content }} />
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  );
+}
+
+HalfWidthBox.propTypes = {
+  link: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+  image: PropTypes.string,
+  imageAlt: PropTypes.string,
+  cssClass: PropTypes.string
+};
+
+HalfWidthBox.defaultProps = {
+  link: '',
+  image: '',
+  imageAlt: 'Image',
+  cssClass: ''
+};

client/src/components/LoadingComponent.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import biocomputing from "../images/biocomputing.gif"
+import '../App.css'; // Ensure you have styles for the loading icon
+
+
+const LoadingIcon = () => {
+  return (
+    <div className="loading-icon">
+      <img src={biocomputing} alt='loading...' />
+    </div>
+  );
+};
+
+export default LoadingIcon;