Small changes. Use align center properly I believe, although I may be…

… mistaken. And move the game up a little because it looks weird how it was.
aeum1016 · Apr 9, 2022 · 1775aae · 1775aae
1 parent d0c3768
commit 1775aae
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 31 deletions.
diff --git a/src/components/Home/Attempt/Attempt.js b/src/components/Home/Attempt/Attempt.js
@@ -105,17 +105,9 @@ const Attempt = ({ stats, toHome }) => {
         <StatCard title="Completed" value={stats.completed} units="Questions" />
         <StatCard title="Time" value={stats.time / 1000} units="seconds" />
       </div>
-      <Box
-        style={{
-          width: "180px",
-          marginLeft: "auto",
-          marginRight: "auto",
-        }}
-      >
-        <Typography variant="h6" fontSize="10pt" color="#bdbdbd">
-          Press Space or Enter to return
-        </Typography>
-      </Box>
+      <Typography variant="h6" fontSize="10pt" color="#bdbdbd" align="center">
+        Press Space or Enter to return
+      </Typography>
     </Paper>
   );
 };

diff --git a/src/components/Home/Game/Game.js b/src/components/Home/Game/Game.js
@@ -203,13 +203,7 @@ const Game = ({
 
   return (
     <>
-      <Box
-        style={{
-          width: "40px",
-          marginLeft: "auto",
-          marginRight: "auto",
-        }}
-      >
+      <div align="center">
         <IconButton
           aria-label="settings"
           onClick={toSettings}
@@ -218,7 +212,7 @@ const Game = ({
         >
           <SettingsOutlinedIcon className={classes.grey} />
         </IconButton>
-      </Box>
+      </div>
       <span>
         <Typography variant="h4" className={classes.grey}>
           Questions:{" "}

diff --git a/src/components/Home/Settings/Settings.js b/src/components/Home/Settings/Settings.js
@@ -45,17 +45,9 @@ const Settings = ({ settings, handleSettings, toHome }) => {
           <CalculateOutlinedIcon className={classes.grey} />
         </IconButton>
       </Box>
-      <Box
-        style={{
-          width: "180px",
-          marginLeft: "auto",
-          marginRight: "auto",
-        }}
-      >
-        <Typography variant="h6" fontSize="10pt" color="#bdbdbd">
-          Press Space or Enter to return
-        </Typography>
-      </Box>
+      <Typography variant="h6" fontSize="10pt" color="#bdbdbd" align="center">
+        Press Space or Enter to return
+      </Typography>
       <FormControl
         style={{
           width: "150px",

diff --git a/src/styles/game.js b/src/styles/game.js
@@ -3,7 +3,6 @@ import { grey } from "@mui/material/colors";
 
 export default makeStyles((theme) => ({
   grid: {
-    height: "240px",
     justifyContent: "center",
     alignItems: "center",
   },