From 9a3c5e1781de7f05e3d54fb68d71e58b215709e0 Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Fri, 2 Aug 2024 14:42:14 -0700
Subject: Update spacing

---
 client/src/components/GuestLogin.tsx |  66 ++++----
 client/src/components/RsvpForm.tsx   | 297 ++++++++++++++++++-----------------
 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>
   );
 }
-- 
cgit v1.2.3