From cad000d838b71c5d7fbe321270f61563dc4dcb70 Mon Sep 17 00:00:00 2001
From: "F. Mitjans" <fmitjans@protonmail.com>
Date: Thu, 1 Sep 2022 00:05:20 -0400
Subject: [PATCH] Make Bottom Bar scale with fontsize

---
 frontend/src/components/BottomBar.js | 27 +++++++++++++--------------
 frontend/src/components/HomePage.js  |  8 +++++---
 frontend/static/css/index.css        |  2 --
 3 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js
index 01ccc126..152c5c58 100644
--- a/frontend/src/components/BottomBar.js
+++ b/frontend/src/components/BottomBar.js
@@ -149,11 +149,15 @@ bottomBarDesktop =()=>{
     const { t } = this.props;
     var hasRewards = this.props.earnedRewards > 0 ? true: false;
     var hasOrder = this.props.activeOrderId > 0 & !this.state.profileShown & this.props.avatarLoaded ? true : false;
-
+    const fontSize = this.props.theme.typography.fontSize;
+    const fontSizeFactor = fontSize / 14; // default fontSize is 14
+    const typographyProps = {
+        primaryTypographyProps: {fontSize: fontSize},
+        secondaryTypographyProps: {fontSize: fontSize * 12/14}
+    }
     return(
-        <Paper elevation={6} style={{height:40}}>
+        <Paper elevation={6} style={{height: 40*fontSizeFactor, width: window.innerWidth}}>
                 <Grid container>
-
                     <Grid item xs={1.9}>
                         <div style={{display: this.showProfileButton() ? '':'none'}}>
                         <ListItemButton onClick={this.handleClickOpenProfile} >
@@ -162,7 +166,7 @@ bottomBarDesktop =()=>{
                                 title={(hasRewards ? t("You can claim satoshis!")+" ": "" )+
                                     (hasOrder ? t("You have an active order"):"")}
                                 >
-                                <ListItemAvatar sx={{ width: 30, height: 30 }} >
+                                <ListItemAvatar sx={{ width: 30*fontSizeFactor, height: 30*fontSizeFactor }} >
                                     <Badge badgeContent={(this.props.activeOrderId > 0 & !this.props.profileShown) ? "": null} color="primary">
                                     <Avatar className='flippedSmallAvatar' sx={{margin: 0, top: -13}}
                                         alt={this.props.nickname}
@@ -192,8 +196,7 @@ bottomBarDesktop =()=>{
                                 </IconButton>
                             </ListItemIcon>
                             <ListItemText
-                                primaryTypographyProps={{fontSize: '14px'}}
-                                secondaryTypographyProps={{fontSize: '12px'}}
+                                {...typographyProps}
                                 primary={this.state.num_public_buy_orders}
                                 secondary={t("Public Buy Orders")} />
                         </ListItem>
@@ -212,8 +215,7 @@ bottomBarDesktop =()=>{
                                 </IconButton>
                             </ListItemIcon>
                             <ListItemText
-                                primaryTypographyProps={{fontSize: '14px'}}
-                                secondaryTypographyProps={{fontSize: '12px'}}
+                                {...typographyProps}
                                 primary={this.state.num_public_sell_orders}
                                 secondary={t("Public Sell Orders")} />
                         </ListItem>
@@ -232,8 +234,7 @@ bottomBarDesktop =()=>{
                                 </IconButton>
                             </ListItemIcon>
                             <ListItemText
-                                primaryTypographyProps={{fontSize: '14px'}}
-                                secondaryTypographyProps={{fontSize: '12px'}}
+                                {...typographyProps}
                                 primary={this.state.active_robots_today}
                                 secondary={t("Today Active Robots")}/>
                         </ListItem>
@@ -248,8 +249,7 @@ bottomBarDesktop =()=>{
                                 </IconButton>
                             </ListItemIcon>
                             <ListItemText
-                                primaryTypographyProps={{fontSize: '14px'}}
-                                secondaryTypographyProps={{fontSize: '12px'}}
+                                {...typographyProps}
                                 primary={this.state.last_day_nonkyc_btc_premium+"%"}
                                 secondary={t("24h Avg Premium")} />
                         </ListItem>
@@ -264,8 +264,7 @@ bottomBarDesktop =()=>{
                                 </IconButton>
                             </ListItemIcon>
                             <ListItemText
-                                primaryTypographyProps={{fontSize: '14px'}}
-                                secondaryTypographyProps={{fontSize: '12px'}}
+                                {...typographyProps}
                                 primary={(this.state.maker_fee + this.state.taker_fee)*100}
                                 secondary={t("Trade Fee")} />
                         </ListItem>
diff --git a/frontend/src/components/HomePage.js b/frontend/src/components/HomePage.js
index 184e6d3d..7bf59fb6 100644
--- a/frontend/src/components/HomePage.js
+++ b/frontend/src/components/HomePage.js
@@ -40,9 +40,11 @@ export default class HomePage extends Component {
     }
 
     render() {
+        const fontSize = this.props.theme.typography.fontSize;
+        const fontSizeFactor = fontSize / 14; // default fontSize is 14
         return (
               <Router >
-                  <div className='appCenter'>
+                  <div className='appCenter' style={{height: window.innerHeight - 40*fontSizeFactor - 20, overflow:'auto'}}>
                     <Switch>
                         <Route exact path='/' render={(props) => <UserGenPage {...props} {...this.state} {...this.props} setAppState={this.setAppState}/>}/>
                         <Route path='/ref/:refCode' render={(props) => <UserGenPage {...props} {...this.state} {...this.props} setAppState={this.setAppState}/>}/>
@@ -51,8 +53,8 @@ export default class HomePage extends Component {
                         <Route path="/order/:orderId" render={(props) => <OrderPage {...props} {...this.state} {...this.props} setAppState={this.setAppState}/>}/>
                     </Switch>
                   </div>
-                  <div className='bottomBar'>
-                    <BottomBar redirectTo={this.redirectTo} {...this.state} setAppState={this.setAppState} />
+                  <div className='bottomBar' style={{height: `${40*fontSizeFactor}px`, width: window.innerWidth}}>
+                    <BottomBar redirectTo={this.redirectTo} {...this.state} {...this.props} setAppState={this.setAppState} />
                   </div>
               </Router>
           );
diff --git a/frontend/static/css/index.css b/frontend/static/css/index.css
index c9395a30..3df760db 100644
--- a/frontend/static/css/index.css
+++ b/frontend/static/css/index.css
@@ -61,8 +61,6 @@ input[type=number] {
 .bottomBar {
   position: fixed;
   bottom: 0;
-  width: 100%;
-  height: 40px;
 }
 
 .amboss{