admin UI improvement and back button added

2 files changed, 67 insertions, 19 deletions

diff --git a/admin/src/components/Accordion/Accordion.jsx b/admin/src/components/Accordion/Accordion.jsx
index 62663a6..4e7c1c1 100644
--- a/admin/src/components/Accordion/Accordion.jsx
+++ b/admin/src/components/Accordion/Accordion.jsx
@@ -18,28 +18,48 @@ const Accordion = ({name, user}) => {
       {isActive && (
         <div className={styles.accordion__content}>
           <div className={styles.accordion__demographic}>
-            <div>Name : {user.name}</div>
-            <div>Gender : {user.gender}</div>
-            <div>Date of Birth : {user.dob}</div>
-            <div>Mobile Number : {user.mobile}</div>
-            <div>Email : {user.email}</div>
-            <div>
-              Address : {user.address.houseNo},{user.address.street},
-              {user.address.locality},{user.address.landmark},
-              {user.address.village},{user.address.district.name},
-              {user.address.state.name},{user.address.pincode}
+            <div className={styles.demographic__heading}>
+              <div>Name</div>
+              <div>Gender</div>
+              <div>Date of Birth</div>
+              <div>Mobile Number</div>
+              <div>Email</div>
+              <div>Address</div>
+              <div>Indian Resident</div>
+            </div>
+            <hr />
+            <div className={styles.demographic__content}>
+              <div>{user.name}</div>
+              <div>{user.gender}</div>
+              <div>{user.dob}</div>
+              <div>{user.mobile}</div>
+              <div>{user.email}</div>
+              <div>
+                {user.address.houseNo},{user.address.street},
+                {user.address.locality},{user.address.landmark},
+                {user.address.village},{user.address.district.name},
+                {user.address.state.name},{user.address.pincode}
+              </div>
+              <div>Indian Resident : {user.indianResident ? 'Yes' : 'No'}</div>
             </div>
-            <div>Indian Resident : {user.indianResident ? 'Yes' : 'No'}</div>
           </div>
           <div className={styles.accordion__biometric}>
-            <img src={user.photo} alt='' />
-            <Button variant='contained'>Documents</Button>
-            <Button variant='contained'>Biometric</Button>
+            <img
+              src={user.photo}
+              alt=''
+              height='300px'
+              className={styles.accordion__biometric_image}
+            />
+            <Button
+              sx={{margin: '10px 0px', padding: '20px'}}
+              variant='contained'
+            >
+              Documents
+            </Button>
+            <Button sx={{padding: '20px'}} variant='contained'>
+              Biometric
+            </Button>
           </div>
-
-          <img src={user.documents.POI} alt='' />
-          <img src={user.documents.POA} alt='' />
-          <img src={user.documents.DOB} alt='' />
         </div>
       )}
     </div>
diff --git a/admin/src/components/Accordion/Accordion.module.css b/admin/src/components/Accordion/Accordion.module.css
index 86a1c7b..70bee92 100644
--- a/admin/src/components/Accordion/Accordion.module.css
+++ b/admin/src/components/Accordion/Accordion.module.css
@@ -1,5 +1,5 @@
 .accordion {
-  width: 600px;
+  width: 1500px;
   margin: 2rem auto;
 }
 
@@ -24,6 +24,34 @@
 }
 
 .accordion__content {
+  display: flex;
+  justify-content: center;
+  background-color: #2c3e50;
+  border-radius: 10px;
+  margin: 10px 0px;
+}
+
+.accordion__demographic {
+  display: flex;
+  width: 60%;
   background-color: #ecf0f1;
   border-radius: 10px;
+  margin-right: 10px;
+  padding: 20px;
+}
+
+.accordion__biometric {
+  width: 40%;
+  display: flex;
+  flex-direction: column;
+}
+
+.accordion__biometric_image {
+  border-radius: 6px;
+}
+
+.demographic__heading div,
+.demographic__content div {
+  margin: 20px 0px;
+  font-size: var(--font-medium-s);
 }