enrollment improvements

2 files changed, 77 insertions, 92 deletions

diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx
index 9ae1857..3d1c520 100644
--- a/client/src/pages/Enrollment/Address/Address.jsx
+++ b/client/src/pages/Enrollment/Address/Address.jsx
@@ -4,9 +4,9 @@ import Input from '../../../components/Input/Input'
 import { State, City } from 'country-state-city'
 import Select from 'react-select'
 import { userContext } from '../../../context/User'
+import { useTranslation } from 'react-i18next'
 
 import styles from './Address.module.css'
-import { useTranslation } from 'react-i18next'
 
 const Address = () => {
   const { t } = useTranslation()
@@ -26,7 +26,7 @@ const Address = () => {
     }))
 
   const customStyles = {
-    control: (base, state) => ({
+    control: (base) => ({
       ...base,
       width: '330px',
       height: '60px',
@@ -34,7 +34,7 @@ const Address = () => {
       border: '3px solid',
       borderRadius: '10px !important'
     }),
-    input: (base, state) => ({
+    input: (base) => ({
       ...base,
       display: 'flex',
       justifyContent: 'center',
@@ -49,66 +49,6 @@ const Address = () => {
       <Header subheading={t('ENROLLMENT')} />
       <div className={styles.address}>
         <div className={styles.address__container}>
-          <div className={styles.input}>
-            <div className={styles.input__container}>
-              <label htmlFor="state">{t('STATE')}</label>
-              <Select
-                id="state"
-                name="state"
-                options={updatedStates('IN')}
-                value={userData.address?.state}
-                onChange={(e) => {
-                  setUserData({
-                    ...userData,
-                    address: {
-                      ...userData.address,
-                      state: e
-                    }
-                  })
-                }}
-                styles={customStyles}
-              />
-            </div>
-          </div>
-          <div className={styles.input}>
-            <div className={styles.input__container}>
-              <label htmlFor="city">{t('DISTRICT')}</label>
-              <Select
-                id="city"
-                name="city"
-                options={updatedCities('IN', userData.address?.state?.isoCode)}
-                value={userData.address?.district}
-                onChange={(e) => {
-                  setUserData({
-                    ...userData,
-                    address: {
-                      ...userData.address,
-                      district: e
-                    }
-                  })
-                }}
-                styles={customStyles}
-              />
-            </div>
-          </div>
-          <Input
-            id="town"
-            label={t('VILLAGE_TOWN')}
-            value={userData.village}
-            type="text"
-            onChange={(e) => {
-              setUserData({
-                ...userData,
-                address: {
-                  ...userData.address,
-                  village: e.target.value
-                }
-              })
-            }}
-            placeholder={t('ENTER_YOUR_VILLAGE_TOWN')}
-          />
-        </div>
-        <div className={styles.address__container}>
           <Input
             id="houseNo"
             label={t('HOUSE_NUMBER_APARTMENT')}
@@ -126,36 +66,57 @@ const Address = () => {
             placeholder={t('ENTER_YOUR_HOUSE_NUMBER_APARTMENT')}
           />
           <Input
-            id="street"
-            label={t('STREET_ROAD')}
-            value={userData.street}
+            id="town"
+            label={t('VILLAGE_TOWN')}
+            value={userData.village}
             type="text"
             onChange={(e) => {
               setUserData({
                 ...userData,
                 address: {
                   ...userData.address,
-                  street: e.target.value
+                  village: e.target.value
                 }
               })
             }}
-            placeholder={t('ENTER_YOUR_STREET_ROAD')}
+            placeholder={t('ENTER_YOUR_VILLAGE_TOWN')}
           />
+          <div className={styles.input__container}>
+            <label htmlFor="state">{t('STATE')}</label>
+            <Select
+              id="state"
+              name="state"
+              options={updatedStates('IN')}
+              value={userData.address?.state}
+              onChange={(e) => {
+                setUserData({
+                  ...userData,
+                  address: {
+                    ...userData.address,
+                    state: e
+                  }
+                })
+              }}
+              styles={customStyles}
+            />
+          </div>
+        </div>
+        <div className={styles.address__container}>
           <Input
-            id="locality"
-            label={t('AREA_LOCALITY')}
-            value={userData.locality}
+            id="street"
+            label={t('STREET_ROAD')}
+            value={userData.street}
             type="text"
             onChange={(e) => {
               setUserData({
                 ...userData,
                 address: {
                   ...userData.address,
-                  locality: e.target.value
+                  street: e.target.value
                 }
               })
             }}
-            placeholder={t('ENTER_YOUR_AREA_LOCALITY')}
+            placeholder={t('ENTER_YOUR_STREET_ROAD')}
           />
           <Input
             id="postOffice"
@@ -173,23 +134,42 @@ const Address = () => {
             }}
             placeholder={t('ENTER_YOUR_AREA_POST_OFFICE')}
           />
+          <div className={styles.input__container}>
+            <label htmlFor="city">{t('DISTRICT')}</label>
+            <Select
+              id="city"
+              name="city"
+              options={updatedCities('IN', userData.address?.state?.isoCode)}
+              value={userData.address?.district}
+              onChange={(e) => {
+                setUserData({
+                  ...userData,
+                  address: {
+                    ...userData.address,
+                    district: e
+                  }
+                })
+              }}
+              styles={customStyles}
+            />
+          </div>
         </div>
         <div className={styles.address__container}>
           <Input
-            id="landmark"
-            label={t('LANDMARK')}
-            value={userData.landmark}
+            id="locality"
+            label={t('AREA_LOCALITY')}
+            value={userData.locality}
             type="text"
             onChange={(e) => {
               setUserData({
                 ...userData,
                 address: {
                   ...userData.address,
-                  landmark: e.target.value
+                  locality: e.target.value
                 }
               })
             }}
-            placeholder={t('ENTER_ANY_NEAREST_LANDMARK')}
+            placeholder={t('ENTER_YOUR_AREA_LOCALITY')}
           />
           <Input
             id="pincode"
@@ -207,6 +187,22 @@ const Address = () => {
             }}
             placeholder={t('ENTER_YOUR_AREA_PINCODE')}
           />
+          <Input
+            id="landmark"
+            label={t('LANDMARK')}
+            value={userData.landmark}
+            type="text"
+            onChange={(e) => {
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  landmark: e.target.value
+                }
+              })
+            }}
+            placeholder={t('ENTER_ANY_NEAREST_LANDMARK')}
+          />
         </div>
       </div>
     </>
diff --git a/client/src/pages/Enrollment/Address/Address.module.css b/client/src/pages/Enrollment/Address/Address.module.css
index 26ca909..eafa781 100644
--- a/client/src/pages/Enrollment/Address/Address.module.css
+++ b/client/src/pages/Enrollment/Address/Address.module.css
@@ -1,28 +1,17 @@
 .address {
   display: flex;
   justify-content: center;
+  margin: 40px 0px 0px;
 }
 
 .address__container {
   margin: 0px 20px;
 }
 
-.input {
+.input__container {
   display: flex;
   justify-content: center;
+  flex-direction: column;
   font-family: 'Barlow';
   font-size: var(--font-medium-s);
 }
-
-.input__container {
-  display: flex;
-  flex-direction: column;
-}
-
-.input__field {
-  width: 300px;
-  margin: 10px 0px;
-  padding: 20px 10px;
-  border: 3px solid;
-  border-radius: 10px;
-}