Refine Drawer layout

andHW · May 2, 2024 · 927b920 · 927b920
1 parent 082f583
commit 927b920
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 62 deletions.
diff --git a/src/pages/SandBox.tsx b/src/pages/SandBox.tsx
@@ -13,6 +13,7 @@ type SandBoxProps = PropsWithChildren<{
 
 function SandBox({ title = defaultTitle, icon = defaultIcon, children, ...props }: SandBoxProps) {
   return(
+    //TODO: fix the tapes, make the position more responsive to different box size
     <Box sx={{ zIndex: 7853, display: 'flex', flexDirection: 'column', justifyItems:'center', alignItems:'center', width: '100%'}} {...props}>
       <Paper elevation={6} sx={{margin: 1, padding: 2, paddingLeft: 12, paddingRight: 12 }}>
         <Box style={{position:'relative', top: '-48px', left: '-96px'}}>

diff --git a/src/pages/drawer/Drawer.tsx b/src/pages/drawer/Drawer.tsx
@@ -1,20 +1,9 @@
-import { Box, styled } from "@mui/material";
 import DrawerConfig from "./DrawerConfig";
 import { DrawerGameStage } from "../../Redux/DrawerGameStates";
 import { useSelector } from "react-redux";
 import { RootState } from "../../Redux/store";
 import SelectWord from "./SelectWord";
 
-const StyledBox = styled(Box)({
-  display: "flex",
-  justifySelf: "center",
-  alignSelf: "center",
-  justifyContent: "space-evenly",
-  alignItems: "center",
-  width: "100%",
-  flexDirection: "column",
-});
-
 const MIN_TIME_LIMIT = 1;
 const MAX_TIME_LIMIT = 300;
 
@@ -30,9 +19,7 @@ function getDrawerStage(stage : DrawerGameStage) {
 function Drawer() {
   const drawerGameState = useSelector((state: RootState) => state.drawerGameStates);
   return (
-    <StyledBox>
-      {getDrawerStage(drawerGameState.gameStage)}
-    </StyledBox>
+    getDrawerStage(drawerGameState.gameStage)
   );
 }
 

diff --git a/src/pages/drawer/DrawerConfig.tsx b/src/pages/drawer/DrawerConfig.tsx
@@ -1,21 +1,13 @@
 import React, { useState } from 'react';
-import { Stack, Avatar, Typography, TextField, Button, styled, Box } from '@mui/material';
+import { Stack, Avatar, Typography, TextField, Button, Paper } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
+import BrushIcon from '@mui/icons-material/Brush';
 
 import { useDispatch, useSelector } from 'react-redux';
 import { DrawerGameStage } from '../../Redux/DrawerGameStates';
 import { setGameStage, setSeed as setRSeed, setTimeLimit as setRTimeLimit } from '../../Redux/DrawerGameStates';
 import { RootState } from '../../Redux/store';
-
-const StyledBox = styled(Box)({
-  display: "flex",
-  justifySelf: "center",
-  alignSelf: "center",
-  justifyContent: "space-evenly",
-  alignItems: "center",
-  width: "100%",
-  flexDirection: "column",
-});
+import SandBox from '../SandBox';
 
 interface ConfigsProps {
   minTimeLimit: number;
@@ -45,44 +37,46 @@ const DrawerConfig: React.FC<ConfigsProps> = ({minTimeLimit: MIN_TIME_LIMIT, max
   }
 
   return (
-    <StyledBox>
-      <Stack spacing={2} alignItems="center" width={250}>
-        <Avatar sx={{ bgcolor: 'secondary.main' }}>
-          <SettingsIcon/>
-        </Avatar>
-        <Typography variant="h4">Settings</Typography>
-        <TextField
-          fullWidth label="🎰 Seed" variant="outlined" required={true}
-          value={seed}
-          onChange={(event) => setSeed(event.target.value)}
-        />
-        <TextField
-          fullWidth
-          label="⏳ Time Limit (seconds)"
-          variant="outlined"
-          required
-          type="number"
-          inputProps={{ min: MIN_TIME_LIMIT.toString(), max: MAX_TIME_LIMIT.toString() }}
-          error={Boolean(timeLimitError)}
-          helperText={timeLimitError}
-          value={timeLimit}
-          onChange={(event) => {
-            const value = Number(event.target.value);
-            const error = validateTimeLimit(value);
-            setTimeLimitError(error);
-            if (!error) {
-              setTimeLimit(value);
-            }
-          }}
-        />
-        <Button
-          variant="contained" color="primary" fullWidth
-          onClick={handleGameStart}
-        >
+    <SandBox title='Drawer' icon={<BrushIcon/>}>
+      <Paper elevation={3} sx={{marginTop: 4, padding: 2 }}>
+        <Stack spacing={2} alignItems="center" width={250}>
+          <Avatar sx={{ bgcolor: 'secondary.main' }}>
+            <SettingsIcon/>
+          </Avatar>
+          <Typography variant="h4">Settings</Typography>
+          <TextField
+            fullWidth label="🎰 Seed" variant="outlined" required={true}
+            value={seed}
+            onChange={(event) => setSeed(event.target.value)}
+          />
+          <TextField
+            fullWidth
+            label="⏳ Time Limit (seconds)"
+            variant="outlined"
+            required
+            type="number"
+            inputProps={{ min: MIN_TIME_LIMIT.toString(), max: MAX_TIME_LIMIT.toString() }}
+            error={Boolean(timeLimitError)}
+            helperText={timeLimitError}
+            value={timeLimit}
+            onChange={(event) => {
+              const value = Number(event.target.value);
+              const error = validateTimeLimit(value);
+              setTimeLimitError(error);
+              if (!error) {
+                setTimeLimit(value);
+              }
+            }}
+          />
+          <Button
+            variant="contained" color="primary" fullWidth
+            onClick={handleGameStart}
+          >
         Game on!
-        </Button>
-      </Stack>
-    </StyledBox>
+          </Button>
+        </Stack>
+      </Paper>
+    </SandBox>
   );
 };