From 3c038ffa7d36e1ce59ddfbf314260e3e7955c491 Mon Sep 17 00:00:00 2001
From: sonika <>
Date: Mon, 21 Aug 2023 14:34:17 +0530
Subject: [PATCH] padding issue

---
 src/App.css                                   |  8 +--
 src/Components/Header.tsx                     |  6 +-
 .../PatientForm/FamilyFormSection2.tsx        | 46 ++++++-------
 .../PatientForm/MedicalHistorySection3.tsx    | 69 +++++++++++++++++--
 src/Components/PatientForm/PatientForm.tsx    | 25 +++++--
 .../PatientForm/PersonalSection1.tsx          | 24 +++----
 6 files changed, 122 insertions(+), 56 deletions(-)

diff --git a/src/App.css b/src/App.css
index 2593164..a55c10d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -9,10 +9,6 @@
     margin: 5%;
 }
 
-.textfield-padding .css-e4w4as-MuiFormLabel-root-MuiInputLabel-root{
-    padding:'15px' !important;
-}
-
-.custom-legend-padding fieldset legend {
-    padding: 25px !important;
+.collapsable-form-style label {
+    padding: 15px;
 }
\ No newline at end of file
diff --git a/src/Components/Header.tsx b/src/Components/Header.tsx
index 59a1439..f86d545 100644
--- a/src/Components/Header.tsx
+++ b/src/Components/Header.tsx
@@ -22,9 +22,9 @@ export default function Header(){
               </IconButton>
               
               <Button color="inherit" component={Link}
-                to='/' sx={{marginLeft:'20px', fontSize:10}}>
-                <Typography  component="div" sx={{ flexGrow: 1 }}>
-                  Home
+                to='/' sx={{marginLeft:'10px', fontSize:10}}>
+                <Typography  component="div" sx={{ flexGrow: 1, fontSize:18 }}>
+                  In Motion Spine & Joint Center
                 </Typography>
               </Button>
             </Toolbar>
diff --git a/src/Components/PatientForm/FamilyFormSection2.tsx b/src/Components/PatientForm/FamilyFormSection2.tsx
index 8d1ab00..5677bc0 100644
--- a/src/Components/PatientForm/FamilyFormSection2.tsx
+++ b/src/Components/PatientForm/FamilyFormSection2.tsx
@@ -84,11 +84,11 @@ export default function FamilyFormSection(){
             </FormControl>
             </Grid>
            
-            <Grid item xs={4} className='collapsable-form-style textfield-padding'></Grid>
-            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <Grid item xs={4} className='collapsable-form-style '></Grid>
+            <Grid item xs={4} className='collapsable-form-style '>
                 <TextField 
                 required
-                variant="filled" 
+                variant="outlined" 
                 label="Number of Children/Ages" 
                 className='collapsable-form-style'
                 name='numberOfChildren'
@@ -99,10 +99,10 @@ export default function FamilyFormSection(){
                 helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren}
                 />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <Grid item xs={4} className='collapsable-form-style '>
                 <TextField 
                 required
-                variant="filled" 
+                variant="outlined" 
                 label="Occupation" 
                 className='collapsable-form-style'
                 name='occupation'
@@ -114,9 +114,9 @@ export default function FamilyFormSection(){
                 />
                
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <Grid item xs={4} className='collapsable-form-style '>
                  <TextField 
-                 variant="filled" 
+                 variant="outlined" 
                  label="Hours/Week" 
                  type="number" 
                  className='collapsable-form-style'
@@ -127,9 +127,9 @@ export default function FamilyFormSection(){
                  />
                  
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <Grid item xs={4} className='collapsable-form-style '>
                 <TextField 
-                variant="filled" 
+                variant="outlined" 
                 label="Employer" 
                 className='collapsable-form-style'
                 name='employer'
@@ -138,9 +138,9 @@ export default function FamilyFormSection(){
                 onBlur={formik.handleBlur}
                 />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <Grid item xs={4} className='collapsable-form-style '>
                 <TextField 
-                variant="filled" 
+                variant="outlined" 
                 label="Business Phone" 
                 type="tel" 
                 className='collapsable-form-style'
@@ -150,9 +150,9 @@ export default function FamilyFormSection(){
                 onBlur={formik.handleBlur}
                 />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <Grid item xs={4} className='collapsable-form-style '>
                  <TextField 
-                 variant="filled" 
+                 variant="outlined" 
                  label="Spouse's Name" 
                  className='collapsable-form-style'
                  name='spouseName'
@@ -161,9 +161,9 @@ export default function FamilyFormSection(){
                  onBlur={formik.handleBlur}
                  />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <Grid item xs={4} className='collapsable-form-style '>
                  <TextField 
-                 variant="filled" 
+                 variant="outlined" 
                  label="Spouse's Employer" 
                  className='collapsable-form-style'
                  name='spouseEmployer'
@@ -172,9 +172,9 @@ export default function FamilyFormSection(){
                  onBlur={formik.handleBlur}
                  />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <Grid item xs={4} className='collapsable-form-style '>
                   <TextField 
-                  variant="filled" 
+                  variant="outlined" 
                   label="Business Phone" 
                   type="tel" 
                   className='collapsable-form-style'
@@ -184,9 +184,9 @@ export default function FamilyFormSection(){
                   onBlur={formik.handleBlur}
                   />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <Grid item xs={4} className='collapsable-form-style '>
                    <TextField 
-                   variant="filled" 
+                   variant="outlined" 
                    label="Emergency Contact" 
                    className='collapsable-form-style'
                    name='emergencyContact'
@@ -195,9 +195,9 @@ export default function FamilyFormSection(){
                    onBlur={formik.handleBlur}
                    />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <Grid item xs={4} className='collapsable-form-style '>
                     <TextField 
-                    variant="filled" 
+                    variant="outlined" 
                     label="Relationship" 
                     className='collapsable-form-style'
                     name='relationship'
@@ -206,9 +206,9 @@ export default function FamilyFormSection(){
                     onBlur={formik.handleBlur}
                     />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <Grid item xs={4} className='collapsable-form-style '>
                      <TextField 
-                     variant="filled" 
+                     variant="outlined" 
                      label="Spouse's Phone" type="tel" 
                      className='collapsable-form-style'
                      name='phone'
diff --git a/src/Components/PatientForm/MedicalHistorySection3.tsx b/src/Components/PatientForm/MedicalHistorySection3.tsx
index 7cf12b5..412ff50 100644
--- a/src/Components/PatientForm/MedicalHistorySection3.tsx
+++ b/src/Components/PatientForm/MedicalHistorySection3.tsx
@@ -56,7 +56,7 @@ export default function MedicalHistoryForm(){
         <Grid container direction="row">
             <Grid item xs={4} className='collapsable-form-style'>
                 <TextField 
-                variant="filled"
+                variant="outlined"
                 label="Family physician" 
                 name='familyphysician'
                 onChange={formik.handleChange}
@@ -66,7 +66,7 @@ export default function MedicalHistoryForm(){
             </Grid>
             <Grid item xs={4} className='collapsable-form-style'>
                 <TextField 
-                variant="filled"
+                variant="outlined"
                 label="City" 
                 name='city'
                 onChange={formik.handleChange}
@@ -76,7 +76,7 @@ export default function MedicalHistoryForm(){
             </Grid>
             <Grid item xs={4} className='collapsable-form-style'>
                  <TextField 
-                 variant="filled"
+                 variant="outlined"
                  label="State" 
                  name='state'
                  onChange={formik.handleChange}
@@ -86,7 +86,7 @@ export default function MedicalHistoryForm(){
             </Grid>
             <Grid item xs={4} className='collapsable-form-style'>
                 <TextField 
-                variant="filled"
+                variant="outlined"
                 label="Phone" 
                 type="tel" 
                 name='phone'
@@ -101,7 +101,7 @@ export default function MedicalHistoryForm(){
 
             <Grid item xs={4} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style'>
                 <FormControl>
-                <FormLabel>Previous Chiropractic Care</FormLabel>
+                <FormLabel>Previous Chiropractic Care:</FormLabel>
                 <RadioGroup
                     // value={patient.gender}
                     aria-labelledby="demo-radio-buttons-group-label"
@@ -118,7 +118,7 @@ export default function MedicalHistoryForm(){
 
             <Grid item xs={4} className='collapsable-form-style'>
                  <TextField 
-                 variant="filled"
+                 variant="outlined"
                  label="Chiropractor's Name" 
                  name='chiropractorName'
                  onChange={formik.handleChange}
@@ -129,7 +129,7 @@ export default function MedicalHistoryForm(){
 
             <Grid item xs={4} className='collapsable-form-style'>
                  <TextField 
-                 variant="filled"
+                 variant="outlined"
                  label="City/State" 
                  name='chiropractorState'
                  onChange={formik.handleChange}
@@ -138,6 +138,61 @@ export default function MedicalHistoryForm(){
                  />
             </Grid>
         </Grid>
+
+        <Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style'>
+                <FormControl>
+                <FormLabel>Who can we thank for referring you to our office:</FormLabel>
+                <RadioGroup
+                    // value={patient.gender}
+                    aria-labelledby="demo-radio-buttons-group-label"
+                    defaultValue="physician"
+                    name="radio-buttons-group"
+                    onChange={formik.handleChange}
+                    sx={{display:'flex', flexDirection:'row'}}
+                >
+                    <FormControlLabel value="friend" control={<Radio />} label="Friend" />
+                    <FormControlLabel value="relative" control={<Radio />} label="Relative" />
+                    <FormControlLabel value="physician" control={<Radio />} label="Physician" />
+                    <FormControlLabel value="instagram" control={<Radio />} label="Instagram" />
+                    <FormControlLabel value="google" control={<Radio />} label="Google" />
+                    <FormControlLabel value="others" control={<Radio />} label="Others" />
+                </RadioGroup>
+            </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'>
+            <FormControl>
+                <FormLabel>How do you prefer to be reminded of your appointments?</FormLabel>
+                <RadioGroup
+                    // value={patient.gender}
+                    aria-labelledby="demo-radio-buttons-group-label"
+                    defaultValue="email"
+                    name="radio-buttons-group"
+                    onChange={formik.handleChange}
+                    sx={{display:'flex', flexDirection:'row'}}
+                >
+                    <FormControlLabel value="email" control={<Radio />} label="Email" />
+                    <FormControlLabel value="text" control={<Radio />} label="Text" />
+                </RadioGroup>
+            </FormControl>
+        </Grid>
         </form>
         </>
     )}
diff --git a/src/Components/PatientForm/PatientForm.tsx b/src/Components/PatientForm/PatientForm.tsx
index 4dd2fb9..3c3329e 100644
--- a/src/Components/PatientForm/PatientForm.tsx
+++ b/src/Components/PatientForm/PatientForm.tsx
@@ -3,7 +3,7 @@ import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Footer from "../Footer";
 import Header from "../Header";
-import {Button, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
+import {Button, Checkbox, FormControlLabel, FormGroup, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
 import PersonalSection from './PersonalSection1';
 import { styled } from '@mui/material/styles';
 import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
@@ -103,7 +103,7 @@ export default function PatientForm(){
                 <Header/>
                     <Paper  elevation={0} sx={{margin:4, minHeight:700}} >
                     <form onSubmit={handleSubmit}>
-                        <Typography variant="h5"  gutterBottom>
+                        <Typography sx={{fontSize:20}}  gutterBottom>
                             Confidential Patient Information
                         </Typography>
                         <Grid>
@@ -114,7 +114,7 @@ export default function PatientForm(){
                                 aria-controls="panel1a-content"
                                 id="panel1a-header"
                                 >
-                                <Typography variant="h6">Patient's Personal Information</Typography>
+                                <Typography sx={{fontSize:18}}>Patient's Personal Information</Typography>
                             </AccordionSummary>
                            
                             <AccordionDetails>
@@ -125,7 +125,7 @@ export default function PatientForm(){
 
                         <Accordion expanded={expanded === 'panel2'} onChange={handleExpandChange('panel2')}>
                             <AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
-                                <Typography variant="h6">Patient's Family Information</Typography>
+                                <Typography sx={{fontSize:18}}>Patient's Family Information</Typography>
                             </AccordionSummary>
 
                             <AccordionDetails>
@@ -135,13 +135,27 @@ export default function PatientForm(){
 
                         <Accordion expanded={expanded === 'panel3'} onChange={handleExpandChange('panel3')}>
                             <AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
-                                <Typography variant="h6">Patient's Medical History Information</Typography>
+                                <Typography sx={{fontSize:18}}>Patient's Medical History Information</Typography>
                             </AccordionSummary>
                             
                             <AccordionDetails>
                                 <MedicalHistory/>
                             </AccordionDetails>
                         </Accordion>
+
+                        <Accordion expanded={expanded === 'panel4'} onChange={handleExpandChange('panel4')}>
+                            <AccordionSummary aria-controls="panel4d-content" id="panel4d-header">
+                                <Typography sx={{fontSize:18}}>Patient's Injury Details</Typography>
+                            </AccordionSummary>
+                            
+                            <AccordionDetails>
+                                <MedicalHistory/>
+                            </AccordionDetails>
+                        </Accordion>
+
+                        <FormGroup sx={{marginTop:3}}>
+                          <FormControlLabel required control={<Checkbox />} label="I hearby state that all the information I have provided is complete and truthful and that I have fully disclosed my health history." />
+                        </FormGroup>
                        
                         <Grid >
                             <Button type="submit" variant="contained" color="primary" sx={{margin:5,left:'40%',width:'200px'}}>
@@ -151,6 +165,7 @@ export default function PatientForm(){
                    
                         </Grid>
                         </form>
+                       
                     </Paper>
                 <Footer/>
              </Paper>
diff --git a/src/Components/PatientForm/PersonalSection1.tsx b/src/Components/PatientForm/PersonalSection1.tsx
index 873a8a3..d4ebe39 100644
--- a/src/Components/PatientForm/PersonalSection1.tsx
+++ b/src/Components/PatientForm/PersonalSection1.tsx
@@ -88,9 +88,9 @@ export default function PersonalSection(){
     return(
         <>
         <Grid container direction="row">
-            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <Grid item xs={4} className='collapsable-form-style '>
              <TextField
-                    variant="filled"
+                    variant="outlined"
                     label="Patient's Full Name"
                     name="fullName"
                     placeholder='Please enter your name'
@@ -106,7 +106,7 @@ export default function PersonalSection(){
                 <Grid item xs={4} className='collapsable-form-style'>
                 <TextField
                     required
-                    variant="filled"
+                    variant="outlined"
                     label="Phone Number"
                     name="cellPhone"
                     placeholder='Please enter your cell Phone number'
@@ -120,7 +120,7 @@ export default function PersonalSection(){
 
                 <Grid item xs={4} className='collapsable-form-style'>
                 <TextField
-                variant="filled"
+                variant="outlined"
                     label="Home Phone Number"
                     name="homePhone"
                     placeholder='Please enter your home phone'
@@ -134,7 +134,7 @@ export default function PersonalSection(){
 
                 <Grid item xs={4} className='collapsable-form-style'>
                 <TextField
-                variant="filled"
+                variant="outlined"
                     label="Email"
                     name="email"
                     placeholder='Please enter your email'
@@ -147,7 +147,7 @@ export default function PersonalSection(){
                 </Grid>
                 <Grid item xs={4} className='collapsable-form-style'>
                 <TextField
-                variant="filled"
+                variant="outlined"
                     label="Age"
                     name="age"
                     type="number"
@@ -169,7 +169,7 @@ export default function PersonalSection(){
                     onChange={(newValue) => {
                         setStartDateValue(newValue);
                     }}
-                    renderInput={(params) => <TextField required  variant="filled" {...params} />}
+                    renderInput={(params) => <TextField required  variant="outlined" {...params} />}
                     />
                 </LocalizationProvider>
                 </FormControl>
@@ -177,7 +177,7 @@ export default function PersonalSection(){
                 </Grid>
                 <Grid item xs={4} className='collapsable-form-style'>
                 <TextField
-                variant="filled"
+                variant="outlined"
                     label="Social Security Number"
                     name="socialSecurityNumber"
                     value={formik.values.socialSecurityNumber}
@@ -190,7 +190,7 @@ export default function PersonalSection(){
 
                 <Grid item xs={4} className='collapsable-form-style'>
                     <TextField
-                        variant="filled"
+                        variant="outlined"
                         label="Mailing Address"
                         name="mailingAddress"
                         value={formik.values.mailingAddress}
@@ -203,7 +203,7 @@ export default function PersonalSection(){
             
                 <Grid item xs={4} className='collapsable-form-style'>
                 <TextField
-                variant="filled"
+                variant="outlined"
                     label="State"
                     name="state"
                     value={formik.values.state}
@@ -216,7 +216,7 @@ export default function PersonalSection(){
 
                 <Grid item xs={4} className='collapsable-form-style'>
                     <TextField
-                        variant="filled"
+                        variant="outlined"
                         label="City"
                         name="city"
                         value={formik.values.city}
@@ -229,7 +229,7 @@ export default function PersonalSection(){
                 
                 <Grid item xs={4} className='collapsable-form-style'>
                 <TextField
-                    variant="filled"
+                    variant="outlined"
                     label="Zip Code"
                     name="zipCode"
                     value={formik.values.zipCode}