css changes
This commit is contained in:
sonika
parent
97aff21f90
commit
d172573539
14
src/App.css
14
src/App.css
@ -11,4 +11,18 @@
|
||||
|
||||
.collapsable-form-style label {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.collapsable-form-style-radioButtons{
|
||||
width: 300px !important;
|
||||
margin: 5%;
|
||||
padding-top: 12px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.collapsable-form-style-radioButtons-fullwidth{
|
||||
/* width: 300px !important; */
|
||||
margin: 5%;
|
||||
padding-top: 12px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
@ -61,7 +61,7 @@ export default function FamilyFormSection(){
|
||||
<>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<Grid container direction="row">
|
||||
<Grid item xs={8} className='collapsable-form-style ' sx={{paddingLeft:"14px"}}>
|
||||
<Grid item xs={8} className='collapsable-form-style-radioButtons'>
|
||||
<FormControl>
|
||||
<FormLabel>Marital Status</FormLabel>
|
||||
<RadioGroup
|
||||
@ -71,6 +71,8 @@ export default function FamilyFormSection(){
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.maritalStatus}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
// error={formik.touched.numberOfChildren && Boolean(formik.errors.maritalStatus)}
|
||||
// helperText={formik.touched.numberOfChildren && formik.errors.maritalStatus}
|
||||
>
|
||||
<FormControlLabel value="married" control={<Radio />} label="Married" />
|
||||
<FormControlLabel value="single" control={<Radio />} label="Single" />
|
||||
@ -78,16 +80,14 @@ export default function FamilyFormSection(){
|
||||
<FormControlLabel value="seperated" control={<Radio />} label="Seperated" />
|
||||
<FormControlLabel value="divorced" control={<Radio />} label="Divorced" />
|
||||
</RadioGroup>
|
||||
{formik.touched.maritalStatus && formik.errors.maritalStatus ? (
|
||||
<div>{formik.errors.maritalStatus}</div>
|
||||
) : null}
|
||||
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style '></Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style '>
|
||||
<TextField
|
||||
required
|
||||
|
||||
variant="outlined"
|
||||
label="Number of Children/Ages"
|
||||
className='collapsable-form-style'
|
||||
@ -95,13 +95,13 @@ export default function FamilyFormSection(){
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.numberOfChildren}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.numberOfChildren && Boolean(formik.errors.numberOfChildren)}
|
||||
helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren}
|
||||
// error={formik.touched.numberOfChildren && Boolean(formik.errors.numberOfChildren)}
|
||||
// helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style '>
|
||||
<TextField
|
||||
required
|
||||
// required
|
||||
variant="outlined"
|
||||
label="Occupation"
|
||||
className='collapsable-form-style'
|
||||
@ -109,8 +109,8 @@ export default function FamilyFormSection(){
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.occupation}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.occupation && Boolean(formik.errors.occupation)}
|
||||
helperText={formik.touched.occupation && formik.errors.occupation}
|
||||
// error={formik.touched.occupation && Boolean(formik.errors.occupation)}
|
||||
// helperText={formik.touched.occupation && formik.errors.occupation}
|
||||
/>
|
||||
|
||||
</Grid>
|
||||
@ -150,6 +150,13 @@ export default function FamilyFormSection(){
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style '></Grid>
|
||||
|
||||
<Grid item xs={12} className='collapsable-form-style '>
|
||||
<FormLabel sx={{fontWeight:600}}>Spouse's Information:</FormLabel>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style '>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
@ -184,6 +191,12 @@ export default function FamilyFormSection(){
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} className='collapsable-form-style '>
|
||||
<FormLabel sx={{fontWeight:600}}>Emergency:</FormLabel>
|
||||
</Grid>
|
||||
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style '>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
@ -209,7 +222,7 @@ export default function FamilyFormSection(){
|
||||
<Grid item xs={4} className='collapsable-form-style '>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="Spouse's Phone" type="tel"
|
||||
label="Phone" type="tel"
|
||||
className='collapsable-form-style'
|
||||
name='phone'
|
||||
onChange={formik.handleChange}
|
||||
|
||||
@ -53,6 +53,10 @@ export default function MedicalHistoryForm(){
|
||||
return(
|
||||
<>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<Grid item xs={12} className='collapsable-form-style '>
|
||||
<FormLabel sx={{fontWeight:600}}>Physician Hisory Information:</FormLabel>
|
||||
</Grid>
|
||||
|
||||
<Grid container direction="row">
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
<TextField
|
||||
@ -99,7 +103,11 @@ export default function MedicalHistoryForm(){
|
||||
<Grid item xs={4} className='collapsable-form-style'></Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style'></Grid>
|
||||
|
||||
<Grid item xs={4} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style'>
|
||||
<Grid item xs={12} className='collapsable-form-style '>
|
||||
<FormLabel sx={{fontWeight:600}}>Chiropractor Information:</FormLabel>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons'>
|
||||
<FormControl>
|
||||
<FormLabel>Previous Chiropractic Care:</FormLabel>
|
||||
<RadioGroup
|
||||
@ -139,7 +147,24 @@ export default function MedicalHistoryForm(){
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style'>
|
||||
<Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons-fullwidth'>
|
||||
<FormControl>
|
||||
<FormLabel>Have you had an X-ray/CT Scan within the last 12 months? If yes, did you bring the CD of images for the doctor to review?</FormLabel>
|
||||
<RadioGroup
|
||||
// value={patient.gender}
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
defaultValue="yes"
|
||||
name="radio-buttons-group"
|
||||
onChange={formik.handleChange}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
>
|
||||
<FormControlLabel value="yes" control={<Radio />} label="Yes" />
|
||||
<FormControlLabel value="no" control={<Radio />} label="No" />
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons-fullwidth'>
|
||||
<FormControl>
|
||||
<FormLabel>Who can we thank for referring you to our office:</FormLabel>
|
||||
<RadioGroup
|
||||
@ -160,24 +185,7 @@ export default function MedicalHistoryForm(){
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style'>
|
||||
<FormControl>
|
||||
<FormLabel>Have you had an X-ray/CT Scan within the last 12 months? If yes, did you bring the CD of images for the doctor to review?</FormLabel>
|
||||
<RadioGroup
|
||||
// value={patient.gender}
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
defaultValue="yes"
|
||||
name="radio-buttons-group"
|
||||
onChange={formik.handleChange}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
>
|
||||
<FormControlLabel value="yes" control={<Radio />} label="Yes" />
|
||||
<FormControlLabel value="no" control={<Radio />} label="No" />
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style'>
|
||||
<Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons-fullwidth'>
|
||||
<FormControl>
|
||||
<FormLabel>How do you prefer to be reminded of your appointments?</FormLabel>
|
||||
<RadioGroup
|
||||
|
||||
@ -24,7 +24,7 @@ interface Patient {
|
||||
const validationSchema = yup.object({
|
||||
fullName: yup.string().required("Full name is required"),
|
||||
homePhone: yup.string().matches(/^\d{10}$/, "Home phone must be 10 digits"),
|
||||
cellPhone: yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
|
||||
cellPhone: yup.string().required("Phone number is required").matches(/^\d{10}$/, "Cell phone must be 10 digits"),
|
||||
email: yup.string().email("Invalid email format").required("Email is required"),
|
||||
age: yup.number().positive().integer("Age must be a positive integer").required("Age is required"),
|
||||
dateOfBirth: yup.date().required("Date of birth is required"),
|
||||
@ -241,7 +241,7 @@ export default function PersonalSection(){
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} sx={{paddingLeft:"14px"}} className='collapsable-form-style'>
|
||||
<Grid item xs={4} className='collapsable-form-style-radioButtons'>
|
||||
<FormControl >
|
||||
<FormLabel>Gender</FormLabel>
|
||||
<RadioGroup
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user