From ee9aec05f8b5855386dc88845a0956a562a52ddc Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 1 Feb 2024 16:00:12 +0100 Subject: [PATCH 01/13] add icons --- .../simple-illustration__profile.svg | 6 ++++++ src/components/HeaderWithBackButton/index.tsx | 9 +++++++++ src/components/HeaderWithBackButton/types.ts | 3 +++ src/components/Icon/Illustrations.ts | 2 ++ src/pages/settings/Profile/ProfilePage.js | 2 ++ 5 files changed, 22 insertions(+) create mode 100644 assets/images/simple-illustrations/simple-illustration__profile.svg diff --git a/assets/images/simple-illustrations/simple-illustration__profile.svg b/assets/images/simple-illustrations/simple-illustration__profile.svg new file mode 100644 index 000000000000..be704403f18e --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__profile.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index 6c89221d9217..0476151a382b 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -22,6 +22,7 @@ import ROUTES from '@src/ROUTES'; import type HeaderWithBackButtonProps from './types'; function HeaderWithBackButton({ + icon, iconFill, guidesCallTaskID = '', onBackButtonPress = () => Navigation.goBack(ROUTES.HOME), @@ -100,6 +101,14 @@ function HeaderWithBackButton({ )} + {icon && ( + + )} {shouldShowAvatarWithDisplay ? ( & { /** 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; diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 954c8d0392fc..7364a6d1a4de 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -50,6 +50,7 @@ import MoneyBadge from '@assets/images/simple-illustrations/simple-illustration_ import MoneyIntoWallet from '@assets/images/simple-illustrations/simple-illustration__moneyintowallet.svg'; import MoneyWings from '@assets/images/simple-illustrations/simple-illustration__moneywings.svg'; import OpenSafe from '@assets/images/simple-illustrations/simple-illustration__opensafe.svg'; +import Profile from '@assets/images/simple-illustrations/simple-illustration__profile.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'; @@ -118,4 +119,5 @@ export { CommentBubbles, TrashCan, TeleScope, + Profile, }; diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index c090a478f416..204fe3452db0 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -6,6 +6,7 @@ import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Expensicons from '@components/Icon/Expensicons'; +import * as Illustrations from '@components/Icon/Illustrations'; import MenuItem from '@components/MenuItem'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -111,6 +112,7 @@ function ProfilePage(props) { title={props.translate('common.profile')} onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)} shouldShowBackButton={props.isSmallScreenWidth} + icon={Illustrations.Profile} /> From ae789f71968239062d026ebb60424b966449d0c4 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 1 Feb 2024 16:08:57 +0100 Subject: [PATCH 02/13] add remaining icons --- .../simple-illustration__gears.svg | 101 ++++++++++++++++++ .../simple-illustration__lockclosed.svg | 17 +++ .../simple-illustration__palmtree.svg | 15 +++ .../simple-illustration__qr-code.svg | 4 + src/components/Icon/Illustrations.ts | 8 ++ src/pages/ShareCodePage.js | 2 + src/pages/settings/AboutPage/AboutPage.tsx | 2 + .../settings/Preferences/PreferencesPage.js | 2 + .../Security/SecuritySettingsPage.tsx | 3 + .../settings/Wallet/WalletPage/WalletPage.js | 1 + 10 files changed, 155 insertions(+) create mode 100644 assets/images/simple-illustrations/simple-illustration__gears.svg create mode 100644 assets/images/simple-illustrations/simple-illustration__lockclosed.svg create mode 100644 assets/images/simple-illustrations/simple-illustration__palmtree.svg create mode 100644 assets/images/simple-illustrations/simple-illustration__qr-code.svg diff --git a/assets/images/simple-illustrations/simple-illustration__gears.svg b/assets/images/simple-illustrations/simple-illustration__gears.svg new file mode 100644 index 000000000000..3b4cbc001e3b --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__gears.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__lockclosed.svg b/assets/images/simple-illustrations/simple-illustration__lockclosed.svg new file mode 100644 index 000000000000..3779b92b0b0f --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__lockclosed.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__palmtree.svg b/assets/images/simple-illustrations/simple-illustration__palmtree.svg new file mode 100644 index 000000000000..2aef4956cde9 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__palmtree.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__qr-code.svg b/assets/images/simple-illustrations/simple-illustration__qr-code.svg new file mode 100644 index 000000000000..10268d747588 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__qr-code.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 7364a6d1a4de..51422e7b4a49 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -37,11 +37,13 @@ import ConciergeBubble from '@assets/images/simple-illustrations/simple-illustra import ConciergeNew from '@assets/images/simple-illustrations/simple-illustration__concierge.svg'; import CreditCardsNew from '@assets/images/simple-illustrations/simple-illustration__credit-cards.svg'; import EmailAddress from '@assets/images/simple-illustrations/simple-illustration__email-address.svg'; +import Gears from '@assets/images/simple-illustrations/simple-illustration__gears.svg'; import HandCard from '@assets/images/simple-illustrations/simple-illustration__handcard.svg'; import HandEarth from '@assets/images/simple-illustrations/simple-illustration__handearth.svg'; import HotDogStand from '@assets/images/simple-illustrations/simple-illustration__hotdogstand.svg'; import Hourglass from '@assets/images/simple-illustrations/simple-illustration__hourglass.svg'; import InvoiceBlue from '@assets/images/simple-illustrations/simple-illustration__invoice.svg'; +import LockClosed from '@assets/images/simple-illustrations/simple-illustration__lockclosed.svg'; import LockOpen from '@assets/images/simple-illustrations/simple-illustration__lockopen.svg'; import Luggage from '@assets/images/simple-illustrations/simple-illustration__luggage.svg'; import Mailbox from '@assets/images/simple-illustrations/simple-illustration__mailbox.svg'; @@ -50,7 +52,9 @@ import MoneyBadge from '@assets/images/simple-illustrations/simple-illustration_ import MoneyIntoWallet from '@assets/images/simple-illustrations/simple-illustration__moneyintowallet.svg'; import MoneyWings from '@assets/images/simple-illustrations/simple-illustration__moneywings.svg'; 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 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'; @@ -120,4 +124,8 @@ export { TrashCan, TeleScope, Profile, + PalmTree, + LockClosed, + Gears, + QrCode, }; diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js index 3f0ef6ca138e..94f74b9f21b6 100644 --- a/src/pages/ShareCodePage.js +++ b/src/pages/ShareCodePage.js @@ -6,6 +6,7 @@ import expensifyLogo from '@assets/images/expensify-logo-round-transparent.png'; import ContextMenuItem from '@components/ContextMenuItem'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Expensicons from '@components/Icon/Expensicons'; +import * as Illustrations from '@components/Icon/Illustrations'; import MenuItem from '@components/MenuItem'; import QRShareWithDownload from '@components/QRShare/QRShareWithDownload'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -88,6 +89,7 @@ class ShareCodePage extends React.Component { title={this.props.translate('common.shareCode')} onBackButtonPress={() => Navigation.goBack(isReport ? ROUTES.REPORT_WITH_ID_DETAILS.getRoute(this.props.report.reportID) : ROUTES.SETTINGS)} shouldShowBackButton={isReport || this.props.isSmallScreenWidth} + icon={Illustrations.QrCode} /> diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx index f19c9eb2d534..375df9b2864b 100644 --- a/src/pages/settings/AboutPage/AboutPage.tsx +++ b/src/pages/settings/AboutPage/AboutPage.tsx @@ -4,6 +4,7 @@ import {View} from 'react-native'; import type {GestureResponderEvent, Text as RNText} from 'react-native'; import DeviceInfo from 'react-native-device-info'; 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'; @@ -132,6 +133,7 @@ function AboutPage() { backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.ABOUT].backgroundColor} overlayContent={overlayContent} shouldShowOfflineIndicatorInWideScreen + icon={Illustrations.PalmTree} > {translate('footer.aboutExpensify')} diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js index da0d87afe932..a81a0738c2b9 100755 --- a/src/pages/settings/Preferences/PreferencesPage.js +++ b/src/pages/settings/Preferences/PreferencesPage.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; +import * as Illustrations from '@components/Icon/Illustrations'; import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout'; import LottieAnimations from '@components/LottieAnimations'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; @@ -55,6 +56,7 @@ function PreferencesPage(props) { illustration={LottieAnimations.PreferencesDJ} shouldShowBackButton={isSmallScreenWidth} shouldShowOfflineIndicatorInWideScreen + icon={Illustrations.Gears} > diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js index 989b4f8838b9..417d5b890dea 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.js +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js @@ -341,6 +341,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod Navigation.goBack(ROUTES.SETTINGS)} + icon={Illustrations.MoneyIntoWallet} shouldShowBackButton={isSmallScreenWidth} /> From e08ec7b12471003c48e86bef655e1e19409e1c9b Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 1 Feb 2024 16:35:10 +0100 Subject: [PATCH 03/13] refactor --- src/components/HeaderWithBackButton/index.tsx | 7 ++++--- src/styles/variables.ts | 1 + 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index 0476151a382b..684e1e847705 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -17,6 +17,7 @@ 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'; @@ -104,9 +105,9 @@ function HeaderWithBackButton({ {icon && ( )} {shouldShowAvatarWithDisplay ? ( diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 296780abf0ae..a49ffb7c637f 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -81,6 +81,7 @@ export default { iconSizeSuperLarge: 60, iconSizeUltraLarge: 120, iconBottomBar: 24, + iconHeader: 48, emojiSize: 20, emojiLineHeight: 28, iouAmountTextSize: 40, From 0a8cb71477fec6db85dba89b4a52083b7b3a1247 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Fri, 2 Feb 2024 11:42:48 +0100 Subject: [PATCH 04/13] cleanup --- src/pages/settings/Security/SecuritySettingsPage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx index 4dcb292b2d86..c98b5a9f9ba5 100644 --- a/src/pages/settings/Security/SecuritySettingsPage.tsx +++ b/src/pages/settings/Security/SecuritySettingsPage.tsx @@ -1,6 +1,5 @@ import React, {useMemo} from 'react'; import {ScrollView, View} from 'react-native'; -import {LockClosed} from '@assets/images/simple-illustrations/simple-illustration__lockclosed.svg'; import * as Expensicons from '@components/Icon/Expensicons'; import * as Illustrations from '@components/Icon/Illustrations'; import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout'; From 77626b747620d4916af99a177d41b4bf3e3d1391 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 05/13] adjust headers heights --- src/components/HeaderWithBackButton/index.tsx | 11 +++++++++-- src/components/HeaderWithBackButton/types.ts | 3 +++ src/pages/ShareCodePage.js | 1 + src/pages/settings/AboutPage/AboutPage.tsx | 1 + src/pages/settings/Preferences/PreferencesPage.js | 1 + src/pages/settings/Profile/ProfilePage.js | 1 + src/pages/settings/Security/SecuritySettingsPage.tsx | 1 + src/pages/settings/Wallet/WalletPage/WalletPage.js | 1 + src/styles/index.ts | 4 ++++ src/styles/variables.ts | 4 ++-- 10 files changed, 24 insertions(+), 4 deletions(-) diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index c6187bf80d66..7de71f014044 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -58,6 +58,7 @@ function HeaderWithBackButton({ shouldOverlay = false, singleExecution = (func) => func, shouldNavigateToTopMostReport = false, + isCentralPaneSettings = false, }: HeaderWithBackButtonProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -72,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 && ( @@ -119,7 +126,7 @@ function HeaderWithBackButton({
)} diff --git a/src/components/HeaderWithBackButton/types.ts b/src/components/HeaderWithBackButton/types.ts index b332d829dd43..a5fdf1bc0690 100644 --- a/src/components/HeaderWithBackButton/types.ts +++ b/src/components/HeaderWithBackButton/types.ts @@ -117,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/pages/ShareCodePage.js b/src/pages/ShareCodePage.js index 94f74b9f21b6..69ef80900c9f 100644 --- a/src/pages/ShareCodePage.js +++ b/src/pages/ShareCodePage.js @@ -90,6 +90,7 @@ class ShareCodePage extends React.Component { onBackButtonPress={() => Navigation.goBack(isReport ? ROUTES.REPORT_WITH_ID_DETAILS.getRoute(this.props.report.reportID) : ROUTES.SETTINGS)} shouldShowBackButton={isReport || this.props.isSmallScreenWidth} icon={Illustrations.QrCode} + isCentralPaneSettings /> diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx index 375df9b2864b..96a195d19d5e 100644 --- a/src/pages/settings/AboutPage/AboutPage.tsx +++ b/src/pages/settings/AboutPage/AboutPage.tsx @@ -134,6 +134,7 @@ function AboutPage() { overlayContent={overlayContent} shouldShowOfflineIndicatorInWideScreen icon={Illustrations.PalmTree} + isCentralPaneSettings > {translate('footer.aboutExpensify')} diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js index a81a0738c2b9..5dcb4cc5265c 100755 --- a/src/pages/settings/Preferences/PreferencesPage.js +++ b/src/pages/settings/Preferences/PreferencesPage.js @@ -57,6 +57,7 @@ function PreferencesPage(props) { shouldShowBackButton={isSmallScreenWidth} shouldShowOfflineIndicatorInWideScreen icon={Illustrations.Gears} + isCentralPaneSettings > Navigation.goBack(ROUTES.SETTINGS)} shouldShowBackButton={props.isSmallScreenWidth} icon={Illustrations.Profile} + isCentralPaneSettings /> diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx index c98b5a9f9ba5..cbfb1b958570 100644 --- a/src/pages/settings/Security/SecuritySettingsPage.tsx +++ b/src/pages/settings/Security/SecuritySettingsPage.tsx @@ -55,6 +55,7 @@ function SecuritySettingsPage() { backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.SECURITY].backgroundColor} shouldShowOfflineIndicatorInWideScreen icon={Illustrations.LockClosed} + isCentralPaneSettings > diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js index 417d5b890dea..2db914570155 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.js +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js @@ -343,6 +343,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)} icon={Illustrations.MoneyIntoWallet} shouldShowBackButton={isSmallScreenWidth} + isCentralPaneSettings /> diff --git a/src/styles/index.ts b/src/styles/index.ts index 0d4b420c00e4..07b41bce4b0a 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 a49ffb7c637f..09cef771d0cf 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -12,9 +12,9 @@ function getValueUsingPixelRatio(defaultValue: number, maxValue: number): number } export default { - // do we need to change it? bottomTabHeight: 80, - contentHeaderHeight: getValueUsingPixelRatio(80, 100), + contentHeaderHeight: getValueUsingPixelRatio(73, 100), + contentHeaderExtendedHeight: getValueUsingPixelRatio(80, 100), componentSizeSmall: getValueUsingPixelRatio(28, 32), componentSizeNormal: 40, componentSizeMedium: 48, From 02f327ed2e580f37978c5bfdd6a5704d92a753ca Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Fri, 2 Feb 2024 13:32:43 +0100 Subject: [PATCH 06/13] fix height on small screens --- src/components/HeaderWithBackButton/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index 7de71f014044..c8e39913853d 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -15,6 +15,7 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useThrottledButtonState from '@hooks/useThrottledButtonState'; import useWaitForNavigation from '@hooks/useWaitForNavigation'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import getButtonState from '@libs/getButtonState'; import Navigation from '@libs/Navigation/Navigation'; import variables from '@styles/variables'; @@ -66,6 +67,7 @@ function HeaderWithBackButton({ const [isDownloadButtonActive, temporarilyDisableDownloadButton] = useThrottledButtonState(); const {translate} = useLocalize(); const {isKeyboardShown} = useKeyboardState(); + const {isSmallScreenWidth} = useWindowDimensions(); const waitForNavigate = useWaitForNavigation(); return ( @@ -75,7 +77,7 @@ function HeaderWithBackButton({ dataSet={{dragArea: false}} style={[ styles.headerBar, - isCentralPaneSettings && styles.headerBarExtendedHeight, + isCentralPaneSettings && !isSmallScreenWidth && styles.headerBarExtendedHeight, shouldShowBorderBottom && styles.borderBottom, shouldShowBackButton ? styles.pl0 : styles.pl5, shouldOverlay && StyleSheet.absoluteFillObject, From 1229cbc8e1a8c00f21c776b2fe030aa8c28efc60 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Fri, 2 Feb 2024 13:56:21 +0100 Subject: [PATCH 07/13] Revert "fix height on small screens" This reverts commit 02f327ed2e580f37978c5bfdd6a5704d92a753ca. --- src/components/HeaderWithBackButton/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index c8e39913853d..7de71f014044 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -15,7 +15,6 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useThrottledButtonState from '@hooks/useThrottledButtonState'; import useWaitForNavigation from '@hooks/useWaitForNavigation'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import getButtonState from '@libs/getButtonState'; import Navigation from '@libs/Navigation/Navigation'; import variables from '@styles/variables'; @@ -67,7 +66,6 @@ function HeaderWithBackButton({ const [isDownloadButtonActive, temporarilyDisableDownloadButton] = useThrottledButtonState(); const {translate} = useLocalize(); const {isKeyboardShown} = useKeyboardState(); - const {isSmallScreenWidth} = useWindowDimensions(); const waitForNavigate = useWaitForNavigation(); return ( @@ -77,7 +75,7 @@ function HeaderWithBackButton({ dataSet={{dragArea: false}} style={[ styles.headerBar, - isCentralPaneSettings && !isSmallScreenWidth && styles.headerBarExtendedHeight, + isCentralPaneSettings && styles.headerBarExtendedHeight, shouldShowBorderBottom && styles.borderBottom, shouldShowBackButton ? styles.pl0 : styles.pl5, shouldOverlay && StyleSheet.absoluteFillObject, From 69e93cf7f4e98a6c70a9d5bf32c47847bdd49b49 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Mon, 5 Feb 2024 12:22:44 +0100 Subject: [PATCH 08/13] fix colors in WS screen --- src/styles/theme/themes/dark.ts | 2 +- src/styles/theme/themes/light.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts index b9bf97037072..54a26a587e81 100644 --- a/src/styles/theme/themes/dark.ts +++ b/src/styles/theme/themes/dark.ts @@ -109,7 +109,7 @@ const darkTheme = { statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SETTINGS.WORKSPACES]: { - backgroundColor: colors.pink800, + backgroundColor: colors.productDark100, statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SETTINGS.WALLET.ROOT]: { diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts index 3514e4c4b105..7aea2d48aac0 100644 --- a/src/styles/theme/themes/light.ts +++ b/src/styles/theme/themes/light.ts @@ -109,7 +109,7 @@ const lightTheme = { statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SETTINGS.WORKSPACES]: { - backgroundColor: colors.pink800, + backgroundColor: colors.productLight100, statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SETTINGS.WALLET.ROOT]: { From f2e45df62b11c5e0b931a6a5dad5e826e7dadd24 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Mon, 5 Feb 2024 15:58:47 +0100 Subject: [PATCH 09/13] fix header heights --- src/components/HeaderWithBackButton/index.tsx | 8 ++++++-- src/pages/home/HeaderView.js | 2 +- src/styles/index.ts | 4 ++-- src/styles/variables.ts | 4 ++-- 4 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index 7de71f014044..aedba56a7b6b 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -15,6 +15,7 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useThrottledButtonState from '@hooks/useThrottledButtonState'; import useWaitForNavigation from '@hooks/useWaitForNavigation'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import getButtonState from '@libs/getButtonState'; import Navigation from '@libs/Navigation/Navigation'; import variables from '@styles/variables'; @@ -58,7 +59,6 @@ function HeaderWithBackButton({ shouldOverlay = false, singleExecution = (func) => func, shouldNavigateToTopMostReport = false, - isCentralPaneSettings = false, }: HeaderWithBackButtonProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -67,6 +67,10 @@ function HeaderWithBackButton({ const {translate} = useLocalize(); const {isKeyboardShown} = useKeyboardState(); const waitForNavigate = useWaitForNavigation(); + const {isSmallScreenWidth} = useWindowDimensions(); + + // If the icon is present, the header bar should be taller and use different font. + const isCentralPaneSettings = !!icon; return ( - + {isLoading ? ( diff --git a/src/styles/index.ts b/src/styles/index.ts index 07b41bce4b0a..bcce141b39aa 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2254,8 +2254,8 @@ const styles = (theme: ThemeColors) => width: '100%', }, - headerBarExtendedHeight: { - height: variables.contentHeaderExtendedHeight, + headerBarDesktopHeight: { + height: variables.contentHeaderDesktopHeight, }, imageViewContainer: { diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 09cef771d0cf..d643ad811a19 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -13,8 +13,8 @@ function getValueUsingPixelRatio(defaultValue: number, maxValue: number): number export default { bottomTabHeight: 80, - contentHeaderHeight: getValueUsingPixelRatio(73, 100), - contentHeaderExtendedHeight: getValueUsingPixelRatio(80, 100), + contentHeaderHeight: getValueUsingPixelRatio(72, 100), + contentHeaderDesktopHeight: getValueUsingPixelRatio(80, 100), componentSizeSmall: getValueUsingPixelRatio(28, 32), componentSizeNormal: 40, componentSizeMedium: 48, From 7875ed04b511625411eee885b1ee15a03d0fe006 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Mon, 5 Feb 2024 16:28:55 +0100 Subject: [PATCH 10/13] cleanup --- src/components/HeaderWithBackButton/types.ts | 9 +++++---- src/pages/ShareCodePage.js | 1 - src/pages/settings/AboutPage/AboutPage.tsx | 1 - src/pages/settings/Preferences/PreferencesPage.js | 1 - src/pages/settings/Profile/ProfilePage.js | 1 - src/pages/settings/Security/SecuritySettingsPage.tsx | 1 - src/pages/settings/Wallet/WalletPage/WalletPage.js | 1 - 7 files changed, 5 insertions(+), 10 deletions(-) diff --git a/src/components/HeaderWithBackButton/types.ts b/src/components/HeaderWithBackButton/types.ts index a5fdf1bc0690..83afbad8636b 100644 --- a/src/components/HeaderWithBackButton/types.ts +++ b/src/components/HeaderWithBackButton/types.ts @@ -28,7 +28,11 @@ type HeaderWithBackButtonProps = Partial & { /** Title color */ titleColor?: string; - /** Icon displayed on the left of the title */ + /** + * Icon displayed on the left of the title. + * If it is passed, the new styling is applied to the component: + * taller header on desktop and different font of the title. + * */ icon?: IconAsset; /** Method to trigger when pressing download button of the header */ @@ -117,9 +121,6 @@ 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/pages/ShareCodePage.js b/src/pages/ShareCodePage.js index 69ef80900c9f..94f74b9f21b6 100644 --- a/src/pages/ShareCodePage.js +++ b/src/pages/ShareCodePage.js @@ -90,7 +90,6 @@ class ShareCodePage extends React.Component { onBackButtonPress={() => Navigation.goBack(isReport ? ROUTES.REPORT_WITH_ID_DETAILS.getRoute(this.props.report.reportID) : ROUTES.SETTINGS)} shouldShowBackButton={isReport || this.props.isSmallScreenWidth} icon={Illustrations.QrCode} - isCentralPaneSettings /> diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx index 96a195d19d5e..375df9b2864b 100644 --- a/src/pages/settings/AboutPage/AboutPage.tsx +++ b/src/pages/settings/AboutPage/AboutPage.tsx @@ -134,7 +134,6 @@ function AboutPage() { overlayContent={overlayContent} shouldShowOfflineIndicatorInWideScreen icon={Illustrations.PalmTree} - isCentralPaneSettings > {translate('footer.aboutExpensify')} diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js index 5dcb4cc5265c..a81a0738c2b9 100755 --- a/src/pages/settings/Preferences/PreferencesPage.js +++ b/src/pages/settings/Preferences/PreferencesPage.js @@ -57,7 +57,6 @@ function PreferencesPage(props) { shouldShowBackButton={isSmallScreenWidth} shouldShowOfflineIndicatorInWideScreen icon={Illustrations.Gears} - isCentralPaneSettings > Navigation.goBack(ROUTES.SETTINGS)} shouldShowBackButton={props.isSmallScreenWidth} icon={Illustrations.Profile} - isCentralPaneSettings /> diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx index cbfb1b958570..c98b5a9f9ba5 100644 --- a/src/pages/settings/Security/SecuritySettingsPage.tsx +++ b/src/pages/settings/Security/SecuritySettingsPage.tsx @@ -55,7 +55,6 @@ function SecuritySettingsPage() { backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.SECURITY].backgroundColor} shouldShowOfflineIndicatorInWideScreen icon={Illustrations.LockClosed} - isCentralPaneSettings > diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js index 2db914570155..417d5b890dea 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.js +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js @@ -343,7 +343,6 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)} icon={Illustrations.MoneyIntoWallet} shouldShowBackButton={isSmallScreenWidth} - isCentralPaneSettings /> From e3e0b2db46a1d8fa2097ba8cf51b045b690d5c26 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Tue, 6 Feb 2024 09:25:11 +0100 Subject: [PATCH 11/13] set breadcrumbs height --- src/components/Breadcrumbs.tsx | 2 +- src/pages/home/sidebar/AllSettingsScreen.tsx | 2 +- src/pages/home/sidebar/SidebarLinks.js | 2 +- src/pages/workspace/WorkspaceInitialPage.js | 2 +- src/styles/index.ts | 4 ++++ 5 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx index 6af3a4c6d477..34bc3f7e30c8 100644 --- a/src/components/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs.tsx @@ -38,7 +38,7 @@ function Breadcrumbs({breadcrumbs, style}: BreadcrumbsProps) { const [primaryBreadcrumb, secondaryBreadcrumb] = breadcrumbs; return ( - + {primaryBreadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT ? (
textDecorationLine: 'none', }, + breadcrumsContainer: { + height: 24, + }, + breadcrumb: { color: theme.textSupporting, fontSize: variables.fontSizeh1, From 44ae0ca42fe476ac98ebd88968b9e4157bf7d33b Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Tue, 6 Feb 2024 09:38:19 +0100 Subject: [PATCH 12/13] increase height on illustration header --- src/components/HeaderWithBackButton/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index aedba56a7b6b..4ebfd4b24183 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -15,7 +15,6 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useThrottledButtonState from '@hooks/useThrottledButtonState'; import useWaitForNavigation from '@hooks/useWaitForNavigation'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import getButtonState from '@libs/getButtonState'; import Navigation from '@libs/Navigation/Navigation'; import variables from '@styles/variables'; @@ -67,7 +66,6 @@ function HeaderWithBackButton({ const {translate} = useLocalize(); const {isKeyboardShown} = useKeyboardState(); const waitForNavigate = useWaitForNavigation(); - const {isSmallScreenWidth} = useWindowDimensions(); // If the icon is present, the header bar should be taller and use different font. const isCentralPaneSettings = !!icon; @@ -79,7 +77,7 @@ function HeaderWithBackButton({ dataSet={{dragArea: false}} style={[ styles.headerBar, - isCentralPaneSettings && !isSmallScreenWidth && styles.headerBarDesktopHeight, + isCentralPaneSettings && styles.headerBarDesktopHeight, shouldShowBorderBottom && styles.borderBottom, shouldShowBackButton ? styles.pl0 : styles.pl5, shouldOverlay && StyleSheet.absoluteFillObject, From cc2db7b1322ec15f98931df6aa1ec306dc018cd1 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Tue, 6 Feb 2024 17:05:05 +0100 Subject: [PATCH 13/13] fix Profile icon --- .../simple-illustrations/simple-illustration__profile.svg | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/images/simple-illustrations/simple-illustration__profile.svg b/assets/images/simple-illustrations/simple-illustration__profile.svg index be704403f18e..85312f26e186 100644 --- a/assets/images/simple-illustrations/simple-illustration__profile.svg +++ b/assets/images/simple-illustrations/simple-illustration__profile.svg @@ -1,6 +1,6 @@ - - - - + + + +