Merge pull request #354 from biocompute-objects/prod_push

Prod push

.gitignore

@@ -11,3 +11,4 @@ server/.secrets
 server/db.sqlite3
 server/.coverage
 server/htmlcov*
+*settings.json*

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

@@ -3,12 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
-    "@mui/icons-material": "^5.10.14",
+    "@mui/icons-material": "^5.15.15",
     "@mui/joy": "^5.0.0-beta.3",
+    "@mui/material": "^5.15.15",
     "@mui/x-date-pickers": "^5.0.10",
     "@reduxjs/toolkit": "^1.8.5",
     "@rjsf/core": "^5.0.0-beta.14",
@@ -23,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",
@@ -33,8 +36,8 @@
     "react-gtm-module": "^2.0.11",
     "react-helmet": "^6.1.0",
     "react-json-view": "^1.21.3",
-    "react-redux": "^8.0.4",
     "react-multi-select-component": "^4.3.4",
+    "react-redux": "^8.0.4",
     "react-router-dom": "^6.6.0",
     "react-scripts": "5.0.1",
     "react-twitter-embed": "^4.0.4",

client/src/App.css

@@ -44,6 +44,10 @@
 
 
 /* about pages */
+.about-main {
+  margin: 2%;
+}
+
 .member-image {
   width: 150px;
   height: 150px;
@@ -93,9 +97,10 @@
 }
 
 .nav-link {
+  input {color: white};
   text-decoration: none;
-  color: inherit; /* Inherits the color from its parent */
-  /* Add any additional styling you want */
+  color: white;
+  background-color: primary;
 }
 
 .hover-background {
@@ -143,7 +148,15 @@
 }
 
 
+.custom-container {
+  margin: 5%;
+  padding-top: 0; /* Ensure the container starts at the top of the page */
+}
 
+.custom-table-container {
+  overflow-x: auto; /* Makes the table scrollable horizontally */
+  display: block;  /* Allows the table container to respect the width constraints */
+}
 
 /* Outlet styles */
 .outlet-root {
@@ -276,7 +289,7 @@
 }
 
 .home-linkcard {
-  min-height: 470px;
+  min-height: 350px;
   min-width: 275;
   text-align: center;
   margin-top: 5;
@@ -313,6 +326,10 @@
   font-weight: bold !important;
 }
 
+.resources-citation {
+  text-align: left;
+}
+
 .resources-linkcard {
   min-height: auto;
   text-align: center;
@@ -356,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/NotificationBox.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react"
-import { Button, Card, CardContent, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@material-ui/core"
+import { Button, Card, CardContent, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material"
 import { useDispatch, useSelector } from "react-redux";
 import { clearMessage } from "../slices/messageSlice";
 

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>
+  );
+}