From 66b869e47322058c50463dc57b10cf9ceca8402c Mon Sep 17 00:00:00 2001
From: hadleyking <hadley_king@gwu.edu>
Date: Tue, 19 Dec 2023 15:31:20 -0500
Subject: [PATCH] css for resources page Changes to be committed: 
 modified:   client/src/components/account/Servers.js 	modified:  
 client/src/components/bcodbs/SearchResults.js 	modified:  
 client/src/components/resources/Builder.js 	modified:  
 client/src/components/resources/DNAnexus.js 	modified:  
 client/src/components/resources/Galaxy.js 	modified:  
 client/src/components/resources/Hive.js 	modified:  
 client/src/components/resources/Packages.js 	modified:  
 client/src/components/resources/index.js

---
 client/src/components/account/Servers.js      | 31 +------------
 client/src/components/bcodbs/SearchResults.js |  9 +++-
 client/src/components/resources/Builder.js    | 32 ++------------
 client/src/components/resources/DNAnexus.js   | 33 ++------------
 client/src/components/resources/Galaxy.js     | 32 ++------------
 client/src/components/resources/Hive.js       | 33 ++------------
 client/src/components/resources/Packages.js   | 44 ++++---------------
 client/src/components/resources/index.js      | 34 +++++---------
 8 files changed, 42 insertions(+), 206 deletions(-)

diff --git a/client/src/components/account/Servers.js b/client/src/components/account/Servers.js
index d8a10ac2..a4b9fe09 100644
--- a/client/src/components/account/Servers.js
+++ b/client/src/components/account/Servers.js
@@ -9,34 +9,7 @@ import { removeBcoDb, groupsPermissions, groupInfo } from "../../slices/accountS
 import AddServer from "./AddServer";
 import { useNavigate } from "react-router-dom";
 
