TP-51166 | design-3

src/Pages/TeamRevamp/TeamList/TeamList.module.scss

@@ -54,3 +54,6 @@
   margin-top: 12px;
   color: var(--navi-color-gray-c3);
 }
+.add-icon {
+  margin-left: 3px;
+}

src/Pages/TeamRevamp/TeamList/index.tsx

@@ -11,20 +11,29 @@ import { useAuthData } from '@src/services/hooks/useAuth';
 import CreateTeam from '@src/Pages/TeamRevamp/partials/CreateTeam/CreateTeam';
 import SearchInput from './SearchInput';
 import styles from './TeamList.module.scss';
+import SelectedPersonIcon from '@src/assets/SelectedPersonIcon';
 
 type Options = {
   label: string;
   value: number;
-  count: number;
+  additionalData: {
+    count: number;
+    isSelected: boolean;
+  };
 };
-const CustomTeamOptions = (option: Options, selected: boolean): JSX.Element => {
+
+const CustomTeamOptions = (option: Options): JSX.Element => {
   return (
     <div className={styles['custom-options']} id={option.value?.toString()}>
       <section>{option.label}</section>
       <section className={styles['icon-wrapper']}>
-        <div>{option.count}</div>
+        <div>{option.additionalData.count}</div>
         <div>
-          <PersonIcon className={styles['person-icon']} />
+          {option.additionalData.isSelected ? (
+            <SelectedPersonIcon />
+          ) : (
+            <PersonIcon />
+          )}
         </div>
       </section>
     </div>
@@ -38,9 +47,9 @@ const TeamList: React.FC = () => {
   const defaultTeam = useSelector(
     (state: RootState) => state.team1.teams.data[0],
   );
+  const [team, setTeam] = useState<SelectPickerOptionProps>();
   const newTeam = useSelector((state: RootState) => state.team1.teams.newTeam);
   const [input, setInput] = useState('');
-  const [team, setTeam] = useState<SelectPickerOptionProps>();
   const scroll = useRef<boolean>(false);
 
   const scrollintoView = (event: string): void => {
@@ -52,11 +61,15 @@ const TeamList: React.FC = () => {
       }, 0);
     }
   };
+
   const options = Array.isArray(teamList)
     ? teamList.map(item => ({
         label: item.name,
         value: item.id,
-        count: item.slackUserIds?.length,
+        additionalData: {
+          count: item.slackUserIds?.length,
+          isSelected: item.id === team?.value,
+        },
       }))
     : [];
 
@@ -96,13 +109,10 @@ const TeamList: React.FC = () => {
   const createHandler = (): void => {
     dispatch(setModalOpen(true));
   };
-  const fetchDetails = (val: string): void => {
-    dispatch(fetchTeamDetails(val));
-  };
 
   const handleSelectionChange = (event): void => {
     setTeam(event);
-    fetchDetails(event.value.toString());
+    dispatch(fetchTeamDetails(event.value.toString()));
     scroll.current = false;
   };
 
@@ -113,7 +123,13 @@ const TeamList: React.FC = () => {
           <SearchInput value={input} onChange={handleInputChange} />
           {Role.includes('Admin') && (
             <Button
-              startAdornment={<AddIcon color="white" size="lg" />}
+              startAdornment={
+                <AddIcon
+                  className={styles['add-icon']}
+                  color="var(--navi-color-gray-bg-primary)"
+                  size="xl"
+                />
+              }
               onClick={createHandler}
               variant="primary"
               className={styles['create-team-btn']}
@@ -135,6 +151,7 @@ const TeamList: React.FC = () => {
 
         <SelectPicker
           options={options}
+          //eslint-disable-next-line
           onSelectionChange={handleSelectionChange}
           multiSelect={false}
           updateSearch={input || ''}

src/Pages/TeamRevamp/partials/SlackDetails/Slack.module.scss

@@ -1,6 +1,6 @@
 .team-input-wrapper {
-  min-width: (320px);
-  height: (38px);
+  min-width: 320px;
+  height: 38px;
 }
 .add-member {
   margin: 72px 0px 24px 0px;

src/assets/SelectedPersonIcon.tsx

@@ -0,0 +1,28 @@
+import { FC, MouseEventHandler, useState } from 'react';
+import { IconProps } from './types';
+
+const PersonIcon: FC<IconProps> = ({
+  width = '24',
+  height = '24',
+  onClick,
+  ...restProps
+}) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      onClick={onClick as MouseEventHandler<SVGSVGElement>}
+      style={{ cursor: 'pointer' }}
+    >
+      <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="#0276FE"
+      />
+    </svg>
+  );
+};
+
+export default PersonIcon;