Fix dark theme styles

ui/src/App.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { connect, ConnectedProps } from "react-redux";
 import clsx from "clsx";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
-import { makeStyles, ThemeProvider } from "@material-ui/core/styles";
+import { makeStyles, Theme, ThemeProvider } from "@material-ui/core/styles";
 import AppBar from "@material-ui/core/AppBar";
 import Drawer from "@material-ui/core/Drawer";
 import Toolbar from "@material-ui/core/Toolbar";
@@ -39,91 +39,94 @@ import PageNotFoundView from "./views/PageNotFoundView";
 
 const drawerWidth = 220;
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: "flex",
-  },
-  toolbar: {
-    paddingRight: 24, // keep right padding when drawer closed
-  },
-  toolbarIcon: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    padding: "0 8px",
-    ...theme.mixins.toolbar,
-  },
-  appBar: {
-    backgroundColor: theme.palette.background.paper,
-    zIndex: theme.zIndex.drawer + 1,
-  },
-  menuButton: {
-    marginRight: theme.spacing(2),
-    color: theme.palette.grey[700],
-  },
-  menuButtonHidden: {
-    display: "none",
-  },
-  title: {
-    flexGrow: 1,
-    color: theme.palette.grey[800],
-  },
-  drawerPaper: {
-    position: "relative",
-    whiteSpace: "nowrap",
-    width: drawerWidth,
-    transition: theme.transitions.create("width", {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-    border: "none",
-  },
-  drawerPaperClose: {
-    overflowX: "hidden",
-    transition: theme.transitions.create("width", {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
-    }),
-    width: theme.spacing(7),
-    [theme.breakpoints.up("sm")]: {
-      width: theme.spacing(9),
+// FIXME: For some reason, the following code does not work:
+//     makeStyles(theme => ({ /* use theme here */}));
+// Using closure to work around this problem.
+const useStyles = (theme: Theme) =>
+  makeStyles({
+    root: {
+      display: "flex",
     },
-  },
-  snackbar: {
-    background: theme.palette.grey["A400"],
-    color: "#ffffff",
-  },
-  snackbarCloseIcon: {
-    color: theme.palette.grey[400],
-  },
-  appBarSpacer: theme.mixins.toolbar,
-  mainContainer: {
-    display: "flex",
-    width: "100vw",
-  },
-  content: {
-    flex: 1,
-    height: "100vh",
-    overflow: "hidden",
-    background: "#ffffff",
-  },
-  contentWrapper: {
-    height: "100%",
-    display: "flex",
-    paddingTop: "64px", // app-bar height
-    overflow: "scroll",
-  },
-  sidebarContainer: {
-    display: "flex",
-    justifyContent: "space-between",
-    height: "100%",
-    flexDirection: "column",
-  },
-  listItem: {
-    borderTopRightRadius: "24px",
-    borderBottomRightRadius: "24px",
-  },
-}));
+    toolbar: {
+      paddingRight: 24, // keep right padding when drawer closed
+    },
+    toolbarIcon: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      padding: "0 8px",
+      ...theme.mixins.toolbar,
+    },
+    appBar: {
+      backgroundColor: theme.palette.background.paper,
+      zIndex: theme.zIndex.drawer + 1,
+    },
+    menuButton: {
+      marginRight: theme.spacing(2),
+      color: theme.palette.grey[700],
+    },
+    menuButtonHidden: {
+      display: "none",
+    },
+    title: {
+      flexGrow: 1,
+    },
+    drawerPaper: {
+      position: "relative",
+      whiteSpace: "nowrap",
+      width: drawerWidth,
+      transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+      }),
+      border: "none",
+    },
+    drawerPaperClose: {
+      overflowX: "hidden",
+      transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+      }),
+      width: theme.spacing(7),
+      [theme.breakpoints.up("sm")]: {
+        width: theme.spacing(9),
+      },
+    },
+    snackbar: {
+      background: theme.palette.grey["A400"],
+      color: "#ffffff",
+    },
+    snackbarCloseIcon: {
+      color: theme.palette.grey[400],
+    },
+    appBarSpacer: theme.mixins.toolbar,
+    mainContainer: {
+      display: "flex",
+      width: "100vw",
+    },
+    content: {
+      flex: 1,
+      height: "100vh",
+      overflow: "hidden",
+      background: theme.palette.background.paper,
+    },
+    contentWrapper: {
+      height: "100%",
+      display: "flex",
+      paddingTop: "64px", // app-bar height
+      overflow: "scroll",
+    },
+    sidebarContainer: {
+      display: "flex",
+      justifyContent: "space-between",
+      height: "100%",
+      flexDirection: "column",
+    },
+    listItem: {
+      borderTopRightRadius: "24px",
+      borderBottomRightRadius: "24px",
+    },
+  });
 
 function mapStateToProps(state: AppState) {
   return {
@@ -143,10 +146,10 @@ function SlideUpTransition(props: TransitionProps) {
 }
 
 function App(props: ConnectedProps<typeof connector>) {
-  const classes = useStyles();
+  const theme = makeTheme(props.isDarkTheme);
+  const classes = useStyles(theme)();
   const [open, setOpen] = useState(true);
   const toggleDrawer = () => setOpen(!open);
-  const theme = makeTheme(props.isDarkTheme);
   return (
     <ThemeProvider theme={theme}>
       <Router>
@@ -169,9 +172,9 @@ function App(props: ConnectedProps<typeof connector>) {
               <Typography
                 component="h1"
                 variant="h6"
-                color="inherit"
                 noWrap
                 className={classes.title}
+                color="textPrimary"
               >
                 Asynq Monitoring
               </Typography>