From a12bf41f900c4ff8fe78b2381fd64784ed46fc03 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Thu, 8 Aug 2024 08:35:34 +0100 Subject: [PATCH 1/7] Fix: The pressed state of option menu items uses a very dark BG color --- src/components/MenuItem.tsx | 1 + src/styles/utils/index.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 8af6cd492c03..4025e4cabc04 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -536,6 +536,7 @@ function MenuItem( onPressOut={ControlSelection.unblock} onSecondaryInteraction={onSecondaryInteraction} wrapperStyle={outerWrapperStyle} + activeOpacity={0.8} style={({pressed}) => [ containerStyle, diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index ed76abd484d0..872b5ee52458 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1290,7 +1290,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: From 33ed8e97d029481660daeebf724d759f7ea9e5ea Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Wed, 14 Aug 2024 14:20:03 +0100 Subject: [PATCH 2/7] Update button pressed state background color style in BaseMiniContextMenuItem --- src/components/BaseMiniContextMenuItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BaseMiniContextMenuItem.tsx b/src/components/BaseMiniContextMenuItem.tsx index 6e1a1e0fd229..fa0fdb45153f 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, ]} > From 8b2e648cea2e484bef39a62a10ffe59619a1593d Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 20 Aug 2024 17:08:11 +0100 Subject: [PATCH 3/7] Remove hoverAndPressStyle prop --- src/components/ReportActionItem/MoneyReportView.tsx | 1 - src/components/ReportActionItem/TripDetailsView.tsx | 1 - src/pages/Search/SearchStatusMenu.tsx | 1 - src/pages/settings/InitialSettingsPage.tsx | 1 - src/pages/settings/Subscription/CardSection/CardSection.tsx | 1 - src/pages/settings/Wallet/PaymentMethodList.tsx | 2 -- src/pages/settings/Wallet/WalletPage/WalletPage.tsx | 2 -- src/pages/workspace/WorkspaceInitialPage.tsx | 1 - 8 files changed, 10 deletions(-) diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index fbf03821fa16..025199d07f77 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -117,7 +117,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 fe6831f72512..28408731d700 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/Search/SearchStatusMenu.tsx b/src/pages/Search/SearchStatusMenu.tsx index 9fd812ead9a1..2b28359a2bcd 100644 --- a/src/pages/Search/SearchStatusMenu.tsx +++ b/src/pages/Search/SearchStatusMenu.tsx @@ -92,7 +92,6 @@ function SearchStatusMenu({queryJSON, isCustomQuery}: SearchStatusMenuProps) { iconHeight={variables.iconSizeNormal} wrapperStyle={styles.sectionMenuItem} focused={index === activeItemIndex} - hoverAndPressStyle={styles.hoveredComponentBG} onPress={onPress} isPaneMenu /> diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx index bc98a9432630..08ae12721c8b 100755 --- a/src/pages/settings/InitialSettingsPage.tsx +++ b/src/pages/settings/InitialSettingsPage.tsx @@ -328,7 +328,6 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa shouldStackHorizontally={item.shouldStackHorizontally} floatRightAvatarSize={item.avatarSize} ref={popoverAnchor} - hoverAndPressStyle={styles.hoveredComponentBG} shouldBlockSelection={!!item.link} onSecondaryInteraction={item.link ? (event) => openPopover(item.link, event) : undefined} focused={ diff --git a/src/pages/settings/Subscription/CardSection/CardSection.tsx b/src/pages/settings/Subscription/CardSection/CardSection.tsx index 25a201bf6887..5ed91ff669e9 100644 --- a/src/pages/settings/Subscription/CardSection/CardSection.tsx +++ b/src/pages/settings/Subscription/CardSection/CardSection.tsx @@ -149,7 +149,6 @@ function CardSection() { title={translate('subscription.cardSection.viewPaymentHistory')} titleStyle={styles.textStrong} onPress={() => Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: CONST.SEARCH.TAB.EXPENSE.ALL}))} - hoverAndPressStyle={styles.hoveredComponentBG} /> )} diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 0d127e3346ae..339706de96e9 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -319,7 +319,6 @@ function PaymentMethodList({ title={translate('walletPage.addBankAccount')} icon={Expensicons.Plus} wrapperStyle={[styles.paymentMethod, listItemStyle]} - hoverAndPressStyle={styles.hoveredComponentBG} ref={buttonRef} disabled={!isUserValidated} /> @@ -354,7 +353,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()} diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx index 7e242a5c8782..e4b2a3fbc5f7 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx @@ -477,7 +477,6 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi title={translate('common.transferBalance')} icon={Expensicons.Transfer} onPress={triggerKYCFlow} - hoverAndPressStyle={styles.hoveredComponentBG} shouldShowRightIcon disabled={network.isOffline} wrapperStyle={[ @@ -522,7 +521,6 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi 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 5e52aa8d0b86..e251d94a5564 100644 --- a/src/pages/workspace/WorkspaceInitialPage.tsx +++ b/src/pages/workspace/WorkspaceInitialPage.tsx @@ -424,7 +424,6 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reimbursementAcc wrapperStyle={styles.sectionMenuItem} highlighted={enabledItem?.routeName === item.routeName} focused={!!(item.routeName && activeRoute?.startsWith(item.routeName))} - hoverAndPressStyle={styles.hoveredComponentBG} isPaneMenu /> ))} From d8aae2f5ebd3df2a9f8f765c8d0b41d6f2650816 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Wed, 21 Aug 2024 15:26:55 +0100 Subject: [PATCH 4/7] Fix lint warnings --- src/pages/settings/InitialSettingsPage.tsx | 14 +------------- src/pages/settings/Wallet/PaymentMethodList.tsx | 4 ++-- 2 files changed, 3 insertions(+), 15 deletions(-) diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx index 08ae12721c8b..11eab09d8392 100755 --- a/src/pages/settings/InitialSettingsPage.tsx +++ b/src/pages/settings/InitialSettingsPage.tsx @@ -344,19 +344,7 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa ); }, - [ - 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/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 339706de96e9..fe48314dd9c3 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -324,7 +324,7 @@ function PaymentMethodList({ /> ), - [onPress, translate, styles.paymentMethod, styles.hoveredComponentBG, listItemStyle, buttonRef, isUserValidated], + [onPress, translate, styles.paymentMethod, listItemStyle, buttonRef, isUserValidated], ); /** @@ -363,7 +363,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 ( From 95aef263be430b670d72a5ff3c760ccd60015dcb Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Wed, 28 Aug 2024 18:22:43 +0100 Subject: [PATCH 5/7] Fix Lint error --- src/components/MenuItem.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index afecdc60b178..a55b5990b134 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'; From 1db6abb66106b1a855321f907408357fbcc8f78c Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sun, 15 Sep 2024 13:12:44 +0100 Subject: [PATCH 6/7] Fix opacity animation duration --- .../LHNOptionsList/OptionRowLHN.tsx | 3 ++- src/components/MenuItem.tsx | 3 ++- src/components/OpacityView.tsx | 21 +++++++++++++++---- .../Pressable/PressableWithFeedback.tsx | 8 +++++++ .../index.tsx | 2 ++ .../types.ts | 12 +++++++++++ src/styles/variables.ts | 1 + 7 files changed, 44 insertions(+), 6 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx index 1686ed1c62d2..276e364e26c1 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 f1cf55674184..2524658d6ffc 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -569,7 +569,8 @@ function MenuItem( onPressOut={ControlSelection.unblock} onSecondaryInteraction={onSecondaryInteraction} wrapperStyle={outerWrapperStyle} - activeOpacity={0.8} + activeOpacity={variables.pressDimValue} + opacityAnimationDuration={0} style={({pressed}) => [ containerStyle, diff --git a/src/components/OpacityView.tsx b/src/components/OpacityView.tsx index d4a5c05167a0..f4884fd3c0f8 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 cbcf8523d9a4..810aa45ebf07 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 b07c867daeb3..e097a6930654 100644 --- a/src/components/PressableWithSecondaryInteraction/types.ts +++ b/src/components/PressableWithSecondaryInteraction/types.ts @@ -40,6 +40,18 @@ type PressableWithSecondaryInteractionProps = PressableWithFeedbackProps & { /** Opacity to reduce to when active */ activeOpacity?: number; + /** + * The duration of the opacity animation + * @default variables.dimAnimationDuration + */ + opacityAnimationDuration?: number; + + /** + * The duration of the dimming animation + * @default variables.dimAnimationDuration + */ + dimAnimationDuration?: number; + /** Used to apply styles to the Pressable */ style?: ParsableStyle; diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 2a84efc72814..300574514e59 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, From 13d82c3ee3c5fe2429d9c91534189e8872a26c88 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Mon, 16 Sep 2024 14:51:16 +0100 Subject: [PATCH 7/7] Remove unused property --- src/components/PressableWithSecondaryInteraction/types.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/components/PressableWithSecondaryInteraction/types.ts b/src/components/PressableWithSecondaryInteraction/types.ts index e097a6930654..ebe08cfab4f2 100644 --- a/src/components/PressableWithSecondaryInteraction/types.ts +++ b/src/components/PressableWithSecondaryInteraction/types.ts @@ -46,12 +46,6 @@ type PressableWithSecondaryInteractionProps = PressableWithFeedbackProps & { */ opacityAnimationDuration?: number; - /** - * The duration of the dimming animation - * @default variables.dimAnimationDuration - */ - dimAnimationDuration?: number; - /** Used to apply styles to the Pressable */ style?: ParsableStyle;