diff options
| -rw-r--r-- | client/src/components/GuestLogin.tsx | 66 | ||||
| -rw-r--r-- | client/src/components/RsvpForm.tsx | 297 | ||||
| -rw-r--r-- | client/src/components/Schedule.tsx | 120 |
3 files changed, 247 insertions, 236 deletions
diff --git a/client/src/components/GuestLogin.tsx b/client/src/components/GuestLogin.tsx index 16b4478..c5eae75 100644 --- a/client/src/components/GuestLogin.tsx +++ b/client/src/components/GuestLogin.tsx @@ -46,40 +46,46 @@ function GuestLogin() { > <div style={{ - width: 384, - marginTop: 128, - marginLeft: '0.5rem', - marginRight: '0.5rem', display: 'flex', - flexDirection: 'column', justifyContent: 'center', - alignItems: 'center', + width: '90%', }} > - <Typography variant="h6">Guest Login</Typography> - <TextField - label="First Name" - variant="outlined" - margin="normal" - fullWidth - error={!!errors.firstName} - helperText={errors.firstName?.message} - required - {...register('firstName', { required: 'This field is required' })} - /> - <TextField - label="Last Name" - variant="outlined" - margin="normal" - fullWidth - error={!!errors.lastName} - helperText={errors.lastName?.message} - required - {...register('lastName', { required: 'This field is required' })} - /> - <Button type="submit" variant="contained" fullWidth sx={{ mt: 2 }}> - Log in - </Button> + <div + style={{ + width: 384, + marginTop: 128, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + }} + > + <Typography variant="h6">Guest Login</Typography> + <TextField + label="First Name" + variant="outlined" + margin="normal" + fullWidth + error={!!errors.firstName} + helperText={errors.firstName?.message} + required + {...register('firstName', { required: 'This field is required' })} + /> + <TextField + label="Last Name" + variant="outlined" + margin="normal" + fullWidth + error={!!errors.lastName} + helperText={errors.lastName?.message} + required + {...register('lastName', { required: 'This field is required' })} + /> + <Button type="submit" variant="contained" fullWidth sx={{ mt: 2 }}> + Log in + </Button> + </div> </div> </form> ); 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> ); } diff --git a/client/src/components/Schedule.tsx b/client/src/components/Schedule.tsx index cc6e8bd..554674b 100644 --- a/client/src/components/Schedule.tsx +++ b/client/src/components/Schedule.tsx @@ -2,19 +2,6 @@ import React from 'react'; import { Paper, Typography, useTheme } from '@mui/material'; import divineShepherd from '/divine-shepherd.jpg'; -const FlexBox = (props: any) => { - return ( - <div - style={{ - display: 'flex', - alignItems: 'center', - }} - > - {props.children} - </div> - ); -}; - function Schedule() { const theme = useTheme(); return ( @@ -28,61 +15,68 @@ function Schedule() { backgroundSize: 'cover', }} > - <Paper - elevation={3} - sx={{ - width: 512, - mx: 0.5, - px: 2, + <div + style={{ + display: 'flex', + justifyContent: 'center', + width: '95%', }} > - <FlexBox> - <div style={{ width: '35%' }}> - <p>April 26, 2025</p> - </div> - <div style={{ width: '65%' }}> - <Typography variant="h5">Wedding Schedule</Typography> - </div> - </FlexBox> - <hr style={{ width: '100%' }} /> - <FlexBox> - <div style={{ width: '35%' }}> - <p>3:00 PM</p> - </div> - <div style={{ width: '65%' }}> - <Typography variant="h6">Ceremony</Typography> - <p> - Divine Shepherd - <br /> - <a - href="https://maps.app.goo.gl/dGWvmjPiVjNGBVkZ9" - style={{ color: theme.palette.primary.main }} - > - 15005 Q St, Omaha, NE 68137 - </a> - </p> + <Paper + elevation={3} + sx={{ + width: 512, + px: 2, + }} + > + <div style={{ display: 'flex', alignItems: 'center' }}> + <div style={{ width: '35%' }}> + <p>April 26, 2025</p> + </div> + <div style={{ width: '65%' }}> + <Typography variant="h5">Wedding Schedule</Typography> + </div> </div> - </FlexBox> - <hr style={{ width: '100%' }} /> - <FlexBox> - <div style={{ width: '35%' }}> - <p>5:00 PM</p> + <hr style={{ width: '100%' }} /> + <div style={{ display: 'flex', alignItems: 'center' }}> + <div style={{ width: '35%' }}> + <p>3:00 PM</p> + </div> + <div style={{ width: '65%' }}> + <Typography variant="h6">Ceremony</Typography> + <p> + Divine Shepherd + <br /> + <a + href="https://maps.app.goo.gl/dGWvmjPiVjNGBVkZ9" + style={{ color: theme.palette.primary.main }} + > + 15005 Q St, Omaha, NE 68137 + </a> + </p> + </div> </div> - <div style={{ width: '65%' }}> - <Typography variant="h6">Reception</Typography> - <p> - A Venue on the Ridge - <br /> - <a - href="https://maps.app.goo.gl/35RRqxzQdq6E4eSMA" - style={{ color: theme.palette.primary.main }} - > - 20033 Elkhorn Ridge Dr, Elkhorn, NE 68022 - </a> - </p> + <hr style={{ width: '100%' }} /> + <div style={{ display: 'flex', alignItems: 'center' }}> + <div style={{ width: '35%' }}> + <p>5:00 PM</p> + </div> + <div style={{ width: '65%' }}> + <Typography variant="h6">Reception</Typography> + <p> + A Venue on the Ridge + <br /> + <a + href="https://maps.app.goo.gl/35RRqxzQdq6E4eSMA" + style={{ color: theme.palette.primary.main }} + > + 20033 Elkhorn Ridge Dr, Elkhorn, NE 68022 + </a> + </p> + </div> </div> - </FlexBox> - </Paper> + </Paper> + </div> </div> ); } |