From 9f6dcc887d31ce5c9cb5438b4e0e6c834c9d81d6 Mon Sep 17 00:00:00 2001 From: Sascha Date: Tue, 2 Mar 2021 17:13:11 +0100 Subject: [PATCH] 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/pages/bug/Message.tsx | 6 ++++-- webui/src/pages/list/FilterToolbar.tsx | 4 ++-- webui/src/pages/list/ListQuery.tsx | 21 ++++++++++++--------- webui/src/themes/DefaultDark.ts | 8 ++++++++ webui/src/themes/DefaultLight.ts | 7 +++++++ 5 files changed, 33 insertions(+), 13 deletions(-) diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index 0cc9b15a83ba5d61dbe8b7d55f7213935cd356f4..f2f62b52b771380cd479d672b3059140cb619206 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -1,7 +1,7 @@ import React from 'react'; import Paper from '@material-ui/core/Paper'; -import { fade, makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import Author, { Avatar } from 'src/components/Author'; import Content from 'src/components/Content'; @@ -31,7 +31,9 @@ const useStyles = makeStyles((theme) => ({ padding: '0.5rem 1rem', borderBottom: `1px solid ${theme.palette.divider}`, display: 'flex', - backgroundColor: fade(theme.palette.text.hint, 0.05), + borderTopRightRadius: theme.shape.borderRadius, + borderTopLeftRadius: theme.shape.borderRadius, + backgroundColor: theme.palette.info.main, }, title: { flex: 1, diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx index 6847397444dca459670d79250a273cf34af3210d..e4cd8e6a244a338c74d26f073e1c181acb3ac3d8 100644 --- a/webui/src/pages/list/FilterToolbar.tsx +++ b/webui/src/pages/list/FilterToolbar.tsx @@ -3,7 +3,7 @@ import { LocationDescriptor } from 'history'; import React from 'react'; import Toolbar from '@material-ui/core/Toolbar'; -import { fade, makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline'; import ErrorOutline from '@material-ui/icons/ErrorOutline'; @@ -19,7 +19,7 @@ import { useBugCountQuery } from './FilterToolbar.generated'; const useStyles = makeStyles((theme) => ({ toolbar: { - backgroundColor: fade(theme.palette.text.hint, 0.05), + backgroundColor: theme.palette.primary.light, borderColor: theme.palette.divider, borderWidth: '1px 0', borderStyle: 'solid', diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx index 58660b329d0636db46778cc877db8adafdb3bd11..d4ce7f803b67819cc0f87786697f204578615551 100644 --- a/webui/src/pages/list/ListQuery.tsx +++ b/webui/src/pages/list/ListQuery.tsx @@ -6,7 +6,7 @@ import { Button } from '@material-ui/core'; import IconButton from '@material-ui/core/IconButton'; import InputBase from '@material-ui/core/InputBase'; import Paper from '@material-ui/core/Paper'; -import { fade, makeStyles, Theme } from '@material-ui/core/styles'; +import { makeStyles, Theme } from '@material-ui/core/styles'; import ErrorOutline from '@material-ui/icons/ErrorOutline'; import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'; import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'; @@ -56,10 +56,11 @@ const useStyles = makeStyles((theme) => ({ }, search: { borderRadius: theme.shape.borderRadius, + color: theme.palette.text.secondary, borderColor: theme.palette.divider, borderStyle: 'solid', borderWidth: '1px', - backgroundColor: fade(theme.palette.text.hint, 0.05), + backgroundColor: theme.palette.primary.light, padding: theme.spacing(0, 1), width: ({ searching }) => (searching ? '20rem' : '15rem'), transition: theme.transitions.create([ @@ -69,13 +70,11 @@ const useStyles = makeStyles((theme) => ({ ]), }, searchFocused: { - borderColor: fade(theme.palette.primary.main, 0.4), backgroundColor: theme.palette.background.paper, - width: '20rem!important', }, placeholderRow: { padding: theme.spacing(1), - borderBottomColor: theme.palette.grey['300'], + borderBottomColor: theme.palette.divider, borderBottomWidth: '1px', borderBottomStyle: 'solid', display: 'flex', @@ -91,7 +90,8 @@ const useStyles = makeStyles((theme) => ({ ...theme.typography.h5, padding: theme.spacing(8), textAlign: 'center', - borderBottomColor: theme.palette.grey['300'], + color: theme.palette.text.hint, + borderBottomColor: theme.palette.divider, borderBottomWidth: '1px', borderBottomStyle: 'solid', '& > p': { @@ -99,12 +99,15 @@ const useStyles = makeStyles((theme) => ({ }, }, errorBox: { - color: theme.palette.error.main, + color: theme.palette.error.dark, '& > pre': { fontSize: '1rem', textAlign: 'left', - backgroundColor: theme.palette.grey['900'], - color: theme.palette.common.white, + borderColor: theme.palette.divider, + borderWidth: '1px', + borderRadius: theme.shape.borderRadius, + borderStyle: 'solid', + color: theme.palette.text.primary, marginTop: theme.spacing(4), padding: theme.spacing(2, 3), }, diff --git a/webui/src/themes/DefaultDark.ts b/webui/src/themes/DefaultDark.ts index 8d961caa8809b43565ec89f10b927a94609c0708..fe31f2117eb06aa94781c28fdfe4bd8d9b92228a 100644 --- a/webui/src/themes/DefaultDark.ts +++ b/webui/src/themes/DefaultDark.ts @@ -5,6 +5,14 @@ const defaultDarkTheme = createMuiTheme({ type: 'dark', primary: { main: '#263238', + light: '#525252', + }, + error: { + main: '#f44336', + dark: '#ff4949', + }, + info: { + main: '#2a393e', }, }, }); diff --git a/webui/src/themes/DefaultLight.ts b/webui/src/themes/DefaultLight.ts index 3a404fd5aa4a71c781980a7956353d84a0f25ee5..898bd0bc1a6a7ea53c506d042d0522866f077350 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', }, }, });