style: improve DatasetCard layout and visual styling

Author: elainefan331

src/components/SearchPage/DatasetCard.tsx

@@ -1,15 +1,8 @@
-import {
-  Box,
-  Typography,
-  Card,
-  CardContent,
-  Stack,
-  Chip,
-  Grid,
-  Link,
-} from "@mui/material";
+import { Typography, Card, CardContent, Stack, Chip } from "@mui/material";
 import { Colors } from "design/theme";
 import React from "react";
+import { Link } from "react-router-dom";
+import RoutesEnum from "types/routes.enum";
 
 interface DatasetCardProps {
   dbname: string;
@@ -35,6 +28,7 @@ const DatasetCard: React.FC<DatasetCardProps> = ({
   parsedJson,
 }) => {
   const { name, readme, modality, subj, info } = parsedJson.value;
+  const datasetLink = `${RoutesEnum.DATABASES}/${dbname}/${dsname}`;
 
   // prepare DOI URL
   const rawDOI = info?.DatasetDOI?.replace(/^doi:/, "");
@@ -43,46 +37,81 @@ const DatasetCard: React.FC<DatasetCardProps> = ({
   return (
     <Card sx={{ mb: 3 }}>
       <CardContent>
-        <Typography variant="h6" sx={{ color: "#6C6C8E", fontWeight: 600 }}>
+        <Typography
+          variant="h6"
+          sx={{
+            fontWeight: 600,
+            color: Colors.darkPurple,
+            textDecoration: "none",
+            ":hover": { textDecoration: "underline" },
+          }}
+          component={Link}
+          to={datasetLink}
+          target="_blank"
+        >
           {name || "Untitled Dataset"}
         </Typography>
 
         <Typography variant="body2" color="text.secondary" gutterBottom>
-          ID: {dsname}
+          Dataset Number: {dsname}
         </Typography>
 
-        <Stack>
-          {subj && <Chip label={`${subj.length} subjects`} color="primary" />}
-          {modality?.map((mod, idx) => (
-            <Chip key={idx} label={mod} color="info" />
-          ))}
-        </Stack>
-
-        {readme && (
-          <Typography variant="body2" paragraph>
-            <strong>Summary:</strong> {readme}
-          </Typography>
-        )}
+        <Stack spacing={2} margin={1}>
+          <Stack direction="row" spacing={1} flexWrap="wrap" gap={1}>
+            <Typography variant="body2" mt={1}>
+              <strong>Modalities:</strong>
+            </Typography>
+            {modality?.map((mod, idx) => (
+              <Chip
+                key={idx}
+                label={mod}
+                variant="outlined"
+                sx={{
+                  color: Colors.darkPurple,
+                  border: `1px solid ${Colors.darkPurple}`,
+                  fontWeight: "bold",
+                }}
+              />
+            ))}
+          </Stack>
 
-        {info?.Authors?.length && (
-          <Typography>
-            <strong>Authors:</strong> {info?.Authors?.join(", ")}
-          </Typography>
-        )}
+          <Stack direction="row" spacing={1} flexWrap="wrap" gap={1}>
+            <Typography variant="body2" mt={1}>
+              <strong>Subjects:</strong> {subj && `${subj.length} subjects`}
+            </Typography>
+            {/* {subj && <Chip label={`${subj.length} subjects`} color="primary" />} */}
+          </Stack>
+          <Stack direction="row" spacing={1} flexWrap="wrap" gap={1}>
+            {readme && (
+              <Typography variant="body2" paragraph>
+                <strong>Summary:</strong> {readme}
+              </Typography>
+            )}
+          </Stack>
+          <Stack direction="row" spacing={1} flexWrap="wrap" gap={1}>
+            {info?.Authors?.length && (
+              <Typography variant="body2" mt={1}>
+                <strong>Authors:</strong> {info?.Authors?.join(", ")}
+              </Typography>
+            )}
+          </Stack>
 
-        {doiLink && (
-          <Stack mt={1}>
-            <Chip
-              label="DOI"
-              component="a"
-              href={doiLink}
-              target="_blank"
-              rel="noopener noreferrer"
-              clickable
-              sx={{ backgroundColor: "#c9a636", color: "white" }}
-            />
+          <Stack direction="row" spacing={1} flexWrap="wrap" gap={1}>
+            {doiLink && (
+              <Stack mt={1}>
+                <Chip
+                  label="DOI"
+                  component="a"
+                  href={doiLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  clickable
+                  sx={{ backgroundColor: Colors.accent, color: "white" }}
+                />
+              </Stack>
+            )}
           </Stack>
-        )}
+        </Stack>
       </CardContent>
     </Card>
   );