Css changing

This commit is contained in:
sonika 2023-08-30 11:05:44 +05:30
parent 58e61f0485
commit 15cc1aea16
7 changed files with 41 additions and 39 deletions

View File

@ -55,7 +55,7 @@ const DataTable: React.FC= () => {
return ( return (
<> <>
<FormLabel>Please enter the details below:</FormLabel><br></br> <FormLabel>If yes, Please enter the details below:</FormLabel><br></br>
<FormControl> <FormControl>
<Grid container spacing={1.5} sx={{width:750, marginTop:1}}> <Grid container spacing={1.5} sx={{width:750, marginTop:1}}>
<Grid item xs={2} className='addNew-form-table-style'> <Grid item xs={2} className='addNew-form-table-style'>

View File

@ -89,6 +89,7 @@ export default function FamilyFormSection(){
<TextField <TextField
variant="outlined" variant="outlined"
type="number"
label="Number of Children/Ages" label="Number of Children/Ages"
className='collapsable-form-style' className='collapsable-form-style'
name='numberOfChildren' name='numberOfChildren'
@ -142,7 +143,7 @@ export default function FamilyFormSection(){
<TextField <TextField
variant="outlined" variant="outlined"
label="Business Phone" label="Business Phone"
type="tel" type="number"
className='collapsable-form-style' className='collapsable-form-style'
name='businessPhone' name='businessPhone'
onChange={formik.handleChange} onChange={formik.handleChange}
@ -183,7 +184,7 @@ export default function FamilyFormSection(){
<TextField <TextField
variant="outlined" variant="outlined"
label="Business Phone" label="Business Phone"
type="tel" type="number"
className='collapsable-form-style' className='collapsable-form-style'
name='spouseBusinessPhone' name='spouseBusinessPhone'
onChange={formik.handleChange} onChange={formik.handleChange}
@ -201,6 +202,7 @@ export default function FamilyFormSection(){
<TextField <TextField
variant="outlined" variant="outlined"
label="Emergency Contact" label="Emergency Contact"
type="number"
className='collapsable-form-style' className='collapsable-form-style'
name='emergencyContact' name='emergencyContact'
onChange={formik.handleChange} onChange={formik.handleChange}
@ -222,7 +224,8 @@ export default function FamilyFormSection(){
<Grid item xs={4} className='collapsable-form-style '> <Grid item xs={4} className='collapsable-form-style '>
<TextField <TextField
variant="outlined" variant="outlined"
label="Phone" type="tel" type="number"
label="Phone"
className='collapsable-form-style' className='collapsable-form-style'
name='spousePhone' name='spousePhone'
onChange={formik.handleChange} onChange={formik.handleChange}

View File

@ -92,7 +92,7 @@ export default function MedicalHistoryForm(){
<TextField <TextField
variant="outlined" variant="outlined"
label="Phone" label="Phone"
type="tel" type="number"
name='physicianphone' name='physicianphone'
onChange={formik.handleChange} onChange={formik.handleChange}
value={formik.values.physicianphone} value={formik.values.physicianphone}

View File

@ -40,7 +40,7 @@ export default function OtherDetails8(){
return( return(
<> <>
<Grid container direction="row"> <Grid container direction="row">
<Grid item xs={6} className='collapsable-form-style-multiline'> <Grid item xs={12} className='collapsable-form-style-multiline'>
<FormLabel>Family history and health status:</FormLabel><br></br> <FormLabel>Family history and health status:</FormLabel><br></br>
<TextField <TextField
multiline multiline
@ -56,7 +56,7 @@ export default function OtherDetails8(){
/> />
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormControl> <FormControl>
<FormLabel>How do you sleep?</FormLabel> <FormLabel>How do you sleep?</FormLabel>
<RadioGroup <RadioGroup
@ -75,7 +75,7 @@ export default function OtherDetails8(){
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormControl> <FormControl>
<FormLabel>Do you use a pillow?</FormLabel> <FormLabel>Do you use a pillow?</FormLabel>
<RadioGroup <RadioGroup
@ -93,7 +93,7 @@ export default function OtherDetails8(){
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormControl> <FormControl>
<FormLabel>Do you wear orthotics or arch support?</FormLabel> <FormLabel>Do you wear orthotics or arch support?</FormLabel>
<RadioGroup <RadioGroup
@ -111,10 +111,10 @@ export default function OtherDetails8(){
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormLabel>Date of last gynecological and brest exam?</FormLabel><br></br> <FormLabel>Date of last gynecological and brest exam?</FormLabel>
<FormControl> <FormControl>
<LocalizationProvider dateAdapter={AdapterDayjs}><br></br> <LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker <DatePicker
value={values.brestExam} value={values.brestExam}
onChange={(event) => { onChange={(event) => {
@ -130,11 +130,11 @@ export default function OtherDetails8(){
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style' sx={{marginTop:4, marginBottom:2}}> {/* <Grid item xs={6} className='collapsable-form-style' sx={{marginTop:4, marginBottom:2}}>
<FormLabel sx={{fontWeight:600}}>For X-Ray purposes:</FormLabel> <FormLabel sx={{fontWeight:600}}>For X-Ray purposes:</FormLabel>
</Grid> </Grid> */}
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormControl> <FormControl>
<FormLabel>Possible pregnancy?</FormLabel> <FormLabel>Possible pregnancy?</FormLabel>
<RadioGroup <RadioGroup
@ -152,10 +152,10 @@ export default function OtherDetails8(){
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormLabel>Date of last menstrual cycle?</FormLabel><br></br> <FormLabel>Date of last menstrual cycle?</FormLabel><br></br>
<FormControl> <FormControl>
<LocalizationProvider dateAdapter={AdapterDayjs}><br></br> <LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker <DatePicker
value={values.menstralCycle} value={values.menstralCycle}
onChange={(event) => { onChange={(event) => {

View File

@ -233,6 +233,10 @@ export default function PastTreatment5(){
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} sx={{marginLeft:2, marginBottom:3}} >
<Table />
</Grid>
<Grid item xs={6} className='collapsable-form-style-multiline'> <Grid item xs={6} className='collapsable-form-style-multiline'>
<FormLabel>Please list current supplements or drugs you may be taking:</FormLabel> <FormLabel>Please list current supplements or drugs you may be taking:</FormLabel>
<TextField <TextField
@ -249,11 +253,6 @@ export default function PastTreatment5(){
/> />
</Grid> </Grid>
<Grid item xs={12} >
<Table />
</Grid>
</Grid> </Grid>
</form> </form>
</> </>

View File

@ -25,14 +25,14 @@ interface Patient {
fullName: yup.string().required("Full name is required"), fullName: yup.string().required("Full name is required"),
homePhone: yup.string().matches(/^\d{10}$/, "Home phone must be 10 digits"), homePhone: yup.string().matches(/^\d{10}$/, "Home phone must be 10 digits"),
cellPhone: yup.string().required("Phone number is required").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"), email: yup.string().required("Email is required"),
age: yup.number().positive().integer("Age must be a positive integer").required("Age 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"), dateOfBirth: yup.date().required("Date of birth is required"),
socialSecurityNumber: yup.string().matches(/^\d{9}$/, "Social security number must be 9 digits"), socialSecurityNumber: yup.string().matches(/^\d{9}$/, "Social security number must be 9 digits"),
mailingAddress: yup.string().required("Mailing address is required"), mailingAddress: yup.string().required("Mailing address is required"),
city: yup.string().required("City is required"), city: yup.string().required("City is required"),
state: yup.string().required("State is required"), state: yup.string().required("State is required"),
zipCode: yup.string().matches(/^\d{5}$/, "Zip code must be 6 digits").required("Zip code is required") zipCode: yup.string().matches(/^\d{6}$/, "Zip code must be 6 digits").required("Zip code is required")
}); });
export default function PersonalSection(){ export default function PersonalSection(){
@ -78,6 +78,7 @@ export default function PersonalSection(){
}); });
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
console.log("dsfsdfsdf",event.target.value)
const { name, value } = event.target; const { name, value } = event.target;
setPatient((prevPatient) => ({ setPatient((prevPatient) => ({
...prevPatient, ...prevPatient,
@ -120,7 +121,7 @@ export default function PersonalSection(){
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
<TextField <TextField
variant="outlined" variant="outlined"
label="Home Phone Number" label="Home Phone Number"
name="homePhone" name="homePhone"
placeholder='Please enter your home phone' placeholder='Please enter your home phone'
@ -134,7 +135,6 @@ export default function PersonalSection(){
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
<TextField <TextField
required
variant="outlined" variant="outlined"
label="Email" label="Email"
name="email" name="email"
@ -142,8 +142,8 @@ export default function PersonalSection(){
value={formik.values.email} value={formik.values.email}
onChange={handleChange} onChange={handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
error={formik.touched.email && Boolean(formik.errors.email)} // error={formik.touched.email && Boolean(formik.errors.email)}
helperText={formik.touched.email && formik.errors.email} // helperText={formik.touched.email && formik.errors.email}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
@ -212,8 +212,8 @@ export default function PersonalSection(){
value={formik.values.state} value={formik.values.state}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
error={formik.touched.state && Boolean(formik.errors.state)} // error={formik.touched.state && Boolean(formik.errors.state)}
helperText={formik.touched.state && formik.errors.state} // helperText={formik.touched.state && formik.errors.state}
/> />
</Grid> </Grid>

View File

@ -47,7 +47,7 @@ export default function RecreationalHobbiesSection7(){
<> <>
<Grid container direction="row"> <Grid container direction="row">
<Grid item xs={6} className='collapsable-form-style-multiline'> <Grid item xs={12} className='collapsable-form-style-multiline'>
<FormLabel>Recreational Activities/Hobbies:</FormLabel><br></br> <FormLabel>Recreational Activities/Hobbies:</FormLabel><br></br>
<TextField <TextField
multiline multiline
@ -84,7 +84,7 @@ export default function RecreationalHobbiesSection7(){
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormControl> <FormControl>
<FormLabel>Do you excercise?</FormLabel> <FormLabel>Do you excercise?</FormLabel>
<RadioGroup <RadioGroup
@ -118,7 +118,7 @@ export default function RecreationalHobbiesSection7(){
/> />
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormControl> <FormControl>
<FormLabel>Use tobacco?</FormLabel> <FormLabel>Use tobacco?</FormLabel>
<RadioGroup <RadioGroup
@ -152,7 +152,7 @@ export default function RecreationalHobbiesSection7(){
/> />
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormControl> <FormControl>
<FormLabel>Consume alcohol?</FormLabel> <FormLabel>Consume alcohol?</FormLabel>
<RadioGroup <RadioGroup
@ -186,7 +186,7 @@ export default function RecreationalHobbiesSection7(){
/> />
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormControl> <FormControl>
<FormLabel>Have a healthy diet?</FormLabel> <FormLabel>Have a healthy diet?</FormLabel>
<RadioGroup <RadioGroup
@ -220,7 +220,7 @@ export default function RecreationalHobbiesSection7(){
/> />
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormControl> <FormControl>
<FormLabel>Get adequate sleep?</FormLabel> <FormLabel>Get adequate sleep?</FormLabel>
<RadioGroup <RadioGroup
@ -254,7 +254,7 @@ export default function RecreationalHobbiesSection7(){
/> />
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormControl> <FormControl>
<FormLabel>Is Work/School stressful to you?</FormLabel> <FormLabel>Is Work/School stressful to you?</FormLabel>
<RadioGroup <RadioGroup
@ -288,7 +288,7 @@ export default function RecreationalHobbiesSection7(){
/> />
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormControl> <FormControl>
<FormLabel>Family life stressful to you?</FormLabel> <FormLabel>Family life stressful to you?</FormLabel>
<RadioGroup <RadioGroup
@ -322,7 +322,7 @@ export default function RecreationalHobbiesSection7(){
/> />
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'> <Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormControl> <FormControl>
<FormLabel>Use recreational drugs?</FormLabel> <FormLabel>Use recreational drugs?</FormLabel>
<RadioGroup <RadioGroup