diff options
author | Michael Hunteman <michael@huntm.net> | 2024-08-02 14:42:14 -0700 |
---|---|---|
committer | Michael Hunteman <michael@huntm.net> | 2024-08-02 14:42:14 -0700 |
commit | 9a3c5e1781de7f05e3d54fb68d71e58b215709e0 (patch) | |
tree | 4f18ceb7ffa497c8dbf1eaddf98224b99c91a75c /client/src/components/RsvpForm.tsx | |
parent | 8007b05805d5947ef008a79885ba0b890f67c25d (diff) |
Update spacing
Diffstat (limited to 'client/src/components/RsvpForm.tsx')
-rw-r--r-- | client/src/components/RsvpForm.tsx | 297 |
1 files changed, 154 insertions, 143 deletions
diff --git a/client/src/components/RsvpForm.tsx b/client/src/components/RsvpForm.tsx index 708a1fb..7c1f7b5 100644 --- a/client/src/components/RsvpForm.tsx +++ b/client/src/components/RsvpForm.tsx @@ -111,149 +111,160 @@ function RsvpForm() { noValidate onSubmit={handleSubmit(onSubmit)} > - <Grid container spacing={2} sx={{ width: 600, mt: 16, mx: 0.5 }}> - <Grid item xs={12}> - <p> - Please RSVP for the wedding by March 10, 2025. The ceremony will - commence at 3 PM on April 26 in Divine Shepherd. The reception will - follow at 5 PM in A Venue on the Ridge. - </p> - </Grid> - <Grid item xs={12}> - <div style={{ display: 'flex', justifyContent: 'center' }}> - <FormControl> - <div style={{ display: 'flex', alignItems: 'center' }}> - <FormLabel sx={{ mr: 2 }} error={!!errors.attendance} required> - Attendance - </FormLabel> - <Controller - name="attendance" - control={control} - rules={{ required: true }} - render={({ field }) => ( - <RadioGroup {...field} row> - <FormControlLabel - value="accept" - control={<Radio />} - label="Accept" - /> - <FormControlLabel - value="decline" - control={<Radio />} - label="Decline" - /> - </RadioGroup> - )} - /> - </div> - </FormControl> - </div> - </Grid> - <Grid item xs={8}> - <TextField - label="Email" - type="email" - variant="outlined" - fullWidth - error={!!errors.email} - helperText={errors.email?.message} - required - {...register('email', { - setValueAs: (value: string) => value.trim(), - required: 'This field is required', - pattern: { - value: /\S+@\S+\.\S+/, - message: 'Please enter a valid email address', - }, - })} - /> - </Grid> - <Grid item xs={4}> - <TextField - label="Party Size" - type="number" - variant="outlined" - fullWidth - onWheel={(event) => { - event.currentTarget.blur(); - }} - error={!!errors.partySize} - helperText={errors.partySize?.message} - required - {...register('partySize', { - valueAsNumber: true, - onChange: handleParty, - 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}> - <TextField - label="Message to the couple" - variant="outlined" - fullWidth - multiline - rows={3} - {...register('message')} - /> - </Grid> - {fields.map((field, index) => { - return ( - <Grid - container - item - columnSpacing={2} - rowSpacing={{ xs: 1 }} - key={field.id} - > - <Grid item xs={6}> - <TextField - label="First Name" - variant="outlined" - fullWidth - error={!!errors.partyList?.[index]?.firstName} - helperText={errors.partyList?.[index]?.firstName?.message} - required - {...register(`partyList.${index}.firstName`, { - setValueAs: (value: string) => value.trim(), - required: 'This field is required', - })} - /> - </Grid> - <Grid item xs={6}> - <TextField - label="Last Name" - variant="outlined" - fullWidth - error={!!errors.partyList?.[index]?.lastName} - helperText={errors.partyList?.[index]?.lastName?.message} - required - {...register(`partyList.${index}.lastName`, { - setValueAs: (value: string) => value.trim(), - required: 'This field is required', - })} - /> + <div + style={{ + display: 'flex', + width: '90%', + }} + > + <Grid container spacing={2} sx={{ width: 600, mt: 16 }}> + <Grid item xs={12}> + <p> + Please RSVP for the wedding by March 10, 2025. The ceremony will + commence at 3 PM on April 26 in Divine Shepherd. The reception + will follow at 5 PM in A Venue on the Ridge. + </p> + </Grid> + <Grid item xs={12}> + <div style={{ display: 'flex', justifyContent: 'center' }}> + <FormControl> + <div style={{ display: 'flex', alignItems: 'center' }}> + <FormLabel + sx={{ mr: 2 }} + error={!!errors.attendance} + required + > + Attendance + </FormLabel> + <Controller + name="attendance" + control={control} + rules={{ required: true }} + render={({ field }) => ( + <RadioGroup {...field} row> + <FormControlLabel + value="accept" + control={<Radio />} + label="Accept" + /> + <FormControlLabel + value="decline" + control={<Radio />} + label="Decline" + /> + </RadioGroup> + )} + /> + </div> + </FormControl> + </div> + </Grid> + <Grid item xs={8}> + <TextField + label="Email" + type="email" + variant="outlined" + fullWidth + error={!!errors.email} + helperText={errors.email?.message} + required + {...register('email', { + setValueAs: (value: string) => value.trim(), + required: 'This field is required', + pattern: { + value: /\S+@\S+\.\S+/, + message: 'Please enter a valid email address', + }, + })} + /> + </Grid> + <Grid item xs={4}> + <TextField + label="Party Size" + type="number" + variant="outlined" + fullWidth + onWheel={(event) => { + event.currentTarget.blur(); + }} + error={!!errors.partySize} + helperText={errors.partySize?.message} + required + {...register('partySize', { + valueAsNumber: true, + onChange: handleParty, + 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}> + <TextField + label="Message to the couple" + variant="outlined" + fullWidth + multiline + rows={3} + {...register('message')} + /> + </Grid> + {fields.map((field, index) => { + return ( + <Grid + container + item + columnSpacing={2} + rowSpacing={{ xs: 1 }} + key={field.id} + > + <Grid item xs={6}> + <TextField + label="First Name" + variant="outlined" + fullWidth + error={!!errors.partyList?.[index]?.firstName} + helperText={errors.partyList?.[index]?.firstName?.message} + required + {...register(`partyList.${index}.firstName`, { + setValueAs: (value: string) => value.trim(), + required: 'This field is required', + })} + /> + </Grid> + <Grid item xs={6}> + <TextField + label="Last Name" + variant="outlined" + fullWidth + error={!!errors.partyList?.[index]?.lastName} + helperText={errors.partyList?.[index]?.lastName?.message} + required + {...register(`partyList.${index}.lastName`, { + setValueAs: (value: string) => value.trim(), + required: 'This field is required', + })} + /> + </Grid> </Grid> - </Grid> - ); - })} - <Grid item xs={12}> - <div - style={{ - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - }} - > - <Button type="submit" variant="contained"> - RSVP - </Button> - </div> + ); + })} + <Grid item xs={12}> + <div + style={{ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + }} + > + <Button type="submit" variant="contained"> + RSVP + </Button> + </div> + </Grid> <Snackbar open={!loading && open} onClose={() => setOpen(false)} @@ -264,7 +275,7 @@ function RsvpForm() { </div> </Snackbar> </Grid> - </Grid> + </div> </form> ); } |