Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 2x 2x 2x 2x 2x 1x 1x 2x | import { IconButton } from '@mui/material';
import { FormatSize } from '@mui/icons-material';
import { useTheme } from '@mui/material/styles';
import { useSelector, useDispatch } from 'react-redux';
import { selectFontSize } from '@/store/reducers/settings/settings-selectors';
import { setFontSize } from '@/store/reducers/settings/settings-actions';
import { FontSize } from '@/enums/settings';
import { useIntl } from 'react-intl';
function FontSizeToggle() {
const fontSize = useSelector(selectFontSize);
const theme = useTheme();
const dispatch = useDispatch();
const intl = useIntl();
const handleToggle = () => {
const newFontSize = fontSize === FontSize.Large ? FontSize.Small : FontSize.Large;
dispatch(setFontSize(newFontSize));
};
return (
<IconButton
onClick={handleToggle}
aria-label={intl.formatMessage({ id: 'settings.fontSize.toggle' })}
data-testid="font-size-toggle-button"
sx={{
color: theme.palette.navigation.text,
backgroundColor: 'transparent',
position: 'relative',
'&:hover': {
backgroundColor: theme.palette.navigation.hover,
color: theme.palette.navigation.active,
},
}}
>
<FormatSize
sx={{
fontSize: fontSize === FontSize.Large ? '1.5rem' : '1.2rem',
}}
/>
</IconButton>
);
}
export default FontSizeToggle;
|