Update formatting on forms

1 files changed, 53 insertions, 68 deletions

diff --git a/src/components/RsvpForm.tsx b/src/components/RsvpForm.tsx
index 7beb21a..8c67139 100644
--- a/src/components/RsvpForm.tsx
+++ b/src/components/RsvpForm.tsx
@@ -1,5 +1,7 @@
 import {
+  Box,
   Button,
+  Container,
   FormControl,
   FormControlLabel,
   FormLabel,
@@ -17,17 +19,15 @@ function RsvpForm() {
   const [updateGuest] = useUpdateGuestMutation();
   const guest: Guest = useOutletContext();
 
-  const { register, handleSubmit, control,
-  formState: { errors } } = useForm({
+  const { register, handleSubmit, control } = useForm({
     defaultValues: {
       id: guest?.id,
       firstName: guest?.firstName,
       lastName: guest?.lastName,
       attendance: '',
-      meal: '',
-      restrictions: '',
-      plusOne: '',
-      advice: ''
+      email: '',
+      partySize: 1,
+      message: ''
     }
   });
 
@@ -36,8 +36,8 @@ function RsvpForm() {
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Grid container spacing={2}>
+    <Container component="form" maxWidth="sm" onSubmit={handleSubmit(onSubmit)}>
+      <Grid container spacing={2} sx={{ mt: 8 }}>
         <Grid item xs={12} md={4} lg={4}>
           <Typography>Date: April 14, 2025</Typography>
         </Grid>
@@ -47,82 +47,67 @@ function RsvpForm() {
         <Grid item xs={12} md={4} lg={4}>
           <Typography>RSVP Deadline: </Typography>
         </Grid>
-        <Grid item xs={12} md={4} lg={4}>
-          <FormControl>
-            { errors && <Typography>{errors.attendance?.message}</Typography> }
-            <FormLabel>Will you attend our wedding?</FormLabel>
-            <Controller
-              name="attendance"
-              control={control}
-              rules={{ required: "Are you attending?" }}
-              render={({ field }) => (
-                <RadioGroup {...field}>
-                  <FormControlLabel
-                    value="yes"
-                    control={<Radio />}
-                    label="Yes"
-                  />
-                  <FormControlLabel
-                    value="no"
-                    control={<Radio />}
-                    label="No"
-                  />
-                </RadioGroup>
-              )}
-            />
-          </FormControl>
-        </Grid>
-        <Grid item xs={12} md={4} lg={4}>
-          <FormControl>
-            { errors && <Typography>{errors.meal?.message}</Typography> }
-            <FormLabel>Meal Preference</FormLabel>
-            <Controller
-              name="meal"
-              control={control}
-              rules={{ required: "What would you like to eat?" }}
-              render={({ field }) => (
-                <RadioGroup {...field}>
-                  <FormControlLabel
-                    value="beef"
-                    control={<Radio />}
-                    label="Beef"
-                  />
-                  <FormControlLabel
-                    value="chicken"
-                    control={<Radio />}
-                    label="Chicken"
-                  />
-                </RadioGroup>
-              )}
-            />
+        <Grid item lg={12}>
+          <FormControl sx={{ ml: 8 }}>
+            <Grid container>
+              <FormLabel sx={{ m: 2 }}>Will you attend our wedding?</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>
+                )}
+              />
+            </Grid>
           </FormControl>
         </Grid>
-        <Grid item xs={12} md={4} lg={4}>
+        <Grid item xs={12} md={6} lg={6}>
           <TextField
-            label="Dietary Restrictions"
+            label="Email"
             variant="outlined"
-            {...register("restrictions")}
+            fullWidth
+            required
+            {...register("email")}
           />
         </Grid>
-        <Grid item xs={12} md={4} lg={4}>
+        <Grid item xs={12} md={6} lg={6}>
           <TextField
-            label="Plus-One"
+            label="Party Size"
             variant="outlined"
-            {...register("plusOne")}
+            fullWidth
+            required
+            {...register("partySize")}
           />
         </Grid>
-        <Grid item xs={12} md={4} lg={4}>
+        <Grid item xs={12}>
           <TextField
-            label="Marriage Advice"
+            label="Message to the couple"
             variant="outlined"
-            {...register("advice")}
+            fullWidth
+            multiline
+            rows={3}
+            {...register("message")}
           />
         </Grid>
-        <Grid item>
-          <Button type="submit" variant="contained">Submit</Button>
+        <Grid item xs={12}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+            <Button type="submit" variant="contained">RSVP</Button>
+          </Box>
         </Grid>
       </Grid>
-    </form>
+    </Container>
   );
 }