diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js index 5d6bdbfc..b2a1f889 100644 --- a/frontend/src/components/App.js +++ b/frontend/src/components/App.js @@ -13,6 +13,7 @@ import i18n from "./i18n"; import DarkModeIcon from '@mui/icons-material/DarkMode'; import LightModeIcon from '@mui/icons-material/LightMode'; import SchoolIcon from '@mui/icons-material/School'; +import ZoomOutIcon from '@mui/icons-material/ZoomOut'; export default class App extends Component { constructor(props) { @@ -20,10 +21,11 @@ export default class App extends Component { this.state = { dark: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches, openLearn: false, + theme: {typography: { fontSize: 14 }}, } } - lightTheme = createTheme({}); + lightTheme = createTheme ({}); darkTheme = createTheme({ palette: { @@ -34,13 +36,25 @@ export default class App extends Component { }, }); + onZoomOutClick = () => { + this.setState(({theme}) => ({ + theme: { + ...theme, + typography: { + fontSize: this.state.theme.typography.fontSize - 1, + }, + } + })); + } + render() { return ( - + this.setState({openLearn:false})}/> + this.setState({openLearn:true})}> this.setState({dark:!this.state.dark})}> {this.state.dark ? :}