Switch divs to papers

4 files changed, 118 insertions, 112 deletions

diff --git a/client/src/components/GuestLogin.tsx b/client/src/components/GuestLogin.tsx
index 32245fc..7f634aa 100644
--- a/client/src/components/GuestLogin.tsx
+++ b/client/src/components/GuestLogin.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
-import { Button, TextField, Typography } from '@mui/material';
+import { Button, Paper, TextField, Typography } from '@mui/material';
 import { useForm } from 'react-hook-form';
 import { setCredentials } from '../slices/authSlice';
 import { useLoginMutation } from '../slices/apiSlice';
@@ -44,49 +44,44 @@ function GuestLogin() {
       noValidate
       onSubmit={handleSubmit(onSubmit)}
     >
-      <div
-        style={{
-          width: '90%',
+      <Paper
+        elevation={3}
+        sx={{
+          width: { xs: '90%', md: 400 },
           display: 'flex',
+          flexDirection: 'column',
           justifyContent: 'center',
+          alignItems: 'center',
+          mt: 16,
+          p: 2,
+          borderRadius: '8px',
         }}
       >
-        <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>
+        <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>
+      </Paper>
     </form>
   );
 }
diff --git a/client/src/components/Registry.tsx b/client/src/components/Registry.tsx
index dd8ff36..c6e61b1 100644
--- a/client/src/components/Registry.tsx
+++ b/client/src/components/Registry.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@mui/material';
+import { Button, Paper } from '@mui/material';
 import LaunchIcon from '@mui/icons-material/Launch';
 
 function Registry() {
@@ -11,16 +11,29 @@ function Registry() {
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        flexDirection: 'column',
       }}
     >
-      <p style={{ width: '90%', textAlign: 'center' }}>
-        Thank you for your generous gifts! We look forward to seeing you at the
-        wedding.
-      </p>
-      <Button variant="contained" endIcon={<LaunchIcon />}>
-        Go to Registry
-      </Button>
+      <Paper
+        elevation={3}
+        sx={{
+          width: { xs: '90%', md: 400 },
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          flexDirection: 'column',
+          px: 1,
+          pb: 2,
+          borderRadius: '8px',
+        }}
+      >
+        <p style={{ textAlign: 'center' }}>
+          Thank you for your generous gifts! We look forward to seeing you at
+          the wedding.
+        </p>
+        <Button variant="contained" endIcon={<LaunchIcon />}>
+          Go to Registry
+        </Button>
+      </Paper>
     </div>
   );
 }
diff --git a/client/src/components/RsvpForm.tsx b/client/src/components/RsvpForm.tsx
index 10c2205..4c9ae92 100644
--- a/client/src/components/RsvpForm.tsx
+++ b/client/src/components/RsvpForm.tsx
@@ -8,6 +8,7 @@ import {
   FormControlLabel,
   FormLabel,
   Grid,
+  Paper,
   Radio,
   RadioGroup,
   Snackbar,
@@ -109,14 +110,19 @@ function RsvpForm() {
       noValidate
       onSubmit={handleSubmit(onSubmit)}
     >
-      <div
-        style={{
-          width: '90%',
+      <Paper
+        elevation={3}
+        sx={{
+          width: { xs: '90%', md: 600 },
           display: 'flex',
           justifyContent: 'center',
+          px: 2,
+          pb: 2,
+          mt: { xs: 10, md: 16 },
+          borderRadius: '8px',
         }}
       >
-        <Grid container spacing={2} sx={{ width: 600, mt: { xs: 8, md: 16 } }}>
+        <Grid container spacing={2}>
           <Grid item xs={12}>
             <p>
               Please RSVP for the wedding by March 10, 2025. The ceremony will
@@ -274,7 +280,7 @@ function RsvpForm() {
             </div>
           </Snackbar>
         </Grid>
-      </div>
+      </Paper>
     </form>
   );
 }
diff --git a/client/src/components/Schedule.tsx b/client/src/components/Schedule.tsx
index a22f105..3620c4e 100644
--- a/client/src/components/Schedule.tsx
+++ b/client/src/components/Schedule.tsx
@@ -16,69 +16,61 @@ function Schedule() {
         backgroundSize: 'cover',
       }}
     >
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          width: '90%',
+      <Paper
+        elevation={3}
+        sx={{
+          width: { xs: '90%', md: 512 },
+          px: 2,
+          borderRadius: '8px',
         }}
       >
-        <Paper
-          elevation={3}
-          sx={{
-            borderRadius: '8px',
-            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 style={{ display: 'flex', alignItems: 'center' }}>
+          <div style={{ width: '35%' }}>
+            <p>April 26, 2025</p>
           </div>
-          <hr style={{ width: '100%' }} />
-          <div style={{ display: 'flex', alignItems: 'center' }}>
-            <div style={{ width: '35%' }}>
-              <p>2: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 style={{ width: '65%' }}>
+            <Typography variant="h5">Wedding Schedule</Typography>
           </div>
-          <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>
+        <hr style={{ width: '100%' }} />
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <div style={{ width: '35%' }}>
+            <p>2:00 PM</p>
           </div>
-        </Paper>
-      </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>
+        <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>
+      </Paper>
     </div>
   );
 }