Update logo strokeColor

locustio · Aug 19, 2024 · 34a82fa · 34a82fa
1 parent 4697de5
commit 34a82fa
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 18 deletions.
diff --git a/locust/webui/src/assets/Logo.tsx b/locust/webui/src/assets/Logo.tsx
@@ -1,10 +1,14 @@
-export default function Logo({
-  isDarkMode,
-  lightModeBackgroundColor = '#15803d',
-}: {
-  isDarkMode: boolean;
-  lightModeBackgroundColor?: string;
-}) {
+import { useTheme } from '@mui/material/styles';
+
+import { THEME_MODE } from 'constants/theme';
+
+export default function Logo({ lightModeBackgroundColor }: { lightModeBackgroundColor?: string }) {
+  const theme = useTheme();
+  const strokeColor =
+    theme.palette.mode === THEME_MODE.DARK
+      ? theme.palette.background.default
+      : lightModeBackgroundColor || theme.palette.primary.main;
+
   return (
     <svg
       aria-label='Locust'
@@ -37,7 +41,7 @@ export default function Logo({
       <path
         d='M11.279 5.80442L10.9321 5.97319L10.8347 6.34649L4.72023 29.7764L4.44626 30.8262H5.53125H6.94682H10.2332H10.8805L11.0442 30.1999L15.3834 13.5938L32.3703 30.5807L32.6158 30.8262H32.963H39.4073H41.4309L40 29.3953L15.1525 4.54779L14.7302 4.12549L14.1931 4.38675L11.279 5.80442Z'
         fill='#B8EE4B'
-        stroke={isDarkMode ? '#0B2406' : lightModeBackgroundColor}
+        stroke={strokeColor}
         strokeWidth='1.67636'
       />
       <path

diff --git a/locust/webui/src/components/Layout/Navbar/Navbar.tsx b/locust/webui/src/components/Layout/Navbar/Navbar.tsx
@@ -4,11 +4,8 @@ import Logo from 'assets/Logo';
 import DarkLightToggle from 'components/Layout/Navbar/DarkLightToggle';
 import SwarmMonitor from 'components/Layout/Navbar/SwarmMonitor';
 import StateButtons from 'components/StateButtons/StateButtons';
-import { useSelector } from 'redux/hooks';
 
 export default function Navbar() {
-  const isDarkMode = useSelector(({ theme }) => theme.isDarkMode);
-
   return (
     <AppBar position='static'>
       <Container maxWidth='xl'>
@@ -19,7 +16,7 @@ export default function Navbar() {
             sx={{ display: 'flex', alignItems: 'center' }}
             underline='none'
           >
-            <Logo isDarkMode={isDarkMode} />
+            <Logo />
           </Link>
           <Box sx={{ display: 'flex', columnGap: 6 }}>
             <SwarmMonitor />

diff --git a/locust/webui/src/hooks/useTheme.ts → locust/webui/src/hooks/useCreateTheme.ts b/locust/webui/src/hooks/useTheme.ts → locust/webui/src/hooks/useCreateTheme.ts
@@ -1,16 +1,17 @@
 import { useMemo } from 'react';
+import { Theme } from '@mui/material/styles';
 
 import { THEME_MODE } from 'constants/theme';
 import { useSelector } from 'redux/hooks';
 import createTheme from 'styles/theme';
 
-export default function useTheme() {
+export default function useCreateTheme(extendedTheme?: Theme) {
   const isDarkMode = useSelector(({ theme: { isDarkMode } }) => isDarkMode);
 
   const theme = useMemo(
-    () => createTheme(isDarkMode ? THEME_MODE.DARK : THEME_MODE.LIGHT),
+    () => createTheme(isDarkMode ? THEME_MODE.DARK : THEME_MODE.LIGHT, extendedTheme),
     [isDarkMode],
   );
 
-  return { theme, isDarkMode };
+  return theme;
 }
diff --git a/locust/webui/src/pages/Auth.tsx b/locust/webui/src/pages/Auth.tsx
@@ -4,11 +4,11 @@ import { ThemeProvider } from '@mui/material/styles';
 
 import Logo from 'assets/Logo';
 import DarkLightToggle from 'components/Layout/Navbar/DarkLightToggle';
-import useTheme from 'hooks/useTheme';
+import useCreateTheme from 'hooks/useCreateTheme';
 import { IAuthArgs } from 'types/auth.types';
 
 export default function Auth({ authProviders, error, usernamePasswordCallback }: IAuthArgs) {
-  const { theme, isDarkMode } = useTheme();
+  const theme = useCreateTheme();
 
   return (
     <ThemeProvider theme={theme}>
@@ -34,7 +34,7 @@ export default function Auth({ authProviders, error, usernamePasswordCallback }:
         }}
       >
         <Box sx={{ display: 'flex', justifyContent: 'center', columnGap: 2 }}>
-          <Logo isDarkMode={isDarkMode} lightModeBackgroundColor='#fff' />
+          <Logo lightModeBackgroundColor='#fff' />
         </Box>
         {usernamePasswordCallback && (
           <form action={usernamePasswordCallback}>