chore: Minor table design changes (#3494)

site/src/components/TableHeaders/TableHeaders.tsx

@@ -1,4 +1,3 @@
-import { makeStyles } from "@material-ui/core/styles"
 import TableCell from "@material-ui/core/TableCell"
 import TableRow from "@material-ui/core/TableRow"
 import { FC } from "react"
@@ -9,8 +8,7 @@ export interface TableHeadersProps {
 }
 
 export const TableHeaderRow: FC = ({ children }) => {
-  const styles = useStyles()
-  return <TableRow className={styles.root}>{children}</TableRow>
+  return <TableRow>{children}</TableRow>
 }
 
 export const TableHeaders: FC<TableHeadersProps> = ({ columns, hasMenu }) => {
@@ -26,17 +24,3 @@ export const TableHeaders: FC<TableHeadersProps> = ({ columns, hasMenu }) => {
     </TableHeaderRow>
   )
 }
-
-export const useStyles = makeStyles((theme) => ({
-  root: {
-    fontSize: 12,
-    fontWeight: 500,
-    lineHeight: "16px",
-    letterSpacing: 1.5,
-    textTransform: "uppercase",
-    paddingTop: theme.spacing(1),
-    paddingBottom: theme.spacing(1),
-    color: theme.palette.text.secondary,
-    backgroundColor: theme.palette.background.default,
-  },
-}))

site/src/theme/overrides.ts

@@ -1,6 +1,7 @@
 import { Theme } from "@material-ui/core/styles"
 import { SimplePaletteColorOptions } from "@material-ui/core/styles/createPalette"
 import { Overrides } from "@material-ui/core/styles/overrides"
+import { colors } from "./colors"
 import { borderRadius, MONOSPACE_FONT_FAMILY } from "./constants"
 
 export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
@@ -8,8 +9,7 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
     MuiCssBaseline: {
       "@global": {
         body: {
-          backgroundImage:
-            "linear-gradient(to right bottom, hsl(223, 38%, 14%), hsl(221, 53%, 3%))",
+          backgroundImage: `linear-gradient(to right bottom, ${colors.gray[15]}, ${colors.gray[17]})`,
           backgroundRepeat: "no-repeat",
           backgroundAttachment: "fixed",
           letterSpacing: "-0.015em",
@@ -40,7 +40,7 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
       contained: {
         boxShadow: "none",
         color: palette.text.primary,
-        backgroundColor: "hsl(223, 27%, 3%)",
+        backgroundColor: colors.gray[17],
         "&:hover": {
           boxShadow: "none",
           backgroundColor: "#000000",
@@ -68,8 +68,8 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
     },
     MuiTableHead: {
       root: {
+        display: "table-header-group",
         fontFamily: MONOSPACE_FONT_FAMILY,
-        textTransform: "uppercase",
       },
     },
     MuiTableContainer: {
@@ -80,7 +80,11 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
     },
     MuiTable: {
       root: {
-        background: "hsla(222, 31%, 19%, .5)",
+        borderCollapse: "collapse",
+        border: "none",
+        background: colors.gray[15],
+        boxShadow: `0 0 0 1px ${colors.gray[15]} inset`,
+        overflow: "hidden",
 
         "& td": {
           paddingTop: 16,
@@ -95,16 +99,19 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
         },
       },
     },
+
     MuiTableCell: {
       head: {
-        color: palette.text.secondary,
+        fontSize: 14,
+        color: colors.gray[5],
+        fontWeight: 600,
       },
       root: {
         fontFamily: MONOSPACE_FONT_FAMILY,
         fontSize: 16,
         background: palette.background.paper,
         borderBottom: `1px solid ${palette.divider}`,
-        padding: 8,
+        padding: "12px 8px",
         // This targets the first+last td elements, and also the first+last elements
         // of a TableCellLink.
         "&:not(:only-child):first-child, &:not(:only-child):first-child > a": {