Merge pull request #623 from microsoft/psl-bugv3-26397

fix: Add Deletion icon in team selector

Author: Roopan-Microsoft

src/frontend/src/components/common/TeamSelector.tsx

@@ -29,7 +29,7 @@ import {
 } from '@fluentui/react-components';
 import {
   ChevronUpDown16Regular,
-  MoreHorizontal20Regular,
+  DeleteRegular,
   Search20Regular,
   Dismiss20Regular,
   CheckmarkCircle20Filled,
@@ -475,21 +475,21 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
             mountNode={document.querySelector('[role="dialog"]') || undefined}
           >
             <Button
-              icon={<MoreHorizontal20Regular />}
+              icon={<DeleteRegular />}
               appearance="subtle"
               size="small"
               disabled={true}
-              className={`${styles.moreButton} ${styles.moreButtonDisabled || ''}`}
+              className={`${styles.deleteButton} ${styles.deleteButtonDisabled || ''}`}
               onClick={(e: React.MouseEvent) => e.stopPropagation()}
             />
           </Tooltip>
         ) : (
           <Button
-            icon={<MoreHorizontal20Regular />}
+            icon={<DeleteRegular />}
             appearance="subtle"
             size="small"
             onClick={(e: React.MouseEvent) => handleDeleteTeam(team, e)}
-            className={styles.moreButton}
+            className={styles.deleteButton}
           />
         )}
       </div>

src/frontend/src/styles/TeamSelector.module.css

@@ -391,8 +391,8 @@
   min-height: auto !important;
 }
 
-/* More Button Column */
-.moreButton {
+/* Delete Button Column */
+.deleteButton {
   color: var(--colorNeutralForeground2) !important;
   background-color: transparent !important;
   min-width: 32px !important;
@@ -403,18 +403,18 @@
   margin-top: 2px;
 }
 
-.moreButton:hover {
-  background-color: var(--colorNeutralBackground3) !important;
-  color: var(--colorNeutralForeground1) !important;
+.deleteButton:hover {
+  background-color: var(--colorPaletteRedBackground2) !important;
+  color: var(--colorPaletteRedForeground1) !important;
 }
-.moreButtonDisabled {
+.deleteButtonDisabled {
   color: var(--colorNeutralForeground4) !important;
   background-color: transparent !important;
   cursor: not-allowed !important;
   opacity: 0.6 !important;
 }
 
-.moreButtonDisabled:hover {
+.deleteButtonDisabled:hover {
   background-color: transparent !important;
   color: var(--colorNeutralForeground4) !important;
   opacity: 0.6 !important;