Merge pull request Expensify#35564 from software-mansion-labs/update-…

…account-settings/header-icons

[Update Account Settings] Header: icons, height, and font changes

src/components/Breadcrumbs.tsx

@@ -38,7 +38,7 @@ function Breadcrumbs({breadcrumbs, style}: BreadcrumbsProps) {
     const [primaryBreadcrumb, secondaryBreadcrumb] = breadcrumbs;
 
     return (
-        <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1, styles.w100, style]}>
+        <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1, styles.w100, styles.breadcrumsContainer, style]}>
             {primaryBreadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT ? (
                 <View style={styles.breadcrumbLogo}>
                     <Header

src/components/HeaderWithBackButton/index.tsx

@@ -17,11 +17,13 @@ import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import getButtonState from '@libs/getButtonState';
 import Navigation from '@libs/Navigation/Navigation';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type HeaderWithBackButtonProps from './types';
 
 function HeaderWithBackButton({
+    icon,
     iconFill,
     guidesCallTaskID = '',
     onBackButtonPress = () => Navigation.goBack(ROUTES.HOME),
@@ -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 (
         <View
             // 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.pl2, shouldOverlay && StyleSheet.absoluteFillObject]}
+            style={[
+                styles.headerBar,
+                isCentralPaneSettings && styles.headerBarDesktopHeight,
+                shouldShowBorderBottom && styles.borderBottom,
+                shouldShowBackButton && styles.pl2,
+                shouldOverlay && StyleSheet.absoluteFillObject,
+            ]}
         >
             <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.justifyContentBetween, styles.overflowHidden]}>
                 {shouldShowBackButton && (
@@ -99,6 +110,14 @@ function HeaderWithBackButton({
                         </PressableWithoutFeedback>
                     </Tooltip>
                 )}
+                {icon && (
+                    <Icon
+                        src={icon}
+                        width={variables.iconHeader}
+                        height={variables.iconHeader}
+                        additionalStyles={[styles.mr2]}
+                    />
+                )}
                 {shouldShowAvatarWithDisplay ? (
                     <AvatarWithDisplayName
                         report={report}
@@ -109,7 +128,7 @@ function HeaderWithBackButton({
                     <Header
                         title={title}
                         subtitle={stepCounter ? translate('stepCounter', stepCounter) : subtitle}
-                        textStyles={titleColor ? [StyleUtils.getTextColorStyle(titleColor)] : []}
+                        textStyles={[titleColor ? StyleUtils.getTextColorStyle(titleColor) : {}, isCentralPaneSettings && styles.textHeadlineH1]}
                     />
                 )}
                 <View style={[styles.reportOptions, styles.flexRow, styles.pr5, styles.alignItemsCenter]}>

src/components/HeaderWithBackButton/types.ts

@@ -28,6 +28,13 @@ type HeaderWithBackButtonProps = Partial<ChildrenProps> & {
     /** 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;
 

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,
 };

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}
             />
             <ScrollView style={[themeStyles.flex1, themeStyles.mt3]}>
                 <View style={[isSmallScreenWidth ? themeStyles.workspaceSectionMobile : themeStyles.workspaceSection, themeStyles.ph4]}>

src/pages/home/HeaderView.js

@@ -235,7 +235,7 @@ function HeaderView(props) {
             style={[shouldShowBorderBottom && styles.borderBottom]}
             dataSet={{dragArea: true}}
         >
-            <View style={[styles.appContentHeader]}>
+            <View style={[styles.appContentHeader, !isSmallScreenWidth && styles.headerBarDesktopHeight]}>
                 <View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && styles.pl5]}>
                     {isLoading ? (
                         <ReportHeaderSkeletonView onBackButtonPress={props.onNavigationMenuButtonClicked} />

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]}
             />
             <ScrollView style={[styles.pb4, styles.mh3]}>
                 <MenuItemList

src/pages/home/sidebar/SidebarLinks.js

@@ -140,7 +140,7 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
                         text: translate('common.chats'),
                     },
                 ]}
-                style={[styles.pb5, styles.ph5]}
+                style={[styles.mb5, styles.ph5]}
             />
             <View style={[styles.pRelative, styles.flex1]}>
                 <LHNOptionsList

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}
             testID={AboutPage.displayName}
         >
             <View style={[styles.settingsPageBody, styles.ph5]}>

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}
         >
             <View style={styles.mb6}>

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}
             />
             <ScrollView>
                 <View style={[styles.mt4]}>