Remove unneeded MUI components

1 files changed, 48 insertions, 53 deletions

diff --git a/src/components/RsvpForm.tsx b/src/components/RsvpForm.tsx
index 232700b..d7efecf 100644
--- a/src/components/RsvpForm.tsx
+++ b/src/components/RsvpForm.tsx
@@ -1,5 +1,4 @@
 import {
-  Box,
   Button,
   Container,
   FormControl,
@@ -9,7 +8,6 @@ import {
   Radio,
   RadioGroup,
   TextField,
-  Typography
 } from '@mui/material';
 import { useForm, Controller } from 'react-hook-form';
 import { useOutletContext } from "react-router-dom";
@@ -39,44 +37,41 @@ function RsvpForm() {
     <Container component="form" maxWidth="sm" noValidate onSubmit={handleSubmit(onSubmit)}>
       <Grid container spacing={2} sx={{ mt: 8 }}>
         <Grid item xs={12}>
-          <Typography paragraph>
+          <p>
             Please RSVP for the wedding by March 10, 2025.
             The ceremony will commence at 3 pm on April 26 in ...
             The reception will follow at 5 pm in A Venue on the Ridge.
-          </Typography>
+          </p>
         </Grid>
         <Grid item xs={12}>
-          <FormControl>
-            <Box
-              sx={{ display: "flex",
-              flexDirection: "row",
-              alignItems: "center",
-              ml: { xs: 6, lg: 18 } }}
-            >
-              <FormLabel sx={{ mr: 2 }} error={!!errors.attendance} required>
-                Will you attend?
-              </FormLabel>
-              <Controller
-                name="attendance"
-                control={control}
-                rules={{ required: true }}
-                render={({ field }) => (
-                  <RadioGroup {...field} row>
-                    <FormControlLabel
-                      value="yes"
-                      control={<Radio />}
-                      label="Yes"
-                    />
-                    <FormControlLabel
-                      value="no"
-                      control={<Radio />}
-                      label="No"
-                    />
-                  </RadioGroup>
-                )}
-              />
-            </Box>
-          </FormControl>
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <FormControl>
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                <FormLabel sx={{ mr: 2 }} error={!!errors.attendance} required>
+                  Will you attend?
+                </FormLabel>
+                <Controller
+                  name="attendance"
+                  control={control}
+                  rules={{ required: true }}
+                  render={({ field }) => (
+                    <RadioGroup {...field} row>
+                      <FormControlLabel
+                        value="yes"
+                        control={<Radio />}
+                        label="Yes"
+                      />
+                      <FormControlLabel
+                        value="no"
+                        control={<Radio />}
+                        label="No"
+                      />
+                    </RadioGroup>
+                  )}
+                />
+              </div>
+            </FormControl>
+          </div>
         </Grid>
         <Grid item xs={12} md={6} lg={6}>
           <TextField
@@ -86,11 +81,12 @@ function RsvpForm() {
             error={!!errors.email}
             helperText={errors.email?.message}
             required
-            {...register("email",
-              { required: "This field is required",
+            {...register('email',
+              { required: 'This field is required',
                 pattern: { value: /\S+@\S+\.\S+/,
-                  message: "Please enter a valid email address" }
-              })}
+                  message: 'Please enter a valid email address' }
+              }
+            )}
           />
         </Grid>
         <Grid item xs={12} md={6} lg={6}>
@@ -102,10 +98,12 @@ function RsvpForm() {
             error={!!errors.partySize}
             helperText={errors.partySize?.message}
             required
-            {...register("partySize",
-              { required: "This field is required",
-                min: { value: 1, message: "Please enter a positive integer" },
-                max: { value: 9, message: "Please enter an integer less than 10" } })}
+            {...register('partySize',
+              { required: 'This field is required',
+                min: { value: 1, message: 'Please enter a positive integer' },
+                max: { value: 9, message: 'Please enter an integer less than 10' }
+              }
+            )}
           />
         </Grid>
         <Grid item xs={12}>
@@ -115,22 +113,19 @@ function RsvpForm() {
             fullWidth
             multiline
             rows={3}
-            {...register("message")}
+            {...register('message')}
           />
         </Grid>
         <Grid item xs={12}>
-          <Box
-            sx={{ display: "flex",
-            flexDirection: "column",
-            alignItems: "center" }}
+          <div
+            style={{ display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center' }}
           >
-            <Button
-              type="submit"
-              variant="contained"
-            >
+            <Button type="submit" variant="contained">
               RSVP
             </Button>
-          </Box>
+          </div>
         </Grid>
       </Grid>
     </Container>