fixed update components

2 files changed, 94 insertions, 111 deletions

diff --git a/client/src/pages/Update/Address/Address.jsx b/client/src/pages/Update/Address/Address.jsx
index 9159508..20a97f7 100644
--- a/client/src/pages/Update/Address/Address.jsx
+++ b/client/src/pages/Update/Address/Address.jsx
@@ -27,7 +27,7 @@ const Address = () => {
     }))
 
   const customStyles = {
-    control: (base, state) => ({
+    control: (base) => ({
       ...base,
       width: '330px',
       height: '60px',
@@ -35,7 +35,7 @@ const Address = () => {
       border: '3px solid',
       borderRadius: '10px !important'
     }),
-    input: (base, state) => ({
+    input: (base) => ({
       ...base,
       display: 'flex',
       justifyContent: 'center',
@@ -55,89 +55,11 @@ const Address = () => {
     setEditable2(!editable2)
   }
 
-  console.log(userData.address.village)
-
   return (
     <>
-      <Header subheading={t('ENROLLMENT')} />
+      <Header subheading={t('UPDATE')} />
       <div className={styles.address}>
         <div className={styles.address__container}>
-          <div className={styles.input}>
-            <div className={styles.input__container}>
-              <label htmlFor="state">{t('STATE')}</label>
-              <div className={styles.input__edit}>
-                <Select
-                  id="state"
-                  name="state"
-                  options={updatedStates('IN')}
-                  defaultValue={userData.address.state}
-                  isDisabled={editable1}
-                  isSearchable={!editable1}
-                  onChange={(e) => {
-                    setUserData({
-                      ...userData,
-                      address: {
-                        ...userData.address,
-                        state: e
-                      }
-                    })
-                  }}
-                  styles={customStyles}
-                />
-                <EditButton
-                  onClick={handleEdit1}
-                  enabled={!editable1 ? '1' : '0'}
-                />
-              </div>
-            </div>
-          </div>
-          <div className={styles.input}>
-            <div className={styles.input__container}>
-              <label htmlFor="city">{t('DISTRICT')}</label>
-              <div className={styles.input__edit}>
-                <Select
-                  id="city"
-                  name="city"
-                  options={updatedCities('IN', userData.address.state.isoCode)}
-                  defaultValue={userData.address.district}
-                  isDisabled={editable2}
-                  isSearchable={!editable2}
-                  onChange={(e) => {
-                    setUserData({
-                      ...userData,
-                      address: {
-                        ...userData.address,
-                        district: e
-                      }
-                    })
-                  }}
-                  styles={customStyles}
-                />
-                <EditButton
-                  onClick={handleEdit2}
-                  enabled={!editable2 ? '1' : '0'}
-                />
-              </div>
-            </div>
-          </div>
-          <UpdateInput
-            id="town"
-            label={t('VILLAGE_TOWN')}
-            defaultValue={userData.address.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}>
           <UpdateInput
             id="houseNo"
             label={t('HOUSE_NUMBER_APARTMENT')}
@@ -155,36 +77,65 @@ const Address = () => {
             placeholder={t('ENTER_YOUR_HOUSE_NUMBER_APARTMENT')}
           />
           <UpdateInput
-            id="street"
-            label={t('STREET_ROAD')}
-            defaultValue={userData.address.street}
+            id="town"
+            label={t('VILLAGE_TOWN')}
+            defaultValue={userData.address.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>
+            <div className={styles.input__edit}>
+              <Select
+                id="state"
+                name="state"
+                options={updatedStates('IN')}
+                defaultValue={userData.address.state}
+                isDisabled={editable1}
+                isSearchable={!editable1}
+                onChange={(e) => {
+                  setUserData({
+                    ...userData,
+                    address: {
+                      ...userData.address,
+                      state: e
+                    }
+                  })
+                }}
+                styles={customStyles}
+              />
+              <EditButton
+                onClick={handleEdit1}
+                enabled={!editable1 ? '1' : '0'}
+              />
+            </div>
+          </div>
+        </div>
+        <div className={styles.address__container}>
           <UpdateInput
-            id="locality"
-            label={t('AREA_LOCALITY')}
-            defaultValue={userData.address.locality}
+            id="street"
+            label={t('STREET_ROAD')}
+            defaultValue={userData.address.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')}
           />
           <UpdateInput
             id="postOffice"
@@ -202,23 +153,50 @@ const Address = () => {
             }}
             placeholder={t('ENTER_YOUR_AREA_POST_OFFICE')}
           />
+          <div className={styles.input__container}>
+            <label htmlFor="city">{t('DISTRICT')}</label>
+            <div className={styles.input__edit}>
+              <Select
+                id="city"
+                name="city"
+                options={updatedCities('IN', userData.address.state.isoCode)}
+                defaultValue={userData.address.district}
+                isDisabled={editable2}
+                isSearchable={!editable2}
+                onChange={(e) => {
+                  setUserData({
+                    ...userData,
+                    address: {
+                      ...userData.address,
+                      district: e
+                    }
+                  })
+                }}
+                styles={customStyles}
+              />
+              <EditButton
+                onClick={handleEdit2}
+                enabled={!editable2 ? '1' : '0'}
+              />
+            </div>
+          </div>
         </div>
         <div className={styles.address__container}>
           <UpdateInput
-            id="landmark"
-            label={t('LANDMARK')}
-            defaultValue={userData.address.landmark}
+            id="locality"
+            label={t('AREA_LOCALITY')}
+            defaultValue={userData.address.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')}
           />
           <UpdateInput
             id="pincode"
@@ -236,6 +214,22 @@ const Address = () => {
             }}
             placeholder={t('ENTER_YOUR_AREA_PINCODE')}
           />
+          <UpdateInput
+            id="landmark"
+            label={t('LANDMARK')}
+            defaultValue={userData.address.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/Update/Address/Address.module.css b/client/src/pages/Update/Address/Address.module.css
index 41cbf17..ccaca08 100644
--- a/client/src/pages/Update/Address/Address.module.css
+++ b/client/src/pages/Update/Address/Address.module.css
@@ -1,33 +1,22 @@
 .address {
   display: flex;
   justify-content: center;
+  margin: 40px 0px 0px;
 }
 
 .address__container {
   margin: 0px 20px;
 }
 
-.input {
+.input__container {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   font-family: 'Barlow';
   font-size: var(--font-medium-s);
 }
 
-.input__container {
-  display: flex;
-  flex-direction: column;
-}
-
-.input__edit{
+.input__edit {
   display: flex;
   flex-direction: row;
 }
-
-.input__field {
-  width: 300px;
-  margin: 10px 0px;
-  padding: 20px 10px;
-  border: 3px solid;
-  border-radius: 10px;
-}