From de26990afc9f21a9017b039ba9d7546a8d8ea5da Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Thu, 11 Mar 2021 12:47:09 +0100
Subject: [PATCH] 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.
---
 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(-)

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 3bdb252f4aa0ef308b5ccc2af4f635b1229c874c..579bf127f01edc6e0ab26df57c74d5884ee5be7d 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 8b537fb8cef5f5035e6ba8a8cdaf4f623a5f5caf..343721b4e502ea1a0a888a05dae3fe8c2694e4ea 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 6a92ec49df522346db64a2228165c7ec8ba760fd..65dd6329b44ed0b334d21c8bce712efc3b715844 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 bc788a986634e35ca9682a05808f6d292da39867..9c57ebe57ce904a8df3f346848c219784ff7d595 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',