add learn more button for WorkflowDetailCard; adjust color theme on DatasetPage and DatabasePage; refs #50 #51

Author: elainefan331

src/components/WorkflowDetailCard.tsx

@@ -1,4 +1,11 @@
-import { Typography, Card, CardContent, Box, CardMedia } from "@mui/material";
+import {
+  Typography,
+  Card,
+  CardContent,
+  Box,
+  Button,
+  CardMedia,
+} from "@mui/material";
 import { Colors } from "design/theme";
 import React from "react";
 
@@ -48,9 +55,9 @@ const WorkflowDetailCard: React.FC<WorkflowDetailCardProps> = ({ type }) => {
       {/* <CardMedia
         component="img"
         height="160"
-        image={`${process.env.PUBLIC_URL}/img/section4_data_portals.png`}
+        image={`${process.env.PUBLIC_URL}/img/section1_logo_contained.png`}
         alt="Data Portals"
-        sx={{ objectFit: "contain", backgroundColor: Colors.purpleGrey }}
+        sx={{ objectFit: "contain", backgroundColor: Colors.black }}
       /> */}
 
       <Box sx={{ width: "100%", backgroundColor, px: 2, py: 1 }}>
@@ -63,12 +70,32 @@ const WorkflowDetailCard: React.FC<WorkflowDetailCardProps> = ({ type }) => {
           {title}
         </Typography>
       </Box>
-      {/* Title and content */}
+
+      {/* content */}
       <CardContent>
         <Typography variant="body2" color="text.secondary">
           {description}
         </Typography>
       </CardContent>
+      <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
+        <Button
+          variant="text"
+          href="https://neurojson.org/wiki/index.cgi?wiki#code"
+          target="_blank"
+          rel="noopener noreferrer"
+          sx={{
+            color: Colors.purple,
+            fontSize: "small",
+            mr: 2,
+            "&:hover": {
+              backgroundColor: "transparent",
+              textDecoration: "underline",
+            },
+          }}
+        >
+          Learn More
+        </Button>
+      </Box>
     </Card>
   );
 };

src/pages/DatabasePage.tsx

@@ -67,23 +67,26 @@ const DatabasePage: React.FC = () => {
             return (
               <Button
                 key={db.id}
-                variant="contained"
+                variant="outlined"
                 sx={{
                   padding: 3,
                   textTransform: "none",
                   fontWeight: 600,
-                  backgroundColor: Colors.primary.main,
-                  color: Colors.white,
+                  backgroundColor: "transparent",
+                  border: `1px solid ${Colors.lightGray}`,
+                  color: Colors.lightGray,
                   borderRadius: 2,
                   transition: "all 0.3s ease",
                   height: "100px",
                   display: "flex",
                   flexDirection: "column",
                   justifyContent: "center",
                   "&:hover": {
-                    backgroundColor: Colors.primary.dark,
+                    backgroundColor: Colors.green,
+                    color: Colors.darkPurple,
                     transform: "translateY(-2px)",
                     boxShadow: 3,
+                    border: `1px solid ${Colors.green}`,
                   },
                 }}
                 onClick={() => navigate(`/databases/${db.id}`)}