mark as manager done

src/Pages/Team/partials/TeamForm.tsx

@@ -18,6 +18,7 @@ import { ApiService } from '@src/services/api';
 import MembersDetails from '@src/components/MembersDetails';
 import DrawerStyles from '@src/Pages/Incidents/DrawerMode/DrawerMode.module.scss';
 import styles from '../Team.module.scss';
+import AlertOutlineIcon from '@navi/web-ui/lib/icons/AlertOutlineIcon';
 
 const TeamForm = (props: TeamFormProps) => {
   const { teamId, isExpanded, setTeamId, setLastUpdatedAt } = props;

src/components/MembersDetails/Members.module.scss

@@ -9,15 +9,19 @@
 
 .participant-detail {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  //align-items: center;
+  //justify-content: space-between;
   //margin-left: auto;
   gap: 4px;
   // margin-left: 15px;
   //background-color: red;
 }
 
-.participant-detail:hover .mark-as-manager {
+.participant-detail-nest {
+  display: flex;
+  //background-color: aqua;
+}
+.participant-detail-nest:hover .mark-as-manager {
   visibility: visible; /* Show the text when hovering over the participant-detail */
 }
 

src/components/MembersDetails/index.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import { Avatar, Typography, Tag } from '@navi/web-ui/lib/primitives';
+import { AlertOutlineIcon } from '@navi/web-ui/lib/icons';
 
 import styles from './Members.module.scss';
 import Button from '@navi/web-ui/lib/primitives/Button';
@@ -26,21 +27,24 @@ const MembersDetails = (props: any) => {
                   <Avatar size={20} isImage src={participant?.image} />{' '}
                   <Typography variant="p3">{participant?.name}</Typography>
                 </div>
-
                 <div className={styles['participant-detail']}>
-                  <div className={styles[`mark-as-manager`]}>
-                    <Tag
-                      color="blue"
-                      label="Mark as manager"
-                      variant="transparent"
-                    />
+                  <div className={styles['participant-detail-nest']}>
+                    <div className={styles[`mark-as-manager`]}>
+                      <Tag
+                        color="blue"
+                        label="Mark as manager"
+                        variant="transparent"
+                      />
+                    </div>
+                    <img src={person_logo} alt="person_logo" />
                   </div>
-                  <img src={person_logo} alt="person_logo" />
-                </div>
-                <div>
+                  &nbsp;&nbsp;
                   <Button variant="text">Remove</Button>
                 </div>
 
+                <div></div>
+                <div></div>
+
                 <div className={styles['participant-detail']}>
                   {totalMembers > 10 && index === showTotalMembers - 1 ? (
                     totalMembers !== showTotalMembers ? (