diff options
author | Michael Hunteman <michael@huntm.net> | 2024-08-16 13:42:56 -0700 |
---|---|---|
committer | Michael Hunteman <michael@huntm.net> | 2024-08-16 13:42:56 -0700 |
commit | b5b91703b675a0f8b23ac380621de940e7ee84a6 (patch) | |
tree | 610c30757d25d5110c9c5fcc45297bb676952569 /client/src/components/GuestLogin.tsx | |
parent | 1445eac6cbdb9b6b272052680bfa31a3520f4105 (diff) |
Switch divs to papers
Diffstat (limited to 'client/src/components/GuestLogin.tsx')
-rw-r--r-- | client/src/components/GuestLogin.tsx | 75 |
1 files changed, 35 insertions, 40 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> ); } |