From e2455ec3f9fac1a16221a2b273fd5c82d05088e8 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Fri, 19 Aug 2022 14:01:20 -0700
Subject: [PATCH] Add demonstratory zoom out button

---
 frontend/src/components/App.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

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 (
       <Suspense fallback="loading language">
       <I18nextProvider i18n={i18n}>
-        <ThemeProvider theme={this.state.dark ? this.darkTheme : this.lightTheme}>
+        <ThemeProvider theme={this.state.dark ? this.darkTheme : createTheme(this.state.theme)}>
           <CssBaseline/>
           <LearnDialog open={this.state.openLearn} onClose={()=> this.setState({openLearn:false})}/>
+          <IconButton sx={{position:'fixed',right:'68px'}} onClick={this.onZoomOutClick}><ZoomOutIcon/></IconButton>
           <IconButton sx={{position:'fixed',right:'34px'}} onClick={()=> this.setState({openLearn:true})}><SchoolIcon/></IconButton>
           <IconButton sx={{position:'fixed',right:'0px'}} onClick={()=>this.setState({dark:!this.state.dark})}>
             {this.state.dark ? <LightModeIcon/>:<DarkModeIcon/>}