Adjust BackToList button color for dark/light-mode

Sascha created 4 years ago

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

Change summary

webui/src/components/Header/Header.tsx | 8 ++++++--
webui/src/pages/bug/Bug.tsx            | 7 ++++---
webui/src/themes/DefaultDark.ts        | 3 ++-
webui/src/themes/DefaultLight.ts       | 4 +++-
4 files changed, 15 insertions(+), 7 deletions(-)

Detailed changes

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" />

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,
     },
   },
 }));

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: {

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',