Remove unneeded MUI components

8 files changed, 73 insertions, 127 deletions

diff --git a/src/components/Admin.tsx b/src/components/Admin.tsx
index 11fbc22..bd1545d 100644
--- a/src/components/Admin.tsx
+++ b/src/components/Admin.tsx
@@ -1,4 +1,3 @@
-import { Paper, Typography } from '@mui/material';
 import { useGetGuestsQuery } from '../apiSlice';
 
 function Admin() {
@@ -13,7 +12,7 @@ function Admin() {
   let content;
 
   if (isLoading) {
-    content = <Typography>Loading...</Typography>
+    content = <p>Loading...</p>
   } else if (isSuccess) {
     content = JSON.stringify(guests);
   } else if (isError) {
@@ -21,12 +20,10 @@ function Admin() {
   }
 
   return (
-    <Paper>
-      <Typography variant="h6">
-        Admin
-      </Typography>
+    <>
+      <p>Admin</p>
       {content}
-    </Paper>
+    </>
   );
 }
 
diff --git a/src/components/Desktop.tsx b/src/components/Desktop.tsx
index 35ddc5e..34a0621 100644
--- a/src/components/Desktop.tsx
+++ b/src/components/Desktop.tsx
@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { Link } from "react-router-dom";
-import { Stack, Button, IconButton } from "@mui/material";
+import { Button, IconButton } from "@mui/material";
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import { useTheme } from '@mui/material/styles';
@@ -12,7 +12,7 @@ function Desktop() {
   const { toggleColorMode } = useContext(ThemeContext);
 
   return (
-    <Stack direction="row" sx={{ ml: "auto" }}>
+    <div style={{ marginLeft: 'auto' }}>
       {pages.map(page => (
         <Button color="inherit" component={Link} to={page?.to} key={page?.name}>
           {page?.name}
@@ -21,7 +21,7 @@ function Desktop() {
       <IconButton color="inherit" onClick={toggleColorMode}>
         {theme.palette.mode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
       </IconButton>
-    </Stack>
+    </div>
   );
 }
 
diff --git a/src/components/Mobile.tsx b/src/components/Mobile.tsx
index 6c95295..f2ca255 100644
--- a/src/components/Mobile.tsx
+++ b/src/components/Mobile.tsx
@@ -27,18 +27,10 @@ function Mobile() {
       <IconButton color="inherit" onClick={toggleColorMode}>
         {theme.palette.mode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
       </IconButton>
-      <IconButton
-        color="inherit"
-        sx={{ ml: "auto" }}
-        onClick={handleOpenNavMenu}
-      >
+      <IconButton color="inherit" sx={{ ml: 'auto' }} onClick={handleOpenNavMenu}>
         <MenuIcon />
       </IconButton>
-      <Menu
-        anchorEl={anchorEl}
-        open={!!anchorEl}
-        onClose={handleCloseNavMenu}
-      >
+      <Menu anchorEl={anchorEl} open={!!anchorEl} onClose={handleCloseNavMenu}>
         {pages.map((page) => (
           <MenuItem key={page.name} onClick={handleCloseNavMenu}>
             <Button color="inherit" component={Link} to={page?.to} key={page?.name}>
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 4e35d95..f050d7a 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -15,7 +15,7 @@ function NavBar() {
           component={Link}
           to="/"
           color="inherit"
-          sx={{ textDecoration: "none" }}
+          sx={{ textDecoration: 'none' }}
         >
           Madison and Michael's Wedding
         </Typography>
diff --git a/src/components/Registry.tsx b/src/components/Registry.tsx
index e4f6398..7319560 100644
--- a/src/components/Registry.tsx
+++ b/src/components/Registry.tsx
@@ -1,12 +1,8 @@
-import { Paper, Typography } from '@mui/material';
-
 function Registry() {
   return (
-    <Paper>
-      <Typography variant="h6">
-        Registry
-      </Typography>
-    </Paper>
+    <>
+      <p>Registry</p>
+    </>
   );
 }
 
diff --git a/src/components/RsvpForm.tsx b/src/components/RsvpForm.tsx
index 232700b..d7efecf 100644
--- a/src/components/RsvpForm.tsx
+++ b/src/components/RsvpForm.tsx
@@ -1,5 +1,4 @@
 import {
-  Box,
   Button,
   Container,
   FormControl,
@@ -9,7 +8,6 @@ import {
   Radio,
   RadioGroup,
   TextField,
-  Typography
 } from '@mui/material';
 import { useForm, Controller } from 'react-hook-form';
 import { useOutletContext } from "react-router-dom";
@@ -39,44 +37,41 @@ function RsvpForm() {
     <Container component="form" maxWidth="sm" noValidate onSubmit={handleSubmit(onSubmit)}>
       <Grid container spacing={2} sx={{ mt: 8 }}>
         <Grid item xs={12}>
-          <Typography paragraph>
+          <p>
             Please RSVP for the wedding by March 10, 2025.
             The ceremony will commence at 3 pm on April 26 in ...
             The reception will follow at 5 pm in A Venue on the Ridge.
-          </Typography>
+          </p>
         </Grid>
         <Grid item xs={12}>
-          <FormControl>
-            <Box
-              sx={{ display: "flex",
-              flexDirection: "row",
-              alignItems: "center",
-              ml: { xs: 6, lg: 18 } }}
-            >
-              <FormLabel sx={{ mr: 2 }} error={!!errors.attendance} required>
-                Will you attend?
-              </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>
-                )}
-              />
-            </Box>
-          </FormControl>
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <FormControl>
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                <FormLabel sx={{ mr: 2 }} error={!!errors.attendance} required>
+                  Will you attend?
+                </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>
+                  )}
+                />
+              </div>
+            </FormControl>
+          </div>
         </Grid>
         <Grid item xs={12} md={6} lg={6}>
           <TextField
@@ -86,11 +81,12 @@ function RsvpForm() {
             error={!!errors.email}
             helperText={errors.email?.message}
             required
-            {...register("email",
-              { required: "This field is required",
+            {...register('email',
+              { required: 'This field is required',
                 pattern: { value: /\S+@\S+\.\S+/,
-                  message: "Please enter a valid email address" }
-              })}
+                  message: 'Please enter a valid email address' }
+              }
+            )}
           />
         </Grid>
         <Grid item xs={12} md={6} lg={6}>
@@ -102,10 +98,12 @@ function RsvpForm() {
             error={!!errors.partySize}
             helperText={errors.partySize?.message}
             required
-            {...register("partySize",
-              { 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" } })}
+            {...register('partySize',
+              { 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}>
@@ -115,22 +113,19 @@ function RsvpForm() {
             fullWidth
             multiline
             rows={3}
-            {...register("message")}
+            {...register('message')}
           />
         </Grid>
         <Grid item xs={12}>
-          <Box
-            sx={{ display: "flex",
-            flexDirection: "column",
-            alignItems: "center" }}
+          <div
+            style={{ display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center' }}
           >
-            <Button
-              type="submit"
-              variant="contained"
-            >
+            <Button type="submit" variant="contained">
               RSVP
             </Button>
-          </Box>
+          </div>
         </Grid>
       </Grid>
     </Container>
diff --git a/src/components/Schedule.tsx b/src/components/Schedule.tsx
index 73548bc..64e4d1a 100644
--- a/src/components/Schedule.tsx
+++ b/src/components/Schedule.tsx
@@ -1,42 +1,8 @@
-import { Paper, Typography } from '@mui/material';
-import {
-  Timeline,
-  TimelineConnector,
-  TimelineContent,
-  TimelineDot,
-  TimelineItem,
-  TimelineOppositeContent,
-  TimelineSeparator
-} from '@mui/lab';
-
 function Schedule() {
   return (
-    <Paper>
-      <Typography variant="h6">
-        Location and attire
-      </Typography>
-      <Timeline>
-        <TimelineItem>
-          <TimelineOppositeContent>
-            4:00 pm
-          </TimelineOppositeContent>
-          <TimelineSeparator>
-            <TimelineDot />
-            <TimelineConnector />
-          </TimelineSeparator>
-          <TimelineContent>Ceremony</TimelineContent>
-        </TimelineItem>
-        <TimelineItem>
-          <TimelineOppositeContent>
-            5:00 pm
-          </TimelineOppositeContent>
-          <TimelineSeparator>
-            <TimelineDot />
-          </TimelineSeparator>
-          <TimelineContent>Reception</TimelineContent>
-        </TimelineItem>
-      </Timeline>
-    </Paper>
+    <>
+      <p>Location and attire</p>
+    </>
   );
 }
 
diff --git a/src/features/auth/GuestLogin.tsx b/src/features/auth/GuestLogin.tsx
index c3b3b96..11f3d5b 100644
--- a/src/features/auth/GuestLogin.tsx
+++ b/src/features/auth/GuestLogin.tsx
@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
-import { Box, Button, Container, TextField, Typography } from '@mui/material';
+import { Button, Container, TextField, Typography } from '@mui/material';
 import { useForm } from 'react-hook-form';
 import { setCredentials } from './authSlice';
 import { useLoginMutation, LoginRequest } from '../../apiSlice';
@@ -28,11 +28,11 @@ function GuestLogin() {
 
   return (
     <Container component="form" maxWidth="xs" noValidate onSubmit={handleSubmit(onSubmit)}>
-      <Box
-        sx={{ mt: 8,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center" }}
+      <div
+        style={{ marginTop: 80,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center' }}
       >
         <Typography variant="h6">
           Guest Login
@@ -45,7 +45,7 @@ function GuestLogin() {
           error={!!errors.firstName}
           helperText={errors.firstName?.message}
           required
-          {...register("firstName", { required: "This field is required" })}
+          {...register('firstName', { required: 'This field is required' })}
         />
         <TextField
           label="Last Name"
@@ -55,7 +55,7 @@ function GuestLogin() {
           error={!!errors.lastName}
           helperText={errors.lastName?.message}
           required
-          {...register("lastName", { required: "This field is required" })}
+          {...register('lastName', { required: 'This field is required' })}
         />
         <Button
           type="submit"
@@ -65,7 +65,7 @@ function GuestLogin() {
         >
           Log in
         </Button>
-      </Box>
+      </div>
     </Container>
   );
 }