Fix dark mode styles

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,

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,

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 classes={{ stickyHeader: classes.stickyHeaderCell }}>
-            <TableCell>Task ID</TableCell>
+              Enqueued
+            </TableCell>
+            <TableCell classes={{ stickyHeader: classes.stickyHeaderCell }}>
+              Task ID
+            </TableCell>
           </TableRow>
         </TableHead>
         <TableBody>

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} />

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>