Update Appbar with a new logo

ui/src/components/ListItemLink.tsx

@@ -10,6 +10,7 @@ import {
   Link as RouterLink,
   LinkProps as RouterLinkProps,
 } from "react-router-dom";
+import { isDarkTheme } from "../theme";
 
 const useStyles = makeStyles((theme) => ({
   listItem: {
@@ -17,23 +18,20 @@ const useStyles = makeStyles((theme) => ({
     borderBottomRightRadius: "24px",
   },
   selected: {
-    backgroundColor:
-      theme.palette.type === "dark"
-        ? `${theme.palette.secondary.main}30`
-        : `${theme.palette.primary.main}30`,
+    backgroundColor: isDarkTheme(theme)
+      ? `${theme.palette.secondary.main}30`
+      : `${theme.palette.primary.main}30`,
   },
   selectedText: {
     fontWeight: 600,
-    color:
-      theme.palette.type === "dark"
-        ? theme.palette.secondary.main
-        : theme.palette.primary.main,
+    color: isDarkTheme(theme)
+      ? theme.palette.secondary.main
+      : theme.palette.primary.main,
   },
   selectedIcon: {
-    color:
-      theme.palette.type === "dark"
-        ? theme.palette.secondary.main
-        : theme.palette.primary.main,
+    color: isDarkTheme(theme)
+      ? theme.palette.secondary.main
+      : theme.palette.primary.main,
   },
 }));
 

ui/src/components/QueueBreadcrumb.tsx

@@ -7,13 +7,13 @@ import Menu from "@material-ui/core/Menu";
 import MenuItem from "@material-ui/core/MenuItem";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import { paths, queueDetailsPath } from "../paths";
+import { isDarkTheme } from "../theme";
 
 const StyledBreadcrumb = withStyles((theme: Theme) => ({
   root: {
-    backgroundColor:
-      theme.palette.type === "dark"
-        ? "#303030"
-        : theme.palette.background.default,
+    backgroundColor: isDarkTheme(theme)
+      ? "#303030"
+      : theme.palette.background.default,
     height: theme.spacing(3),
     color: theme.palette.text.secondary,
     fontWeight: theme.typography.fontWeightRegular,

ui/src/components/SplitButton.tsx

@@ -9,6 +9,7 @@ import Paper from "@material-ui/core/Paper";
 import Popper from "@material-ui/core/Popper";
 import MenuItem from "@material-ui/core/MenuItem";
 import MenuList from "@material-ui/core/MenuList";
+import { isDarkTheme } from "../theme";
 
 interface Option {
   label: string;
@@ -26,10 +27,9 @@ const useStyles = makeStyles((theme) => ({
     zIndex: 2,
   },
   buttonContained: {
-    backgroundColor:
-      theme.palette.type === "dark"
-        ? "#303030"
-        : theme.palette.background.default,
+    backgroundColor: isDarkTheme(theme)
+      ? "#303030"
+      : theme.palette.background.default,
     color: theme.palette.text.primary,
     "&:hover": {
       backgroundColor: theme.palette.action.hover,

ui/src/components/SyntaxHighlighter.tsx

@@ -3,6 +3,7 @@ import { useTheme, Theme } from "@material-ui/core/styles";
 import ReactSyntaxHighlighter from "react-syntax-highlighter";
 import styleDark from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark";
 import styleLight from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-light";
+import { isDarkTheme } from "../theme";
 
 interface Props {
   language: string;
@@ -13,7 +14,7 @@ interface Props {
 // Theme aware syntax-highlighter component.
 export default function SyntaxHighlighter(props: Props) {
   const theme = useTheme<Theme>();
-  const style = theme.palette.type === "dark" ? styleDark : styleLight;
+  const style = isDarkTheme(theme) ? styleDark : styleLight;
   return (
     <ReactSyntaxHighlighter
       language={props.language}

ui/src/components/TasksTable.tsx

@@ -13,6 +13,7 @@ import { useHistory } from "react-router-dom";
 import { queueDetailsPath } from "../paths";
 import { QueueInfo } from "../reducers/queuesReducer";
 import { AppState } from "../store";
+import { isDarkTheme } from "../theme";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -92,10 +93,9 @@ const useStyles = makeStyles((theme) => ({
   taskcount: {
     fontSize: "12px",
     color: theme.palette.text.secondary,
-    background:
-      theme.palette.type === "dark"
-        ? "#303030"
-        : theme.palette.background.default,
+    background: isDarkTheme(theme)
+      ? "#303030"
+      : theme.palette.background.default,
     textAlign: "center",
     padding: "3px 6px",
     borderRadius: "10px",