mark as manager on hover added

src/Pages/Team/Team.module.scss

@@ -8,7 +8,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: #fff;
+  //background: #fff;
   padding: 12px;
   margin-bottom: 10px;
   border-radius: 8px;
@@ -16,7 +16,7 @@
 
 .custom-bordered-input {
   margin-top: 20px;
-  background-color: aquamarine;
+  //background-color: aquamarine;
 }
 
 .custom-textarea {
@@ -26,7 +26,7 @@
 
 .team-form-wrapper {
   display: flex;
-  background-color: blueviolet;
+  //background-color: blueviolet;
   justify-content: space-between;
   gap: 24px;
   padding: 6px 0;
@@ -48,7 +48,7 @@
 }
 
 .content-wrapper {
-  background-color: aqua;
+  //background-color: aqua;
   width: 50%;
   padding: 0 12px 12px;
 }

src/Pages/Team/partials/TeamForm.tsx

@@ -116,7 +116,6 @@ const TeamForm = (props: TeamFormProps) => {
             >
               {data?.webhookSlackChannelName}
             </a>
-            <Button variant="text"> Remove </Button>
           </div>
         </Typography>
       </div>

src/components/MembersDetails/Members.module.scss

@@ -11,13 +11,16 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-
+  //margin-left: auto;
   gap: 4px;
   // margin-left: 15px;
   //background-color: red;
 }
 
-.participant-remove {
-  //background-color: whitesmoke;
-  margin-left: 100px;
+.participant-detail:hover .mark-as-manager {
+  visibility: visible; /* Show the text when hovering over the participant-detail */
+}
+
+.mark-as-manager {
+  visibility: hidden; /* Hide the text by default */
 }

src/components/MembersDetails/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { Avatar, Typography } from '@navi/web-ui/lib/primitives';
+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';
@@ -25,12 +25,23 @@ const MembersDetails = (props: any) => {
                 <div className={styles['participant-detail']}>
                   <Avatar size={20} isImage src={participant?.image} />{' '}
                   <Typography variant="p3">{participant?.name}</Typography>
-                  <div className={styles['participant-remove']}>
-                    <img src={person_logo} alt="person_logo" />
-                    <Button variant="text">
-                      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Remove{' '}
-                    </Button>
+                </div>
+
+                <div className={styles['participant-detail']}>
+                  <div className={styles[`mark-as-manager`]}>
+                    <Tag
+                      color="blue"
+                      label="Mark as manager"
+                      variant="transparent"
+                    />
                   </div>
+                  <img src={person_logo} alt="person_logo" />
+                </div>
+                <div>
+                  <Button variant="text">Remove</Button>
+                </div>
+
+                <div className={styles['participant-detail']}>
                   {totalMembers > 10 && index === showTotalMembers - 1 ? (
                     totalMembers !== showTotalMembers ? (
                       <div onClick={() => setShowTotalMembers(totalMembers)}>