From 3778dacca7485e3aaefccba2503c0ddfc44bf58d Mon Sep 17 00:00:00 2001
From: Ken Hibino <ken.hibino7@gmail.com>
Date: Fri, 15 Jan 2021 12:09:55 -0800
Subject: [PATCH] Fix dark mode styles

---
 ui/src/App.tsx                              |  5 ++++-
 ui/src/components/SchedulerEntriesTable.tsx |  2 +-
 ui/src/components/TasksTable.tsx            | 16 ++++++++++------
 ui/src/views/SettingsView.tsx               | 13 +++++++++----
 4 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index b945993..a58c188 100644
--- a/ui/src/App.tsx
+++ b/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",
diff --git a/ui/src/components/SchedulerEntriesTable.tsx b/ui/src/components/SchedulerEntriesTable.tsx
index e09814d..41e23b0 100644
--- a/ui/src/components/SchedulerEntriesTable.tsx
+++ b/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",
diff --git a/ui/src/components/TasksTable.tsx b/ui/src/components/TasksTable.tsx
index 604d16e..7eccfe5 100644
--- a/ui/src/components/TasksTable.tsx
+++ b/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",
diff --git a/ui/src/views/SettingsView.tsx b/ui/src/views/SettingsView.tsx
index 3b30a17..8cdf2e3 100644
--- a/ui/src/views/SettingsView.tsx
+++ b/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>
-                Dark theme
-              </Typography>
+              <Typography color="textPrimary">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