Update formatting on forms

1 files changed, 15 insertions, 6 deletions

diff --git a/src/features/auth/GuestLogin.tsx b/src/features/auth/GuestLogin.tsx
index 61a8fa1..1f228d8 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 { Button, Stack, TextField, Typography } from '@mui/material';
+import { Box, Button, Container, TextField, Typography } from '@mui/material';
 import { useForm } from 'react-hook-form';
 import { setCredentials } from './authSlice';
 import { useLoginMutation, LoginRequest } from '../../apiSlice';
@@ -28,28 +28,37 @@ function GuestLogin() {
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Stack spacing={2}>
+    <Container component="form" maxWidth="xs" onSubmit={handleSubmit(onSubmit)}>
+      <Box sx={{ mt: 8, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
           <Typography variant="h6">
             Guest Login
           </Typography>
           <TextField
             label="First Name"
             variant="outlined"
+            margin="normal"
+            fullWidth
             required
             {...register("firstName", { required: true })}
           />
           <TextField
             label="Last Name"
             variant="outlined"
+            margin="normal"
+            fullWidth
             required
             {...register("lastName", { required: true })}
           />
-          <Button type="submit" variant="contained" disabled={!isDirty || !isValid}>
+          <Button 
+            type="submit" 
+            variant="contained" 
+            fullWidth
+            sx={{ mt: 2 }}
+            disabled={!isDirty || !isValid}>
             Login
           </Button>
-      </Stack>
-    </form>
+      </Box>
+    </Container>
   );
 }