Use logo image

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

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
+              {isDarkTheme(theme) ? (
-                component="h1"
+                <LogoDarkTheme width={200} height={48} />
-                variant="h6"
+              ) : (
-                noWrap
+                <Logo width={200} height={48} />
-                className={classes.title}
+              )}
-                color="textPrimary"
-              >
-                Asynq Monitoring
-              </Typography>
             </Toolbar>
           </AppBar>
           <div className={classes.mainContainer}>