From 29b6ad8c918c34505756344b02f79c298181b7e8 Mon Sep 17 00:00:00 2001
From: Ken Hibino <ken.hibino7@gmail.com>
Date: Fri, 15 Jan 2021 14:54:30 -0800
Subject: [PATCH] Fix dark mode styles

---
 ui/src/components/PendingTasksTable.tsx       |  2 +-
 ui/src/components/RetryTasksTable.tsx         |  2 +-
 .../SchedulerEnqueueEventsTable.tsx           | 11 +++++++++--
 ui/src/components/SchedulerEntriesTable.tsx   |  4 ++--
 ui/src/components/SplitButton.tsx             | 19 ++++++++++++++++---
 5 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/PendingTasksTable.tsx b/ui/src/components/PendingTasksTable.tsx
index 5427b9d..77fc5b5 100644
--- a/ui/src/components/PendingTasksTable.tsx
+++ b/ui/src/components/PendingTasksTable.tsx
@@ -19,7 +19,7 @@ import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import Typography from "@material-ui/core/Typography";
 import TableFooter from "@material-ui/core/TableFooter";
 import TablePagination from "@material-ui/core/TablePagination";
-import SyntaxHighlighter from "react-syntax-highlighter";
+import SyntaxHighlighter from "./SyntaxHighlighter";
 import TablePaginationActions, {
   defaultPageSize,
   rowsPerPageOptions,
diff --git a/ui/src/components/RetryTasksTable.tsx b/ui/src/components/RetryTasksTable.tsx
index a9fe429..63bf50d 100644
--- a/ui/src/components/RetryTasksTable.tsx
+++ b/ui/src/components/RetryTasksTable.tsx
@@ -24,7 +24,7 @@ import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import Typography from "@material-ui/core/Typography";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
-import SyntaxHighlighter from "react-syntax-highlighter";
+import SyntaxHighlighter from "./SyntaxHighlighter";
 import {
   batchDeleteRetryTasksAsync,
   batchRunRetryTasksAsync,
diff --git a/ui/src/components/SchedulerEnqueueEventsTable.tsx b/ui/src/components/SchedulerEnqueueEventsTable.tsx
index b68cad5..21894df 100644
--- a/ui/src/components/SchedulerEnqueueEventsTable.tsx
+++ b/ui/src/components/SchedulerEnqueueEventsTable.tsx
@@ -16,6 +16,9 @@ const useStyles = makeStyles((theme) => ({
   table: {
     height: "80vh",
   },
+  stickyHeaderCell: {
+    background: theme.palette.background.paper,
+  },
 }));
 
 function mapStateToProps(state: AppState, ownProps: Props) {
@@ -53,8 +56,12 @@ function SchedulerEnqueueEventsTable(props: Props & ReduxProps) {
       >
         <TableHead>
           <TableRow>
-            <TableCell>Enqueued</TableCell>
-            <TableCell>Task ID</TableCell>
+            <TableCell classes={{ stickyHeader: classes.stickyHeaderCell }}>
+              Enqueued
+            </TableCell>
+            <TableCell classes={{ stickyHeader: classes.stickyHeaderCell }}>
+              Task ID
+            </TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
diff --git a/ui/src/components/SchedulerEntriesTable.tsx b/ui/src/components/SchedulerEntriesTable.tsx
index 88fd155..2926d12 100644
--- a/ui/src/components/SchedulerEntriesTable.tsx
+++ b/ui/src/components/SchedulerEntriesTable.tsx
@@ -40,7 +40,7 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: "center",
   },
   modalContent: {
-    background: theme.palette.common.white,
+    background: theme.palette.background.paper,
     padding: theme.spacing(2),
     width: "540px",
     outline: "none",
@@ -240,7 +240,7 @@ export default function SchedulerEntriesTable(props: Props) {
           className={classes.modal}
         >
           <div className={classes.modalContent}>
-            <Typography variant="h6" gutterBottom>
+            <Typography variant="h6" gutterBottom color="textPrimary">
               Recent History
             </Typography>
             <SchedulerEnqueueEventsTable entryId={activeEntryId} />
diff --git a/ui/src/components/SplitButton.tsx b/ui/src/components/SplitButton.tsx
index 43d642c..8e9d29b 100644
--- a/ui/src/components/SplitButton.tsx
+++ b/ui/src/components/SplitButton.tsx
@@ -21,11 +21,21 @@ interface Props {
   onSelect: (key: string) => void;
 }
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
   popper: {
     zIndex: 2,
   },
-});
+  buttonContained: {
+    backgroundColor:
+      theme.palette.type === "dark"
+        ? "#303030"
+        : theme.palette.background.default,
+    color: theme.palette.text.primary,
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover,
+    },
+  },
+}));
 
 export default function SplitButton(props: Props) {
   const classes = useStyles();
@@ -69,7 +79,9 @@ export default function SplitButton(props: Props) {
         size="small"
         disableElevation
       >
-        <Button>{selectedOpt ? selectedOpt.label : "Select Option"}</Button>
+        <Button classes={{ contained: classes.buttonContained }}>
+          {selectedOpt ? selectedOpt.label : "Select Option"}
+        </Button>
         <Button
           size="small"
           aria-controls={open ? "split-button-menu" : undefined}
@@ -77,6 +89,7 @@ export default function SplitButton(props: Props) {
           aria-label="select option"
           aria-haspopup="menu"
           onClick={handleToggle}
+          classes={{ contained: classes.buttonContained }}
         >
           <ArrowDropDownIcon />
         </Button>