Merge pull request #27468 from ishpaul777/feat/InitialSettingsPageLay…

…out-change Feat/initial settings page layout change
Expensify · Sep 21, 2023 · efb2b38 · efb2b38
2 parents 94c07ea + efd6e23
commit efb2b38
Show file tree

Hide file tree

Showing 17 changed files with 192 additions and 175 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -1163,6 +1163,7 @@ const CONST = {
     },
 
     AVATAR_SIZE: {
+        XLARGE: 'xlarge',
         LARGE: 'large',
         MEDIUM: 'medium',
         DEFAULT: 'default',

diff --git a/src/SCREENS.ts b/src/SCREENS.ts
@@ -12,8 +12,14 @@ export default {
     VALIDATE_LOGIN: 'ValidateLogin',
     CONCIERGE: 'Concierge',
     SETTINGS: {
+        ROOT: 'Settings_Root',
         PREFERENCES: 'Settings_Preferences',
         WORKSPACES: 'Settings_Workspaces',
+        SECURITY: 'Settings_Security',
+        STATUS: 'Settings_Status',
+    },
+    SAVE_THE_WORLD: {
+        ROOT: 'SaveTheWorld_Root',
     },
     SIGN_IN_WITH_APPLE_DESKTOP: 'AppleSignInDesktop',
     SIGN_IN_WITH_GOOGLE_DESKTOP: 'GoogleSignInDesktop',

diff --git a/src/components/CurrentUserPersonalDetailsSkeletonView/index.js b/src/components/CurrentUserPersonalDetailsSkeletonView/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import _ from 'underscore';
 import SkeletonViewContentLoader from 'react-content-loader/native';
 import {Circle, Rect} from 'react-native-svg';
 import {View} from 'react-native';
@@ -12,14 +13,26 @@ import styles from '../../styles/styles';
 const propTypes = {
     /** Whether to animate the skeleton view */
     shouldAnimate: PropTypes.bool,
+
+    /** The size of the avatar */
+    avatarSize: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
+
+    /** Background color of the skeleton view */
+    backgroundColor: PropTypes.string,
+
+    /** Foreground color of the skeleton view */
+    foregroundColor: PropTypes.string,
 };
 
 const defaultProps = {
     shouldAnimate: true,
+    avatarSize: CONST.AVATAR_SIZE.LARGE,
+    backgroundColor: themeColors.highlightBG,
+    foregroundColor: themeColors.border,
 };
 
 function CurrentUserPersonalDetailsSkeletonView(props) {
-    const avatarPlaceholderSize = StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.LARGE);
+    const avatarPlaceholderSize = StyleUtils.getAvatarSize(props.avatarSize);
     const avatarPlaceholderRadius = avatarPlaceholderSize / 2;
     const spaceBetweenAvatarAndHeadline = styles.mb3.marginBottom + styles.mt1.marginTop + (variables.lineHeightXXLarge - variables.fontSizeXLarge) / 2;
     const headlineSize = variables.fontSizeXLarge;
@@ -29,8 +42,8 @@ function CurrentUserPersonalDetailsSkeletonView(props) {
         <View style={styles.avatarSectionWrapperSkeleton}>
             <SkeletonViewContentLoader
                 animate={props.shouldAnimate}
-                backgroundColor={themeColors.highlightBG}
-                foregroundColor={themeColors.border}
+                backgroundColor={props.backgroundColor}
+                foregroundColor={props.foregroundColor}
                 height={avatarPlaceholderSize + spaceBetweenAvatarAndHeadline + headlineSize + spaceBetweenHeadlineAndLabel + labelSize}
             >
                 <Circle

diff --git a/src/components/StaticHeaderPageLayout.js → src/components/HeaderPageLayout.js b/src/components/StaticHeaderPageLayout.js → src/components/HeaderPageLayout.js
@@ -10,6 +10,8 @@ import themeColors from '../styles/themes/default';
 import * as StyleUtils from '../styles/StyleUtils';
 import useWindowDimensions from '../hooks/useWindowDimensions';
 import FixedFooter from './FixedFooter';
+import useNetwork from '../hooks/useNetwork';
+import * as Browser from '../libs/Browser';
 
 const propTypes = {
     ...headerWithBackButtonPropTypes,
@@ -22,16 +24,26 @@ const propTypes = {
 
     /** A fixed footer to display at the bottom of the page. */
     footer: PropTypes.node,
+
+    /** The image to display in the upper half of the screen. */
+    header: PropTypes.node,
+
+    /** Style to apply to the header image container */
+    // eslint-disable-next-line react/forbid-prop-types
+    headerContainerStyles: PropTypes.arrayOf(PropTypes.object),
 };
 
 const defaultProps = {
     backgroundColor: themeColors.appBG,
+    header: null,
+    headerContainerStyles: [],
     footer: null,
 };
 
-function StaticHeaderPageLayout({backgroundColor, children, image: Image, footer, imageContainerStyle, style, ...propsToPassToHeader}) {
-    const {windowHeight} = useWindowDimensions();
-
+function HeaderPageLayout({backgroundColor, children, footer, headerContainerStyles, style, headerContent, ...propsToPassToHeader}) {
+    const {windowHeight, isSmallScreenWidth} = useWindowDimensions();
+    const {isOffline} = useNetwork();
+    const appBGColor = StyleUtils.getBackgroundColorStyle(themeColors.appBG);
     const {titleColor, iconFill} = useMemo(() => {
         const isColorfulBackground = backgroundColor !== themeColors.appBG;
         return {
@@ -45,7 +57,7 @@ function StaticHeaderPageLayout({backgroundColor, children, image: Image, footer
             style={[StyleUtils.getBackgroundColorStyle(backgroundColor)]}
             shouldEnablePickerAvoiding={false}
             includeSafeAreaPaddingBottom={false}
-            offlineIndicatorStyle={[StyleUtils.getBackgroundColorStyle(themeColors.appBG)]}
+            offlineIndicatorStyle={[appBGColor]}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <>
@@ -55,27 +67,24 @@ function StaticHeaderPageLayout({backgroundColor, children, image: Image, footer
                         titleColor={titleColor}
                         iconFill={iconFill}
                     />
-                    <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(themeColors.appBG)]}>
+                    <View style={[styles.flex1, appBGColor, !isOffline ? safeAreaPaddingBottomStyle : {}]}>
+                        {/** Safari on ios/mac has a bug where overscrolling the page scrollview shows green background color. This is a workaround to fix that. https://github.com/Expensify/App/issues/23422 */}
+                        {Browser.isSafari() && (
+                            <View style={styles.dualColorOverscrollSpacer}>
+                                <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(backgroundColor)]} />
+                                <View style={[isSmallScreenWidth ? styles.flex1 : styles.flex3, appBGColor]} />
+                            </View>
+                        )}
                         <ScrollView
                             contentContainerStyle={[safeAreaPaddingBottomStyle, style]}
                             showsVerticalScrollIndicator={false}
+                            offlineIndicatorStyle={[appBGColor]}
                         >
-                            <View style={styles.overscrollSpacer(backgroundColor, windowHeight)} />
-                            <View
-                                style={[
-                                    styles.alignItemsCenter,
-                                    styles.justifyContentEnd,
-                                    StyleUtils.getBackgroundColorStyle(backgroundColor),
-                                    imageContainerStyle,
-                                    styles.staticHeaderImage,
-                                ]}
-                            >
-                                <Image
-                                    pointerEvents="none"
-                                    style={styles.staticHeaderImage}
-                                />
+                            {!Browser.isSafari() && <View style={styles.overscrollSpacer(backgroundColor, windowHeight)} />}
+                            <View style={[styles.alignItemsCenter, styles.justifyContentEnd, StyleUtils.getBackgroundColorStyle(backgroundColor), ...headerContainerStyles]}>
+                                {headerContent}
                             </View>
-                            <View style={styles.pt5}>{children}</View>
+                            <View style={[styles.pt5, appBGColor]}>{children}</View>
                         </ScrollView>
                         {!_.isNull(footer) && <FixedFooter>{footer}</FixedFooter>}
                     </View>
@@ -85,8 +94,8 @@ function StaticHeaderPageLayout({backgroundColor, children, image: Image, footer
     );
 }
 
-StaticHeaderPageLayout.propTypes = propTypes;
-StaticHeaderPageLayout.defaultProps = defaultProps;
-StaticHeaderPageLayout.displayName = 'StaticHeaderPageLayout';
+HeaderPageLayout.propTypes = propTypes;
+HeaderPageLayout.defaultProps = defaultProps;
+HeaderPageLayout.displayName = 'HeaderPageLayout';
 
-export default StaticHeaderPageLayout;
+export default HeaderPageLayout;
diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
@@ -1,18 +1,10 @@
-import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
-import {ScrollView, View} from 'react-native';
 import Lottie from 'lottie-react-native';
 import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes';
-import HeaderWithBackButton from './HeaderWithBackButton';
-import ScreenWrapper from './ScreenWrapper';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
-import * as StyleUtils from '../styles/StyleUtils';
-import useWindowDimensions from '../hooks/useWindowDimensions';
-import FixedFooter from './FixedFooter';
-import useNetwork from '../hooks/useNetwork';
-import * as Browser from '../libs/Browser';
+import HeaderPageLayout from './HeaderPageLayout';
 
 const propTypes = {
     ...headerWithBackButtonPropTypes,
@@ -40,54 +32,28 @@ const defaultProps = {
 };
 
 function IllustratedHeaderPageLayout({backgroundColor, children, illustration, footer, overlayContent, ...propsToPassToHeader}) {
-    const {isOffline} = useNetwork();
-    const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
-    const appBGColor = StyleUtils.getBackgroundColorStyle(themeColors.appBG);
-
     return (
-        <ScreenWrapper
-            style={[StyleUtils.getBackgroundColorStyle(backgroundColor)]}
-            shouldEnablePickerAvoiding={false}
-            includeSafeAreaPaddingBottom={false}
-            offlineIndicatorStyle={[appBGColor]}
-        >
-            {({safeAreaPaddingBottomStyle}) => (
+        <HeaderPageLayout
+            backgroundColor={backgroundColor}
+            title={propsToPassToHeader.title}
+            headerContent={
                 <>
-                    <HeaderWithBackButton
-                        // eslint-disable-next-line react/jsx-props-no-spreading
-                        {...propsToPassToHeader}
-                        titleColor={backgroundColor === themeColors.appBG ? undefined : themeColors.textColorfulBackground}
-                        iconFill={backgroundColor === themeColors.appBG ? undefined : themeColors.iconColorfulBackground}
+                    <Lottie
+                        source={illustration}
+                        style={styles.w100}
+                        autoPlay
+                        loop
                     />
-                    <View style={[styles.flex1, appBGColor, !isOffline ? safeAreaPaddingBottomStyle : {}]}>
-                        {/* Safari on ios/mac has a bug where overscrolling the page scrollview shows green the background color. This is a workaround to fix that. https://github.com/Expensify/App/issues/23422 */}
-                        {Browser.isSafari() && (
-                            <View style={[styles.dualColorOverscrollSpacer]}>
-                                <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(backgroundColor)]} />
-                                <View style={[isSmallScreenWidth ? styles.flex1 : styles.flex3, appBGColor]} />
-                            </View>
-                        )}
-                        <ScrollView
-                            contentContainerStyle={safeAreaPaddingBottomStyle}
-                            showsVerticalScrollIndicator={false}
-                        >
-                            {!Browser.isSafari() && <View style={styles.overscrollSpacer(backgroundColor, windowHeight)} />}
-                            <View style={[styles.alignItemsCenter, styles.justifyContentEnd, StyleUtils.getBackgroundColorStyle(backgroundColor)]}>
-                                <Lottie
-                                    source={illustration}
-                                    style={styles.w100}
-                                    autoPlay
-                                    loop
-                                />
-                                {overlayContent && overlayContent()}
-                            </View>
-                            <View style={[styles.pt5, appBGColor]}>{children}</View>
-                        </ScrollView>
-                        {!_.isNull(footer) && <FixedFooter>{footer}</FixedFooter>}
-                    </View>
+                    {overlayContent && overlayContent()}
                 </>
-            )}
-        </ScreenWrapper>
+            }
+            headerContainerStyles={[styles.justifyContentCenter, styles.w100]}
+            footer={footer}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...propsToPassToHeader}
+        >
+            {children}
+        </HeaderPageLayout>
     );
 }
 

diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -334,7 +334,7 @@ const NewTeachersUniteNavigator = createModalStackNavigator([
             const SaveTheWorldPage = require('../../../pages/TeachersUnite/SaveTheWorldPage').default;
             return SaveTheWorldPage;
         },
-        name: 'SaveTheWorld_Root',
+        name: SCREENS.SAVE_THE_WORLD.ROOT,
     },
     {
         getComponent: () => {
@@ -365,7 +365,7 @@ const SettingsModalStackNavigator = createModalStackNavigator([
             const SettingsInitialPage = require('../../../pages/settings/InitialSettingsPage').default;
             return SettingsInitialPage;
         },
-        name: 'Settings_Root',
+        name: SCREENS.SETTINGS.ROOT,
     },
     {
         getComponent: () => {
@@ -506,7 +506,7 @@ const SettingsModalStackNavigator = createModalStackNavigator([
             const SettingsSecurityPage = require('../../../pages/settings/Security/SecuritySettingsPage').default;
             return SettingsSecurityPage;
         },
-        name: 'Settings_Security',
+        name: SCREENS.SETTINGS.SECURITY,
     },
     {
         getComponent: () => {
@@ -576,7 +576,7 @@ const SettingsModalStackNavigator = createModalStackNavigator([
             const SettingsStatus = require('../../../pages/settings/Profile/CustomStatus/StatusPage').default;
             return SettingsStatus;
         },
-        name: 'Settings_Status',
+        name: SCREENS.SETTINGS.STATUS,
     },
     {
         getComponent: () => {

diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js
@@ -103,7 +103,8 @@ function NavigationRoot(props) {
 
         prevStatusBarBackgroundColor.current = statusBarBackgroundColor.current;
         statusBarBackgroundColor.current = currentScreenBackgroundColor;
-        if (prevStatusBarBackgroundColor.current === statusBarBackgroundColor.current) {
+
+        if (currentScreenBackgroundColor === themeColors.appBG && prevStatusBarBackgroundColor.current === themeColors.appBG) {
             return;
         }
 

diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
@@ -38,7 +38,7 @@ export default {
                 screens: {
                     Settings: {
                         screens: {
-                            Settings_Root: {
+                            [SCREENS.SETTINGS.ROOT]: {
                                 path: ROUTES.SETTINGS,
                             },
                             [SCREENS.SETTINGS.WORKSPACES]: {
@@ -65,7 +65,7 @@ export default {
                                 path: ROUTES.SETTINGS_CLOSE,
                                 exact: true,
                             },
-                            Settings_Security: {
+                            [SCREENS.SETTINGS.SECURITY]: {
                                 path: ROUTES.SETTINGS_SECURITY,
                                 exact: true,
                             },
@@ -159,7 +159,7 @@ export default {
                                 path: ROUTES.SETTINGS_SHARE_CODE,
                                 exact: true,
                             },
-                            Settings_Status: {
+                            [SCREENS.SETTINGS.STATUS]: {
                                 path: ROUTES.SETTINGS_STATUS,
                                 exact: true,
                             },
@@ -273,7 +273,7 @@ export default {
                     },
                     TeachersUnite: {
                         screens: {
-                            SaveTheWorld_Root: ROUTES.TEACHERS_UNITE,
+                            [SCREENS.SAVE_THE_WORLD.ROOT]: ROUTES.TEACHERS_UNITE,
                             I_Know_A_Teacher: ROUTES.I_KNOW_A_TEACHER,
                             Intro_School_Principal: ROUTES.INTRO_SCHOOL_PRINCIPAL,
                             I_Am_A_Teacher: ROUTES.I_AM_A_TEACHER,

diff --git a/src/pages/TeachersUnite/SaveTheWorldPage.js b/src/pages/TeachersUnite/SaveTheWorldPage.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import _ from 'lodash';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
+import SCREENS from '../../SCREENS';
 import ONYXKEYS from '../../ONYXKEYS';
 import CONST from '../../CONST';
 import styles from '../../styles/styles';
@@ -53,8 +54,8 @@ function SaveTheWorldPage(props) {
         <IllustratedHeaderPageLayout
             shouldShowBackButton
             title={translate('sidebarScreen.saveTheWorld')}
+            backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[SCREENS.SAVE_THE_WORLD.ROOT]}
             onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)}
-            backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[ROUTES.I_KNOW_A_TEACHER]}
             illustration={LottieAnimations.SaveTheWorld}
         >
             <View style={[styles.mb4, styles.justifyContentBetween, styles.mh5]}>