aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--webui/src/components/Header/Header.tsx9
-rw-r--r--webui/src/components/Themer.tsx21
2 files changed, 12 insertions, 18 deletions
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>