Add navbar height variable and plug it to everything I've adjusted fo…

…r bottom height lately
micro-nova · Jan 7, 2025 · bc40327 · bc40327
1 parent ea63b91
commit bc40327
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 2 deletions.
diff --git a/web/src/App.jsx b/web/src/App.jsx
@@ -224,7 +224,7 @@ const App = ({ selectedPage }) => {
     return (
         <div className="app">
             <DisconnectedIcon />
-            <div style={{ paddingBottom: "56px" }}>
+            <div className="app-body">
                 <Page selectedPage={selectedPage} />
             </div>
             <MenuBar pageNumber={selectedPage} />

diff --git a/web/src/App.scss b/web/src/App.scss
@@ -20,3 +20,7 @@
   height: 100vh;
   background-color: green;
 }
+
+.app-body {
+  padding-bottom: general.$navbar-height
+}
diff --git a/web/src/components/MenuBar/MenuBar.scss b/web/src/components/MenuBar/MenuBar.scss
@@ -5,5 +5,6 @@
   z-index: 1; // The Marquees on player cards appeared above the MenuBar otherwise, the MenuBar needs to be on top of everything always
   bottom: 0;
   width: 100vw;
+  height: general.$navbar-height;
   @include general.low-shadow-up;
 }
diff --git a/web/src/components/StatusBars/StatusBar.jsx b/web/src/components/StatusBars/StatusBar.jsx
@@ -15,7 +15,7 @@ export default function StatusBar(props) {
 
     return(
         <Snackbar
-            style={{bottom: "60px"}}
+            className="snackbar"
             autoHideDuration={3000}
             anchorOrigin={{vertical: "bottom", horizontal: "left"}}
             open={open}

diff --git a/web/src/components/StatusBars/StatusBars.scss b/web/src/components/StatusBars/StatusBars.scss
@@ -30,3 +30,7 @@
   --right: translate(5px, 0px);
   animation: errorShake 0.5s 1; // Only animate once, reapplying the class will reapply the animation
 }
+
+.snackbar {
+  bottom: calc(general.$navbar-height + 4px)
+}
diff --git a/web/src/general.scss b/web/src/general.scss
@@ -19,6 +19,7 @@ $select-color-gray: #bdbdbd; // for preset used_last
 $mute-color: #dc3545;
 
 $page-header-height: 3rem;
+$navbar-height: 56px;
 
 // fonts
 @font-face {