icon and remove buttons are added

src/Pages/Team/Team.module.scss

@@ -16,6 +16,7 @@
 
 .custom-bordered-input {
   margin-top: 20px;
+  background-color: aquamarine;
 }
 
 .custom-textarea {
@@ -25,6 +26,7 @@
 
 .team-form-wrapper {
   display: flex;
+  background-color: blueviolet;
   justify-content: space-between;
   gap: 24px;
   padding: 6px 0;
@@ -46,6 +48,7 @@
 }
 
 .content-wrapper {
+  background-color: aqua;
   width: 50%;
   padding: 0 12px 12px;
 }
@@ -67,7 +70,6 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-
   .title {
     padding: 12px;
   }

src/Pages/Team/partials/TeamForm.tsx

@@ -105,16 +105,21 @@ const TeamForm = (props: TeamFormProps) => {
 
   const returnSlackChannel = () => {
     return data?.webhookSlackChannelName && data?.webhookSlackChannelId ? (
-      <Typography variant="p4" className={DrawerStyles['slack-channel']}>
-        <SlackIcon />
-        <a
-          href={`https://go-navi.slack.com/archives/${data?.webhookSlackChannelId}`}
-          target="_blank"
-          rel="noreferrer"
-        >
-          {data?.webhookSlackChannelName}
-        </a>
-      </Typography>
+      <div className="slack-channel-wrapper">
+        <Typography variant="p4" className={DrawerStyles['slack-channel']}>
+          <SlackIcon />
+          <div className="slack-channel-content">
+            <a
+              href={`https://go-navi.slack.com/archives/${data?.webhookSlackChannelId}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {data?.webhookSlackChannelName}
+            </a>
+            <Button variant="text"> Remove </Button>
+          </div>
+        </Typography>
+      </div>
     ) : (
       '-'
     );
@@ -149,6 +154,7 @@ const TeamForm = (props: TeamFormProps) => {
             <MembersDetails data={data} />
           </div>
         </div>
+
         <hr className={styles['vertical-line']} />
         <div className={styles['content-wrapper']}>
           <div className={styles['custom-bordered-input']}>
@@ -204,3 +210,14 @@ const TeamForm = (props: TeamFormProps) => {
 };
 
 export default TeamForm;
+/**
+ * <div className={styles['members-list']}>
+              {data?.participants?.map(member => (
+                <div key={member.id} className={styles['member-item']}>
+                  <span>{member.name}</span>
+                  <Button variant="text">
+                    Remove
+                  </Button>
+                </div>))}
+            </div>
+ */

src/assets/person_filled.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 8C6.9 8 5.95833 7.60833 5.175 6.825C4.39167 6.04167 4 5.1 4 4C4 2.9 4.39167 1.95833 5.175 1.175C5.95833 0.391667 6.9 0 8 0C9.1 0 10.0417 0.391667 10.825 1.175C11.6083 1.95833 12 2.9 12 4C12 5.1 11.6083 6.04167 10.825 6.825C10.0417 7.60833 9.1 8 8 8ZM2 16C1.45 16 0.979333 15.8043 0.588 15.413C0.196 15.021 0 14.55 0 14V13.2C0 12.6333 0.146 12.1123 0.438 11.637C0.729334 11.1623 1.11667 10.8 1.6 10.55C2.63333 10.0333 3.68333 9.64567 4.75 9.387C5.81667 9.129 6.9 9 8 9C9.1 9 10.1833 9.129 11.25 9.387C12.3167 9.64567 13.3667 10.0333 14.4 10.55C14.8833 10.8 15.2707 11.1623 15.562 11.637C15.854 12.1123 16 12.6333 16 13.2V14C16 14.55 15.8043 15.021 15.413 15.413C15.021 15.8043 14.55 16 14 16H2Z" fill="#969696"/>
+</svg>

src/components/MembersDetails/Members.module.scss

@@ -4,10 +4,20 @@
   align-items: center;
   margin-top: 12px;
   cursor: pointer;
+  //background-color: orange;
 }
 
 .participant-detail {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+
   gap: 4px;
+  // margin-left: 15px;
+  //background-color: red;
+}
+
+.participant-remove {
+  //background-color: whitesmoke;
+  margin-left: 100px;
 }

src/components/MembersDetails/index.tsx

@@ -3,6 +3,8 @@ import { useState } from 'react';
 import { Avatar, Typography } 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';
 
 const MembersDetails = (props: any) => {
   const { data } = props;
@@ -23,6 +25,12 @@ 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>
                   {totalMembers > 10 && index === showTotalMembers - 1 ? (
                     totalMembers !== showTotalMembers ? (
                       <div onClick={() => setShowTotalMembers(totalMembers)}>