diff options
Diffstat (limited to 'webui')
-rw-r--r-- | webui/package-lock.json | 12 | ||||
-rw-r--r-- | webui/src/components/Header/Header.tsx | 9 | ||||
-rw-r--r-- | webui/src/components/Themer.tsx | 21 |
3 files changed, 18 insertions, 24 deletions
diff --git a/webui/package-lock.json b/webui/package-lock.json index aaf8bac7..facd20d0 100644 --- a/webui/package-lock.json +++ b/webui/package-lock.json @@ -15221,9 +15221,9 @@ } }, "lodash": { - "version": "4.17.20", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", - "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==" + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "lodash._reinterpolate": { "version": "3.0.0", @@ -21989,9 +21989,9 @@ } }, "url-parse": { - "version": "1.4.7", - "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz", - "integrity": "sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==", + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz", + "integrity": "sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==", "requires": { "querystringify": "^2.1.1", "requires-port": "^1.0.0" diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx index 56b35968..866e52db 100644 --- a/webui/src/components/Header/Header.tsx +++ b/webui/src/components/Header/Header.tsx @@ -6,7 +6,7 @@ import Tab, { TabProps } from '@material-ui/core/Tab'; import Tabs from '@material-ui/core/Tabs'; import Toolbar from '@material-ui/core/Toolbar'; import Tooltip from '@material-ui/core/Tooltip/Tooltip'; -import { makeStyles } from '@material-ui/core/styles'; +import { fade, makeStyles } from '@material-ui/core/styles'; import CurrentIdentity from '../Identity/CurrentIdentity'; import { LightSwitch } from '../Themer'; @@ -30,7 +30,8 @@ const useStyles = makeStyles((theme) => ({ alignItems: 'center', }, lightSwitch: { - padding: '0 20px', + marginRight: '20px', + color: fade(theme.palette.primary.contrastText, 0.5), }, logo: { height: '42px', @@ -85,9 +86,7 @@ function Header() { git-bug </Link> <div className={classes.filler} /> - <div className={classes.lightSwitch}> - <LightSwitch /> - </div> + <LightSwitch className={classes.lightSwitch} /> <CurrentIdentity /> </Toolbar> </AppBar> diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx index b4877974..edf1f352 100644 --- a/webui/src/components/Themer.tsx +++ b/webui/src/components/Themer.tsx @@ -1,35 +1,30 @@ import React, { createContext, useContext, useState } from 'react'; -import { fade, ThemeProvider } from '@material-ui/core'; -import IconButton from '@material-ui/core/IconButton/IconButton'; -import Tooltip from '@material-ui/core/Tooltip/Tooltip'; +import { ThemeProvider } from '@material-ui/core'; +import IconButton from '@material-ui/core/IconButton'; +import Tooltip from '@material-ui/core/Tooltip'; import { Theme } from '@material-ui/core/styles'; import { NightsStayRounded, WbSunnyRounded } from '@material-ui/icons'; -import { makeStyles } from '@material-ui/styles'; const ThemeContext = createContext({ toggleMode: () => {}, mode: '', }); -const useStyles = makeStyles((theme: Theme) => ({ - iconButton: { - color: fade(theme.palette.primary.contrastText, 0.5), - }, -})); - -const LightSwitch = () => { +type LightSwitchProps = { + className?: string; +}; +const LightSwitch = ({ className }: LightSwitchProps) => { const { mode, toggleMode } = useContext(ThemeContext); const nextMode = mode === 'light' ? 'dark' : 'light'; const description = `Switch to ${nextMode} theme`; - const classes = useStyles(); return ( <Tooltip title={description}> <IconButton onClick={toggleMode} aria-label={description} - className={classes.iconButton} + className={className} > {mode === 'light' ? <WbSunnyRounded /> : <NightsStayRounded />} </IconButton> |