From 0f80d692080473e3f3082f326331f08ea1894d4d Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Fri, 2 Feb 2024 15:47:29 +0100 Subject: [PATCH 01/26] redesign preferences page --- src/components/TestToolMenu.tsx | 10 -- src/components/TestToolRow.tsx | 2 +- src/languages/en.ts | 8 ++ .../settings/Preferences/PreferencesPage.js | 132 +++++++++++------- src/styles/index.ts | 8 ++ 5 files changed, 98 insertions(+), 62 deletions(-) diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx index 410bd5081e25..3766ed71a149 100644 --- a/src/components/TestToolMenu.tsx +++ b/src/components/TestToolMenu.tsx @@ -1,7 +1,6 @@ import React from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; -import useThemeStyles from '@hooks/useThemeStyles'; import * as ApiUtils from '@libs/ApiUtils'; import compose from '@libs/compose'; import * as Network from '@userActions/Network'; @@ -14,7 +13,6 @@ import Button from './Button'; import {withNetwork} from './OnyxProvider'; import Switch from './Switch'; import TestToolRow from './TestToolRow'; -import Text from './Text'; type TestToolMenuOnyxProps = { /** User object in Onyx */ @@ -29,17 +27,9 @@ const USER_DEFAULT: UserOnyx = {shouldUseStagingServer: undefined, isSubscribedT function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) { const shouldUseStagingServer = user?.shouldUseStagingServer ?? ApiUtils.isUsingStagingApi(); - const styles = useThemeStyles(); return ( <> - - Test Preferences - - {/* Option to switch between staging and default api endpoints. This enables QA, internal testers and external devs to take advantage of sandbox environments for 3rd party services like Plaid and Onfido. This toggle is not rendered for internal devs as they make environment changes directly to the .env file. */} diff --git a/src/components/TestToolRow.tsx b/src/components/TestToolRow.tsx index 4ed1aa126002..f6ff1787b566 100644 --- a/src/components/TestToolRow.tsx +++ b/src/components/TestToolRow.tsx @@ -14,7 +14,7 @@ type TestToolRowProps = { function TestToolRow({title, children}: TestToolRowProps) { const styles = useThemeStyles(); return ( - + {title} diff --git a/src/languages/en.ts b/src/languages/en.ts index 77164c9cc172..012469f95b16 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1045,6 +1045,14 @@ export default { defaultPaymentMethod: 'Default', }, preferencesPage: { + appSection: { + title: 'App preferences', + subtitle: 'That is when you can experience true joy, when you have no fear.', + }, + testSection: { + title: 'Test preferences', + subtitle: 'That is when you can experience true joy, when you have no fear.', + }, receiveRelevantFeatureUpdatesAndExpensifyNews: 'Receive relevant feature updates and Expensify news', }, priorityModePage: { diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js index da0d87afe932..23149b5f9922 100755 --- a/src/pages/settings/Preferences/PreferencesPage.js +++ b/src/pages/settings/Preferences/PreferencesPage.js @@ -1,11 +1,13 @@ import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import React from 'react'; -import {View} from 'react-native'; +import {ScrollView, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; -import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; import LottieAnimations from '@components/LottieAnimations'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; +import ScreenWrapper from '@components/ScreenWrapper'; +import Section from '@components/Section'; import Switch from '@components/Switch'; import TestToolMenu from '@components/TestToolMenu'; import Text from '@components/Text'; @@ -49,58 +51,86 @@ function PreferencesPage(props) { const {isSmallScreenWidth} = useWindowDimensions(); return ( - - - - {translate('common.notifications')} - - - - {translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')} - - - - + Navigation.goBack()} + /> + + +
+ + + {translate('common.notifications')} + + + + {translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')} + + + + + + Navigation.navigate(ROUTES.SETTINGS_PRIORITY_MODE)} + wrapperStyle={styles.sectionMenuItemTopDescription} + /> + Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)} + wrapperStyle={styles.sectionMenuItemTopDescription} + /> + Navigation.navigate(ROUTES.SETTINGS_THEME)} + wrapperStyle={styles.sectionMenuItemTopDescription} + /> + +
+ {!isProduction && ( +
+ + + +
+ )} - Navigation.navigate(ROUTES.SETTINGS_PRIORITY_MODE)} - /> - Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)} - /> - Navigation.navigate(ROUTES.SETTINGS_THEME)} - /> - {/* Enable additional test features in non-production environments */} - {!isProduction && ( - - - - )} - - + + ); } diff --git a/src/styles/index.ts b/src/styles/index.ts index 4a87b581159e..4f96696d4730 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -529,6 +529,14 @@ const styles = (theme: ThemeColors) => paddingBottom: 1, }, + testRowContainer: { + ...flex.flexRow, + ...flex.justifyContentBetween, + ...flex.alignItemsCenter, + ...sizing.mnw120, + height: 64, + }, + buttonSmall: { borderRadius: variables.buttonBorderRadius, minHeight: variables.componentSizeSmall, From bd0d93004074be358ce57ccc94641bb176153884 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Mon, 5 Feb 2024 15:10:49 +0100 Subject: [PATCH 02/26] new about page design --- src/components/Section/index.tsx | 6 ++ src/pages/settings/AboutPage/AboutPage.tsx | 100 ++++++++++++--------- src/styles/index.ts | 6 +- src/styles/variables.ts | 2 +- 4 files changed, 71 insertions(+), 43 deletions(-) diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx index 7737927e5307..ce53f4dfaab8 100644 --- a/src/components/Section/index.tsx +++ b/src/components/Section/index.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import type {ReactNode} from 'react'; import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; @@ -65,6 +66,9 @@ type SectionProps = ChildrenProps & { /** Styles to apply to illustration component */ illustrationStyle?: StyleProp; + + /** Overlay content to display on top of animation */ + overlayContent?: () => ReactNode; }; function Section({ @@ -84,6 +88,7 @@ function Section({ illustration, illustrationBackgroundColor, illustrationStyle, + overlayContent, }: SectionProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -110,6 +115,7 @@ function Section({ autoPlay loop /> + {overlayContent?.()} )} diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx index f19c9eb2d534..6c8f87851f3c 100644 --- a/src/pages/settings/AboutPage/AboutPage.tsx +++ b/src/pages/settings/AboutPage/AboutPage.tsx @@ -1,12 +1,14 @@ import React, {useCallback, useMemo, useRef} from 'react'; -import {View} from 'react-native'; +import {ScrollView, View} from 'react-native'; // eslint-disable-next-line no-restricted-imports -import type {GestureResponderEvent, Text as RNText} from 'react-native'; +import type {GestureResponderEvent, Text as RNText, StyleProp, ViewStyle} from 'react-native'; import DeviceInfo from 'react-native-device-info'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Expensicons from '@components/Icon/Expensicons'; -import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout'; import LottieAnimations from '@components/LottieAnimations'; import MenuItemList from '@components/MenuItemList'; +import ScreenWrapper from '@components/ScreenWrapper'; +import Section from '@components/Section'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import useLocalize from '@hooks/useLocalize'; @@ -43,6 +45,7 @@ type MenuItem = { iconRight?: IconAsset; action: () => Promise; link?: string; + wrapperStyle?: StyleProp; }; function AboutPage() { @@ -104,12 +107,13 @@ function AboutPage() { : undefined, ref: popoverAnchor, shouldBlockSelection: !!link, + wrapperStyle: [styles.sectionMenuItemTopDescription], })); - }, [translate, waitForNavigate]); + }, [styles, translate, waitForNavigate]); const overlayContent = useCallback( () => ( - + Navigation.goBack(ROUTES.SETTINGS)} - shouldShowBackButton={isSmallScreenWidth} - illustration={LottieAnimations.Coin} - backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.ABOUT].backgroundColor} - overlayContent={overlayContent} + - - {translate('footer.aboutExpensify')} - {translate('initialSettingsPage.aboutPage.description')} - - Navigation.goBack(ROUTES.SETTINGS)} /> - - - {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase1')}{' '} - + +
- {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase2')} - {' '} - {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase3')}{' '} - + + +
+ + + - {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase4')} - - . - - - + {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase1')}{' '} + + {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase2')} + {' '} + {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase3')}{' '} + + {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase4')} + + . + + + + ); } diff --git a/src/styles/index.ts b/src/styles/index.ts index 4a87b581159e..97e8e93c481f 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -441,6 +441,9 @@ const styles = (theme: ThemeColors) => textIvoryLight: { color: theme.iconColorfulBackground, + fontSize: variables.fontSizeNormal, + lineHeight: variables.lineHeightNormal, + fontFamily: FontUtils.fontFamily.platform.MONOSPACE, }, textNoWrap: { @@ -1360,11 +1363,10 @@ const styles = (theme: ThemeColors) => }, sidebarFooter: { - alignItems: 'center', display: 'flex', justifyContent: 'center', - paddingVertical: variables.lineHeightXLarge, width: '100%', + paddingLeft: 20, }, sidebarAvatar: { diff --git a/src/styles/variables.ts b/src/styles/variables.ts index e0e3a3ee8887..956dfc9faa96 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -188,7 +188,7 @@ export default { workspaceTypeIconWidth: 34, sectionMargin: 16, workspaceSectionMaxWidth: 680, - sectionIllustrationHeight: 240, + sectionIllustrationHeight: 220, photoUploadPopoverWidth: 335, // The height of the empty list is 14px (2px for borders and 12px for vertical padding) From beebe048cc0c72937c40b97101111f8fa3e6bf45 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Tue, 6 Feb 2024 08:36:04 +0100 Subject: [PATCH 03/26] add english copy --- src/languages/en.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index 012469f95b16..6b72177dad74 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1047,11 +1047,11 @@ export default { preferencesPage: { appSection: { title: 'App preferences', - subtitle: 'That is when you can experience true joy, when you have no fear.', + subtitle: 'Customize your Expensify account.', }, testSection: { title: 'Test preferences', - subtitle: 'That is when you can experience true joy, when you have no fear.', + subtitle: 'Settings to help debug and test the app on staging.', }, receiveRelevantFeatureUpdatesAndExpensifyNews: 'Receive relevant feature updates and Expensify news', }, From 1b2d2a712e64de4223f904165b7ffe73e01f8b55 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Wed, 7 Feb 2024 12:13:27 +0100 Subject: [PATCH 04/26] add Spanish copy --- src/languages/es.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/languages/es.ts b/src/languages/es.ts index d29b2d02c860..f35caf2af3e2 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -1043,6 +1043,14 @@ export default { }, preferencesPage: { receiveRelevantFeatureUpdatesAndExpensifyNews: 'Recibir noticias sobre Expensify y actualizaciones del producto', + appSection: { + title: 'Preferencias de la aplicación', + subtitle: 'Personaliza tu cuenta de Expensify.', + }, + testSection: { + title: 'Preferencias para tests', + subtitle: 'Ajustes para ayudar a depurar y probar la aplicación en “staging”.', + }, }, priorityModePage: { priorityMode: 'Modo prioridad', From 4397fc52c901091914a08c38910c0d025285b487 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Wed, 7 Feb 2024 19:00:09 +0100 Subject: [PATCH 05/26] rename --- src/components/Icon/Illustrations.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 51422e7b4a49..a1de06314e4b 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -54,7 +54,7 @@ import MoneyWings from '@assets/images/simple-illustrations/simple-illustration_ import OpenSafe from '@assets/images/simple-illustrations/simple-illustration__opensafe.svg'; import PalmTree from '@assets/images/simple-illustrations/simple-illustration__palmtree.svg'; import Profile from '@assets/images/simple-illustrations/simple-illustration__profile.svg'; -import QrCode from '@assets/images/simple-illustrations/simple-illustration__qr-code.svg'; +import QRCode from '@assets/images/simple-illustrations/simple-illustration__qr-code.svg'; import SanFrancisco from '@assets/images/simple-illustrations/simple-illustration__sanfrancisco.svg'; import ShieldYellow from '@assets/images/simple-illustrations/simple-illustration__shield.svg'; import SmallRocket from '@assets/images/simple-illustrations/simple-illustration__smallrocket.svg'; @@ -127,5 +127,5 @@ export { PalmTree, LockClosed, Gears, - QrCode, + QRCode, }; From 312444438eed91f9dfb2e464efdec55ad956c8f0 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Wed, 7 Feb 2024 19:05:03 +0100 Subject: [PATCH 06/26] small fixes --- src/pages/settings/Preferences/PreferencesPage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js index 354ecf351c79..243b220fa517 100755 --- a/src/pages/settings/Preferences/PreferencesPage.js +++ b/src/pages/settings/Preferences/PreferencesPage.js @@ -57,11 +57,11 @@ function PreferencesPage(props) { shouldEnablePickerAvoiding={false} shouldEnableMaxHeight shouldShowOfflineIndicatorInWideScreen - icon={Illustrations.Gears} testID={PreferencesPage.displayName} > Navigation.goBack()} /> From 3a8cd2d48e2a93135a81f0c2bc8f573cf28c00c0 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Wed, 7 Feb 2024 19:06:53 +0100 Subject: [PATCH 07/26] fix icon --- src/pages/ShareCodePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx index 9ed8bf3d76a1..0423a795cc70 100644 --- a/src/pages/ShareCodePage.tsx +++ b/src/pages/ShareCodePage.tsx @@ -80,7 +80,7 @@ function ShareCodePage({report, session, currentUserPersonalDetails}: ShareCodeP title={translate('common.shareCode')} onBackButtonPress={() => Navigation.goBack(isReport ? ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID) : ROUTES.SETTINGS)} shouldShowBackButton={isReport || isSmallScreenWidth} - icon={Illustrations.QrCode} + icon={Illustrations.QRCode} /> From 330fb72518c1e05aa380898dd6b0960c6346b6a3 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 8 Feb 2024 10:06:26 +0100 Subject: [PATCH 08/26] fix illustration height --- src/components/Section/index.tsx | 1 + src/styles/variables.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx index 7737927e5307..948094c90bff 100644 --- a/src/components/Section/index.tsx +++ b/src/components/Section/index.tsx @@ -107,6 +107,7 @@ function Section({ diff --git a/src/styles/variables.ts b/src/styles/variables.ts index c5ed7b79f76c..58732dea9067 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -189,7 +189,7 @@ export default { workspaceTypeIconWidth: 34, sectionMargin: 16, workspaceSectionMaxWidth: 680, - sectionIllustrationHeight: 240, + sectionIllustrationHeight: 220, photoUploadPopoverWidth: 335, // The height of the empty list is 14px (2px for borders and 12px for vertical padding) From 1d0e5a916de5b5f287d6f51bf5dbb6a67567f01f Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 8 Feb 2024 10:53:00 +0100 Subject: [PATCH 09/26] fix statusbar color on mWeb iOS --- src/components/LottieAnimations/index.tsx | 5 ++++- src/components/LottieAnimations/types.ts | 17 +++++++++++++++++ src/components/Section/index.tsx | 2 +- .../settings/Preferences/PreferencesPage.js | 2 -- src/styles/theme/themes/dark.ts | 2 +- src/styles/theme/themes/light.ts | 2 +- 6 files changed, 24 insertions(+), 6 deletions(-) diff --git a/src/components/LottieAnimations/index.tsx b/src/components/LottieAnimations/index.tsx index fd593421232d..83300a5ccca2 100644 --- a/src/components/LottieAnimations/index.tsx +++ b/src/components/LottieAnimations/index.tsx @@ -1,7 +1,9 @@ +import colors from '@styles/theme/colors'; import variables from '@styles/variables'; import type DotLottieAnimation from './types'; +import type {AnimationKey} from './types'; -const DotLottieAnimations: Record = { +const DotLottieAnimations: Record = { ExpensifyLounge: { file: require('@assets/animations/ExpensifyLounge.lottie'), w: 1920, @@ -26,6 +28,7 @@ const DotLottieAnimations: Record = { file: require('@assets/animations/PreferencesDJ.lottie'), w: 375, h: 240, + backgroundColor: colors.blue500, }, ReviewingBankInfo: { file: require('@assets/animations/ReviewingBankInfo.lottie'), diff --git a/src/components/LottieAnimations/types.ts b/src/components/LottieAnimations/types.ts index 6000b9f853f0..840e6a3cfa6b 100644 --- a/src/components/LottieAnimations/types.ts +++ b/src/components/LottieAnimations/types.ts @@ -1,9 +1,26 @@ import type {LottieViewProps} from 'lottie-react-native'; +import type {ColorValue} from '@styles/utils/types'; + +type AnimationKey = + | 'ExpensifyLounge' + | 'FastMoney' + | 'Fireworks' + | 'Hands' + | 'PreferencesDJ' + | 'ReviewingBankInfo' + | 'WorkspacePlanet' + | 'SaveTheWorld' + | 'Safe' + | 'Magician' + | 'Update' + | 'Coin'; type DotLottieAnimation = { file: LottieViewProps['source']; w: number; h: number; + backgroundColor?: ColorValue; }; +export type {AnimationKey}; export default DotLottieAnimation; diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx index 948094c90bff..c4b900bea8b1 100644 --- a/src/components/Section/index.tsx +++ b/src/components/Section/index.tsx @@ -90,7 +90,7 @@ function Section({ const StyleUtils = useStyleUtils(); const {isSmallScreenWidth} = useWindowDimensions(); - const illustrationContainerStyle: StyleProp = StyleUtils.getBackgroundColorStyle(illustrationBackgroundColor ?? theme.appBG); + const illustrationContainerStyle: StyleProp = StyleUtils.getBackgroundColorStyle(illustrationBackgroundColor ?? illustration?.backgroundColor ?? theme.appBG); return ( <> diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js index 243b220fa517..b85e700df02b 100755 --- a/src/pages/settings/Preferences/PreferencesPage.js +++ b/src/pages/settings/Preferences/PreferencesPage.js @@ -22,7 +22,6 @@ import * as User from '@userActions/User'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import SCREENS from '@src/SCREENS'; const propTypes = { /** The chat priority mode */ @@ -73,7 +72,6 @@ function PreferencesPage(props) { isCentralPane subtitleMuted illustration={LottieAnimations.PreferencesDJ} - illustrationBackgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.PREFERENCES.ROOT].backgroundColor} titleStyles={styles.accountSettingsSectionTitle} > diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts index ea61a1b98ddf..613959307a8c 100644 --- a/src/styles/theme/themes/dark.ts +++ b/src/styles/theme/themes/dark.ts @@ -105,7 +105,7 @@ const darkTheme = { statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SETTINGS.PREFERENCES.ROOT]: { - backgroundColor: colors.blue500, + backgroundColor: colors.productDark100, statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SETTINGS.WORKSPACES]: { diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts index 7317dc836b2d..10d37219465a 100644 --- a/src/styles/theme/themes/light.ts +++ b/src/styles/theme/themes/light.ts @@ -105,7 +105,7 @@ const lightTheme = { statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SETTINGS.PREFERENCES.ROOT]: { - backgroundColor: colors.blue500, + backgroundColor: colors.productLight100, statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SETTINGS.WORKSPACES]: { From c74a873c05b12e0259f7a12c1234b9a1fe9c1457 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 8 Feb 2024 11:22:54 +0100 Subject: [PATCH 10/26] fix lint --- src/pages/settings/Preferences/PreferencesPage.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js index b85e700df02b..5e92be024002 100755 --- a/src/pages/settings/Preferences/PreferencesPage.js +++ b/src/pages/settings/Preferences/PreferencesPage.js @@ -14,7 +14,6 @@ import TestToolMenu from '@components/TestToolMenu'; import Text from '@components/Text'; import useEnvironment from '@hooks/useEnvironment'; import useLocalize from '@hooks/useLocalize'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import Navigation from '@libs/Navigation/Navigation'; @@ -44,7 +43,6 @@ const defaultProps = { }; function PreferencesPage(props) { - const theme = useTheme(); const styles = useThemeStyles(); const {isProduction} = useEnvironment(); const {translate, preferredLocale} = useLocalize(); From 715eacd08158c7dd4b71d5106995243deb3d2f31 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 8 Feb 2024 11:26:17 +0100 Subject: [PATCH 11/26] improve types --- src/components/LottieAnimations/index.tsx | 5 ++--- src/components/LottieAnimations/types.ts | 15 --------------- 2 files changed, 2 insertions(+), 18 deletions(-) diff --git a/src/components/LottieAnimations/index.tsx b/src/components/LottieAnimations/index.tsx index 83300a5ccca2..8389dec70ee8 100644 --- a/src/components/LottieAnimations/index.tsx +++ b/src/components/LottieAnimations/index.tsx @@ -1,9 +1,8 @@ import colors from '@styles/theme/colors'; import variables from '@styles/variables'; import type DotLottieAnimation from './types'; -import type {AnimationKey} from './types'; -const DotLottieAnimations: Record = { +const DotLottieAnimations = { ExpensifyLounge: { file: require('@assets/animations/ExpensifyLounge.lottie'), w: 1920, @@ -65,6 +64,6 @@ const DotLottieAnimations: Record = { w: 375, h: 240, }, -}; +} satisfies Record; export default DotLottieAnimations; diff --git a/src/components/LottieAnimations/types.ts b/src/components/LottieAnimations/types.ts index 840e6a3cfa6b..e1a6e0b66c74 100644 --- a/src/components/LottieAnimations/types.ts +++ b/src/components/LottieAnimations/types.ts @@ -1,20 +1,6 @@ import type {LottieViewProps} from 'lottie-react-native'; import type {ColorValue} from '@styles/utils/types'; -type AnimationKey = - | 'ExpensifyLounge' - | 'FastMoney' - | 'Fireworks' - | 'Hands' - | 'PreferencesDJ' - | 'ReviewingBankInfo' - | 'WorkspacePlanet' - | 'SaveTheWorld' - | 'Safe' - | 'Magician' - | 'Update' - | 'Coin'; - type DotLottieAnimation = { file: LottieViewProps['source']; w: number; @@ -22,5 +8,4 @@ type DotLottieAnimation = { backgroundColor?: ColorValue; }; -export type {AnimationKey}; export default DotLottieAnimation; From 426632ce9d32bdd9a7f0eb656230aa46bbe6c300 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 8 Feb 2024 11:37:38 +0100 Subject: [PATCH 12/26] fix workspace list empty state --- src/components/LottieAnimations/index.tsx | 1 + src/pages/workspace/WorkspacesListPage.tsx | 2 -- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/LottieAnimations/index.tsx b/src/components/LottieAnimations/index.tsx index 8389dec70ee8..3c89353b4aa2 100644 --- a/src/components/LottieAnimations/index.tsx +++ b/src/components/LottieAnimations/index.tsx @@ -38,6 +38,7 @@ const DotLottieAnimations = { file: require('@assets/animations/WorkspacePlanet.lottie'), w: 375, h: 240, + backgroundColor: colors.pink800, }, SaveTheWorld: { file: require('@assets/animations/SaveTheWorld.lottie'), diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx index 9b763120b30d..827fa762aae1 100755 --- a/src/pages/workspace/WorkspacesListPage.tsx +++ b/src/pages/workspace/WorkspacesListPage.tsx @@ -341,9 +341,7 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, r ctaText={translate('workspace.new.newWorkspace')} ctaAccessibilityLabel={translate('workspace.new.newWorkspace')} onCtaPress={() => App.createWorkspaceWithPolicyDraftAndNavigateToIt()} - // @ts-expect-error TODO: Remove once FeatureList (https://github.com/Expensify/App/issues/25039) is migrated to TS illustration={LottieAnimations.WorkspacePlanet} - illustrationBackgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.WORKSPACES].backgroundColor} // We use this style to vertically center the illustration, as the original illustration is not centered illustrationStyle={styles.emptyWorkspaceIllustrationStyle} /> From b6d178920af490918c4c5e1504ab2cc8e5df4f59 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 8 Feb 2024 11:41:02 +0100 Subject: [PATCH 13/26] fix --- src/components/FeatureList.js | 2 +- src/pages/workspace/WorkspacesListPage.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/FeatureList.js b/src/components/FeatureList.js index 14b807aed85e..ba82e26e5a0c 100644 --- a/src/components/FeatureList.js +++ b/src/components/FeatureList.js @@ -50,7 +50,7 @@ const defaultProps = { subtitle: '', onCtaPress: () => {}, illustration: null, - illustrationBackgroundColor: '', + illustrationBackgroundColor: null, illustrationStyle: [], }; diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx index 827fa762aae1..74798c40a5fb 100755 --- a/src/pages/workspace/WorkspacesListPage.tsx +++ b/src/pages/workspace/WorkspacesListPage.tsx @@ -31,7 +31,6 @@ import * as Policy from '@userActions/Policy'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import SCREENS from '@src/SCREENS'; import type {PolicyMembers, Policy as PolicyType, ReimbursementAccount, Report} from '@src/types/onyx'; import type * as OnyxCommon from '@src/types/onyx/OnyxCommon'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; From 3e44c6f805e6001e362ed5c16fae33cee15ea6b1 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 8 Feb 2024 12:47:07 +0100 Subject: [PATCH 14/26] fix About page status bar --- src/components/LottieAnimations/index.tsx | 1 + src/pages/settings/AboutPage/AboutPage.tsx | 1 - src/styles/theme/themes/dark.ts | 4 ---- src/styles/theme/themes/light.ts | 4 ---- 4 files changed, 1 insertion(+), 9 deletions(-) diff --git a/src/components/LottieAnimations/index.tsx b/src/components/LottieAnimations/index.tsx index 3c89353b4aa2..cfba2c01a566 100644 --- a/src/components/LottieAnimations/index.tsx +++ b/src/components/LottieAnimations/index.tsx @@ -64,6 +64,7 @@ const DotLottieAnimations = { file: require('@assets/animations/Coin.lottie'), w: 375, h: 240, + backgroundColor: colors.yellow600, }, } satisfies Record; diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx index 8da2444985e3..dc25c26fd560 100644 --- a/src/pages/settings/AboutPage/AboutPage.tsx +++ b/src/pages/settings/AboutPage/AboutPage.tsx @@ -150,7 +150,6 @@ function AboutPage() { isCentralPane subtitleMuted illustration={LottieAnimations.Coin} - illustrationBackgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.ABOUT].backgroundColor} titleStyles={styles.accountSettingsSectionTitle} overlayContent={overlayContent} > diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts index 613959307a8c..3359a1cae3f9 100644 --- a/src/styles/theme/themes/dark.ts +++ b/src/styles/theme/themes/dark.ts @@ -132,10 +132,6 @@ const darkTheme = { backgroundColor: colors.productDark100, statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, - [SCREENS.SETTINGS.ABOUT]: { - backgroundColor: colors.yellow600, - statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, - }, [SCREENS.REFERRAL_DETAILS]: { backgroundColor: colors.pink800, statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts index 10d37219465a..263c1eec5058 100644 --- a/src/styles/theme/themes/light.ts +++ b/src/styles/theme/themes/light.ts @@ -132,10 +132,6 @@ const lightTheme = { backgroundColor: colors.productLight100, statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT, }, - [SCREENS.SETTINGS.ABOUT]: { - backgroundColor: colors.yellow600, - statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, - }, [SCREENS.REFERRAL_DETAILS]: { backgroundColor: colors.pink800, statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, From 376932124f3aa2f941277944104c7027b1529fbd Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Thu, 8 Feb 2024 12:49:14 +0100 Subject: [PATCH 15/26] Security page update --- src/languages/en.ts | 5 ++ src/languages/es.ts | 5 ++ .../Security/SecuritySettingsPage.tsx | 52 +++++++++++++------ 3 files changed, 45 insertions(+), 17 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index cdccba175773..7e2f07ca1e37 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -146,6 +146,7 @@ export default { payments: 'Payments', wallet: 'Wallet', preferences: 'Preferences', + security: 'Security', view: 'View', not: 'Not', signIn: 'Sign in', @@ -722,6 +723,10 @@ export default { subtitle: 'These details are used for travel and payments. They are never shown on your public profile.', }, }, + securityPage: { + title: 'Security options', + subtitle: 'Enable two-factor authentication to keep your account safe.', + }, loungeAccessPage: { loungeAccess: 'Lounge access', headline: 'The Expensify Lounge is closed.', diff --git a/src/languages/es.ts b/src/languages/es.ts index dd3df85e5d9c..485785735d2c 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -135,6 +135,7 @@ export default { payments: 'Pagos', wallet: 'Billetera', preferences: 'Preferencias', + security: 'Seguridad', view: 'Ver', not: 'No', signIn: 'Conectarse', @@ -716,6 +717,10 @@ export default { subtitle: 'Estos detalles se utilizan para viajes y pagos. Nunca se mostrarán en tu perfil público.', }, }, + securityPage: { + title: 'Opciones de seguridad', + subtitle: 'Activa la autenticación de dos factores para mantener tu cuenta segura.', + }, loungeAccessPage: { loungeAccess: 'Acceso a la sala vip', headline: 'La sala vip de Expensify está cerrada.', diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx index b6881a9b3683..452eb3f6daee 100644 --- a/src/pages/settings/Security/SecuritySettingsPage.tsx +++ b/src/pages/settings/Security/SecuritySettingsPage.tsx @@ -1,10 +1,12 @@ import React, {useMemo} from 'react'; import {ScrollView, View} from 'react-native'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Expensicons from '@components/Icon/Expensicons'; import * as Illustrations from '@components/Icon/Illustrations'; -import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout'; import LottieAnimations from '@components/LottieAnimations'; import MenuItemList from '@components/MenuItemList'; +import ScreenWrapper from '@components/ScreenWrapper'; +import Section from '@components/Section'; import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -43,29 +45,45 @@ function SecuritySettingsPage() { onPress: item.action, shouldShowRightIcon: true, link: '', + wrapperStyle: [styles.sectionMenuItemTopDescription], })); - }, [translate, waitForNavigate]); + }, [translate, waitForNavigate, styles]); return ( - Navigation.goBack(ROUTES.SETTINGS)} - shouldShowBackButton={isSmallScreenWidth} - illustration={LottieAnimations.Safe} - backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.SECURITY].backgroundColor} - shouldShowOfflineIndicatorInWideScreen - icon={Illustrations.LockClosed} + - - - + Navigation.goBack()} + icon={Illustrations.LockClosed} + /> + + +
+ +
- + ); } From 028d355d588416e8f4ef81f54bdb21ba5b21c5d9 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 8 Feb 2024 12:56:09 +0100 Subject: [PATCH 16/26] fix lint issues --- src/pages/settings/AboutPage/AboutPage.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx index dc25c26fd560..2c94444bdb2d 100644 --- a/src/pages/settings/AboutPage/AboutPage.tsx +++ b/src/pages/settings/AboutPage/AboutPage.tsx @@ -13,7 +13,6 @@ import Section from '@components/Section'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import useLocalize from '@hooks/useLocalize'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWaitForNavigation from '@hooks/useWaitForNavigation'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -25,7 +24,6 @@ import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import ROUTES from '@src/ROUTES'; -import SCREENS from '@src/SCREENS'; import type IconAsset from '@src/types/utils/IconAsset'; import pkg from '../../../../package.json'; @@ -51,7 +49,6 @@ type MenuItem = { function AboutPage() { const {translate} = useLocalize(); - const theme = useTheme(); const styles = useThemeStyles(); const popoverAnchor = useRef(null); const waitForNavigate = useWaitForNavigation(); From eab2a13a554a6317c9cc31473d9470e55d72e0c2 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Thu, 8 Feb 2024 13:14:36 +0100 Subject: [PATCH 17/26] Adjust illustration background color logic --- src/components/LottieAnimations/index.tsx | 1 + src/languages/en.ts | 1 - src/languages/es.ts | 1 - src/pages/settings/Security/SecuritySettingsPage.tsx | 7 +------ src/styles/theme/themes/dark.ts | 4 ---- src/styles/theme/themes/light.ts | 4 ---- 6 files changed, 2 insertions(+), 16 deletions(-) diff --git a/src/components/LottieAnimations/index.tsx b/src/components/LottieAnimations/index.tsx index cfba2c01a566..10dc195365aa 100644 --- a/src/components/LottieAnimations/index.tsx +++ b/src/components/LottieAnimations/index.tsx @@ -49,6 +49,7 @@ const DotLottieAnimations = { file: require('@assets/animations/Safe.lottie'), w: 625, h: 400, + backgroundColor: colors.ice500, }, Magician: { file: require('@assets/animations/Magician.lottie'), diff --git a/src/languages/en.ts b/src/languages/en.ts index 7e2f07ca1e37..9f68ae1f901a 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -146,7 +146,6 @@ export default { payments: 'Payments', wallet: 'Wallet', preferences: 'Preferences', - security: 'Security', view: 'View', not: 'Not', signIn: 'Sign in', diff --git a/src/languages/es.ts b/src/languages/es.ts index 485785735d2c..1c05207247bc 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -135,7 +135,6 @@ export default { payments: 'Pagos', wallet: 'Billetera', preferences: 'Preferencias', - security: 'Seguridad', view: 'Ver', not: 'No', signIn: 'Conectarse', diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx index 452eb3f6daee..c4d0e46936a3 100644 --- a/src/pages/settings/Security/SecuritySettingsPage.tsx +++ b/src/pages/settings/Security/SecuritySettingsPage.tsx @@ -8,17 +8,14 @@ import MenuItemList from '@components/MenuItemList'; import ScreenWrapper from '@components/ScreenWrapper'; import Section from '@components/Section'; import useLocalize from '@hooks/useLocalize'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWaitForNavigation from '@hooks/useWaitForNavigation'; import useWindowDimensions from '@hooks/useWindowDimensions'; import Navigation from '@libs/Navigation/Navigation'; import type {TranslationPaths} from '@src/languages/types'; import ROUTES from '@src/ROUTES'; -import SCREENS from '@src/SCREENS'; function SecuritySettingsPage() { - const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); const waitForNavigate = useWaitForNavigation(); @@ -58,7 +55,7 @@ function SecuritySettingsPage() { shouldShowOfflineIndicatorInWideScreen > Navigation.goBack()} icon={Illustrations.LockClosed} @@ -71,8 +68,6 @@ function SecuritySettingsPage() { isCentralPane subtitleMuted illustration={LottieAnimations.Safe} - illustrationStyle={{height: 220}} - illustrationBackgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.SECURITY].backgroundColor} titleStyles={styles.accountSettingsSectionTitle} childrenStyles={styles.pt5} > diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts index 3359a1cae3f9..a6014a545419 100644 --- a/src/styles/theme/themes/dark.ts +++ b/src/styles/theme/themes/dark.ts @@ -116,10 +116,6 @@ const darkTheme = { backgroundColor: colors.productDark100, statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, - [SCREENS.SETTINGS.SECURITY]: { - backgroundColor: colors.ice500, - statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT, - }, [SCREENS.SETTINGS.PROFILE.STATUS]: { backgroundColor: colors.productDark100, statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts index 263c1eec5058..a8dfebee7958 100644 --- a/src/styles/theme/themes/light.ts +++ b/src/styles/theme/themes/light.ts @@ -116,10 +116,6 @@ const lightTheme = { backgroundColor: colors.productLight100, statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT, }, - [SCREENS.SETTINGS.SECURITY]: { - backgroundColor: colors.ice500, - statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT, - }, [SCREENS.SETTINGS.PROFILE.STATUS]: { backgroundColor: colors.productLight100, statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT, From 479203f36d0e094d5a547f0b2780d8f9e582cf58 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 8 Feb 2024 13:18:19 +0100 Subject: [PATCH 18/26] add missing icons --- src/pages/settings/AboutPage/AboutPage.tsx | 1 - src/pages/settings/InitialSettingsPage.js | 6 ++++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx index 2c94444bdb2d..8215881498e4 100644 --- a/src/pages/settings/AboutPage/AboutPage.tsx +++ b/src/pages/settings/AboutPage/AboutPage.tsx @@ -127,7 +127,6 @@ function AboutPage() { return ( Link.buildOldDotURL(CONST.OLDDOT_URLS.INBOX), + iconRight: Expensicons.NewWindow, + shouldShowRightIcon: true, }, { translationKey: 'initialSettingsPage.signOut', @@ -221,6 +223,8 @@ function InitialSettingsPage(props) { action: () => { Link.openExternalLink(CONST.NEWHELP_URL); }, + iconRight: Expensicons.NewWindow, + shouldShowRightIcon: true, link: CONST.NEWHELP_URL, }, { @@ -291,6 +295,8 @@ function InitialSettingsPage(props) { onSecondaryInteraction={item.link ? (event) => openPopover(item.link, event) : undefined} focused={activeRoute && item.routeName && activeRoute.toLowerCase().replaceAll('_', '') === item.routeName.toLowerCase().replaceAll('/', '')} isPaneMenu + iconRight={item.iconRight} + shouldShowRightIcon={item.shouldShowRightIcon} /> ); })} From 56fd6571a7540ddd3662df2fcd4338e4e3140cf5 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Fri, 9 Feb 2024 10:20:27 +0100 Subject: [PATCH 19/26] address review --- src/components/CustomStatusBarAndBackground/index.tsx | 3 ++- src/pages/settings/AboutPage/AboutPage.tsx | 2 +- src/pages/settings/Preferences/PreferencesPage.js | 2 +- src/pages/settings/Security/SecuritySettingsPage.tsx | 2 +- src/pages/workspace/WorkspacesListPage.tsx | 2 +- 5 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/CustomStatusBarAndBackground/index.tsx b/src/components/CustomStatusBarAndBackground/index.tsx index f66a0204ac5e..2a4c8461c9f8 100644 --- a/src/components/CustomStatusBarAndBackground/index.tsx +++ b/src/components/CustomStatusBarAndBackground/index.tsx @@ -124,7 +124,8 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack } updateGlobalBackgroundColor(theme); - }, [isDisabled, theme]); + updateStatusBarStyle(); + }, [isDisabled, theme, updateStatusBarStyle]); if (isDisabled) { return null; diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx index 8215881498e4..a2d6402858b6 100644 --- a/src/pages/settings/AboutPage/AboutPage.tsx +++ b/src/pages/settings/AboutPage/AboutPage.tsx @@ -138,7 +138,7 @@ function AboutPage() { onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)} icon={Illustrations.PalmTree} /> - +
Navigation.goBack()} /> - +
Navigation.goBack()} icon={Illustrations.LockClosed} /> - +
App.createWorkspaceWithPolicyDraftAndNavigateToIt()} /> - + Date: Fri, 9 Feb 2024 11:09:25 +0100 Subject: [PATCH 20/26] add comment --- src/components/CustomStatusBarAndBackground/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/CustomStatusBarAndBackground/index.tsx b/src/components/CustomStatusBarAndBackground/index.tsx index ed20ee14cdeb..c653fec73e91 100644 --- a/src/components/CustomStatusBarAndBackground/index.tsx +++ b/src/components/CustomStatusBarAndBackground/index.tsx @@ -116,8 +116,9 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack return () => navigationRef.removeListener('state', listener); }, [isDisabled, theme.appBG, updateStatusBarStyle]); - // Update the global background (on web) everytime the theme changes. + // Update the global background and status bar style (on web) everytime the theme changes. // The background of the html element needs to be updated, otherwise you will see a big contrast when resizing the window or when the keyboard is open on iOS web. + // The status bar style needs to be updated when the user changes the theme, otherwise, the status bar will not change its color (mWeb iOS). useEffect(() => { if (isDisabled) { return; From a33f3a8c9a8bb0675b1730cf74edce8ad9319294 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Fri, 9 Feb 2024 17:44:40 +0100 Subject: [PATCH 21/26] remove shouldEnableMaxHeight --- src/pages/settings/AboutPage/AboutPage.tsx | 1 - src/pages/settings/Preferences/PreferencesPage.js | 1 - src/pages/settings/Security/SecuritySettingsPage.tsx | 1 - 3 files changed, 3 deletions(-) diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx index a2d6402858b6..aa978ff153c1 100644 --- a/src/pages/settings/AboutPage/AboutPage.tsx +++ b/src/pages/settings/AboutPage/AboutPage.tsx @@ -128,7 +128,6 @@ function AboutPage() { return ( diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js index fe6537e5c505..3becc2caf6c6 100755 --- a/src/pages/settings/Preferences/PreferencesPage.js +++ b/src/pages/settings/Preferences/PreferencesPage.js @@ -52,7 +52,6 @@ function PreferencesPage(props) { diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx index cfad1fcb5feb..b44848ad14a6 100644 --- a/src/pages/settings/Security/SecuritySettingsPage.tsx +++ b/src/pages/settings/Security/SecuritySettingsPage.tsx @@ -51,7 +51,6 @@ function SecuritySettingsPage() { testID={SecuritySettingsPage.displayName} includeSafeAreaPaddingBottom={false} shouldEnablePickerAvoiding={false} - shouldEnableMaxHeight shouldShowOfflineIndicatorInWideScreen > Date: Fri, 9 Feb 2024 18:08:50 +0100 Subject: [PATCH 22/26] Revert "address review" This reverts commit 56fd6571a7540ddd3662df2fcd4338e4e3140cf5. --- src/pages/settings/AboutPage/AboutPage.tsx | 2 +- src/pages/settings/Preferences/PreferencesPage.js | 2 +- src/pages/settings/Security/SecuritySettingsPage.tsx | 2 +- src/pages/workspace/WorkspacesListPage.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx index aa978ff153c1..6e55bc76a525 100644 --- a/src/pages/settings/AboutPage/AboutPage.tsx +++ b/src/pages/settings/AboutPage/AboutPage.tsx @@ -137,7 +137,7 @@ function AboutPage() { onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)} icon={Illustrations.PalmTree} /> - +
Navigation.goBack()} /> - +
Navigation.goBack()} icon={Illustrations.LockClosed} /> - +
App.createWorkspaceWithPolicyDraftAndNavigateToIt()} /> - + Date: Fri, 9 Feb 2024 18:15:45 +0100 Subject: [PATCH 23/26] Rename text styles --- src/pages/settings/AboutPage/AboutPage.tsx | 2 +- src/styles/index.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx index 6e55bc76a525..26d845a6a921 100644 --- a/src/pages/settings/AboutPage/AboutPage.tsx +++ b/src/pages/settings/AboutPage/AboutPage.tsx @@ -114,7 +114,7 @@ function AboutPage() { v{Environment.isInternalTestBuild() ? `${pkg.version} PR:${CONST.PULL_REQUEST_NUMBER}${getFlavor()}` : `${pkg.version}${getFlavor()}`} diff --git a/src/styles/index.ts b/src/styles/index.ts index 6afa9c62f049..f503f5892038 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -443,11 +443,12 @@ const styles = (theme: ThemeColors) => color: theme.link, }, - textIvoryLight: { + textVersion: { color: theme.iconColorfulBackground, fontSize: variables.fontSizeNormal, lineHeight: variables.lineHeightNormal, fontFamily: FontUtils.fontFamily.platform.MONOSPACE, + textAlign: 'center', }, textNoWrap: { From 099345668b6c6b2f783f1eb2cf599292b6f84c9a Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Fri, 9 Feb 2024 18:25:21 +0100 Subject: [PATCH 24/26] fix centering --- src/components/Section/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx index 3c0a73e3a6e7..33f5f3d2230a 100644 --- a/src/components/Section/index.tsx +++ b/src/components/Section/index.tsx @@ -116,8 +116,8 @@ function Section({ autoPlay loop /> - {overlayContent?.()} + {overlayContent?.()} )} From 5e5bce0c0b597b611348a2bb65e9a1f201660bb2 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Mon, 12 Feb 2024 10:03:59 +0100 Subject: [PATCH 25/26] attempt to fix the SignInPage-perf test --- tests/perf-test/SignInPage.perf-test.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tests/perf-test/SignInPage.perf-test.tsx b/tests/perf-test/SignInPage.perf-test.tsx index dde8596fb2ae..d0d9256cfa00 100644 --- a/tests/perf-test/SignInPage.perf-test.tsx +++ b/tests/perf-test/SignInPage.perf-test.tsx @@ -18,6 +18,8 @@ import * as TestHelper from '../utils/TestHelper'; import waitForBatchedUpdates from '../utils/waitForBatchedUpdates'; import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatchedUpdates'; +jest.mock('../../src/libs/Navigation/Navigation'); + const mockedNavigate = jest.fn(); jest.mock('@react-navigation/native', () => { const actualNav = jest.requireActual('@react-navigation/native'); From 4f303551e3c050a8a8eba040fdc8ec2e162afa5b Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Mon, 12 Feb 2024 10:35:49 +0100 Subject: [PATCH 26/26] fix perf tests --- tests/perf-test/SignInPage.perf-test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/perf-test/SignInPage.perf-test.tsx b/tests/perf-test/SignInPage.perf-test.tsx index d0d9256cfa00..88a653b1fbb9 100644 --- a/tests/perf-test/SignInPage.perf-test.tsx +++ b/tests/perf-test/SignInPage.perf-test.tsx @@ -18,8 +18,6 @@ import * as TestHelper from '../utils/TestHelper'; import waitForBatchedUpdates from '../utils/waitForBatchedUpdates'; import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatchedUpdates'; -jest.mock('../../src/libs/Navigation/Navigation'); - const mockedNavigate = jest.fn(); jest.mock('@react-navigation/native', () => { const actualNav = jest.requireActual('@react-navigation/native'); @@ -37,6 +35,8 @@ jest.mock('@react-navigation/native', () => { createNavigationContainerRef: () => ({ addListener: () => jest.fn(), removeListener: () => jest.fn(), + isReady: () => jest.fn(), + getCurrentRoute: () => jest.fn(), }), } as typeof NativeNavigation; });