From 548febcbc7af50e8f33c393d481fa253f27aa795 Mon Sep 17 00:00:00 2001 From: Sascha Date: Tue, 2 Mar 2021 13:29:36 +0100 Subject: Define each theme in own file under themes dir --- webui/src/themes/DefaultLight.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 webui/src/themes/DefaultLight.ts (limited to 'webui/src/themes/DefaultLight.ts') diff --git a/webui/src/themes/DefaultLight.ts b/webui/src/themes/DefaultLight.ts new file mode 100644 index 00000000..3a404fd5 --- /dev/null +++ b/webui/src/themes/DefaultLight.ts @@ -0,0 +1,12 @@ +import { createMuiTheme } from '@material-ui/core/styles'; + +const defaultLightTheme = createMuiTheme({ + palette: { + type: 'light', + primary: { + main: '#263238', + }, + }, +}); + +export default defaultLightTheme; -- cgit From 9f6dcc887d31ce5c9cb5438b4e0e6c834c9d81d6 Mon Sep 17 00:00:00 2001 From: Sascha Date: Tue, 2 Mar 2021 17:13:11 +0100 Subject: Use proper semantic color values Adjust header colors on light theme - Use adjusted background-color for header instead of text.hint. - Use slightly darker secondary font color for better readability against the head background color. Use more semantic theme colors for bug list Use more semantic theme colors for bug messages Fix usage of text hint for filter header --- webui/src/themes/DefaultLight.ts | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'webui/src/themes/DefaultLight.ts') diff --git a/webui/src/themes/DefaultLight.ts b/webui/src/themes/DefaultLight.ts index 3a404fd5..898bd0bc 100644 --- a/webui/src/themes/DefaultLight.ts +++ b/webui/src/themes/DefaultLight.ts @@ -5,6 +5,13 @@ const defaultLightTheme = createMuiTheme({ type: 'light', primary: { main: '#263238', + light: '#f5f5f5', + }, + info: { + main: '#e2f1ff', + }, + text: { + secondary: '#555', }, }, }); -- cgit From 8e8ca99bd5f72de60f6e0e1b334f33312cab5388 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 3 Mar 2021 17:49:53 +0100 Subject: Use colors from theme palette - Use theme colors for title input. - Remove inputTitle classes as they are not applied to the TextField. This will lead to double borders and artifacts at the field corners. --- webui/src/themes/DefaultLight.ts | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'webui/src/themes/DefaultLight.ts') diff --git a/webui/src/themes/DefaultLight.ts b/webui/src/themes/DefaultLight.ts index 898bd0bc..735600b5 100644 --- a/webui/src/themes/DefaultLight.ts +++ b/webui/src/themes/DefaultLight.ts @@ -10,6 +10,10 @@ const defaultLightTheme = createMuiTheme({ info: { main: '#e2f1ff', }, + success: { + main: '#2ea44fd9', + contrastText: '#fff', + }, text: { secondary: '#555', }, -- cgit From 79422fafb28294ad1e2ae6fe25a6d2788f57d3af Mon Sep 17 00:00:00 2001 From: Sascha Date: Thu, 4 Mar 2021 14:08:59 +0100 Subject: Use info.contrastText instead of text.secondary This will ensure better color managment for Message titles --- webui/src/themes/DefaultLight.ts | 1 + 1 file changed, 1 insertion(+) (limited to 'webui/src/themes/DefaultLight.ts') diff --git a/webui/src/themes/DefaultLight.ts b/webui/src/themes/DefaultLight.ts index 735600b5..bc788a98 100644 --- a/webui/src/themes/DefaultLight.ts +++ b/webui/src/themes/DefaultLight.ts @@ -9,6 +9,7 @@ const defaultLightTheme = createMuiTheme({ }, info: { main: '#e2f1ff', + contrastText: '#555', }, success: { main: '#2ea44fd9', -- cgit From de26990afc9f21a9017b039ba9d7546a8d8ea5da Mon Sep 17 00:00:00 2001 From: Sascha Date: Thu, 11 Mar 2021 12:47:09 +0100 Subject: 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/themes/DefaultLight.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'webui/src/themes/DefaultLight.ts') 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', -- cgit