From 6d1ed21f97a5e872b31a5ce3f70b985db64413e9 Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Mon, 5 Feb 2024 09:46:42 +0100 Subject: [PATCH 1/9] fix wallet section title styles --- src/components/Section/index.tsx | 12 ++++++------ src/languages/es.ts | 8 ++++++++ src/pages/settings/InitialSettingsPage.js | 11 +++++++++++ src/pages/settings/Wallet/WalletPage/WalletPage.js | 12 ++++++------ src/styles/index.ts | 13 ++++++++++++- 5 files changed, 43 insertions(+), 13 deletions(-) diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx index 58e89d5bff76..7737927e5307 100644 --- a/src/components/Section/index.tsx +++ b/src/components/Section/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import type {StyleProp, ViewStyle} from 'react-native'; +import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; import Lottie from '@components/Lottie'; @@ -42,8 +42,8 @@ type SectionProps = ChildrenProps & { /** Customize the Section container */ containerStyles?: StyleProp; - /** Customize the Section container */ - titleStyles?: StyleProp; + /** Customize the Section title */ + titleStyles?: StyleProp; /** Customize the Section container */ subtitleStyles?: StyleProp; @@ -114,9 +114,9 @@ function Section({ )} - + - {title} + {title} {cardLayout === CARD_LAYOUT.ICON_ON_RIGHT && ( {!!subtitle && ( - + {subtitle} )} diff --git a/src/languages/es.ts b/src/languages/es.ts index 517b3ba1e2f9..d29b2d02c860 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -705,6 +705,14 @@ export default { offline: 'Desconectado', syncing: 'Sincronizando', profileAvatar: 'Perfil avatar', + publicSection: { + title: 'Público', + subtitle: 'Estos detalles se muestran en tu perfil público, a disposición de los demás.', + }, + privateSection: { + title: 'Privada', + subtitle: 'Estos detalles se utilizan para viajes y pagos. Nunca se mostrarán en tu perfil público.', + }, }, loungeAccessPage: { loungeAccess: 'Acceso a la sala vip', diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js index dfa4262549fc..025f3807ae8d 100755 --- a/src/pages/settings/InitialSettingsPage.js +++ b/src/pages/settings/InitialSettingsPage.js @@ -245,6 +245,17 @@ function InitialSettingsPage(props) { item.action(); } else { waitForNavigate(() => { + window.Onyx.merge(`cardList`, { + 5678: { + cardID: 5678, + state: 3, + bank: '1000', + availableSpend: 10000, + domainName: 'Expensify', + lastFourPAN: '2345', + isVirtual: false, + }, + }); Navigation.navigate(item.routeName); })(); } diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js index 989b4f8838b9..69a65e23bd5d 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.js +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js @@ -354,10 +354,10 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod > {hasWallet && (
<> {shouldShowLoadingSpinner ? ( @@ -372,7 +372,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod errors={walletTerms.errors} onClose={PaymentMethods.clearWalletTermsError} errorRowStyles={[styles.ml10, styles.mr2]} - style={[styles.mt7, styles.mb5]} + style={[styles.mt7, styles.mb5, styles.alignSelfStart]} > @@ -456,10 +456,10 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod )} {hasAssignedCard ? (
) : null}
{}} shouldEnableScroll={false} - style={styles.mt5} + style={[styles.mt5, styles.fullWidthPaymentMethod]} />
diff --git a/src/styles/index.ts b/src/styles/index.ts index 0d4b420c00e4..4270a4180099 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2578,6 +2578,11 @@ const styles = (theme: ThemeColors) => color: theme.textSupporting, }, + accountSettingsSectionTitle: { + fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD, + fontWeight: FontUtils.fontWeight.bold, + }, + sectionMenuItem: { borderRadius: 8, paddingHorizontal: 8, @@ -3359,7 +3364,8 @@ const styles = (theme: ThemeColors) => }, cardSectionTitle: { - lineHeight: variables.lineHeightXXLarge, + fontSize: variables.fontSizeLarge, + lineHeight: variables.lineHeightXLarge, }, cardMenuItem: { @@ -3378,6 +3384,11 @@ const styles = (theme: ThemeColors) => alignItems: 'center', }, + walletSectionTitle: { + fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD, + fontWeight: FontUtils.fontWeight.bold, + }, + paymentMethod: { paddingHorizontal: 20, height: variables.optionRowHeight, From 4b2cbd87105a2532dff616c58f3ecd0ba6deeeab Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Fri, 2 Feb 2024 13:17:12 +0100 Subject: [PATCH 2/9] cherry pick headerWithBackButton component change --- src/components/HeaderWithBackButton/index.tsx | 21 +++++++++++++++++-- src/components/HeaderWithBackButton/types.ts | 6 ++++++ src/styles/index.ts | 4 ++++ src/styles/variables.ts | 5 +++-- 4 files changed, 32 insertions(+), 4 deletions(-) diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index 078cb37c7e0d..7de71f014044 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -17,11 +17,13 @@ import useThrottledButtonState from '@hooks/useThrottledButtonState'; import useWaitForNavigation from '@hooks/useWaitForNavigation'; import getButtonState from '@libs/getButtonState'; import Navigation from '@libs/Navigation/Navigation'; +import variables from '@styles/variables'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type HeaderWithBackButtonProps from './types'; function HeaderWithBackButton({ + icon, iconFill, guidesCallTaskID = '', onBackButtonPress = () => Navigation.goBack(ROUTES.HOME), @@ -56,6 +58,7 @@ function HeaderWithBackButton({ shouldOverlay = false, singleExecution = (func) => func, shouldNavigateToTopMostReport = false, + isCentralPaneSettings = false, }: HeaderWithBackButtonProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -70,7 +73,13 @@ function HeaderWithBackButton({ // Hover on some part of close icons will not work on Electron if dragArea is true // https://github.com/Expensify/App/issues/29598 dataSet={{dragArea: false}} - style={[styles.headerBar, shouldShowBorderBottom && styles.borderBottom, shouldShowBackButton ? styles.pl0 : styles.pl5, shouldOverlay && StyleSheet.absoluteFillObject]} + style={[ + styles.headerBar, + isCentralPaneSettings && styles.headerBarExtendedHeight, + shouldShowBorderBottom && styles.borderBottom, + shouldShowBackButton ? styles.pl0 : styles.pl5, + shouldOverlay && StyleSheet.absoluteFillObject, + ]} > {shouldShowBackButton && ( @@ -99,6 +108,14 @@ function HeaderWithBackButton({ )} + {icon && ( + + )} {shouldShowAvatarWithDisplay ? ( )} diff --git a/src/components/HeaderWithBackButton/types.ts b/src/components/HeaderWithBackButton/types.ts index 88f7e717a44d..a5fdf1bc0690 100644 --- a/src/components/HeaderWithBackButton/types.ts +++ b/src/components/HeaderWithBackButton/types.ts @@ -28,6 +28,9 @@ type HeaderWithBackButtonProps = Partial & { /** Title color */ titleColor?: string; + /** Icon displayed on the left of the title */ + icon?: IconAsset; + /** Method to trigger when pressing download button of the header */ onDownloadButtonPress?: () => void; @@ -114,6 +117,9 @@ type HeaderWithBackButtonProps = Partial & { /** Whether we should overlay the 3 dots menu */ shouldOverlayDots?: boolean; + + /** Whether we should use increased height. */ + isCentralPaneSettings?: boolean; }; export type {ThreeDotsMenuItem}; diff --git a/src/styles/index.ts b/src/styles/index.ts index 4270a4180099..da1e53eed5a6 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2254,6 +2254,10 @@ const styles = (theme: ThemeColors) => width: '100%', }, + headerBarExtendedHeight: { + height: variables.contentHeaderExtendedHeight, + }, + imageViewContainer: { width: '100%', height: '100%', diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 296780abf0ae..63de472df516 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -12,9 +12,10 @@ function getValueUsingPixelRatio(defaultValue: number, maxValue: number): number } export default { - // do we need to change it? bottomTabHeight: 80, - contentHeaderHeight: getValueUsingPixelRatio(80, 100), + iconHeader: 48, + contentHeaderHeight: getValueUsingPixelRatio(73, 100), + contentHeaderExtendedHeight: getValueUsingPixelRatio(80, 100), componentSizeSmall: getValueUsingPixelRatio(28, 32), componentSizeNormal: 40, componentSizeMedium: 48, From a6c8652779a9c64aa3d96be3fa80f0448a2141fd Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Mon, 5 Feb 2024 11:40:19 +0100 Subject: [PATCH 3/9] change designs for wallet page --- src/pages/settings/InitialSettingsPage.js | 11 ----------- src/pages/settings/Wallet/PaymentMethodList.js | 13 +++++++++---- src/pages/settings/Wallet/WalletPage/WalletPage.js | 8 ++++++-- 3 files changed, 15 insertions(+), 17 deletions(-) diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js index 025f3807ae8d..dfa4262549fc 100755 --- a/src/pages/settings/InitialSettingsPage.js +++ b/src/pages/settings/InitialSettingsPage.js @@ -245,17 +245,6 @@ function InitialSettingsPage(props) { item.action(); } else { waitForNavigate(() => { - window.Onyx.merge(`cardList`, { - 5678: { - cardID: 5678, - state: 3, - bank: '1000', - availableSpend: 10000, - domainName: 'Expensify', - lastFourPAN: '2345', - isVirtual: false, - }, - }); Navigation.navigate(item.routeName); })(); } diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js index 0c708442cec6..ae3cf0c9cd19 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.js +++ b/src/pages/settings/Wallet/PaymentMethodList.js @@ -96,6 +96,9 @@ const propTypes = { /** List container style */ style: stylePropTypes, + + /** List item style */ + listItemStyle: stylePropTypes, }; const defaultProps = { @@ -120,6 +123,7 @@ const defaultProps = { onListContentSizeChange: () => {}, shouldEnableScroll: true, style: {}, + listItemStyle: {}, shouldShowSelectedState: false, }; @@ -205,6 +209,7 @@ function PaymentMethodList({ onListContentSizeChange, shouldEnableScroll, style, + listItemStyle, }) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -286,12 +291,12 @@ function PaymentMethodList({ onPress={onPress} title={translate('walletPage.addBankAccount')} icon={Expensicons.Plus} - wrapperStyle={styles.paymentMethod} + wrapperStyle={[styles.paymentMethod, listItemStyle]} ref={buttonRef} /> ), - [onPress, styles.paymentMethod, translate, buttonRef], + [onPress, translate, styles.paymentMethod, listItemStyle, buttonRef], ); /** @@ -322,7 +327,7 @@ function PaymentMethodList({ iconWidth={item.iconWidth || item.iconSize} iconStyles={item.iconStyles} badgeText={shouldShowDefaultBadge(filteredPaymentMethods, item.isDefault) ? translate('paymentMethodList.defaultPaymentMethod') : null} - wrapperStyle={styles.paymentMethod} + wrapperStyle={[styles.paymentMethod, listItemStyle]} shouldShowRightIcon={item.shouldShowRightIcon} shouldShowSelectedState={shouldShowSelectedState} isSelected={selectedMethodID === item.methodID} @@ -332,7 +337,7 @@ function PaymentMethodList({ ), - [styles.ph6, styles.paymentMethod, filteredPaymentMethods, translate, shouldShowSelectedState, selectedMethodID], + [styles.ph6, styles.paymentMethod, filteredPaymentMethods, translate, listItemStyle, shouldShowSelectedState, selectedMethodID], ); return ( diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js index 69a65e23bd5d..9ea1ab56acbd 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.js +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js @@ -342,6 +342,8 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod title={translate('common.wallet')} onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)} shouldShowBackButton={isSmallScreenWidth} + icon={Illustrations.MoneyIntoWallet} + isCentralPaneSettings /> @@ -468,7 +470,8 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod shouldShowEmptyListMessage={false} shouldEnableScroll={false} onPress={paymentMethodPressed} - style={[styles.mt5, styles.fullWidthPaymentMethod]} + style={[styles.mt5, [isSmallScreenWidth ? styles.mhn5 : styles.mhn8]]} + listItemStyle={isSmallScreenWidth ? styles.ph5 : styles.ph8} isAddPaymentMenuActive={shouldShowAddPaymentMenu} actionPaymentMethodType={shouldShowDefaultDeleteMenu ? paymentMethod.selectedPaymentMethodType : ''} activePaymentMethodID={shouldShowDefaultDeleteMenu ? getSelectedPaymentMethodID() : ''} @@ -493,7 +496,8 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod buttonRef={addPaymentMethodAnchorRef} onListContentSizeChange={shouldShowAddPaymentMenu || shouldShowDefaultDeleteMenu ? setMenuPosition : () => {}} shouldEnableScroll={false} - style={[styles.mt5, styles.fullWidthPaymentMethod]} + style={[styles.mt5, [isSmallScreenWidth ? styles.mhn5 : styles.mhn8]]} + listItemStyle={isSmallScreenWidth ? styles.ph5 : styles.ph8} />
From c0c362b73ca901e29aedf3dd0e9e10e44c513b95 Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Mon, 5 Feb 2024 12:05:46 +0100 Subject: [PATCH 4/9] clean up code for PR --- src/languages/es.ts | 8 -------- src/pages/settings/Wallet/WalletPage/WalletPage.js | 6 +++--- src/styles/index.ts | 5 ----- 3 files changed, 3 insertions(+), 16 deletions(-) diff --git a/src/languages/es.ts b/src/languages/es.ts index d29b2d02c860..517b3ba1e2f9 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -705,14 +705,6 @@ export default { offline: 'Desconectado', syncing: 'Sincronizando', profileAvatar: 'Perfil avatar', - publicSection: { - title: 'Público', - subtitle: 'Estos detalles se muestran en tu perfil público, a disposición de los demás.', - }, - privateSection: { - title: 'Privada', - subtitle: 'Estos detalles se utilizan para viajes y pagos. Nunca se mostrarán en tu perfil público.', - }, }, loungeAccessPage: { loungeAccess: 'Acceso a la sala vip', diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js index 9ea1ab56acbd..14cd8efdafbf 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.js +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js @@ -359,7 +359,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod subtitle={translate(`walletPage.${hasActivatedWallet ? 'sendAndReceiveMoney' : 'enableWalletToSendAndReceiveMoney'}`)} title={translate('walletPage.expensifyWallet')} isCentralPane - titleStyles={styles.accountSettingsSectionTitle} + titleStyles={styles.walletSectionTitle} > <> {shouldShowLoadingSpinner ? ( @@ -461,7 +461,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod subtitle={translate('walletPage.assignedCardsDescription')} title={translate('walletPage.assignedCards')} isCentralPane - titleStyles={styles.accountSettingsSectionTitle} + titleStyles={styles.walletSectionTitle} > color: theme.textSupporting, }, - accountSettingsSectionTitle: { - fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD, - fontWeight: FontUtils.fontWeight.bold, - }, - sectionMenuItem: { borderRadius: 8, paddingHorizontal: 8, From ce4c6008c6b1faaeb89e1e82ddfd57e78a10bc00 Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Thu, 8 Feb 2024 17:17:01 +0100 Subject: [PATCH 5/9] fix deletebank account popover positioned incorrectly --- src/components/MenuItem.tsx | 11 +++++++++- .../settings/Wallet/PaymentMethodList.js | 12 +++++++++-- .../settings/Wallet/WalletPage/WalletPage.js | 20 ++++++++++--------- src/styles/index.ts | 7 +++++++ src/styles/variables.ts | 3 ++- 5 files changed, 40 insertions(+), 13 deletions(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 4d7089fb24bd..2825e4df0f58 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -78,6 +78,9 @@ type MenuItemProps = (IconProps | AvatarProps | NoIcon) & { /** Used to apply styles specifically to the title */ titleStyle?: ViewStyle; + /** Any additional styles to apply on the badge element */ + badgeStyle?: ViewStyle; + /** Any adjustments to style when menu item is hovered or pressed */ hoverAndPressStyle?: StyleProp>; @@ -243,6 +246,7 @@ function MenuItem( titleStyle, hoverAndPressStyle, descriptionTextStyle, + badgeStyle, viewMode = CONST.OPTION_MODE.DEFAULT, numberOfLinesTitle = 1, icon, @@ -561,7 +565,12 @@ function MenuItem( {badgeText && ( )} {/* Since subtitle can be of type number, we should allow 0 to be shown */} diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js index ae3cf0c9cd19..35c2e5b4cb33 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.js +++ b/src/pages/settings/Wallet/PaymentMethodList.js @@ -269,9 +269,12 @@ function PaymentMethodList({ return { ...paymentMethod, + iconRight: Expensicons.ThreeDots, + shouldShowRightIcon: true, onPress: (e) => onPress(e, paymentMethod.accountType, paymentMethod.accountData, paymentMethod.isDefault, paymentMethod.methodID), wrapperStyle: isMethodActive ? [StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)] : null, disabled: paymentMethod.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE, + isMethodActive, }; }); @@ -292,11 +295,12 @@ function PaymentMethodList({ title={translate('walletPage.addBankAccount')} icon={Expensicons.Plus} wrapperStyle={[styles.paymentMethod, listItemStyle]} + hoverAndPressStyle={styles.hoveredComponentBG} ref={buttonRef} /> ), - [onPress, translate, styles.paymentMethod, listItemStyle, buttonRef], + [onPress, translate, styles.paymentMethod, styles.hoveredComponentBG, listItemStyle, buttonRef], ); /** @@ -328,16 +332,20 @@ function PaymentMethodList({ iconStyles={item.iconStyles} badgeText={shouldShowDefaultBadge(filteredPaymentMethods, item.isDefault) ? translate('paymentMethodList.defaultPaymentMethod') : null} wrapperStyle={[styles.paymentMethod, listItemStyle]} + iconRight={item.iconRight} + badgeStyle={styles.badgeBordered} + hoverAndPressStyle={styles.hoveredComponentBG} shouldShowRightIcon={item.shouldShowRightIcon} shouldShowSelectedState={shouldShowSelectedState} isSelected={selectedMethodID === item.methodID} interactive={item.interactive} brickRoadIndicator={item.brickRoadIndicator} + success={item.isMethodActive} /> ), - [styles.ph6, styles.paymentMethod, filteredPaymentMethods, translate, listItemStyle, shouldShowSelectedState, selectedMethodID], + [styles.ph6, styles.paymentMethod, styles.badgeBordered, styles.hoveredComponentBG, filteredPaymentMethods, translate, listItemStyle, shouldShowSelectedState, selectedMethodID], ); return ( diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js index 14cd8efdafbf..8017afba320d 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.js +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js @@ -97,9 +97,9 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod const position = getClickedTargetLocation(paymentMethodButtonRef.current); setAnchorPosition({ - anchorPositionTop: position.top + position.height + variables.addPaymentPopoverTopSpacing, + anchorPositionTop: position.top + position.height - variables.bankAccountActionPopoverTopSpacing, // We want the position to be 23px to the right of the left border - anchorPositionRight: windowWidth - position.right - variables.addBankAccountLeftSpacing, + anchorPositionRight: windowWidth - position.right + variables.bankAccountActionPopoverRightSpacing, anchorPositionHorizontal: position.x + (shouldShowEmptyState ? -variables.addPaymentMethodLeftSpacing : variables.addBankAccountLeftSpacing), anchorPositionVertical: position.y, }); @@ -513,7 +513,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod anchorRef={paymentMethodButtonRef} > {!showConfirmDeleteModal && ( - + {isPopoverBottomMount && ( )} {shouldShowMakeDefaultButton && ( -