Merge pull request #58 from software-mansion-labs/w8/ideal-nav-fixes-v5

Add hovered effect on the workspace switcher button (210)
software-mansion-labs · Jan 31, 2024 · acd6fa9 · acd6fa9
2 parents 700677e + 3a2108a
commit acd6fa9
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git 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
@@ -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>
     );
 }