From 72bcbadf72c702b5c53aa4831398c5bdda0dae0e Mon Sep 17 00:00:00 2001 From: Ken Hibino Date: Mon, 19 Apr 2021 06:56:00 -0700 Subject: [PATCH] Update Appbar with a new logo --- ui/src/App.tsx | 27 ++++++++++--------------- ui/src/components/ListItemLink.tsx | 22 +++++++++----------- ui/src/components/QueueBreadcrumb.tsx | 8 ++++---- ui/src/components/SplitButton.tsx | 8 ++++---- ui/src/components/SyntaxHighlighter.tsx | 3 ++- ui/src/components/TasksTable.tsx | 8 ++++---- ui/src/images/logo-color.svg | 1 + ui/src/images/logo-white.svg | 1 + ui/src/theme.tsx | 4 ++++ 9 files changed, 41 insertions(+), 41 deletions(-) create mode 100644 ui/src/images/logo-color.svg create mode 100644 ui/src/images/logo-white.svg diff --git a/ui/src/App.tsx b/ui/src/App.tsx index a05f8a0..298e848 100644 --- a/ui/src/App.tsx +++ b/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,11 +64,9 @@ const useStyles = (theme: Theme) => zIndex: theme.zIndex.drawer + 1, }, menuButton: { - marginRight: theme.spacing(2), - color: - theme.palette.type === "dark" - ? theme.palette.grey[100] - : theme.palette.grey[700], + color: isDarkTheme(theme) + ? theme.palette.grey[100] + : theme.palette.grey[700], }, menuButtonHidden: { display: "none", @@ -173,15 +172,11 @@ function App(props: ConnectedProps) { > - - Asynq Monitoring - + logo
diff --git a/ui/src/components/ListItemLink.tsx b/ui/src/components/ListItemLink.tsx index df7741e..c691f09 100644 --- a/ui/src/components/ListItemLink.tsx +++ b/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, }, })); diff --git a/ui/src/components/QueueBreadcrumb.tsx b/ui/src/components/QueueBreadcrumb.tsx index 912795d..b3d31ca 100644 --- a/ui/src/components/QueueBreadcrumb.tsx +++ b/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, diff --git a/ui/src/components/SplitButton.tsx b/ui/src/components/SplitButton.tsx index 8e9d29b..8c95d9e 100644 --- a/ui/src/components/SplitButton.tsx +++ b/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, diff --git a/ui/src/components/SyntaxHighlighter.tsx b/ui/src/components/SyntaxHighlighter.tsx index 99415c1..b8c1d1d 100644 --- a/ui/src/components/SyntaxHighlighter.tsx +++ b/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(); - const style = theme.palette.type === "dark" ? styleDark : styleLight; + const style = isDarkTheme(theme) ? styleDark : styleLight; return ( ({ 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", diff --git a/ui/src/images/logo-color.svg b/ui/src/images/logo-color.svg new file mode 100644 index 0000000..4b5ebb5 --- /dev/null +++ b/ui/src/images/logo-color.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui/src/images/logo-white.svg b/ui/src/images/logo-white.svg new file mode 100644 index 0000000..d89a4a1 --- /dev/null +++ b/ui/src/images/logo-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui/src/theme.tsx b/ui/src/theme.tsx index c57469b..23911f6 100644 --- a/ui/src/theme.tsx +++ b/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"; +}