Simplify layouts with Box

grubersjoe · Jun 6, 2023 · 7a99fb7 · 7a99fb7
1 parent 1c397f8
commit 7a99fb7
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 67 deletions.
diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
@@ -1,15 +1,17 @@
-import { CircularProgress, Grid } from '@mui/material';
+import { Box, CircularProgress } from '@mui/material';
 import React, { FunctionComponent } from 'react';
 
 const Spinner: FunctionComponent = () => (
-  <Grid
-    container
-    alignItems="center"
-    justifyContent="center"
-    sx={{ pt: '2rem' }}
+  <Box
+    sx={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      pt: 4,
+    }}
   >
     <CircularProgress />
-  </Grid>
+  </Box>
 );
 
 export default Spinner;
diff --git a/src/pages/AddMatch.tsx b/src/pages/AddMatch.tsx
@@ -5,7 +5,6 @@ import {
   CircularProgress,
   Container,
   FormControlLabel,
-  Grid,
   TextField,
   Typography,
 } from '@mui/material';
@@ -137,6 +136,7 @@ const AddMatch: FunctionComponent = () => {
           <Box mb={3}>
             <DateTimePicker date={date} onChange={setDate} />
           </Box>
+
           <Box mb={3}>
             <TextField
               type="number"
@@ -152,6 +152,7 @@ const AddMatch: FunctionComponent = () => {
               fullWidth
             />
           </Box>
+
           <Box mb={3}>
             <TextField
               label="Beschreibung"
@@ -163,6 +164,7 @@ const AddMatch: FunctionComponent = () => {
               fullWidth
             />
           </Box>
+
           <FormControlLabel
             control={
               <Checkbox
@@ -172,37 +174,24 @@ const AddMatch: FunctionComponent = () => {
             }
             label="Selbst mitspielen"
           />
-          <Box my={3}>
-            <Grid container direction="row" spacing={2}>
-              <Grid item xs>
-                <Button
-                  onClick={() => window.history.go(-1)}
-                  disabled={loading}
-                  fullWidth
-                >
-                  Abbrechen
-                </Button>
-              </Grid>
-              <Grid item xs>
-                <Button
-                  type="submit"
-                  color="primary"
-                  disabled={!game?.name || !isValid(date) || loading}
-                  startIcon={
-                    loading ? (
-                      <CircularProgress
-                        color="inherit"
-                        size={18}
-                        thickness={3}
-                      />
-                    ) : null
-                  }
-                  fullWidth
-                >
-                  Hinzufügen
-                </Button>
-              </Grid>
-            </Grid>
+
+          <Box my={3} sx={{ display: 'flex', gap: 2, justifyContent: 'end' }}>
+            <Button onClick={() => window.history.go(-1)} disabled={loading}>
+              Abbrechen
+            </Button>
+
+            <Button
+              type="submit"
+              color="primary"
+              disabled={!game?.name || !isValid(date) || loading}
+              startIcon={
+                loading ? (
+                  <CircularProgress color="inherit" size={18} thickness={3} />
+                ) : null
+              }
+            >
+              Hinzufügen
+            </Button>
           </Box>
         </form>
       </Container>

diff --git a/src/pages/EditMatch.tsx b/src/pages/EditMatch.tsx
@@ -3,7 +3,6 @@ import {
   Button,
   CircularProgress,
   Container,
-  Grid,
   TextField,
   Typography,
 } from '@mui/material';
@@ -202,33 +201,23 @@ const EditForm = (props: { match: Match }) => {
             fullWidth
           />
         </Box>
-        <Box my={3}>
-          <Grid container direction="row" spacing={2}>
-            <Grid item xs>
-              <Button
-                onClick={() => window.history.go(-1)}
-                disabled={loading}
-                fullWidth
-              >
-                Abbrechen
-              </Button>
-            </Grid>
-            <Grid item xs>
-              <Button
-                type="submit"
-                color="primary"
-                disabled={!match.game?.name || loading}
-                startIcon={
-                  loading ? (
-                    <CircularProgress color="inherit" size={22} thickness={3} />
-                  ) : null
-                }
-                fullWidth
-              >
-                Speichern
-              </Button>
-            </Grid>
-          </Grid>
+        <Box my={3} sx={{ display: 'flex', gap: 2, justifyContent: 'end' }}>
+          <Button onClick={() => window.history.go(-1)} disabled={loading}>
+            Abbrechen
+          </Button>
+
+          <Button
+            type="submit"
+            color="primary"
+            disabled={!match.game?.name || loading}
+            startIcon={
+              loading ? (
+                <CircularProgress color="inherit" size={22} thickness={3} />
+              ) : null
+            }
+          >
+            Speichern
+          </Button>
         </Box>
       </form>
     </>