UI fixes

client/.env.example

@@ -4,4 +4,5 @@ REACT_APP_GOOGLE_CLIENT_ID=
 REACT_APP_ORCID_URL=
 REACT_APP_ORCID_CLIENT_ID=
 REACT_APP_ORCID_CLIENT_SECRET=
-REACT_APP_SERVER_URL=
+REACT_APP_SERVER_URL=
+REACT_APP_BCOAPI_TOKEN=

client/package.json

@@ -25,6 +25,7 @@
     "focus-trap-react": "^10.2.3",
     "formik": "^2.2.9",
     "jslint": "^0.12.1",
+    "jwt-decode": "^4.0.0",
     "object-hash": "^3.0.0",
     "react": "^17.0.2",
     "react-bootstrap": "^2.7.2",

client/src/App.css

@@ -44,6 +44,10 @@
 
 
 /* about pages */
+.about-main {
+  margin: 2%;
+}
+
 .member-image {
   width: 150px;
   height: 150px;
@@ -97,7 +101,6 @@
   text-decoration: none;
   color: white;
   background-color: primary;
-
 }
 
 .hover-background {
@@ -286,7 +289,7 @@
 }
 
 .home-linkcard {
-  min-height: 470px;
+  min-height: 350px;
   min-width: 275;
   text-align: center;
   margin-top: 5;
@@ -323,6 +326,10 @@
   font-weight: bold !important;
 }
 
+.resources-citation {
+  text-align: left;
+}
+
 .resources-linkcard {
   min-height: auto;
   text-align: center;
@@ -366,6 +373,9 @@
   color: var(--main-red-color) !important;
 }
 
+.table-card {
+  padding: 2%;
+}
 
 /* text field */
 .large_textfield {

client/src/App.js

@@ -15,14 +15,16 @@ function initializeReactGA() {
     page: global.window.location.pathname,
   });
 
-  // Load the script with a version in the query string
   const script = global.document.createElement("script");
   script.src = `https://www.google-analytics.com/ga.js?v=${version}`;
   script.async = true;
   global.document.head.appendChild(script);
 }
 
+
+
 function App() {
+
   initializeReactGA();
   return (
     <BrowserRouter>

client/src/components/FullWidthBox.js

@@ -0,0 +1,35 @@
+// src/views/home/HomeView/FdaBox.js
+
+import React from "react";
+import {
+  Box,
+  Card,
+  CardActionArea,
+  CardContent,
+  Typography
+} from "@mui/material";
+
+export default function FullWidthBox({link, title, content, image, imageAlt, cssClass}) {
+
+  const handleClickOpen = () => {
+    if (link !== "") {
+      global.window.open(link)
+    }
+  };
+
+  return (
+    <Card className="home-notice">
+      <Box className={cssClass}>
+        <CardActionArea onClick={handleClickOpen}>
+          <CardContent >
+            <Typography className="home-intro-title">
+              {title}
+            </Typography>
+            {image && <img src={image} height={100} alt={imageAlt} />} 
+            <Typography >{content}</Typography>
+          </CardContent>
+        </CardActionArea>
+      </Box>
+    </Card>
+  );
+}

client/src/components/ThirdBox.js

@@ -0,0 +1,44 @@
+// src/views/home/HomeView/BcoDb.js
+
+import React from "react";
+import {
+  Card,
+  CardActionArea,
+  CardContent,
+  Typography
+} from "@mui/material";
+import { Link } from "react-router-dom"
+
+export default function ThirdBox({link, title, content, image, imageAlt, cssClass}) {
+  const styling = cssClass
+
+  return (
+    <Card className="home-linkcard" elevation={1}>
+      {link && link.includes("https://") ?(
+        <CardActionArea onClick={() => global.window.open(link)}>
+          <CardContent>
+            <Typography className="home-intro-title">
+              {title}
+              <br />
+              {image && <img src={image} height={100} alt={imageAlt} />} 
+              <br />
+            </Typography>
+            <Typography className={styling}>{content}</Typography>
+          </CardContent>
+        </CardActionArea>
+      ) : (
+        <CardActionArea className="home-linkcard" component={Link} to={link}>
+          <CardContent>
+            <Typography className="home-intro-title">
+              {title}
+              <br />
+              {image && <img src={image} height={100} alt={imageAlt} />} 
+              <br />
+            </Typography>
+            <Typography className={styling}>{content}</Typography>
+          </CardContent>
+        </CardActionArea>
+      )}
+    </Card>
+  );
+}