diff --git a/src/components/BaseMiniContextMenuItem.tsx b/src/components/BaseMiniContextMenuItem.tsx index 6e1a1e0fd22..fa0fdb45153 100644 --- 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 index 1686ed1c62d..276e364e26c 100644 --- 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 index d37bf32843d..2524658d6ff 100644 --- 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; - /** Any adjustments to style when menu item is hovered or pressed */ - hoverAndPressStyle?: StyleProp>; - /** Additional styles to style the description text below the title */ descriptionTextStyle?: StyleProp; @@ -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 diff --git a/src/components/OpacityView.tsx b/src/components/OpacityView.tsx index d4a5c05167a..f4884fd3c0f 100644 --- 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 ( diff --git a/src/components/PressableWithSecondaryInteraction/index.tsx b/src/components/PressableWithSecondaryInteraction/index.tsx index cbcf8523d9a..810aa45ebf0 100644 --- 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 index b07c867daeb..ebe08cfab4f 100644 --- 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 index 9b3b02a1aba..6ab2db05c49 100644 --- 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 index fe6831f7251..28408731d70 100644 --- 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 index dc33d82b2a0..81f3e6be36a 100644 --- 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 index 0e59aa969b6..a773ef67454 100644 --- 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 index c0322fc0fcf..c94c7012e41 100644 --- 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 index 30f4cf010f7..ed5da975425 100755 --- 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 ); }, - [ - 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 index 797b28de410..a2761309cbd 100644 --- 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 index 5f77ac33bec..b28b88e1ba8 100644 --- 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({ ), - [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 index 49c27d4e3c6..a7bd270a7a7 100644 --- 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 index 3c2bbe15a2d..fd7a45e31ac 100644 --- 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 index 9dfd18b641e..3d91d614f72 100644 --- 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 index 478369c9489..d3d31cc2ea1 100644 --- 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 index 2a84efc7281..300574514e5 100644 --- 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,