Merge pull request #47036 from rayane-djouah/Fix--The-pressed-state-o…

…f-menu-items-uses-a-very-dark-BG-color Fix: The pressed state of menu items uses a very dark BG color
Expensify · Sep 16, 2024 · 0cd67be · 0cd67be
2 parents 568467c + 13d82c3
commit 0cd67be
Show file tree

Hide file tree

Showing 20 changed files with 43 additions and 44 deletions.
diff --git a/src/components/BaseMiniContextMenuItem.tsx b/src/components/BaseMiniContextMenuItem.tsx
@@ -79,7 +79,7 @@ function BaseMiniContextMenuItem(
                 role={CONST.ROLE.BUTTON}
                 style={({hovered, pressed}) => [
                     styles.reportActionContextMenuMiniButton,
-                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, isDelayButtonStateComplete)),
+                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, isDelayButtonStateComplete), true),
                     isDelayButtonStateComplete && styles.cursorDefault,
                 ]}
             >

diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx
@@ -221,7 +221,8 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
                                     }
                                 }}
                                 withoutFocusOnSecondaryInteraction
-                                activeOpacity={0.8}
+                                activeOpacity={variables.pressDimValue}
+                                opacityAnimationDuration={0}
                                 style={[
                                     styles.flexRow,
                                     styles.alignItemsCenter,

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
@@ -3,7 +3,6 @@ import type {ReactElement, ReactNode} from 'react';
 import React, {forwardRef, useContext, useMemo} from 'react';
 import type {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {ActivityIndicator, View} from 'react-native';
-import type {AnimatedStyle} from 'react-native-reanimated';
 import type {ValueOf} from 'type-fest';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -91,9 +90,6 @@ type MenuItemBaseProps = {
     /** Any additional styles to apply to the label */
     labelStyle?: StyleProp<ViewStyle>;
 
-    /** Any adjustments to style when menu item is hovered or pressed */
-    hoverAndPressStyle?: StyleProp<AnimatedStyle<ViewStyle>>;
-
     /** Additional styles to style the description text below the title */
     descriptionTextStyle?: StyleProp<TextStyle>;
 
@@ -348,7 +344,6 @@ function MenuItem(
         containerStyle,
         titleStyle,
         labelStyle,
-        hoverAndPressStyle,
         descriptionTextStyle,
         badgeStyle,
         viewMode = CONST.OPTION_MODE.DEFAULT,
@@ -574,6 +569,8 @@ function MenuItem(
                                 onPressOut={ControlSelection.unblock}
                                 onSecondaryInteraction={onSecondaryInteraction}
                                 wrapperStyle={outerWrapperStyle}
+                                activeOpacity={variables.pressDimValue}
+                                opacityAnimationDuration={0}
                                 style={({pressed}) =>
                                     [
                                         containerStyle,
@@ -582,7 +579,6 @@ function MenuItem(
                                         !shouldRemoveBackground &&
                                             StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true),
                                         ...(Array.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]),
-                                        !focused && (isHovered || pressed) && hoverAndPressStyle,
                                         shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled,
                                         isHovered && interactive && !focused && !pressed && !shouldRemoveBackground && styles.hoveredComponentBG,
                                     ] as StyleProp<ViewStyle>

diff --git a/src/components/OpacityView.tsx b/src/components/OpacityView.tsx
@@ -24,11 +24,24 @@ type OpacityViewProps = {
      */
     dimmingValue?: number;
 
+    /**
+     * The duration of the dimming animation
+     * @default variables.dimAnimationDuration
+     */
+    dimAnimationDuration?: number;
+
     /** Whether the view needs to be rendered offscreen (for Android only) */
     needsOffscreenAlphaCompositing?: boolean;
 };
 
-function OpacityView({shouldDim, children, style = [], dimmingValue = variables.hoverDimValue, needsOffscreenAlphaCompositing = false}: OpacityViewProps) {
+function OpacityView({
+    shouldDim,
+    dimAnimationDuration = variables.dimAnimationDuration,
+    children,
+    style = [],
+    dimmingValue = variables.hoverDimValue,
+    needsOffscreenAlphaCompositing = false,
+}: OpacityViewProps) {
     const opacity = useSharedValue(1);
     const opacityStyle = useAnimatedStyle(() => ({
         opacity: opacity.value,
@@ -37,11 +50,11 @@ function OpacityView({shouldDim, children, style = [], dimmingValue = variables.
     React.useEffect(() => {
         if (shouldDim) {
             // eslint-disable-next-line react-compiler/react-compiler
-            opacity.value = withTiming(dimmingValue, {duration: 50});
+            opacity.value = withTiming(dimmingValue, {duration: dimAnimationDuration});
         } else {
-            opacity.value = withTiming(1, {duration: 50});
+            opacity.value = withTiming(1, {duration: dimAnimationDuration});
         }
-    }, [shouldDim, dimmingValue, opacity]);
+    }, [shouldDim, dimmingValue, opacity, dimAnimationDuration]);
 
     return (
         <Animated.View

diff --git a/src/components/Pressable/PressableWithFeedback.tsx b/src/components/Pressable/PressableWithFeedback.tsx
@@ -26,6 +26,12 @@ type PressableWithFeedbackProps = PressableProps & {
      */
     hoverDimmingValue?: number;
 
+    /**
+     * The duration of the dimming animation
+     * @default variables.dimAnimationDuration
+     */
+    dimAnimationDuration?: number;
+
     /** Whether the view needs to be rendered offscreen (for Android only) */
     needsOffscreenAlphaCompositing?: boolean;
 
@@ -40,6 +46,7 @@ function PressableWithFeedback(
         needsOffscreenAlphaCompositing = false,
         pressDimmingValue = variables.pressDimValue,
         hoverDimmingValue = variables.hoverDimValue,
+        dimAnimationDuration,
         ...rest
     }: PressableWithFeedbackProps,
     ref: PressableRef,
@@ -51,6 +58,7 @@ function PressableWithFeedback(
         <OpacityView
             shouldDim={!!(!rest.disabled && (isPressed || isHovered))}
             dimmingValue={isPressed ? pressDimmingValue : hoverDimmingValue}
+            dimAnimationDuration={dimAnimationDuration}
             style={wrapperStyle}
             needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositing}
         >

diff --git a/src/components/PressableWithSecondaryInteraction/index.tsx b/src/components/PressableWithSecondaryInteraction/index.tsx
@@ -20,6 +20,7 @@ function PressableWithSecondaryInteraction(
         preventDefaultContextMenu = true,
         onSecondaryInteraction,
         activeOpacity = 1,
+        opacityAnimationDuration,
         ...rest
     }: PressableWithSecondaryInteractionProps,
     ref: PressableRef,
@@ -100,6 +101,7 @@ function PressableWithSecondaryInteraction(
             wrapperStyle={[StyleUtils.combineStyles(DeviceCapabilities.canUseTouchScreen() ? [styles.userSelectNone, styles.noSelect] : [], inlineStyle), wrapperStyle]}
             onLongPress={onSecondaryInteraction ? executeSecondaryInteraction : undefined}
             pressDimmingValue={activeOpacity}
+            dimAnimationDuration={opacityAnimationDuration}
             ref={pressableRef}
             style={(state) => [StyleUtils.parseStyleFromFunction(style, state), inlineStyle]}
             needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositing}

diff --git a/src/components/PressableWithSecondaryInteraction/types.ts b/src/components/PressableWithSecondaryInteraction/types.ts
@@ -40,6 +40,12 @@ type PressableWithSecondaryInteractionProps = PressableWithFeedbackProps & {
     /** Opacity to reduce to when active  */
     activeOpacity?: number;
 
+    /**
+     * The duration of the opacity animation
+     * @default variables.dimAnimationDuration
+     */
+    opacityAnimationDuration?: number;
+
     /** Used to apply styles to the Pressable */
     style?: ParsableStyle;
 

diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx
@@ -134,7 +134,6 @@ function MoneyReportView({report, policy, isCombinedReport = false, shouldShowTo
                                             interactive
                                             shouldStackHorizontally={false}
                                             onSecondaryInteraction={() => {}}
-                                            hoverAndPressStyle={false}
                                             titleWithTooltips={[]}
                                             brickRoadIndicator={violation ? 'error' : undefined}
                                             errorText={violationTranslation}

diff --git a/src/components/ReportActionItem/TripDetailsView.tsx b/src/components/ReportActionItem/TripDetailsView.tsx
@@ -129,7 +129,6 @@ function ReservationView({reservation}: ReservationViewProps) {
             iconWidth={20}
             iconStyles={[StyleUtils.getTripReservationIconContainer(false), styles.mr3]}
             secondaryIconFill={theme.icon}
-            hoverAndPressStyle={styles.hoveredComponentBG}
         />
     );
 }

diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx
@@ -60,7 +60,6 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro
             iconHeight: variables.menuIconSize,
             iconStyles: [styles.mh3],
             wrapperStyle: [styles.purposeMenuItem],
-            hoverAndPressStyle: [styles.purposeMenuItemSelected],
             numberOfLinesTitle: 0,
             onPress: () => {
                 Welcome.setOnboardingPurposeSelected(choice);

diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx
@@ -243,7 +243,6 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
                             iconHeight={variables.iconSizeNormal}
                             wrapperStyle={styles.sectionMenuItem}
                             focused={index === activeItemIndex}
-                            hoverAndPressStyle={styles.hoveredComponentBG}
                             onPress={onPress}
                             isPaneMenu
                         />

diff --git a/src/pages/home/sidebar/AllSettingsScreen.tsx b/src/pages/home/sidebar/AllSettingsScreen.tsx
@@ -88,7 +88,6 @@ function AllSettingsScreen({policies}: AllSettingsScreenProps) {
             wrapperStyle: styles.sectionMenuItem,
             isPaneMenu: true,
             focused: item.focused,
-            hoverAndPressStyle: styles.hoveredComponentBG,
             brickRoadIndicator: item.brickRoadIndicator,
         }));
     }, [shouldUseNarrowLayout, policies, privateSubscription, waitForNavigate, translate, styles, allConnectionSyncProgresses]);

diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx
@@ -333,7 +333,6 @@ function InitialSettingsPage({userWallet, bankAccountList, fundList, walletTerms
                                 shouldStackHorizontally={item.shouldStackHorizontally}
                                 floatRightAvatarSize={item.avatarSize}
                                 ref={popoverAnchor}
-                                hoverAndPressStyle={styles.hoveredComponentBG}
                                 shouldBlockSelection={!!item.link}
                                 onSecondaryInteraction={item.link ? (event) => openPopover(item.link, event) : undefined}
                                 focused={
@@ -350,19 +349,7 @@ function InitialSettingsPage({userWallet, bankAccountList, fundList, walletTerms
                 </View>
             );
         },
-        [
-            styles.pb4,
-            styles.mh3,
-            styles.sectionTitle,
-            styles.sectionMenuItem,
-            styles.hoveredComponentBG,
-            translate,
-            userWallet?.currentBalance,
-            isExecuting,
-            singleExecution,
-            activeCentralPaneRoute,
-            waitForNavigate,
-        ],
+        [styles.pb4, styles.mh3, styles.sectionTitle, styles.sectionMenuItem, translate, userWallet?.currentBalance, isExecuting, singleExecution, activeCentralPaneRoute, waitForNavigate],
     );
 
     const accountMenuItems = useMemo(() => getMenuItemsSection(accountMenuItemsData), [accountMenuItemsData, getMenuItemsSection]);

diff --git a/src/pages/settings/Subscription/CardSection/CardSection.tsx b/src/pages/settings/Subscription/CardSection/CardSection.tsx
@@ -175,7 +175,6 @@ function CardSection() {
                         title={translate('subscription.cardSection.viewPaymentHistory')}
                         titleStyle={styles.textStrong}
                         onPress={() => Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: SearchUtils.buildCannedSearchQuery()}))}
-                        hoverAndPressStyle={styles.hoveredComponentBG}
                     />
                 )}
 

diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx
@@ -330,13 +330,12 @@ function PaymentMethodList({
                 title={translate('walletPage.addBankAccount')}
                 icon={Expensicons.Plus}
                 wrapperStyle={[styles.paymentMethod, listItemStyle]}
-                hoverAndPressStyle={styles.hoveredComponentBG}
                 ref={buttonRef}
                 disabled={!isUserValidated}
             />
         ),
 
-        [onPress, translate, styles.paymentMethod, styles.hoveredComponentBG, listItemStyle, buttonRef, isUserValidated],
+        [onPress, translate, styles.paymentMethod, listItemStyle, buttonRef, isUserValidated],
     );
 
     /**
@@ -365,7 +364,6 @@ function PaymentMethodList({
                     wrapperStyle={[styles.paymentMethod, listItemStyle]}
                     iconRight={item.iconRight}
                     badgeStyle={styles.badgeBordered}
-                    hoverAndPressStyle={styles.hoveredComponentBG}
                     shouldShowRightIcon={item.shouldShowRightIcon}
                     shouldShowSelectedState={shouldShowSelectedState}
                     isSelected={selectedMethodID.toString() === item.methodID?.toString()}
@@ -376,7 +374,7 @@ function PaymentMethodList({
             </OfflineWithFeedback>
         ),
 
-        [styles.ph6, styles.paymentMethod, styles.badgeBordered, styles.hoveredComponentBG, filteredPaymentMethods, translate, listItemStyle, shouldShowSelectedState, selectedMethodID],
+        [styles.ph6, styles.paymentMethod, styles.badgeBordered, filteredPaymentMethods, translate, listItemStyle, shouldShowSelectedState, selectedMethodID],
     );
 
     return (

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx
@@ -485,7 +485,6 @@ function WalletPage({shouldListenForResize = false}: WalletPageProps) {
                                                                 title={translate('common.transferBalance')}
                                                                 icon={Expensicons.Transfer}
                                                                 onPress={triggerKYCFlow}
-                                                                hoverAndPressStyle={styles.hoveredComponentBG}
                                                                 shouldShowRightIcon
                                                                 disabled={network.isOffline}
                                                                 wrapperStyle={[
@@ -530,7 +529,6 @@ function WalletPage({shouldListenForResize = false}: WalletPageProps) {
                                                             disabled={network.isOffline}
                                                             title={translate('walletPage.enableWallet')}
                                                             icon={Expensicons.Wallet}
-                                                            hoverAndPressStyle={styles.hoveredComponentBG}
                                                             wrapperStyle={[
                                                                 styles.transferBalance,
                                                                 shouldUseNarrowLayout ? styles.mhn5 : styles.mhn8,

diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx
@@ -402,7 +402,6 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, policyCategories
                                     wrapperStyle={styles.sectionMenuItem}
                                     highlighted={enabledItem?.routeName === item.routeName}
                                     focused={!!(item.routeName && activeRoute?.startsWith(item.routeName))}
-                                    hoverAndPressStyle={styles.hoveredComponentBG}
                                     isPaneMenu
                                 />
                             ))}

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -4324,10 +4324,6 @@ const styles = (theme: ThemeColors) =>
             marginBottom: 8,
         },
 
-        purposeMenuItemSelected: {
-            backgroundColor: theme.activeComponentBG,
-        },
-
         willChangeTransform: {
             willChange: 'transform',
         },

diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
@@ -1311,7 +1311,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
     getButtonBackgroundColorStyle: (buttonState: ButtonStateName = CONST.BUTTON_STATES.DEFAULT, isMenuItem = false): ViewStyle => {
         switch (buttonState) {
             case CONST.BUTTON_STATES.PRESSED:
-                return {backgroundColor: theme.buttonPressedBG};
+                return isMenuItem ? {backgroundColor: theme.buttonHoveredBG} : {backgroundColor: theme.buttonPressedBG};
             case CONST.BUTTON_STATES.ACTIVE:
                 return isMenuItem ? {backgroundColor: theme.border} : {backgroundColor: theme.buttonHoveredBG};
             case CONST.BUTTON_STATES.DISABLED:

diff --git a/src/styles/variables.ts b/src/styles/variables.ts
@@ -221,6 +221,7 @@ export default {
     googleEmptyListViewHeight: 14,
     hoverDimValue: 1,
     pressDimValue: 0.8,
+    dimAnimationDuration: 50,
     qrShareHorizontalPadding: 32,
     menuIconSize: 48,