From d1725735393355f1476a0290fa0eba19e70e4501 Mon Sep 17 00:00:00 2001
From: sonika <>
Date: Tue, 22 Aug 2023 12:49:56 +0530
Subject: [PATCH] css changes

---
 src/App.css                                   | 14 ++++++
 .../PatientForm/FamilyFormSection2.tsx        | 35 +++++++++-----
 .../PatientForm/MedicalHistorySection3.tsx    | 48 +++++++++++--------
 .../PatientForm/PersonalSection1.tsx          |  4 +-
 4 files changed, 68 insertions(+), 33 deletions(-)

diff --git a/src/App.css b/src/App.css
index a55c10d..8328efb 100644
--- a/src/App.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/Components/PatientForm/FamilyFormSection2.tsx b/src/Components/PatientForm/FamilyFormSection2.tsx
index 5677bc0..efa2a14 100644
--- a/src/Components/PatientForm/FamilyFormSection2.tsx
+++ b/src/Components/PatientForm/FamilyFormSection2.tsx
@@ -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}
diff --git a/src/Components/PatientForm/MedicalHistorySection3.tsx b/src/Components/PatientForm/MedicalHistorySection3.tsx
index 412ff50..9d360a9 100644
--- a/src/Components/PatientForm/MedicalHistorySection3.tsx
+++ b/src/Components/PatientForm/MedicalHistorySection3.tsx
@@ -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
diff --git a/src/Components/PatientForm/PersonalSection1.tsx b/src/Components/PatientForm/PersonalSection1.tsx
index 330a7b2..5d2db9b 100644
--- a/src/Components/PatientForm/PersonalSection1.tsx
+++ b/src/Components/PatientForm/PersonalSection1.tsx
@@ -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