Fix dark mode styles

ui/src/App.tsx

@@ -63,7 +63,10 @@ const useStyles = (theme: Theme) =>
     },
     menuButton: {
       marginRight: theme.spacing(2),
-      color: theme.palette.grey[700],
+      color:
+        theme.palette.type === "dark"
+          ? theme.palette.grey[100]
+          : theme.palette.grey[700],
     },
     menuButtonHidden: {
       display: "none",

ui/src/components/SchedulerEntriesTable.tsx

@@ -33,7 +33,7 @@ const useStyles = makeStyles((theme) => ({
     position: "sticky",
     zIndex: 1,
     left: 0,
-    background: theme.palette.common.white,
+    background: theme.palette.background.paper,
   },
   modal: {
     display: "flex",

ui/src/components/TasksTable.tsx

@@ -129,23 +129,28 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     width: "100%",
     height: "100%",
+    background: theme.palette.background.paper,
   },
   heading: {
-    opacity: 0.7,
     fontSize: "1.7rem",
     fontWeight: 500,
-    backgroundColor: theme.palette.background.paper,
     paddingLeft: "28px", // TODO: maybe use theme.spacing(3),
     paddingTop: "28px",
     paddingBottom: "28px",
     color: theme.palette.text.primary,
   },
   tabsContainer: {
-    background: theme.palette.background.paper,
+    background:
+      theme.palette.type === "dark"
+        ? "#303030"
+        : theme.palette.background.default,
   },
   tabsRoot: {
     paddingLeft: theme.spacing(2),
-    background: theme.palette.background.paper,
+    background:
+      theme.palette.type === "dark"
+        ? "#303030"
+        : theme.palette.background.default,
   },
   tabsIndicator: {
     right: "auto",
@@ -161,12 +166,11 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.text.primary,
   },
   tabSelected: {
-    background: theme.palette.action.selected,
+    background: theme.palette.background.paper,
     boxShadow: theme.shadows[1],
   },
   panelContainer: {
     padding: "24px",
-    background: theme.palette.background.paper,
   },
   taskCount: {
     fontSize: "2rem",

ui/src/views/SettingsView.tsx

@@ -26,11 +26,17 @@ const useStyles = makeStyles((theme) => ({
   },
   formControl: {
     margin: theme.spacing(1),
-    minWidth: 120,
+    display: "flex",
+    justifyContent: "space-between",
+    flexDirection: "row",
+    alignItems: "center",
   },
   selectEmpty: {
     marginTop: theme.spacing(2),
   },
+  select: {
+    width: "200px",
+  },
 }));
 
 function mapStateToProps(state: AppState) {
@@ -102,15 +108,14 @@ function SettingsView(props: PropsFromRedux) {
         <Grid item xs={6}>
           <Paper className={classes.paper} variant="outlined">
             <FormControl variant="outlined" className={classes.formControl}>
-              <Typography color="textPrimary" gutterBottom>
+              <Typography color="textPrimary">Dark Theme</Typography>
-                Dark theme
-              </Typography>
               <Select
                 labelId="theme-label"
                 id="theme-selected"
                 value={props.themePreference}
                 onChange={handleThemeChange}
                 label="theme preference"
+                className={classes.select}
               >
                 <MenuItem value={ThemePreference.SystemDefault}>
                   System Default