From 8c17d730eff3bb59313a2f9f7aa469fe6fff95b2 Mon Sep 17 00:00:00 2001 From: Sascha Date: Tue, 23 Feb 2021 16:03:07 +0100 Subject: [PATCH 01/23] Add button to toggle between light- and dark-mode --- webui/src/components/Header/Header.tsx | 7 +++ webui/src/components/Themer.tsx | 64 ++++++++++++++++++++++++++ webui/src/index.tsx | 10 +--- webui/src/theme.ts | 1 + 4 files changed, 73 insertions(+), 9 deletions(-) create mode 100644 webui/src/components/Themer.tsx diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx index 3e39b5f35d7d860fdb8f99be567ef122fda965fa..3bdb252f4aa0ef308b5ccc2af4f635b1229c874c 100644 --- a/webui/src/components/Header/Header.tsx +++ b/webui/src/components/Header/Header.tsx @@ -5,6 +5,7 @@ import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import { makeStyles } from '@material-ui/core/styles'; +import { LightSwitch } from '../../components/Themer'; import CurrentIdentity from '../CurrentIdentity/CurrentIdentity'; const useStyles = makeStyles((theme) => ({ @@ -21,6 +22,9 @@ const useStyles = makeStyles((theme) => ({ display: 'flex', alignItems: 'center', }, + lightSwitch: { + padding: '0 20px', + }, logo: { height: '42px', marginRight: theme.spacing(2), @@ -39,6 +43,9 @@ function Header() { git-bug
+
+ +
diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx new file mode 100644 index 0000000000000000000000000000000000000000..13d098da2e4c2edef7401db9b6dc0a82c4c6b22c --- /dev/null +++ b/webui/src/components/Themer.tsx @@ -0,0 +1,64 @@ +import React, { createContext, useCallback, useContext, useState } from 'react'; + +import { ThemeProvider } from '@material-ui/core'; +import IconButton from '@material-ui/core/IconButton/IconButton'; +import Tooltip from '@material-ui/core/Tooltip/Tooltip'; +import { createMuiTheme, ThemeOptions } from '@material-ui/core/styles'; +import { NightsStayRounded, WbSunnyRounded } from '@material-ui/icons'; + +const defaultTheme: ThemeOptions = { + palette: { + type: 'light', + primary: { + main: '#263238', + }, + }, +}; + +const ThemeContext = createContext({ + toggleMode: () => {}, + mode: '', +}); + +const LightSwitch = () => { + const { mode, toggleMode } = useContext(ThemeContext); + + return ( + + + {mode === 'light' ? ( + + ) : ( + + )} + + + ); +}; + +type Props = { children: React.ReactNode }; +const Themer = ({ children }: Props) => { + const [theme, setTheme] = useState(defaultTheme); + + const toggleMode = useCallback(() => { + const newMode = theme.palette?.type === 'dark' ? 'light' : 'dark'; + const adjustedTheme: ThemeOptions = { + ...theme, + palette: { + ...theme.palette, + type: newMode, + }, + }; + setTheme(adjustedTheme); + }, [theme, setTheme]); + + const newMode = theme.palette?.type === 'dark' ? 'light' : 'dark'; + + return ( + + {children} + + ); +}; + +export { Themer as default, LightSwitch }; diff --git a/webui/src/index.tsx b/webui/src/index.tsx index f07b869d7d72e464d30963f0b76e05cc6fed017f..a7f52448a1dd8091ccb51cf961e65d31389c1faa 100644 --- a/webui/src/index.tsx +++ b/webui/src/index.tsx @@ -1,21 +1,13 @@ import { ApolloProvider } from '@apollo/client'; import React from 'react'; import ReactDOM from 'react-dom'; -import { BrowserRouter } from 'react-router-dom'; - -import ThemeProvider from '@material-ui/styles/ThemeProvider'; import App from './App'; import apolloClient from './apollo'; -import theme from './theme'; ReactDOM.render( - - - - - + , document.getElementById('root') ); diff --git a/webui/src/theme.ts b/webui/src/theme.ts index d41cd731d7e4de4f89536a335e182bebbe52c70e..3d53694155d77c056946b5158600a572a7d12d51 100644 --- a/webui/src/theme.ts +++ b/webui/src/theme.ts @@ -2,6 +2,7 @@ import { createMuiTheme } from '@material-ui/core/styles'; const theme = createMuiTheme({ palette: { + type: 'dark', primary: { main: '#263238', }, From c834c03b809f226801423d726c62608297cd6fc4 Mon Sep 17 00:00:00 2001 From: Sascha Date: Thu, 25 Feb 2021 14:41:17 +0100 Subject: [PATCH 02/23] Use brower preference and persist theme mode --- webui/src/components/Themer.tsx | 39 ++++++++++++++++++++++----------- 1 file changed, 26 insertions(+), 13 deletions(-) diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx index 13d098da2e4c2edef7401db9b6dc0a82c4c6b22c..78e205648f0eda5adc8ebe18e05fd6894854ad99 100644 --- a/webui/src/components/Themer.tsx +++ b/webui/src/components/Themer.tsx @@ -1,12 +1,12 @@ -import React, { createContext, useCallback, useContext, useState } from 'react'; +import React, { createContext, useContext, useState } from 'react'; -import { ThemeProvider } from '@material-ui/core'; +import { PaletteType, ThemeProvider, useMediaQuery } from '@material-ui/core'; import IconButton from '@material-ui/core/IconButton/IconButton'; import Tooltip from '@material-ui/core/Tooltip/Tooltip'; -import { createMuiTheme, ThemeOptions } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; import { NightsStayRounded, WbSunnyRounded } from '@material-ui/icons'; -const defaultTheme: ThemeOptions = { +const defaultTheme = { palette: { type: 'light', primary: { @@ -39,24 +39,37 @@ const LightSwitch = () => { type Props = { children: React.ReactNode }; const Themer = ({ children }: Props) => { const [theme, setTheme] = useState(defaultTheme); + const preferseDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); + const browserMode = preferseDarkMode ? 'dark' : 'light'; + const preferedMode = localStorage.getItem('themeMode'); + const curMode = preferedMode != null ? preferedMode : browserMode; - const toggleMode = useCallback(() => { - const newMode = theme.palette?.type === 'dark' ? 'light' : 'dark'; - const adjustedTheme: ThemeOptions = { + const adjustedTheme = { + ...theme, + palette: { + ...theme.palette, + type: (curMode === 'dark' ? 'dark' : 'light') as PaletteType, + }, + }; + + const toggleMode = () => { + const preferedMode = curMode === 'dark' ? 'light' : 'dark'; + localStorage.setItem('themeMode', preferedMode); + const adjustedTheme = { ...theme, palette: { ...theme.palette, - type: newMode, + type: preferedMode as PaletteType, }, }; setTheme(adjustedTheme); - }, [theme, setTheme]); - - const newMode = theme.palette?.type === 'dark' ? 'light' : 'dark'; + }; return ( - - {children} + + + {children} + ); }; From 30587cc03f0b1a8fe0c5621207882b9c6714093e Mon Sep 17 00:00:00 2001 From: Sascha Date: Fri, 26 Feb 2021 16:26:37 +0100 Subject: [PATCH 03/23] Fix color of open/close filter buttons in dark mode --- webui/src/pages/list/Filter.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webui/src/pages/list/Filter.tsx b/webui/src/pages/list/Filter.tsx index 5c4a3d17edc2511c4469aff709949ff443ce8a6b..667020786fbdf72720df1d38c8e90a3fdd1fa7bd 100644 --- a/webui/src/pages/list/Filter.tsx +++ b/webui/src/pages/list/Filter.tsx @@ -65,7 +65,7 @@ function stringify(params: Query): string { const useStyles = makeStyles((theme) => ({ element: { ...theme.typography.body2, - color: '#444', + color: theme.palette.text.secondary, padding: theme.spacing(0, 1), fontWeight: 400, textDecoration: 'none', @@ -75,7 +75,7 @@ const useStyles = makeStyles((theme) => ({ }, itemActive: { fontWeight: 600, - color: '#333', + color: theme.palette.text.primary, }, icon: { paddingRight: theme.spacing(0.5), From b996779197539a429c4ad54fba225421e523702b Mon Sep 17 00:00:00 2001 From: Sascha Date: Fri, 26 Feb 2021 16:39:18 +0100 Subject: [PATCH 04/23] Fix backgroundcolor of toolbar for dark mode --- webui/src/pages/list/FilterToolbar.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx index 216264168a0bbe04f052bb39b8025a386109aef3..6847397444dca459670d79250a273cf34af3210d 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 { makeStyles } from '@material-ui/core/styles'; +import { fade, makeStyles } from '@material-ui/core/styles'; import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline'; import ErrorOutline from '@material-ui/icons/ErrorOutline'; @@ -19,8 +19,8 @@ import { useBugCountQuery } from './FilterToolbar.generated'; const useStyles = makeStyles((theme) => ({ toolbar: { - backgroundColor: theme.palette.grey['100'], - borderColor: theme.palette.grey['300'], + backgroundColor: fade(theme.palette.text.hint, 0.05), + borderColor: theme.palette.divider, borderWidth: '1px 0', borderStyle: 'solid', margin: theme.spacing(0, -1), From 7beffb87182355c72ceffa29325815e71ead5f59 Mon Sep 17 00:00:00 2001 From: Sascha Date: Fri, 26 Feb 2021 16:39:46 +0100 Subject: [PATCH 05/23] Fix searchbar background-color for dark mode --- webui/src/pages/list/ListQuery.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx index 87c21e3c2d3ce25d129ed84314a2dc17d3f13441..58660b329d0636db46778cc877db8adafdb3bd11 100644 --- a/webui/src/pages/list/ListQuery.tsx +++ b/webui/src/pages/list/ListQuery.tsx @@ -56,10 +56,10 @@ const useStyles = makeStyles((theme) => ({ }, search: { borderRadius: theme.shape.borderRadius, - borderColor: fade(theme.palette.primary.main, 0.2), + borderColor: theme.palette.divider, borderStyle: 'solid', borderWidth: '1px', - backgroundColor: fade(theme.palette.primary.main, 0.05), + backgroundColor: fade(theme.palette.text.hint, 0.05), padding: theme.spacing(0, 1), width: ({ searching }) => (searching ? '20rem' : '15rem'), transition: theme.transitions.create([ From 9280e437b06c1812d9b4a62f18686878f9b7a769 Mon Sep 17 00:00:00 2001 From: Sascha Date: Fri, 26 Feb 2021 19:07:11 +0100 Subject: [PATCH 06/23] Fix Bug description header for dark mode --- webui/src/pages/bug/Message.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index 91549483a0898c724a3e27fd5d252a92e9a7aa57..0cc9b15a83ba5d61dbe8b7d55f7213935cd356f4 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 { makeStyles } from '@material-ui/core/styles'; +import { fade, makeStyles } from '@material-ui/core/styles'; import Author, { Avatar } from 'src/components/Author'; import Content from 'src/components/Content'; @@ -27,11 +27,11 @@ const useStyles = makeStyles((theme) => ({ }, header: { ...theme.typography.body1, - color: '#444', + color: theme.palette.text.secondary, padding: '0.5rem 1rem', - borderBottom: '1px solid #ddd', + borderBottom: `1px solid ${theme.palette.divider}`, display: 'flex', - backgroundColor: '#e2f1ff', + backgroundColor: fade(theme.palette.text.hint, 0.05), }, title: { flex: 1, From 9cac03652c410f943abe1e3a6b55dce0d79e48d6 Mon Sep 17 00:00:00 2001 From: Sascha Date: Mon, 1 Mar 2021 17:47:57 +0100 Subject: [PATCH 07/23] Inject theme instead of defining it in Themer.tsx --- webui/src/components/Themer.tsx | 57 +++++++++++---------------------- webui/src/theme.ts | 13 ++++++-- 2 files changed, 30 insertions(+), 40 deletions(-) diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx index 78e205648f0eda5adc8ebe18e05fd6894854ad99..d831fca9f51c1552812ac96d4135a1865108d598 100644 --- a/webui/src/components/Themer.tsx +++ b/webui/src/components/Themer.tsx @@ -1,20 +1,11 @@ import React, { createContext, useContext, useState } from 'react'; -import { PaletteType, ThemeProvider, useMediaQuery } from '@material-ui/core'; +import { ThemeProvider, useMediaQuery } from '@material-ui/core'; import IconButton from '@material-ui/core/IconButton/IconButton'; import Tooltip from '@material-ui/core/Tooltip/Tooltip'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; import { NightsStayRounded, WbSunnyRounded } from '@material-ui/icons'; -const defaultTheme = { - palette: { - type: 'light', - primary: { - main: '#263238', - }, - }, -}; - const ThemeContext = createContext({ toggleMode: () => {}, mode: '', @@ -22,10 +13,11 @@ const ThemeContext = createContext({ const LightSwitch = () => { const { mode, toggleMode } = useContext(ThemeContext); + const description = `Switch to ${mode === 'light' ? 'dark' : 'light'} theme`; return ( - - + + {mode === 'light' ? ( ) : ( @@ -36,40 +28,29 @@ const LightSwitch = () => { ); }; -type Props = { children: React.ReactNode }; -const Themer = ({ children }: Props) => { - const [theme, setTheme] = useState(defaultTheme); +type Props = { + children: React.ReactNode; + lightTheme: Theme; + darkTheme: Theme; +}; +const Themer = ({ children, lightTheme, darkTheme }: Props) => { const preferseDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); const browserMode = preferseDarkMode ? 'dark' : 'light'; - const preferedMode = localStorage.getItem('themeMode'); - const curMode = preferedMode != null ? preferedMode : browserMode; - - const adjustedTheme = { - ...theme, - palette: { - ...theme.palette, - type: (curMode === 'dark' ? 'dark' : 'light') as PaletteType, - }, - }; + const savedMode = localStorage.getItem('themeMode'); + const preferedMode = savedMode != null ? savedMode : browserMode; + const [curMode, setMode] = useState(preferedMode); const toggleMode = () => { - const preferedMode = curMode === 'dark' ? 'light' : 'dark'; + const preferedMode = curMode === 'light' ? 'dark' : 'light'; localStorage.setItem('themeMode', preferedMode); - const adjustedTheme = { - ...theme, - palette: { - ...theme.palette, - type: preferedMode as PaletteType, - }, - }; - setTheme(adjustedTheme); + setMode(preferedMode); }; + const preferedTheme = preferedMode === 'dark' ? darkTheme : lightTheme; + return ( - - {children} - + {children} ); }; diff --git a/webui/src/theme.ts b/webui/src/theme.ts index 3d53694155d77c056946b5158600a572a7d12d51..67c24526d34fb2562d7c7ede0c4de701e20c3901 100644 --- a/webui/src/theme.ts +++ b/webui/src/theme.ts @@ -1,6 +1,15 @@ import { createMuiTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const defaultLightTheme = createMuiTheme({ + palette: { + type: 'light', + primary: { + main: '#263238', + }, + }, +}); + +const defaultDarkTheme = createMuiTheme({ palette: { type: 'dark', primary: { @@ -9,4 +18,4 @@ const theme = createMuiTheme({ }, }); -export default theme; +export { defaultLightTheme, defaultDarkTheme }; From 680ede3df68b868f38b0207f4c0829e93181f161 Mon Sep 17 00:00:00 2001 From: Sascha Date: Mon, 1 Mar 2021 18:55:01 +0100 Subject: [PATCH 08/23] Fix (hopefully) eslint error on node 14.x pipeline --- webui/src/components/Themer.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx index d831fca9f51c1552812ac96d4135a1865108d598..4adef24a72ae980a019ede1b4536820de2ba4088 100644 --- a/webui/src/components/Themer.tsx +++ b/webui/src/components/Themer.tsx @@ -13,7 +13,8 @@ const ThemeContext = createContext({ const LightSwitch = () => { const { mode, toggleMode } = useContext(ThemeContext); - const description = `Switch to ${mode === 'light' ? 'dark' : 'light'} theme`; + const nextMode = mode === 'light' ? 'dark' : 'light'; + const description = `Switch to ${nextMode} theme`; return ( From 548febcbc7af50e8f33c393d481fa253f27aa795 Mon Sep 17 00:00:00 2001 From: Sascha Date: Tue, 2 Mar 2021 13:29:36 +0100 Subject: [PATCH 09/23] Define each theme in own file under themes dir --- webui/src/themes/DefaultDark.ts | 12 ++++++++++++ webui/src/{theme.ts => themes/DefaultLight.ts} | 11 +---------- webui/src/themes/index.ts | 4 ++++ 3 files changed, 17 insertions(+), 10 deletions(-) create mode 100644 webui/src/themes/DefaultDark.ts rename webui/src/{theme.ts => themes/DefaultLight.ts} (51%) create mode 100644 webui/src/themes/index.ts diff --git a/webui/src/themes/DefaultDark.ts b/webui/src/themes/DefaultDark.ts new file mode 100644 index 0000000000000000000000000000000000000000..8d961caa8809b43565ec89f10b927a94609c0708 --- /dev/null +++ b/webui/src/themes/DefaultDark.ts @@ -0,0 +1,12 @@ +import { createMuiTheme } from '@material-ui/core/styles'; + +const defaultDarkTheme = createMuiTheme({ + palette: { + type: 'dark', + primary: { + main: '#263238', + }, + }, +}); + +export default defaultDarkTheme; diff --git a/webui/src/theme.ts b/webui/src/themes/DefaultLight.ts similarity index 51% rename from webui/src/theme.ts rename to webui/src/themes/DefaultLight.ts index 67c24526d34fb2562d7c7ede0c4de701e20c3901..3a404fd5aa4a71c781980a7956353d84a0f25ee5 100644 --- a/webui/src/theme.ts +++ b/webui/src/themes/DefaultLight.ts @@ -9,13 +9,4 @@ const defaultLightTheme = createMuiTheme({ }, }); -const defaultDarkTheme = createMuiTheme({ - palette: { - type: 'dark', - primary: { - main: '#263238', - }, - }, -}); - -export { defaultLightTheme, defaultDarkTheme }; +export default defaultLightTheme; diff --git a/webui/src/themes/index.ts b/webui/src/themes/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..6c41c546fc58887c5dadd18ccae6f60b478aaa6b --- /dev/null +++ b/webui/src/themes/index.ts @@ -0,0 +1,4 @@ +import defaultDarkTheme from './DefaultDark'; +import defaultLightTheme from './DefaultLight'; + +export { defaultLightTheme, defaultDarkTheme }; From 9f6dcc887d31ce5c9cb5438b4e0e6c834c9d81d6 Mon Sep 17 00:00:00 2001 From: Sascha Date: Tue, 2 Mar 2021 17:13:11 +0100 Subject: [PATCH 10/23] 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', }, }, }); From c8a5330bdeabbf2c83890ca096281cd09159cc10 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 3 Mar 2021 13:02:27 +0100 Subject: [PATCH 11/23] Fix padding around issue comments --- webui/src/pages/bug/Message.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index f2f62b52b771380cd479d672b3059140cb619206..d27f7a3da75011e11ebe2d8b7ff62b3b0b0e7198 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -49,7 +49,7 @@ const useStyles = makeStyles((theme) => ({ }, body: { ...theme.typography.body2, - padding: '0 1rem', + padding: '0.5rem', }, })); From b918c9facd157d1dfb24282f6309782a10e02123 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 3 Mar 2021 14:28:45 +0100 Subject: [PATCH 12/23] Revert restructuring between App.tsx and index.tsx This should prevent unnecessary merge conflicts. --- webui/src/index.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/webui/src/index.tsx b/webui/src/index.tsx index a7f52448a1dd8091ccb51cf961e65d31389c1faa..d3591e1a7d629573b200fc2e8d4625e5b2832f5e 100644 --- a/webui/src/index.tsx +++ b/webui/src/index.tsx @@ -1,13 +1,20 @@ import { ApolloProvider } from '@apollo/client'; import React from 'react'; import ReactDOM from 'react-dom'; +import { BrowserRouter } from 'react-router-dom'; import App from './App'; import apolloClient from './apollo'; +import Themer from './components/Themer'; +import { defaultLightTheme, defaultDarkTheme } from './themes/index'; ReactDOM.render( - + + + + + , document.getElementById('root') ); From c24b7370f484e89662283a52b66e34940f972cf6 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 3 Mar 2021 16:26:57 +0100 Subject: [PATCH 13/23] Add Icon to "Close Issue"-button --- .../src/components/CloseBugButton/CloseBugButton.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/webui/src/components/CloseBugButton/CloseBugButton.tsx b/webui/src/components/CloseBugButton/CloseBugButton.tsx index 19f56cab6c9df8a57b66ff85c73489a09bd1c3a9..8d397c23d60b8fcd46f5135b45d0646345456411 100644 --- a/webui/src/components/CloseBugButton/CloseBugButton.tsx +++ b/webui/src/components/CloseBugButton/CloseBugButton.tsx @@ -1,12 +1,21 @@ import React from 'react'; import Button from '@material-ui/core/Button'; +import { makeStyles, Theme } from '@material-ui/core/styles'; +import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline'; import { BugFragment } from 'src/pages/bug/Bug.generated'; import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated'; import { useCloseBugMutation } from './CloseBug.generated'; +const useStyles = makeStyles((theme: Theme) => ({ + closeIssueIcon: { + color: theme.palette.secondary.dark, + paddingTop: '0.1rem', + }, +})); + interface Props { bug: BugFragment; disabled: boolean; @@ -14,6 +23,7 @@ interface Props { function CloseBugButton({ bug, disabled }: Props) { const [closeBug, { loading, error }] = useCloseBugMutation(); + const classes = useStyles(); function closeBugAction() { closeBug({ @@ -45,6 +55,7 @@ function CloseBugButton({ bug, disabled }: Props) { variant="contained" onClick={() => closeBugAction()} disabled={bug.status === 'CLOSED' || disabled} + startIcon={} > Close issue From 8e8ca99bd5f72de60f6e0e1b334f33312cab5388 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 3 Mar 2021 17:49:53 +0100 Subject: [PATCH 14/23] 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. --- .../BugTitleForm/.BugTitleForm.tsx.swp | Bin 0 -> 20480 bytes .../components/BugTitleForm/BugTitleForm.tsx | 24 +++--------------- webui/src/pages/list/ListQuery.tsx | 11 +++----- webui/src/pages/new/NewBugPage.tsx | 23 +++-------------- webui/src/themes/DefaultDark.ts | 5 ++++ webui/src/themes/DefaultLight.ts | 4 +++ 6 files changed, 19 insertions(+), 48 deletions(-) create mode 100644 webui/src/components/BugTitleForm/.BugTitleForm.tsx.swp diff --git a/webui/src/components/BugTitleForm/.BugTitleForm.tsx.swp b/webui/src/components/BugTitleForm/.BugTitleForm.tsx.swp new file mode 100644 index 0000000000000000000000000000000000000000..125bed1102632dc6d3342a125b36283027706373 GIT binary patch literal 20480 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 u+8aX$6{=%l=t>a+HN;B ({ marginLeft: theme.spacing(2), }, greenButton: { - marginLeft: '8px', - backgroundColor: '#2ea44fd9', - color: '#fff', - '&:hover': { - backgroundColor: '#2ea44f', - }, - }, - titleInput: { - borderRadius: theme.shape.borderRadius, - borderColor: fade(theme.palette.primary.main, 0.2), - borderStyle: 'solid', - borderWidth: '1px', - backgroundColor: fade(theme.palette.primary.main, 0.05), - padding: theme.spacing(0, 0), - minWidth: 336, - transition: theme.transitions.create([ - 'width', - 'borderColor', - 'backgroundColor', - ]), + marginLeft: theme.spacing(1), + backgroundColor: theme.palette.success.main, + color: theme.palette.success.contrastText, }, })); @@ -126,7 +109,6 @@ function BugTitleForm({ bug }: Props) { inputRef={(node) => { issueTitleInput = node; }} - className={classes.titleInput} variant="outlined" fullWidth margin="dense" diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx index d4ce7f803b67819cc0f87786697f204578615551..021f70b0ce7d343b3dfe1685c6c808a4cdf1a58d 100644 --- a/webui/src/pages/list/ListQuery.tsx +++ b/webui/src/pages/list/ListQuery.tsx @@ -112,12 +112,9 @@ const useStyles = makeStyles((theme) => ({ padding: theme.spacing(2, 3), }, }, - greenButton: { - backgroundColor: '#2ea44fd9', - color: '#fff', - '&:hover': { - backgroundColor: '#2ea44f', - }, + newIssueButton: { + backgroundColor: theme.palette.success.main, + color: theme.palette.success.contrastText, }, })); @@ -318,7 +315,7 @@ function ListQuery() { {() => (