From 3a2108a4e9fda4ea682f36a58650ae20fd2b12d3 Mon Sep 17 00:00:00 2001
From: Wojciech Boman <wojciechboman@gmail.com>
Date: Wed, 31 Jan 2024 17:35:34 +0100
Subject: [PATCH] Add hovered effect on the workspace switcher button (210)

---
 src/components/SubscriptAvatar.tsx         |  5 ++++-
 src/components/WorkspaceSwitcherButton.tsx | 21 +++++++++++++++------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx
index 71b63cb07ca1..c2de41d8b4db 100644
--- a/src/components/SubscriptAvatar.tsx
+++ b/src/components/SubscriptAvatar.tsx
@@ -20,6 +20,9 @@ type SubIcon = {
 
     /** Height of the icon */
     height?: number;
+
+    /** The fill color for the icon. Can be hex, rgb, rgba, or valid react-native named color such as 'red' or 'blue'. */
+    fill?: string;
 };
 
 type SubscriptAvatarProps = {
@@ -120,7 +123,7 @@ function SubscriptAvatar({mainAvatar, secondaryAvatar, subscriptIcon, size = CON
                         width={subscriptIcon.width}
                         height={subscriptIcon.height}
                         additionalStyles={styles.alignSelfCenter}
-                        fill={theme.icon}
+                        fill={subscriptIcon.fill ?? theme.icon}
                     />
                 </View>
             )}
diff --git a/src/components/WorkspaceSwitcherButton.tsx b/src/components/WorkspaceSwitcherButton.tsx
index b76503c0c6e9..b7485fbab7a8 100644
--- a/src/components/WorkspaceSwitcherButton.tsx
+++ b/src/components/WorkspaceSwitcherButton.tsx
@@ -2,6 +2,7 @@ import React, {useMemo} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import interceptAnonymousUser from '@libs/interceptAnonymousUser';
 import Navigation from '@libs/Navigation/Navigation';
 import {getDefaultWorkspaceAvatar} from '@libs/ReportUtils';
@@ -21,6 +22,7 @@ type WorkspaceSwitcherButtonProps = {activeWorkspaceID?: string} & WorkspaceSwit
 
 function WorkspaceSwitcherButton({activeWorkspaceID, policy}: WorkspaceSwitcherButtonProps) {
     const {translate} = useLocalize();
+    const theme = useTheme();
 
     const {source, name, type} = useMemo(() => {
         if (!activeWorkspaceID) {
@@ -46,12 +48,19 @@ function WorkspaceSwitcherButton({activeWorkspaceID, policy}: WorkspaceSwitcherB
                 })
             }
         >
-            <SubscriptAvatar
-                mainAvatar={{source, name, type}}
-                subscriptIcon={{source: Expensicons.DownArrow, width: CONST.WORKSPACE_SWITCHER.SUBSCRIPT_ICON_SIZE, height: CONST.WORKSPACE_SWITCHER.SUBSCRIPT_ICON_SIZE}}
-                showTooltip={false}
-                noMargin
-            />
+            {({hovered}) => (
+                <SubscriptAvatar
+                    mainAvatar={{source, name, type}}
+                    subscriptIcon={{
+                        source: Expensicons.DownArrow,
+                        width: CONST.WORKSPACE_SWITCHER.SUBSCRIPT_ICON_SIZE,
+                        height: CONST.WORKSPACE_SWITCHER.SUBSCRIPT_ICON_SIZE,
+                        fill: hovered ? theme.buttonHoveredBG : theme.icon,
+                    }}
+                    showTooltip={false}
+                    noMargin
+                />
+            )}
         </PressableWithFeedback>
     );
 }