Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Improve settings toggle button styling #23754

Merged
merged 5 commits into from
Nov 30, 2020
Merged

[docs] Improve settings toggle button styling #23754

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3414659
[docs] Improve settings toggle button styling
mbrookes Nov 28, 2020
49d11a8
prettier
mbrookes Nov 28, 2020
c8d9a42
lint
mbrookes Nov 28, 2020
f6fe445
Add hover opacity
mbrookes Nov 28, 2020
626bbc7
make hover bacbground color same as active
mbrookes Nov 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 16 additions & 10 deletions docs/src/modules/components/AppSettingsDrawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { withStyles, useTheme } from '@material-ui/core/styles';
import { alpha, withStyles, useTheme } from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import Drawer from '@material-ui/core/Drawer';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
Expand All @@ -15,7 +16,6 @@ import SettingsBrightnessIcon from '@material-ui/icons/SettingsBrightness';
import FormatTextdirectionLToRIcon from '@material-ui/icons/FormatTextdirectionLToR';
import FormatTextdirectionRToLIcon from '@material-ui/icons/FormatTextdirectionRToL';
import Link from 'docs/src/modules/components/Link';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { useTranslate } from 'docs/src/modules/utils/i18n';
import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
import { getCookie } from 'docs/src/modules/utils/helpers';
Expand All @@ -32,10 +32,16 @@ const styles = (theme) => ({
width: '100%',
},
toggleButton: {
flexGrow: 1,
width: '100%',
color: theme.palette.text.secondary,
'&$toggleButtonSelected': {
color: `${theme.palette.primary.main}`,
backgroundColor: `${alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)}`,
},
},
toggleButtonSelected: {},
icon: {
margin: '0 4px',
marginRight: 8,
},
});

Expand All @@ -44,9 +50,9 @@ function AppSettingsDrawer(props) {
const t = useTranslate();
const theme = useTheme();
const changeTheme = useChangeTheme();
const [mode, setMode] = React.useState(getCookie('paletteMode') || 'system');
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
const preferredMode = prefersDarkMode ? 'dark' : 'light';
const [mode, setMode] = React.useState(getCookie('paletteMode') || 'system');

const handleChangeThemeMode = (event, paletteMode) => {
if (paletteMode === null) {
Expand Down Expand Up @@ -105,7 +111,7 @@ function AppSettingsDrawer(props) {
aria-label={t('settings.light')}
data-ga-event-category="settings"
data-ga-event-action="light"
className={classes.toggleButtonGroup}
classes={{ root: classes.toggleButton, selected: classes.toggleButtonSelected }}
>
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'center' }}>
<Brightness7Icon className={classes.icon} />
Expand All @@ -117,7 +123,7 @@ function AppSettingsDrawer(props) {
aria-label={t('settings.system')}
data-ga-event-category="settings"
data-ga-event-action="system"
className={classes.toggleButtonGroup}
classes={{ root: classes.toggleButton, selected: classes.toggleButtonSelected }}
>
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'center' }}>
<SettingsBrightnessIcon className={classes.icon} />
Expand All @@ -129,7 +135,7 @@ function AppSettingsDrawer(props) {
aria-label={t('settings.dark')}
data-ga-event-category="settings"
data-ga-event-action="dark"
className={classes.toggleButtonGroup}
classes={{ root: classes.toggleButton, selected: classes.toggleButtonSelected }}
>
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'center' }}>
<Brightness4Icon className={classes.icon} />
Expand All @@ -152,7 +158,7 @@ function AppSettingsDrawer(props) {
aria-label={t('settings.light')}
data-ga-event-category="settings"
data-ga-event-action="ltr"
className={classes.toggleButtonGroup}
classes={{ root: classes.toggleButton, selected: classes.toggleButtonSelected }}
>
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'center' }}>
<FormatTextdirectionLToRIcon className={classes.icon} />
Expand All @@ -164,7 +170,7 @@ function AppSettingsDrawer(props) {
aria-label={t('settings.system')}
data-ga-event-category="settings"
data-ga-event-action="rtl"
className={classes.toggleButtonGroup}
classes={{ root: classes.toggleButton, selected: classes.toggleButtonSelected }}
>
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'center' }}>
<FormatTextdirectionRToLIcon className={classes.icon} />
Expand Down