Adjust BackToList button color for dark/light-mode

The AppBar is commonly used for navigation. As the BackToList button is a
navigation element, use similar colors as the AppBar.

4 files changed, 15 insertions, 7 deletions

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 3bdb252f..579bf127 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -15,9 +15,13 @@ const useStyles = makeStyles((theme) => ({
   filler: {
     flexGrow: 1,
   },
+  appBar: {
+    backgroundColor: theme.palette.primary.dark,
+    color: theme.palette.primary.contrastText,
+  },
   appTitle: {
     ...theme.typography.h6,
-    color: 'white',
+    color: theme.palette.primary.contrastText,
     textDecoration: 'none',
     display: 'flex',
     alignItems: 'center',
@@ -36,7 +40,7 @@ function Header() {
 
   return (
     <>
-      <AppBar position="fixed" color="primary">
+      <AppBar position="fixed" className={classes.appBar}>
         <Toolbar>
           <Link to="/" className={classes.appTitle}>
             <img src="/logo.svg" className={classes.logo} alt="git-bug" />
diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index 8b537fb8..343721b4 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -76,10 +76,11 @@ const useStyles = makeStyles((theme) => ({
   backButton: {
     position: 'sticky',
     top: '80px',
-    backgroundColor: '#574142',
-    color: '#fff',
+    backgroundColor: theme.palette.primary.dark,
+    color: theme.palette.primary.contrastText,
     '&:hover': {
-      backgroundColor: '#610B0B',
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
     },
   },
 }));
diff --git a/webui/src/themes/DefaultDark.ts b/webui/src/themes/DefaultDark.ts
index 6a92ec49..65dd6329 100644
--- a/webui/src/themes/DefaultDark.ts
+++ b/webui/src/themes/DefaultDark.ts
@@ -4,7 +4,8 @@ const defaultDarkTheme = createMuiTheme({
   palette: {
     type: 'dark',
     primary: {
-      main: '#263238',
+      dark: '#263238',
+      main: '#2a393e',
       light: '#525252',
     },
     error: {
diff --git a/webui/src/themes/DefaultLight.ts b/webui/src/themes/DefaultLight.ts
index bc788a98..9c57ebe5 100644
--- a/webui/src/themes/DefaultLight.ts
+++ b/webui/src/themes/DefaultLight.ts
@@ -4,8 +4,10 @@ const defaultLightTheme = createMuiTheme({
   palette: {
     type: 'light',
     primary: {
-      main: '#263238',
+      dark: '#263238',
+      main: '#5a6b73',
       light: '#f5f5f5',
+      contrastText: '#fff',
     },
     info: {
       main: '#e2f1ff',