feat(ui): Improve mobile controls for long screens

Hypfer · Apr 15, 2022 · f7f3f0d · f7f3f0d
1 parent b7b6344
commit f7f3f0d
Showing 1 changed file with 27 additions and 10 deletions.
diff --git a/frontend/src/controls/MobileControls.tsx b/frontend/src/controls/MobileControls.tsx
@@ -1,4 +1,4 @@
-import {Box, Divider, Grid, Icon, Paper, styled} from "@mui/material";
+import {Box, Grid, Icon, Paper, styled} from "@mui/material";
 import ControlsBody from "./ControlsBody";
 import {ReactComponent as Logo} from "../assets/icons/valetudo_logo_with_name.svg";
 import {ExpandLess as OpenIcon, ExpandMore as CloseIcon,} from "@mui/icons-material";
@@ -13,9 +13,20 @@ const MobileControls: React.FunctionComponent<{ open: boolean, setOpen: (newOpen
             fontSize: "2.5em"
         };
     });
-    const Sheet = styled(Box)(({ theme }) => {
+    const ControlsSheetContainer = styled(Box)(({ theme }) => {
+        const color = theme.palette.mode === "light" ? "#ededed" : "#242424";
+
         return {
-            backgroundColor: theme.palette.background.default,
+            backgroundColor: color,
+            borderColor: color,
+            borderTopWidth: "4px",
+            borderLeftWidth: "1px",
+            borderRightWidth: "1px",
+            borderBottomWidth: "1px",
+            borderStyle: "solid",
+            borderTopLeftRadius: "4px",
+            borderTopRightRadius: "4px",
+            paddingTop: "0.125rem",
         };
     });
 
@@ -24,6 +35,19 @@ const MobileControls: React.FunctionComponent<{ open: boolean, setOpen: (newOpen
         <Paper sx={{
             height: "100%"
         }}>
+            <ControlsSheetContainer
+                style={{
+                    display: open ? "" : "none",
+                    height: "calc(95% - 68px)",
+                }}
+            >
+                <Box p={1} sx={{
+                    overflow: open ? "scroll" : "hidden",
+                    height: "100%",
+                }}>
+                    <ControlsBody />
+                </Box>
+            </ControlsSheetContainer>
             <Grid
                 container
                 direction="row"
@@ -51,13 +75,6 @@ const MobileControls: React.FunctionComponent<{ open: boolean, setOpen: (newOpen
                     </Box>
                 </Grid>
             </Grid>
-            <Divider/>
-            <Sheet p={1} sx={{
-                overflow: open ? "scroll" : "hidden",
-                height: "calc(95% - 68px)"
-            }}>
-                <ControlsBody />
-            </Sheet>
         </Paper>
     );
 };