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__profile.svg b/assets/images/simple-illustrations/simple-illustration__profile.svg new file mode 100644 index 000000000000..85312f26e186 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__profile.svg @@ -0,0 +1,6 @@ + + + + + + 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/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 ? (
Navigation.goBack(ROUTES.HOME), @@ -65,12 +67,21 @@ function HeaderWithBackButton({ const {isKeyboardShown} = useKeyboardState(); const waitForNavigate = useWaitForNavigation(); + // If the icon is present, the header bar should be taller and use different font. + const isCentralPaneSettings = !!icon; + return ( {shouldShowBackButton && ( @@ -99,6 +110,14 @@ function HeaderWithBackButton({ )} + {icon && ( + + )} {shouldShowAvatarWithDisplay ? ( )} diff --git a/src/components/HeaderWithBackButton/types.ts b/src/components/HeaderWithBackButton/types.ts index 88f7e717a44d..83afbad8636b 100644 --- a/src/components/HeaderWithBackButton/types.ts +++ b/src/components/HeaderWithBackButton/types.ts @@ -28,6 +28,13 @@ type HeaderWithBackButtonProps = Partial & { /** Title color */ titleColor?: string; + /** + * 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 */ onDownloadButtonPress?: () => void; diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 954c8d0392fc..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,6 +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'; @@ -118,4 +123,9 @@ export { CommentBubbles, TrashCan, TeleScope, + Profile, + PalmTree, + LockClosed, + Gears, + QrCode, }; diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx index dcfb9f6861bf..9ed8bf3d76a1 100644 --- a/src/pages/ShareCodePage.tsx +++ b/src/pages/ShareCodePage.tsx @@ -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 type QRShareWithDownloadHandle from '@components/QRShare/QRShareWithDownload/types'; @@ -79,6 +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} /> diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 7b299a18a030..f6f14d01889d 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -235,7 +235,7 @@ function HeaderView(props) { style={[shouldShowBorderBottom && styles.borderBottom]} dataSet={{dragArea: true}} > - + {isLoading ? ( diff --git a/src/pages/home/sidebar/AllSettingsScreen.tsx b/src/pages/home/sidebar/AllSettingsScreen.tsx index 0406c38cf659..3f6d0ab6a318 100644 --- a/src/pages/home/sidebar/AllSettingsScreen.tsx +++ b/src/pages/home/sidebar/AllSettingsScreen.tsx @@ -107,7 +107,7 @@ function AllSettingsScreen({policies, policyMembers}: AllSettingsScreenProps) { text: translate('common.settings'), }, ]} - style={[styles.pb5, styles.ph5]} + style={[styles.mb5, styles.ph5]} /> diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js index f95daf8ad7d2..6ea7e1eb5280 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} testID={PreferencesPage.displayName} > 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} /> diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx index 05c879669e78..b6881a9b3683 100644 --- a/src/pages/settings/Security/SecuritySettingsPage.tsx +++ b/src/pages/settings/Security/SecuritySettingsPage.tsx @@ -1,6 +1,7 @@ import React, {useMemo} from 'react'; import {ScrollView, View} from 'react-native'; 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'; @@ -53,6 +54,7 @@ function SecuritySettingsPage() { illustration={LottieAnimations.Safe} backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.SECURITY].backgroundColor} shouldShowOfflineIndicatorInWideScreen + icon={Illustrations.LockClosed} testID={SecuritySettingsPage.displayName} > 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} /> diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js index 8141fe92a5d9..7cd4fcb536b6 100644 --- a/src/pages/workspace/WorkspaceInitialPage.js +++ b/src/pages/workspace/WorkspaceInitialPage.js @@ -187,7 +187,7 @@ function WorkspaceInitialPage(props) { text: translate('common.settings'), }, ]} - style={[styles.ph5, styles.pb5]} + style={[styles.ph5, styles.mb5]} /> textDecorationLine: 'none', }, + breadcrumsContainer: { + height: 24, + }, + breadcrumb: { color: theme.textSupporting, fontSize: variables.fontSizeh1, @@ -2264,6 +2268,10 @@ const styles = (theme: ThemeColors) => width: '100%', }, + headerBarDesktopHeight: { + height: variables.contentHeaderDesktopHeight, + }, + imageViewContainer: { width: '100%', height: '100%', 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]: { diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 296780abf0ae..d643ad811a19 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(72, 100), + contentHeaderDesktopHeight: getValueUsingPixelRatio(80, 100), componentSizeSmall: getValueUsingPixelRatio(28, 32), componentSizeNormal: 40, componentSizeMedium: 48, @@ -81,6 +81,7 @@ export default { iconSizeSuperLarge: 60, iconSizeUltraLarge: 120, iconBottomBar: 24, + iconHeader: 48, emojiSize: 20, emojiLineHeight: 28, iouAmountTextSize: 40,