Tweak styles

Author: francisli

src/components/data-entry/GoalCard.tsx

@@ -1,5 +1,4 @@
-import Box from "@mui/material/Box";
-import Grid2 from "@mui/material/Grid2";
+import { Card, CardContent, Grid2, Stack } from "@mui/material";
 
 import Chip from "../design_system/chip/Chip";
 
@@ -18,26 +17,11 @@ export default function BenchmarksContainer({
 }) {
   const router = useRouter();
   return (
-    <Box
-      sx={{
-        marginBottom: "2rem",
-        width: "100%",
-      }}
-    >
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "space-between",
-          backgroundColor: "var(--grey-100)",
-          padding: "24px",
-          gap: "24px",
-          borderRadius: "8px",
-        }}
-      >
+    <Card>
+      <CardContent>
         <Chip
           variant="task"
-          label={`Benchmark ${benchmarks ? benchmarks?.number.toString() : ""}`}
+          label={`Benchmark #${benchmarks ? benchmarks?.number.toString() : ""}`}
           sx={{ marginTop: "10px", marginBottom: "10px" }}
         />
         <p>{benchmarks?.description}</p>
@@ -46,7 +30,7 @@ export default function BenchmarksContainer({
           spacing={2}
           columnSpacing={{ xs: 1, sm: 2, md: 3 }}
           direction={{ xs: "column", sm: "row" }}
-          sx={{ marginTop: "30px", width: "100%" }}
+          sx={{ marginTop: "30px", width: "100%", marginBottom: "1.5rem" }}
         >
           <Grid2 size={6} className={styles.GridItems}>
             <h1>Frequency</h1>
@@ -65,18 +49,16 @@ export default function BenchmarksContainer({
             <p>{benchmarks?.setup}</p>
           </Grid2>
         </Grid2>
-        <Box
-          sx={{ display: "flex", justifyContent: "center", marginTop: "20px" }}
-        >
+        <Stack alignItems="center">
           <Button
             onClick={() =>
               router.push(`/benchmarks/${benchmarks?.benchmark_id}`)
             }
           >
             Start Trial
           </Button>
-        </Box>
-      </Box>
-    </Box>
+        </Stack>
+      </CardContent>
+    </Card>
   );
 }

src/pages/students/[student_id]/goals/[goal_id]/benchmarks/[benchmark_id]/dataEntry/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useRouter } from "next/router";
-import { Stack, Box } from "@mui/material";
+import { Stack, Typography } from "@mui/material";
 
 import { trpc } from "@/client/lib/trpc";
 import GoalCard from "@/components/data-entry/GoalCard";
@@ -46,16 +46,16 @@ const GoalPage: NextPageWithBreadcrumbs = () => {
 
   return (
     <>
-      <Box sx={{ textAlign: "left" }}>
-        <h1>Data Entry</h1>
-        <h1 id={styles.mainh1}>
+      <Stack spacing={1} sx={{ marginBottom: "2rem" }}>
+        <Typography variant="h3">Data Entry</Typography>
+        <Typography variant="h4" color="primary">
           {student?.first_name} {student?.last_name}
-        </h1>
-      </Box>
+        </Typography>
+      </Stack>
       <Stack spacing={2} id={styles.goalStack}>
         {goal && (
           <GoalHeader
-            name={`Goal ${goal.number}`}
+            name={`Goal #${goal.number}`}
             description={goal.description}
             createdAt={goal.created_at}
             goalId={goal.goal_id}
@@ -88,7 +88,7 @@ GoalPage.getBreadcrumbs = function getBreadcrumbs({
     });
     breadcrumbs.push({
       href: `/students/${student.student_id}/goals/${goal.goal_id}/benchmarks/${filteredBenchmark.benchmark_id}`,
-      children: `Benchmark ${filteredBenchmark.number}`,
+      children: `Benchmark #${filteredBenchmark.number}`,
     });
     breadcrumbs.push({
       children: "Data Entry",