Update Appbar with a new logo

ui/src/App.tsx

@@ -10,7 +10,6 @@ import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
-import Typography from "@material-ui/core/Typography";
 import Snackbar from "@material-ui/core/Snackbar";
 import SnackbarContent from "@material-ui/core/SnackbarContent";
 import IconButton from "@material-ui/core/IconButton";
@@ -26,7 +25,7 @@ import DoubleArrowIcon from "@material-ui/icons/DoubleArrow";
 import CloseIcon from "@material-ui/icons/Close";
 import { AppState } from "./store";
 import { paths } from "./paths";
-import { useTheme } from "./theme";
+import { isDarkTheme, useTheme } from "./theme";
 import { closeSnackbar } from "./actions/snackbarActions";
 import { toggleDrawer } from "./actions/settingsActions";
 import ListItemLink from "./components/ListItemLink";
@@ -37,6 +36,8 @@ import SettingsView from "./views/SettingsView";
 import ServersView from "./views/ServersView";
 import RedisInfoView from "./views/RedisInfoView";
 import PageNotFoundView from "./views/PageNotFoundView";
+import logo from "./images/logo-color.svg";
+import logoWhite from "./images/logo-white.svg";
 
 const drawerWidth = 220;
 
@@ -63,9 +64,7 @@ const useStyles = (theme: Theme) =>
       zIndex: theme.zIndex.drawer + 1,
     },
     menuButton: {
-      marginRight: theme.spacing(2),
-      color:
-        theme.palette.type === "dark"
+      color: isDarkTheme(theme)
         ? theme.palette.grey[100]
         : theme.palette.grey[700],
     },
@@ -173,15 +172,11 @@ function App(props: ConnectedProps<typeof connector>) {
               >
                 <MenuIcon />
               </IconButton>
-              <Typography
-                component="h1"
-                variant="h6"
-                noWrap
-                className={classes.title}
-                color="textPrimary"
-              >
-                Asynq Monitoring
-              </Typography>
+              <img
+                src={isDarkTheme(theme) ? logoWhite : logo}
+                width={200}
+                alt="logo"
+              />
             </Toolbar>
           </AppBar>
           <div className={classes.mainContainer}>

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,21 +18,18 @@ const useStyles = makeStyles((theme) => ({
     borderBottomRightRadius: "24px",
   },
   selected: {
-    backgroundColor:
-      theme.palette.type === "dark"
+    backgroundColor: isDarkTheme(theme)
       ? `${theme.palette.secondary.main}30`
       : `${theme.palette.primary.main}30`,
   },
   selectedText: {
     fontWeight: 600,
-    color:
-      theme.palette.type === "dark"
+    color: isDarkTheme(theme)
       ? theme.palette.secondary.main
       : theme.palette.primary.main,
   },
   selectedIcon: {
-    color:
-      theme.palette.type === "dark"
+    color: isDarkTheme(theme)
       ? theme.palette.secondary.main
       : theme.palette.primary.main,
   },

ui/src/components/QueueBreadcrumb.tsx

@@ -7,11 +7,11 @@ 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"
+    backgroundColor: isDarkTheme(theme)
       ? "#303030"
       : theme.palette.background.default,
     height: theme.spacing(3),

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,8 +27,7 @@ const useStyles = makeStyles((theme) => ({
     zIndex: 2,
   },
   buttonContained: {
-    backgroundColor:
-      theme.palette.type === "dark"
+    backgroundColor: isDarkTheme(theme)
       ? "#303030"
       : theme.palette.background.default,
     color: theme.palette.text.primary,

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,8 +93,7 @@ const useStyles = makeStyles((theme) => ({
   taskcount: {
     fontSize: "12px",
     color: theme.palette.text.secondary,
-    background:
-      theme.palette.type === "dark"
+    background: isDarkTheme(theme)
       ? "#303030"
       : theme.palette.background.default,
     textAlign: "center",

ui/src/theme.tsx

@@ -25,3 +25,7 @@ export function useTheme(themePreference: ThemePreference): Theme {
     },
   });
 }
+
+export function isDarkTheme(theme: Theme): boolean {
+  return theme.palette.type === "dark";
+}