From 1601a0861a8bf4d287e12b2ab795464b0e78effa Mon Sep 17 00:00:00 2001
From: Ken Hibino <ken.hibino7@gmail.com>
Date: Wed, 2 Mar 2022 06:13:43 -0800
Subject: [PATCH] Use logo image

---
 CHANGELOG.md   |  1 +
 ui/src/App.tsx | 20 +++++++-------------
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f20a6e6..f292b06 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - (ui): Hide action buttons in read-only mode
 - (ui): Display queue latency in dashboard page and queue detail page.
 - (ui): Added copy-to-clipboard button for task ID in tasks list-view page.
+- (ui): Use logo image in the appbar (thank you @koddr!)
 
 ### Fixed
 - (ui): Pagination in ActiveTasks table is fixed
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index d317753..7963ce6 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -12,7 +12,6 @@ import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
 import Snackbar from "@material-ui/core/Snackbar";
 import SnackbarContent from "@material-ui/core/SnackbarContent";
-import Typography from "@material-ui/core/Typography";
 import IconButton from "@material-ui/core/IconButton";
 import Slide from "@material-ui/core/Slide";
 import { TransitionProps } from "@material-ui/core/transitions";
@@ -40,6 +39,8 @@ import ServersView from "./views/ServersView";
 import RedisInfoView from "./views/RedisInfoView";
 import MetricsView from "./views/MetricsView";
 import PageNotFoundView from "./views/PageNotFoundView";
+import { ReactComponent as Logo } from "./images/logo-color.svg";
+import { ReactComponent as LogoDarkTheme } from "./images/logo-white.svg";
 
 const drawerWidth = 220;
 
@@ -74,9 +75,6 @@ const useStyles = (theme: Theme) =>
     menuButtonHidden: {
       display: "none",
     },
-    title: {
-      flexGrow: 1,
-    },
     drawerPaper: {
       position: "relative",
       whiteSpace: "nowrap",
@@ -176,15 +174,11 @@ function App(props: ConnectedProps<typeof connector>) {
               >
                 <MenuIcon />
               </IconButton>
-              <Typography
-                component="h1"
-                variant="h6"
-                noWrap
-                className={classes.title}
-                color="textPrimary"
-              >
-                Asynq Monitoring
-              </Typography>
+              {isDarkTheme(theme) ? (
+                <LogoDarkTheme width={200} height={48} />
+              ) : (
+                <Logo width={200} height={48} />
+              )}
             </Toolbar>
           </AppBar>
           <div className={classes.mainContainer}>