From 8c17d730eff3bb59313a2f9f7aa469fe6fff95b2 Mon Sep 17 00:00:00 2001 From: Sascha Date: Tue, 23 Feb 2021 16:03:07 +0100 Subject: 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 (limited to 'webui') diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx index 3e39b5f3..3bdb252f 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 00000000..13d098da --- /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 f07b869d..a7f52448 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 d41cd731..3d536941 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', }, -- cgit From c834c03b809f226801423d726c62608297cd6fc4 Mon Sep 17 00:00:00 2001 From: Sascha Date: Thu, 25 Feb 2021 14:41:17 +0100 Subject: Use brower preference and persist theme mode --- webui/src/components/Themer.tsx | 39 ++++++++++++++++++++++++++------------- 1 file changed, 26 insertions(+), 13 deletions(-) (limited to 'webui') diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx index 13d098da..78e20564 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} + ); }; -- cgit From 30587cc03f0b1a8fe0c5621207882b9c6714093e Mon Sep 17 00:00:00 2001 From: Sascha Date: Fri, 26 Feb 2021 16:26:37 +0100 Subject: Fix color of open/close filter buttons in dark mode --- webui/src/pages/list/Filter.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'webui') diff --git a/webui/src/pages/list/Filter.tsx b/webui/src/pages/list/Filter.tsx index 5c4a3d17..66702078 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), -- cgit From b996779197539a429c4ad54fba225421e523702b Mon Sep 17 00:00:00 2001 From: Sascha Date: Fri, 26 Feb 2021 16:39:18 +0100 Subject: Fix backgroundcolor of toolbar for dark mode --- webui/src/pages/list/FilterToolbar.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'webui') diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx index 21626416..68473974 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), -- cgit From 7beffb87182355c72ceffa29325815e71ead5f59 Mon Sep 17 00:00:00 2001 From: Sascha Date: Fri, 26 Feb 2021 16:39:46 +0100 Subject: Fix searchbar background-color for dark mode --- webui/src/pages/list/ListQuery.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'webui') diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx index 87c21e3c..58660b32 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([ -- cgit From 9280e437b06c1812d9b4a62f18686878f9b7a769 Mon Sep 17 00:00:00 2001 From: Sascha Date: Fri, 26 Feb 2021 19:07:11 +0100 Subject: Fix Bug description header for dark mode --- webui/src/pages/bug/Message.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'webui') diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index 91549483..0cc9b15a 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, -- cgit From 9cac03652c410f943abe1e3a6b55dce0d79e48d6 Mon Sep 17 00:00:00 2001 From: Sascha Date: Mon, 1 Mar 2021 17:47:57 +0100 Subject: 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(-) (limited to 'webui') diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx index 78e20564..d831fca9 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 3d536941..67c24526 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 }; -- cgit From 680ede3df68b868f38b0207f4c0829e93181f161 Mon Sep 17 00:00:00 2001 From: Sascha Date: Mon, 1 Mar 2021 18:55:01 +0100 Subject: Fix (hopefully) eslint error on node 14.x pipeline --- webui/src/components/Themer.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'webui') diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx index d831fca9..4adef24a 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 ( -- cgit 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/theme.ts | 21 --------------------- webui/src/themes/DefaultDark.ts | 12 ++++++++++++ webui/src/themes/DefaultLight.ts | 12 ++++++++++++ webui/src/themes/index.ts | 4 ++++ 4 files changed, 28 insertions(+), 21 deletions(-) delete mode 100644 webui/src/theme.ts create mode 100644 webui/src/themes/DefaultDark.ts create mode 100644 webui/src/themes/DefaultLight.ts create mode 100644 webui/src/themes/index.ts (limited to 'webui') diff --git a/webui/src/theme.ts b/webui/src/theme.ts deleted file mode 100644 index 67c24526..00000000 --- a/webui/src/theme.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { createMuiTheme } from '@material-ui/core/styles'; - -const defaultLightTheme = createMuiTheme({ - palette: { - type: 'light', - primary: { - main: '#263238', - }, - }, -}); - -const defaultDarkTheme = createMuiTheme({ - palette: { - type: 'dark', - primary: { - main: '#263238', - }, - }, -}); - -export { defaultLightTheme, defaultDarkTheme }; diff --git a/webui/src/themes/DefaultDark.ts b/webui/src/themes/DefaultDark.ts new file mode 100644 index 00000000..8d961caa --- /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/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; diff --git a/webui/src/themes/index.ts b/webui/src/themes/index.ts new file mode 100644 index 00000000..6c41c546 --- /dev/null +++ b/webui/src/themes/index.ts @@ -0,0 +1,4 @@ +import defaultDarkTheme from './DefaultDark'; +import defaultLightTheme from './DefaultLight'; + +export { defaultLightTheme, defaultDarkTheme }; -- 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/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(-) (limited to 'webui') diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index 0cc9b15a..f2f62b52 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 68473974..e4cd8e6a 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 58660b32..d4ce7f80 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 8d961caa..fe31f211 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 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 c8a5330bdeabbf2c83890ca096281cd09159cc10 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 3 Mar 2021 13:02:27 +0100 Subject: Fix padding around issue comments --- webui/src/pages/bug/Message.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'webui') diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index f2f62b52..d27f7a3d 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', }, })); -- cgit From b918c9facd157d1dfb24282f6309782a10e02123 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 3 Mar 2021 14:28:45 +0100 Subject: 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(-) (limited to 'webui') diff --git a/webui/src/index.tsx b/webui/src/index.tsx index a7f52448..d3591e1a 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') ); -- cgit From c24b7370f484e89662283a52b66e34940f972cf6 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 3 Mar 2021 16:26:57 +0100 Subject: Add Icon to "Close Issue"-button --- webui/src/components/CloseBugButton/CloseBugButton.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'webui') diff --git a/webui/src/components/CloseBugButton/CloseBugButton.tsx b/webui/src/components/CloseBugButton/CloseBugButton.tsx index 19f56cab..8d397c23 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 -- 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. --- .../components/BugTitleForm/.BugTitleForm.tsx.swp | Bin 0 -> 20480 bytes webui/src/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 (limited to 'webui') diff --git a/webui/src/components/BugTitleForm/.BugTitleForm.tsx.swp b/webui/src/components/BugTitleForm/.BugTitleForm.tsx.swp new file mode 100644 index 00000000..125bed11 Binary files /dev/null and b/webui/src/components/BugTitleForm/.BugTitleForm.tsx.swp differ diff --git a/webui/src/components/BugTitleForm/BugTitleForm.tsx b/webui/src/components/BugTitleForm/BugTitleForm.tsx index c47eab31..97025302 100644 --- a/webui/src/components/BugTitleForm/BugTitleForm.tsx +++ b/webui/src/components/BugTitleForm/BugTitleForm.tsx @@ -45,26 +45,9 @@ const useStyles = makeStyles((theme) => ({ 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 d4ce7f80..021f70b0 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() { {() => (