About page

client/package.json

@@ -20,6 +20,7 @@
     "axios": "^1.2.1",
     "bootstrap": "^5.2.3",
     "dayjs": "^1.11.7",
+    "focus-trap-react": "^10.2.3",
     "formik": "^2.2.9",
     "jslint": "^0.12.1",
     "object-hash": "^3.0.0",
@@ -33,6 +34,7 @@
     "react-helmet": "^6.1.0",
     "react-json-view": "^1.21.3",
     "react-redux": "^8.0.4",
+    "react-multi-select-component": "^4.3.4",
     "react-router-dom": "^6.6.0",
     "react-scripts": "5.0.1",
     "react-twitter-embed": "^4.0.4",

client/src/App.css

@@ -1,4 +1,46 @@
 /* App.css */
+/* Define a CSS variable for red color */
+:root {
+  /* --main-red-color: rgb(227, 55, 55); */
+  --main-red-color: rgb(210, 31, 60) !important;
+  --main-blue-color: #0477bf !important;
+  --main-cardBackground-color: #D8E9FD !important
+}
+
+/* About page- BCOnexus.js CSS Components */
+
+.About-bullet {
+  /* display: "inline-block";
+  margin: "0 2px";
+  transform: "scale(0.8)";
+  font: 26px; */
+
+  color: black;
+  font-size: 22px !important;
+  font-family: 'Roboto', 'Helvetica', Arial, sans-serif;
+  margin: 10px 2px !important;
+  display: inline-block !important;
+  vertical-align: middle !important;
+}
+
+
+.About-linkCard {
+  min-height: 300px;
+  min-width: 275px;
+  text-align: center;
+  background-color:var(--main-cardBackground-color)
+}
+.About-title {
+  font-size: 33px !important;
+  font-family: 'Roboto', 'Helvetica', Arial, sans-serif;
+  margin: 10px 2px !important;
+  font-weight: bold !important;
+}
+
+.About-centerCard {
+  min-width: 275 !important;
+  text-align: center !important;
+}
 
 /* about pages */
 .member-image {

client/src/App.js

@@ -5,9 +5,21 @@ import { BrowserRouter } from "react-router-dom";
 import Router from "./routes";
 import ReactGA from "react-ga4";
 
-function initializeReactGA(){
-  ReactGA.initialize("G-RP8P4D7VWX");
-  ReactGA.send({ hitType: "pageview", page: global.window.location.pathname });
+function initializeReactGA() {
+  const version = new Date().toISOString(); // Use the current timestamp as the version
+  const gaTrackingId = "G-RP8P4D7VWX";
+
+  ReactGA.initialize(gaTrackingId, { gaOptions: { storage: "none" } });
+  ReactGA.send({
+    hitType: "pageview",
+    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() {

client/src/components/about/BCOnexus.js

@@ -1,54 +1,32 @@
 import React from "react";
+import "../../App.css"
 import {
   Card,
-  CardActionArea,
   CardContent,
-  makeStyles,
   Typography,
   Box
 } from "@material-ui/core";
 
-const useStyles = makeStyles({
-  bullet: {
-    display: "inline-block",
-    margin: "0 2px",
-    transform: "scale(0.8)",
-    fontSize: "26px"
-  },
-  linkCard: {
-    minHeight: "300px",
-    minWidth: 275,
-    textAlign: "center",
-    backgroundColor:"#D8E9FD"
-  },
-  title: {
-    fontSize: "33px",
-  },
-//   colorBackground: {
-//     backgroundColor: "#D8EDF9"
-// }
-});
 
 export default function BCOnexus() {
-    const classes = useStyles();
 
-    return (
-        <Card className={classes.linkCard}>
-            <CardContent className={classes.linkCard}>
-            <Box>
-                <Typography className={classes.title}>
-                    <stong>BCOnexus</stong>
-                </Typography>
-                <Typography className={classes.bullet}>
-                Developed by DNAnexus
-                <br>
-                </br>
-                <br></br>
-                <li>Import workflows and applications metadata into BCO</li>
-                <li>Export WDL and CWL scripts to DNAnexus workflows through dcCompiler</li>
-                </Typography>
-                </Box>
-            </CardContent>
-        </Card>
-    );
+  return (
+    <Card className="About-linkCard">
+      <CardContent className="About-inkCard">
+        <Box>
+          <Typography className="About-title">
+            <stong>BCOnexus</stong>
+          </Typography>
+          <Typography className="About-bullet">
+              Developed by DNAnexus
+            <br>
+            </br>
+            <br></br>
+            <li>Import workflows and applications metadata into BCO</li>
+            <li>Export WDL and CWL scripts to DNAnexus workflows through dcCompiler</li>
+          </Typography>
+        </Box>
+      </CardContent>
+    </Card>
+  );
 }

client/src/components/about/MeetOurTeam.js

@@ -1,54 +1,24 @@
 import React from "react";
-import { Box, Card, CardContent, CardHeader, Grid, Typography, makeStyles} from "@material-ui/core";
-
-const useStyles = makeStyles({
-    root: {
-      minWidth: 275,
-    },
-    bullet: {
-      display: "inline-block",
-      margin: "0 2px",
-      transform: "scale(0.8)",
-      fontSize: "24px"
-    },
-    linkCard: {
-      minHeight: "300px",
-      textAlign: "center"
-    },
-    supportCard: {
-      textAlign: "Left",
-      marginBottom: 12,
-      marginLeft: 12
-    },
-    centered: {
-        minWidth: 275,
-        textAlign: "center"
-      },
-    title: {
-      fontSize: "33px",
-      marginTop: 10
-    },
-    colorBackground: {
-        backgroundColor: "#c2d3f7"
-    }
-  });
+import { Box, Card, CardContent, Typography} from "@material-ui/core";
 
 export default function Story() {
-    const classes = useStyles();
 
-    return (
-        <Card className={classes.centered}>
-            <CardContent className={classes.linkCard}>
-                <Box className={classes.colorBackground}>
-                <Typography className={classes.title}>
-                    <strong>Meet Our Team</strong>
-                    <br />
-                </Typography>
-                <Typography className={classes.bullet}>
-                BioCompute is governed by an Executive Steering Committee, which engages in outreach and has executive oversight over the project, and a Technical Steering Committee, which builds tools and resources related to the IEEE-2791-2020 standard, and provides technical guidance to the community.
-                </Typography>
-                </Box>
-            </CardContent>
-        </Card>
-);
+  return (
+    <Card className="About-centerCard">
+      <CardContent className="About-linkCard">
+        <Box>
+          <Typography className="About-title">
+            <strong>Meet Our Team</strong>
+            <br />
+          </Typography>
+          <Typography className="About-bullet">
+            BioCompute is governed by an Executive Steering Committee, which engages in outreach and has
+             executive oversight over the project, and a Technical Steering Committee, which builds tools
+             and resources related to the IEEE-2791-2020 standard, and provides technical guidance to the
+             community.
+          </Typography>
+        </Box>
+      </CardContent>
+    </Card>
+  );
 }