-const useStyles = makeStyles({
-  bullet: {
-    display: "inline-block",
-    margin: "0 2px",
-    transform: "scale(0.8)",
-  },
-  serverCard: {
-    minWidth: 275,
-    minHeight: "250px",
-    maxWidth: "500px",
-    textAlign: "left",
-    marginBottom: 12,
-    marginTop: 12,
-    marginLeft: 12,
-  },
-  heightened: {
-    minHeight: "250px"
-  },
-  title: {
-    fontSize: "37px",
-  },
-  pos: {
-    marginBottom: 12,
-  },
-});
-
 export default function Servers() {
-  const classes = useStyles();
   const dispatch = useDispatch()
   const currentUser = useSelector((state) => state.account.user);
   const bcodbs = currentUser.bcodbs
@@ -66,10 +39,10 @@ export default function Servers() {
 
   return (
     <Container elevation={2}>
-      <Typography className={classes.title}>BCO databases</Typography>
+      <Typography className={"Account-Servers-title"}>BCO databases</Typography>
       {
         bcodbs.map((database, index) => (
-          <Card key={index} className={classes.serverCard}>
+          <Card key={index} className={"Account-Servers-server-card"}>
             <Button
               variant="contained"
               color="secondary"
diff --git a/client/src/components/bcodbs/SearchResults.js b/client/src/components/bcodbs/SearchResults.js
index 2d0b7bd4..b7acb58d 100644
--- a/client/src/components/bcodbs/SearchResults.js
+++ b/client/src/components/bcodbs/SearchResults.js
@@ -264,7 +264,14 @@ export default function EnhancedTable({bcodbInfo}) {
       global.window.open(`${location}/viewer?${object_id}`, "_blank", "noopener,noreferrer")
     }
     if (state === "DRAFT") {
-      global.window.open(`${location}/builder?${object_id}`, "_blank", "noopener,noreferrer")
+      dispatch(getDraftBco(object_id))
+        .unwrap()
+        .catch((error) => {
+          console.log(error)
+        })
+        .then(() => {
+          global.window.open(`${location}/builder?${object_id}`)
+        })
     }
   }
 
diff --git a/client/src/components/resources/Builder.js b/client/src/components/resources/Builder.js
index 6701dffa..cfcf1032 100644
--- a/client/src/components/resources/Builder.js
+++ b/client/src/components/resources/Builder.js
@@ -4,45 +4,19 @@ import React from "react";
 import {
   Card,
   CardActionArea,
-  // CardActions,
   CardContent,
-  makeStyles,
   Typography
 } from "@material-ui/core";
-
-// Routing to pages
 import { Link as RouterLink } from "react-router-dom";
 
-const useStyles = makeStyles({
-  root: {
-    minWidth: 275,
-  },
-  bullet: {
-    display: "inline-block",
-    margin: "0 2px",
-    transform: "scale(0.8)",
-  },
-  linkCard: {
-    minHeight: "300px",
-    textAlign: "center"
-  },
-  title: {
-    fontSize: "33px",
-  },
-  pos: {
-    marginBottom: 12,
-  },
-});
-
 export default function Builder() {
-  const classes = useStyles();
   const logo = require("../../images/logo.png");
 
   return (
-    <Card className={`${classes.root} ${classes.linkCard}`} elevation={2}>
-      <CardActionArea className={classes.linkCard} component={RouterLink} to="/builder">
+    <Card className="resources-root resources-linkcard" elevation={2}>
+      <CardActionArea className="resources-linkcard" component={RouterLink} to="/builder">
         <CardContent>
-          <Typography className={classes.title}>
+          <Typography className="resources-title">
             <img src={logo} height={100} alt="BCO logo" />
             <br />
             BioCompute Builder
diff --git a/client/src/components/resources/DNAnexus.js b/client/src/components/resources/DNAnexus.js
index 0e766c1e..1b5a6478 100644
--- a/client/src/components/resources/DNAnexus.js
+++ b/client/src/components/resources/DNAnexus.js
@@ -9,42 +9,15 @@ import {
   Typography
 } from "@material-ui/core";
 
-
-const useStyles = makeStyles({
-  root: {
-    minWidth: 275,
-  },
-  bullet: {
-    display: "inline-block",
-    margin: "0 2px",
-    transform: "scale(0.8)"
-  },
-  linkCard: {
-    minHeight: "300px",
-    textAlign: "center"
-  },
-  supportCard: {
-    textAlign: "center",
-    marginBottom: 12
-  },
-  title: {
-    fontSize: "33px",
-  },
-  pos: {
-    marginBottom: 12,
-  },
-});
-
 export default function dnanexus() {
-  const classes = useStyles();
   const dnanexuslogo = require("../../images/dnanexus.png");
   const dnanexusLink = "https://hub.docker.com/r/bcodocker/bconexus";
 
   return (
-    <Card className={`${classes.root} ${classes.supportCard}`} elevation={5}>
-      <CardActionArea onClick={() => window.open(dnanexusLink)}>
+    <Card className="resources-supportcard resources-root" elevation={5}>
+      <CardActionArea onClick={() => global.window.open(dnanexusLink)}>
         <CardContent>
-          <Typography className={classes.title}>
+          <Typography className="resources-title">
             <img src={dnanexuslogo} height={40} alt="DNAnexus logo" />
           </Typography>
           <Typography>
diff --git a/client/src/components/resources/Galaxy.js b/client/src/components/resources/Galaxy.js
index 3a7a88e0..9227b12d 100644
--- a/client/src/components/resources/Galaxy.js
+++ b/client/src/components/resources/Galaxy.js
@@ -5,46 +5,20 @@ import {
   Card,
   CardActionArea,
   CardContent,
-  makeStyles,
   Typography
 } from "@material-ui/core";
 
-const useStyles = makeStyles({
-  root: {
-    minWidth: 275,
-  },
-  bullet: {
-    display: "inline-block",
-    margin: "0 2px",
-    transform: "scale(0.8)",
-  },
-  linkCard: {
-    minHeight: "250px",
-    textAlign: "center"
-  },
-  heightened: {
-    minHeight: "250px"
-  },
-  title: {
-    fontSize: "37px",
-  },
-  pos: {
-    marginBottom: 12,
-  },
-});
-
 export default function Galaxy() {
-  const classes = useStyles();
 
   const hive = require("../../images/galaxy.png");
   const aws = require("../../images/powered-by-aws.png");
   const galaxyLink = ("https://usegalaxy.org/");
 
   return (
-    <Card className={`${classes.root} ${classes.linkCard}`} elevation={2}>
+    <Card className="resources-supportcard resources-root" elevation={5}>
       <CardContent>
-        <CardActionArea onClick={() => window.open(galaxyLink)}>
-          <Typography className={classes.title}>
+        <CardActionArea onClick={() => global.window.open(galaxyLink)}>
+          <Typography className="resources-title">
             <img src={hive} height={65} alt="Galaxy logo" />
             <br />
             <img src={aws} height={35} alt="AWS logo" />
diff --git a/client/src/components/resources/Hive.js b/client/src/components/resources/Hive.js
index 25723d04..712d9e9b 100644
--- a/client/src/components/resources/Hive.js
+++ b/client/src/components/resources/Hive.js
@@ -4,49 +4,22 @@ import React from "react";
 import {
   Card,
   CardActionArea,
-  CardActions,
   CardContent,
-  makeStyles,
   Typography
 } from "@material-ui/core";
 
-const useStyles = makeStyles({
-  root: {
-    minWidth: 275,
-  },
-  bullet: {
-    display: "inline-block",
-    margin: "0 2px",
-    transform: "scale(0.8)",
-  },
-  supportCard: {
-    minHeight: "250px",
-    textAlign: "center"
-  },
-  heightened: {
-    minHeight: "250px"
-  },
-  title: {
-    fontSize: "37px",
-  },
-  pos: {
-    marginBottom: 12,
-  },
-});
-
 const hive = require("../../images/hive.png");
 const aws = require("../../images/powered-by-aws.png");
 
 const hiveLink = "https://hive.aws.biochemistry.gwu.edu/dna.cgi?cmd=main";
 
 export default function Hive() {
-  const classes = useStyles();
 
   return (
-    <Card className={`${classes.root} ${classes.supportCard}`} elevation={2}>
+    <Card className="resources-supportcard resources-root" elevation={5}>
       <CardContent>
-        <CardActionArea onClick={() => window.open(hiveLink)}>
-          <Typography className={classes.title}>
+        <CardActionArea onClick={() => global.window.open(hiveLink)}>
+          <Typography className="resources-title">
             <img src={hive} height={65} alt="HIVE logo" />
             <br />
             <img src={aws} height={35} alt="AWS logo" />
diff --git a/client/src/components/resources/Packages.js b/client/src/components/resources/Packages.js
index 3c0c2d1d..304c3016 100644
--- a/client/src/components/resources/Packages.js
+++ b/client/src/components/resources/Packages.js
@@ -5,69 +5,41 @@ import {
   Card,
   CardActionArea,
   CardContent,
-  makeStyles,
   Typography
 } from "@material-ui/core";
 import cranLogo from "../../images/cran.png";
 import gitLogo from "../../images/Octocat.png";
 
-const useStyles = makeStyles({
-  bullet: {
-    display: "inline-block",
-    margin: "0 2px",
-    transform: "scale(0.8)"
-  },
-  linkCard: {
-    minHeight: "300px",
-    textAlign: "center"
-  },
-  supportCard: {
-    textAlign: "center",
-    marginBottom: 12
-  },
-  title: {
-    minWidth: 275,
-    fontSize: "33px"
-  },
-  subtitle: {
-    fontSize: "25px",
-  },
-  pos: {
-    marginBottom: 12,
-  },
-});
-
 export default function Packages() {
-  const classes = useStyles();
   const bcotoolLink = "https://github.com/biocompute-objects/bcotool/tree/1.1.0";
   const cranBCOLink = "https://cran.r-project.org/web/packages/biocompute/index.html";
 
   return (
-    <Card className={classes.supportCard} elevation={5}>
-      <Typography className={classes.title}>
+    <Card className="resources-supportcard resources-root" elevation={5}>
+      <Typography className="resources-title">
         Software Packages
         <br />
       </Typography>
-      <CardActionArea onClick={() => window.open(cranBCOLink)}>
+      <CardActionArea onClick={() => global.window.open(cranBCOLink)}>
         <CardContent>
-          <Typography className={classes.subtitle}>
+          <Typography className="resources-subtitle">
             <img src={cranLogo} height={25} alt="CRAN logo" />
             CRAN biocompute
             <br />
           </Typography>
-          <Typography className={classes.bullet}>
+          <Typography className="resources-bullet">
             Tools to create, validate, and export BioCompute Objects
           </Typography>
         </CardContent>
       </CardActionArea>
-      <CardActionArea onClick={() => window.open(bcotoolLink)}>
+      <CardActionArea onClick={() => global.window.open(bcotoolLink)}>
         <CardContent>
-          <Typography className={classes.subtitle}>
+          <Typography className="resources-subtitle">
             <img src={gitLogo} height={25} alt="BCO logo" />
             BCO Tool
             <br />
           </Typography>
-          <Typography className={classes.bullet}>
+          <Typography className="resources-bullet">
             Command line tool to create, validate, and export BioCompute Objects
           </Typography>
         </CardContent>
diff --git a/client/src/components/resources/index.js b/client/src/components/resources/index.js
index c6b094e8..b181d632 100644
--- a/client/src/components/resources/index.js
+++ b/client/src/components/resources/index.js
@@ -9,10 +9,8 @@ import {
   Paper,
 } from "@material-ui/core";
 
-import Tsc from "./Tsc.js";
 import CGC from "./CGC.js";
 import Packages from "./Packages";
-import Builder from "./Builder";
 import Galaxy from "./Galaxy";
 import Hive from "./Hive";
 import Citations from "./Citations";
@@ -46,34 +44,26 @@ function DocView() {
     <Paper>
       <Container maxWidth={false}>
         <Grid container justifyContent="space-around" spacing={3}>
-          <Grid item xs={12} sm={6} lg={4} xl={4}>
+          <Grid item xs={12} sm={6} lg={6} xl={6}>
             <Dnanexus />
           </Grid>
-          <Grid item xs={12} sm={6} lg={4} xl={4} >
+          <Grid item xs={12} sm={6} lg={6} xl={6}>
+            <CGC />
+          </Grid>
+        </Grid>
+        <Grid classes={classes.colored} container alignItems="space-around" spacing={3}>
+          <Grid item lg={4} sm={6} xl={4} xs={12}>
+            <Hive />
+          </Grid>
+          <Grid item lg={4} sm={6} xl={4} xs={12}>
             <Packages />
           </Grid>
-          <Grid item xs={12} sm={6} lg={4} xl={4}>
-            <CGC />
+          <Grid item lg={4} sm={6} xl={4} xs={12}>
+            <Galaxy />
           </Grid>
-          {/* <Grid classes={classes.colored} container alignItems="stretch" spacing={3}> */}
-          {/* <Grid item lg={4} sm={6} xl={4} xs={12}>
-              <Hive />
-            </Grid> */}
-          {/* <Grid item lg={4} sm={6} xl={4} xs={12}>
-              <Packages />
-            </Grid> */}
-          {/* <Grid item lg={4} sm={6} xl={4} xs={12}>
-              <Galaxy />
-            </Grid> */}
-          {/* <Grid item lg={3} sm={6} xl={4} xs={12}>
-                    <Tsc />
-                  </Grid> */}
           <Grid item xs={12} sm={12} lg={12} xl={12}>
             <Citations />
           </Grid>
-
-          {/* </Grid> */}
-
         </Grid>
       </Container>
     </Paper>