From 3012d6b825f073bf51525487148111b1d0a668fc Mon Sep 17 00:00:00 2001
From: AyushRanjan <ayush.ranjan@navi.com>
Date: Mon, 11 Sep 2023 14:03:44 +0530
Subject: [PATCH] colored logo added

---
 src/assets/Person.svg                   | 10 +++++
 src/components/MembersDetails/index.tsx | 53 ++++++++++++++++++++-----
 2 files changed, 52 insertions(+), 11 deletions(-)
 create mode 100644 src/assets/Person.svg

diff --git a/src/assets/Person.svg b/src/assets/Person.svg
new file mode 100644
index 0000000..adc284d
--- /dev/null
+++ b/src/assets/Person.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Person">
+<mask id="mask0_385_34980" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect id="Bounding box" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_385_34980)">
+<path id="person_filled" d="M12 12C10.9 12 9.95833 11.6083 9.175 10.825C8.39167 10.0417 8 9.1 8 8C8 6.9 8.39167 5.95833 9.175 5.175C9.95833 4.39167 10.9 4 12 4C13.1 4 14.0417 4.39167 14.825 5.175C15.6083 5.95833 16 6.9 16 8C16 9.1 15.6083 10.0417 14.825 10.825C14.0417 11.6083 13.1 12 12 12ZM6 20C5.45 20 4.97933 19.8043 4.588 19.413C4.196 19.021 4 18.55 4 18V17.2C4 16.6333 4.146 16.1123 4.438 15.637C4.72933 15.1623 5.11667 14.8 5.6 14.55C6.63333 14.0333 7.68333 13.6457 8.75 13.387C9.81667 13.129 10.9 13 12 13C13.1 13 14.1833 13.129 15.25 13.387C16.3167 13.6457 17.3667 14.0333 18.4 14.55C18.8833 14.8 19.2707 15.1623 19.562 15.637C19.854 16.1123 20 16.6333 20 17.2V18C20 18.55 19.8043 19.021 19.413 19.413C19.021 19.8043 18.55 20 18 20H6Z" fill="#0276FE"/>
+</g>
+</g>
+</svg>
diff --git a/src/components/MembersDetails/index.tsx b/src/components/MembersDetails/index.tsx
index 81ee099..f7f9860 100644
--- a/src/components/MembersDetails/index.tsx
+++ b/src/components/MembersDetails/index.tsx
@@ -5,6 +5,7 @@ import { Avatar, Typography, Tag } from '@navi/web-ui/lib/primitives';
 import styles from './Members.module.scss';
 import Button from '@navi/web-ui/lib/primitives/Button';
 import person_logo from '@src/assets/person_filled.svg';
+import person_logo_colored from '@src/assets/person.svg';
 import { toast } from '@navi/web-ui/lib/primitives/Toast';
 
 const MembersDetails = (props: any) => {
@@ -24,13 +25,14 @@ const MembersDetails = (props: any) => {
   const userRoles = userData.roles || [];
   console.log('userRoles', userRoles);
 
+  const managerEmail = data?.participants?.find(
+    participant => participant.manager,
+  )?.email;
+  const storedEmail = localStorage.getItem('email-id');
+  const isAdmin = userRoles.includes('admin');
+
   useEffect(() => {
     // Check if the manager's email matches the one stored in local storage
-    const managerEmail = data?.participants?.find(
-      participant => participant.manager,
-    )?.email;
-    const storedEmail = localStorage.getItem('email-id');
-    const isAdmin = userRoles.includes('admin');
 
     if (managerEmail === storedEmail || isAdmin) {
       // Display the remove button
@@ -39,7 +41,16 @@ const MembersDetails = (props: any) => {
       // Hide the remove button
       setShowRemoveButton(false);
     }
-  }, [data]);
+  }, [data, userRoles]);
+
+  const sortedParticipants = data?.participants?.sort((a, b) => {
+    // If "a" is a manager and "b" is not, "a" comes first
+    if (a.manager && !b.manager) return -1;
+    // If "b" is a manager and "a" is not, "b" comes first
+    if (b.manager && !a.manager) return 1;
+    // Otherwise, maintain the existing order
+    return 0;
+  });
 
   return (
     <div>
@@ -74,7 +85,7 @@ const MembersDetails = (props: any) => {
 
                 <div className={styles['participant-detail']}>
                   <div className={styles['participant-detail-nest']}>
-                    {showRemoveButton && (
+                    {showRemoveButton && !participant.manager && (
                       <div className={styles[`mark-as-manager`]}>
                         <Tag
                           color="blue"
@@ -83,19 +94,39 @@ const MembersDetails = (props: any) => {
                         />
                       </div>
                     )}
-                    {showRemoveButton && (
+                    {showRemoveButton && !participant.manager && (
                       <img src={person_logo} alt="person_logo" />
                     )}
                   </div>
-                  &nbsp;&nbsp;&nbsp;&nbsp;
-                  {showRemoveButton && (
+
+                  <div className={styles['participant-detail-nest']}>
+                    {showRemoveButton && !participant.manager && (
+                      <div className={styles[`mark-as-manager`]}>
+                        <Tag
+                          color="blue"
+                          label="Mark as manager"
+                          variant="transparent"
+                        />
+                      </div>
+                    )}
+                    {showRemoveButton && participant.manager && (
+                      <img src={person_logo_colored} alt="person_logo" />
+                    )}
+                  </div>
+
+                  {showRemoveButton && !participant.manager && (
                     <Button
                       variant="text"
                       onClick={() => handleRemoveUser(participant)}
                     >
-                      Remove
+                      &nbsp;&nbsp;&nbsp;&nbsp;Remove
                     </Button>
                   )}
+                  {participant.manager && (
+                    <Typography variant="p4">
+                      &nbsp;&nbsp;&nbsp;Manager
+                    </Typography>
+                  )}
                 </div>
               </div>
             ))}