MichaelMure/git-bug
1
1
Fork 0
mirror of https://github.com/MichaelMure/git-bug.git synced 2024-12-14 17:51:44 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #666 from GlancingMind/fix-themeswitcher-icon-color

Browse Source 
WebUI: Fix theme switcher icon color in release
This commit is contained in:
Michael Muré 2021-05-09 11:15:52 +02:00 committed by GitHub
commit a75b27c4c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
webui/src/components/Header/Header.tsx
View File

@ -6,7 +6,7 @@ import Tab, { TabProps } from '@material-ui/core/Tab';
import Tabs from '@material-ui/core/Tabs'; import Tabs from '@material-ui/core/Tabs';
import Toolbar from '@material-ui/core/Toolbar'; import Toolbar from '@material-ui/core/Toolbar';
import Tooltip from '@material-ui/core/Tooltip/Tooltip'; 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 CurrentIdentity from '../Identity/CurrentIdentity';
import { LightSwitch } from '../Themer'; import { LightSwitch } from '../Themer';
@ -30,7 +30,8 @@ const useStyles = makeStyles((theme) => ({
alignItems: 'center', alignItems: 'center',
}, },
lightSwitch: { lightSwitch: {
padding: '0 20px', marginRight: '20px',
color: fade(theme.palette.primary.contrastText, 0.5),
}, },
logo: { logo: {
height: '42px', height: '42px',
@ -85,9 +86,7 @@ function Header() {
git-bug git-bug
</Link> </Link>
<div className={classes.filler} /> <div className={classes.filler} />
<div className={classes.lightSwitch}> <LightSwitch className={classes.lightSwitch} />
<LightSwitch />
</div>
<CurrentIdentity /> <CurrentIdentity />
</Toolbar> </Toolbar>
</AppBar> </AppBar>

21
webui/src/components/Themer.tsx
View File

@ -1,35 +1,30 @@
import React, { createContext, useContext, useState } from 'react'; import React, { createContext, useContext, useState } from 'react';
import { fade, ThemeProvider } from '@material-ui/core'; import { ThemeProvider } from '@material-ui/core';
import IconButton from '@material-ui/core/IconButton/IconButton'; import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip/Tooltip'; import Tooltip from '@material-ui/core/Tooltip';
import { Theme } from '@material-ui/core/styles'; import { Theme } from '@material-ui/core/styles';
import { NightsStayRounded, WbSunnyRounded } from '@material-ui/icons'; import { NightsStayRounded, WbSunnyRounded } from '@material-ui/icons';
import { makeStyles } from '@material-ui/styles';
const ThemeContext = createContext({ const ThemeContext = createContext({
toggleMode: () => {}, toggleMode: () => {},
mode: '', mode: '',
}); });
const useStyles = makeStyles((theme: Theme) => ({ type LightSwitchProps = {
iconButton: { className?: string;
color: fade(theme.palette.primary.contrastText, 0.5), };
}, const LightSwitch = ({ className }: LightSwitchProps) => {
}));
const LightSwitch = () => {
const { mode, toggleMode } = useContext(ThemeContext); const { mode, toggleMode } = useContext(ThemeContext);
const nextMode = mode === 'light' ? 'dark' : 'light'; const nextMode = mode === 'light' ? 'dark' : 'light';
const description = `Switch to ${nextMode} theme`; const description = `Switch to ${nextMode} theme`;
const classes = useStyles();
return ( return (
<Tooltip title={description}> <Tooltip title={description}>
<IconButton <IconButton
onClick={toggleMode} onClick={toggleMode}
aria-label={description} aria-label={description}
className={classes.iconButton} className={className}
> >
{mode === 'light' ? <WbSunnyRounded /> : <NightsStayRounded />} {mode === 'light' ? <WbSunnyRounded /> : <NightsStayRounded />}
</IconButton> </IconButton>