refactor: Typography, action hover and table head colors (#4046)

* Adjust primary text color

* refactor: Typography and table head colors

site/src/components/NavbarView/NavbarView.tsx

@@ -187,7 +187,7 @@ const useStyles = makeStyles((theme) => ({
     // NavLink adds this class when the current route matches.
     "&.active": {
       position: "relative",
-      color: theme.palette.primary.contrastText,
+      color: theme.palette.text.primary,
       fontWeight: "bold",
 
       "&::before": {

site/src/theme/overrides.ts

@@ -11,7 +11,6 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
           backgroundImage: `linear-gradient(to right bottom, ${palette.background.default}, ${colors.gray[17]})`,
           backgroundRepeat: "no-repeat",
           backgroundAttachment: "fixed",
-          letterSpacing: "-0.015em",
         },
         ":root": {
           colorScheme: palette.type,
@@ -81,11 +80,6 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
         },
       },
     },
-    MuiTableHead: {
-      root: {
-        display: "table-header-group",
-      },
-    },
     MuiTableContainer: {
       root: {
         borderRadius,
@@ -119,6 +113,7 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
         fontSize: 14,
         color: palette.text.secondary,
         fontWeight: 600,
+        background: palette.background.paperLight,
       },
       root: {
         fontSize: 16,

site/src/theme/palettes.ts

@@ -4,6 +4,12 @@ import { colors } from "./colors"
 // Couldn't find a type for this so I made one. We can extend the palette if needed with module augmentation.
 export type PaletteIndex = "primary" | "secondary" | "info" | "success" | "error" | "warning"
 
+declare module "@material-ui/core/styles/createPalette" {
+  interface TypeBackground {
+    paperLight: string
+  }
+}
+
 export const darkPalette: PaletteOptions = {
   type: "dark",
   primary: {
@@ -20,9 +26,10 @@ export const darkPalette: PaletteOptions = {
   background: {
     default: colors.gray[17],
     paper: colors.gray[16],
+    paperLight: colors.gray[15],
   },
   text: {
-    primary: colors.gray[4],
+    primary: colors.gray[1],
     secondary: colors.gray[5],
   },
   divider: colors.gray[13],
@@ -46,6 +53,6 @@ export const darkPalette: PaletteOptions = {
     contrastText: colors.gray[4],
   },
   action: {
-    hover: colors.gray[13],
+    hover: colors.gray[14],
   },
 }