add right arrow to build table rows

AbhineetJain · AbhineetJain · commit 2a1d4c442f25 · 2022-06-03T20:18:24.000Z
diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx
@@ -1,10 +1,11 @@
 import Box from "@material-ui/core/Box"
-import { makeStyles, Theme } from "@material-ui/core/styles"
+import { fade, makeStyles, Theme } from "@material-ui/core/styles"
 import Table from "@material-ui/core/Table"
 import TableBody from "@material-ui/core/TableBody"
 import TableCell from "@material-ui/core/TableCell"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
+import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
 import useTheme from "@material-ui/styles/useTheme"
 import { FC } from "react"
 import { useNavigate } from "react-router-dom"
@@ -77,7 +78,10 @@ export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
                   </span>
                 </TableCell>
                 <TableCell>
-                  <span style={{ color: status.color }}>{status.status}</span>
+                  <div className={styles.statusCell}>
+                    <span style={{ color: status.color }}>{status.status}</span>
+                    <KeyboardArrowRight className={styles.arrowRight} />
+                  </div>
                 </TableCell>
               </TableRow>
             )
@@ -102,11 +106,24 @@ const useStyles = makeStyles((theme) => ({
     cursor: "pointer",
 
     "&:hover td": {
-      backgroundColor: theme.palette.background.default,
+      backgroundColor: fade(theme.palette.primary.light, 0.1),
     },
 
     "&:focus": {
       outline: `1px solid ${theme.palette.secondary.dark}`,
     },
+
+    "& .MuiTableCell-root:last-child": {
+      paddingRight: theme.spacing(2),
+    },
+  },
+  arrowRight: {
+    color: fade(theme.palette.primary.contrastText, 0.7),
+    width: 20,
+    height: 20,
+  },
+  statusCell: {
+    display: "flex",
+    justifyContent: "space-between",
   },
 }))
