TP-51166 | added design for hover state in team members detail

src/Pages/TeamRevamp/partials/TeamMemberDetails/TeamMemberDetails.module.scss

@@ -1,7 +1,6 @@
 .member-details-wrapper {
   width: 100%;
 }
-
 .add-member {
   margin-bottom: 24px;
 }
@@ -12,26 +11,53 @@
   justify-content: space-around;
   gap: 50px;
 }
-.icon-wrapper {
-  display: flex;
+.item-details {
+  // background-color: aqua;
+  margin-top: 12px;
+  margin-left: 10px;
+  width: calc(100% - 48px);
+}
+.details-container {
+  display: flex;
+  // background-color: blueviolet;
+  width: 253px;
+}
+.icon-wrapper {
+  margin-top: 12px;
+  width: 32px;
+  margin-left: 6px;
+  // background-color: brown;
+}
+.items-wrapper {
+  width: 253px;
+  border-radius: 8px;
+  height: 90px;
+  // background-color: aqua;
 }
-
 .items-wrapper .make-manger-button,
 .items-wrapper .delete-icon {
   display: none;
 }
 
-.items-wrapper:hover .make-manger-button,
+.items-wrapper:hover .make-manger-button {
+  display: block;
+  margin-top: 4px;
+}
 .items-wrapper:hover .delete-icon {
   display: block;
-  justify-content: flex-end;
+  margin-top: 12px;
+  width: 16px;
+  margin-right: 6px;
 }
-
 .items-wrapper:hover {
-  background-color: #cce4ff;
+  background-color: #b3c7df;
   cursor: pointer;
 }
 
 .manager-wrapper {
-  background-color: antiquewhite;
+  width: 253px;
+  border-radius: 8px;
+}
+.input-wrapper {
+  display: flex;
 }

src/Pages/TeamRevamp/partials/TeamMemberDetails/index.tsx

@@ -24,6 +24,7 @@ import { toast } from '@navi/web-ui/lib/primitives/Toast';
 import { AppDispatch } from '@src/store';
 import PersonIconFill from '@src/assets/PersonIconFill';
 import ManagerIconFill from '@src/assets/ManagerIconFill';
+import MemberIcon from '@src/assets/MemberIcon';
 import DeleteIcon from '@src/assets/DeleteIcon';
 import { TeamState } from '@src/slices/team1Slice';
 import styles from './TeamMemberDetails.module.scss';
@@ -46,6 +47,10 @@ const TeamMemberDetails = () => {
   const [openModal, setOpenModal] = useState(false);
   const [emailIds, setEmailIds] = useState('');
   const [selectedMember, setSelectedMember] = useState<MemberType>();
+  const [hovered, setHovered] = useState({
+    ishovered: false,
+    id: '',
+  });
 
   const teamMembers = teamDetails?.participants?.map((item: any) => ({
     name: item.name,
@@ -137,7 +142,18 @@ const TeamMemberDetails = () => {
         toast.error(`Error removing member from team : ${error.message}`);
       });
   };
-
+  const handleIconchange = item => {
+    setHovered({
+      ishovered: false,
+      id: item.id,
+    });
+  };
+  const handleHoverIcon = item => {
+    setHovered({
+      ishovered: true,
+      id: item.id,
+    });
+  };
   return (
     <div>
       <div className={styles['add-member']}>
@@ -166,14 +182,21 @@ const TeamMemberDetails = () => {
                   : styles['items-wrapper']
               }
               key={item.id}
+              onMouseEnter={() => handleHoverIcon(item)}
+              onMouseLeave={() => handleIconchange(item)}
             >
-              <div className={styles['icon-wrapper']}>
-                <div>
-                  {' '}
+              <div className={styles['details-container']}>
+                <div className={styles['icon-wrapper']}>
                   {manager?.name === item.name ? (
                     <ManagerIconFill />
                   ) : (
-                    <PersonIconFill />
+                    <div>
+                      {hovered.ishovered && hovered.id === item.id ? (
+                        <MemberIcon />
+                      ) : (
+                        <PersonIconFill />
+                      )}
+                    </div>
                   )}
                 </div>
 
@@ -224,10 +247,16 @@ const TeamMemberDetails = () => {
           onClose={handleResetModal}
         >
           <div className={styles['input-wrapper']}>
-            <Typography variant="h4">
-              Are you sure you want to make {`${selectedMember?.name}`} manager
-              of this team?
-            </Typography>
+            <div>
+              <Typography variant="p4">
+                Are you sure you want to make{' '}
+                <Typography variant="h4">
+                  {' '}
+                  {`${selectedMember?.name}`}{' '}
+                </Typography>
+                manager of this team?
+              </Typography>{' '}
+            </div>
           </div>
         </ModalDialog>
         <ModalDialog
@@ -249,7 +278,7 @@ const TeamMemberDetails = () => {
           onClose={handleResetDialog}
         >
           <div className={styles['input-wrapper']}>
-            <Typography variant="h4">
+            <Typography variant="p4">
               Are you sure you want to remove {`${selectedMember?.name}`} from
               this team?
             </Typography>

src/assets/MemberIcon.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import { IconProps } from './types';
+
+const MemberIcon: FC<IconProps> = ({
+  width = '32',
+  height = '32',
+  ...restProps
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+    >
+      <rect width="32" height="32" rx="16" fill="#CCE4FF" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 7C18.2133 7 20 8.78667 20 11C20 13.2133 18.2133 15 16 15C13.7867 15 12 13.2133 12 11C12 8.78667 13.7867 7 16 7ZM16 25.9333C12.6667 25.9333 9.72 24.2267 8 21.64C8.04 18.9867 13.3333 17.5333 16 17.5333C18.6533 17.5333 23.96 18.9867 24 21.64C22.28 24.2267 19.3333 25.9333 16 25.9333Z"
+        fill="#3591FE"
+      />
+    </svg>
+  );
+};
+
+export default MemberIcon;