feat(frontend): improve dashboard cards

Author: jacob720

frontend/dashboard/src/routes/DashboardPage.tsx

@@ -10,15 +10,28 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { WorkflowsNavbar } from "workflows-lib";
 
+const cardHeight = 160;
+
 const workflowsCard = (
   <React.Fragment>
     <CardActionArea component={Link} to="/workflows">
-      <CardContent>
-        <Typography gutterBottom variant="h5" component="div">
-          Workflows
+      <CardContent style={{ height: cardHeight }}>
+        <Typography
+          gutterBottom
+          variant="h5"
+          component="div"
+          sx={{ textAlign: "center" }}
+        >
+          Submitted Workflows
         </Typography>
-        <Typography variant="body2" sx={{ color: "text.secondary" }}>
-          Provides an overview of current and past workflows for a given visit.
+        <Typography
+          variant="body2"
+          sx={{
+            color: "text.secondary",
+            textAlign: "center",
+          }}
+        >
+          View current and past workflows for a given visit.
         </Typography>
       </CardContent>
     </CardActionArea>
@@ -28,12 +41,23 @@ const workflowsCard = (
 const templatesCard = (
   <React.Fragment>
     <CardActionArea component={Link} to="/templates">
-      <CardContent>
-        <Typography gutterBottom variant="h5" component="div">
-          Templates
+      <CardContent style={{ height: cardHeight }}>
+        <Typography
+          gutterBottom
+          variant="h5"
+          component="div"
+          sx={{ textAlign: "center" }}
+        >
+          Run New Workflow
         </Typography>
-        <Typography variant="body2" sx={{ color: "text.secondary" }}>
-          Provides an overview of all available workflowTemplates and Sensors.
+        <Typography
+          variant="body2"
+          sx={{
+            color: "text.secondary",
+            textAlign: "center",
+          }}
+        >
+          Submit a new workflow from a template.
         </Typography>
       </CardContent>
     </CardActionArea>
@@ -46,12 +70,23 @@ const documentationCard = (
       href="https://diamondlightsource.github.io/workflows/docs"
       target="_blank"
     >
-      <CardContent>
-        <Typography gutterBottom variant="h5" component="div">
+      <CardContent style={{ height: cardHeight }}>
+        <Typography
+          gutterBottom
+          variant="h5"
+          component="div"
+          sx={{ textAlign: "center" }}
+        >
           Documentation
         </Typography>
-        <Typography variant="body2" sx={{ color: "text.secondary" }}>
-          Full user documentation with tutorials, how-tos, explanations and
+        <Typography
+          variant="body2"
+          sx={{
+            color: "text.secondary",
+            textAlign: "center",
+          }}
+        >
+          Full user documentation with tutorials, explanations, how-tos, and
           references.
         </Typography>
       </CardContent>
@@ -65,12 +100,23 @@ const helpCard = (
       href="https://diamondlightsource.slack.com/archives/C08NYJSGMFD"
       target="_blank"
     >
-      <CardContent>
-        <Typography gutterBottom variant="h5" component="div">
+      <CardContent style={{ height: cardHeight }}>
+        <Typography
+          gutterBottom
+          variant="h5"
+          component="div"
+          sx={{ textAlign: "center" }}
+        >
           Help/Feedback
         </Typography>
-        <Typography variant="body2" sx={{ color: "text.secondary" }}>
-          Get help from the workflows team and leave feedback.
+        <Typography
+          variant="body2"
+          sx={{
+            color: "text.secondary",
+            textAlign: "center",
+          }}
+        >
+          Get help and leave feedback via Slack.
         </Typography>
       </CardContent>
     </CardActionArea>
@@ -83,12 +129,23 @@ const reportCard = (
       href="https://github.com/DiamondLightSource/workflows/issues/new"
       target="_blank"
     >
-      <CardContent>
-        <Typography gutterBottom variant="h5" component="div">
-          Report an issue
+      <CardContent style={{ height: cardHeight }}>
+        <Typography
+          gutterBottom
+          variant="h5"
+          component="div"
+          sx={{ textAlign: "center" }}
+        >
+          Report an Issue
         </Typography>
-        <Typography variant="body2" sx={{ color: "text.secondary" }}>
-          Report an issue on the workflows GitHub page.
+        <Typography
+          variant="body2"
+          sx={{
+            color: "text.secondary",
+            textAlign: "center",
+          }}
+        >
+          Report an issue via GitHub.
         </Typography>
       </CardContent>
     </CardActionArea>
@@ -99,33 +156,50 @@ function DashboardPage() {
   return (
     <>
       <WorkflowsNavbar />
-      <Container maxWidth="sm" sx={{ mt: 5, mb: 4 }}>
+      <Container maxWidth="lg" sx={{ mt: 5, mb: 4 }}>
         <Grid
           container
           alignItems="stretch"
+          justifyContent="center"
           spacing={{ xs: 2, sm: 2, md: 3 }}
-          columns={{ xs: 2, sm: 4, md: 6 }}
+          columns={{ xs: 2, sm: 8, md: 12 }}
+          sx={{ mt: 5, mb: 4 }}
         >
           <Grid key={"workflows"} size={{ xs: 2, sm: 2, md: 3 }}>
-            <Card style={{ height: "100%", minHeight: 150 }}>
-              {workflowsCard}
-            </Card>
+            <Card style={{ height: "100%" }}>{workflowsCard}</Card>
           </Grid>
-          <Grid key={"templates"} size={{ xs: 2, sm: 4, md: 3 }}>
-            <Card style={{ height: "100%", minHeight: 150 }}>
+          <Grid key={"templates"} size={{ xs: 2, sm: 2, md: 3 }}>
+            <Card
+              style={{ height: "100%" }}
+              sx={{
+                height: "100%",
+                transition: "all 0.3s ease",
+                "&:hover .card-description": {
+                  opacity: 1,
+                  maxHeight: 200,
+                },
+              }}
+            >
               {templatesCard}
             </Card>
           </Grid>
+        </Grid>
+        <Grid
+          container
+          alignItems="stretch"
+          justifyContent="center"
+          spacing={{ xs: 2, sm: 2, md: 3 }}
+          columns={{ xs: 2, sm: 8, md: 12 }}
+          sx={{ mt: 5, mb: 4 }}
+        >
           <Grid key={"documentation"} size={{ xs: 2, sm: 2, md: 3 }}>
-            <Card style={{ height: "100%", minHeight: 150 }}>
-              {documentationCard}
-            </Card>
+            <Card style={{ height: "100%" }}>{documentationCard}</Card>
           </Grid>
           <Grid key={"help"} size={{ xs: 2, sm: 2, md: 3 }}>
-            <Card style={{ height: "100%", minHeight: 150 }}>{helpCard}</Card>
+            <Card style={{ height: "100%" }}>{helpCard}</Card>
           </Grid>
           <Grid key={"report"} size={{ xs: 2, sm: 2, md: 3 }}>
-            <Card style={{ height: "100%", minHeight: 150 }}>{reportCard}</Card>
+            <Card style={{ height: "100%" }}>{reportCard}</Card>
           </Grid>
         </Grid>
       </Container>