refactor & fix back button, and fix logo color

software-mansion-labs · Jan 2, 2024 · 1d58bef · 1d58bef
1 parent 188a9d8
commit 1d58bef
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 35 deletions.
diff --git a/src/components/HeaderWithBackButton/headerWithBackButtonPropTypes.js b/src/components/HeaderWithBackButton/headerWithBackButtonPropTypes.js
@@ -96,9 +96,6 @@ const propTypes = {
 
     /** Whether we should navigate to report page when the route have a topMostReport  */
     shouldNavigateToTopMostReport: PropTypes.bool,
-
-    /** Whether we should show the back button only on mobile */
-    shouldUseCentralPaneView: PropTypes.bool,
 };
 
 export default propTypes;
diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js
@@ -14,7 +14,6 @@ import useStyleUtils from '@hooks/useStyleUtils';
 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 CONST from '@src/CONST';
@@ -41,7 +40,6 @@ function HeaderWithBackButton({
     shouldShowPinButton = false,
     shouldShowThreeDotsButton = false,
     shouldDisableThreeDotsButton = false,
-    shouldUseCentralPaneView = false,
     stepCounter = null,
     subtitle = '',
     title = '',
@@ -63,27 +61,15 @@ function HeaderWithBackButton({
     const {translate} = useLocalize();
     const {isKeyboardShown} = useKeyboardState();
     const waitForNavigate = useWaitForNavigation();
-    const {isSmallScreenWidth} = useWindowDimensions();
-    const shouldFinalShowBackButton = shouldShowBackButton && (!shouldUseCentralPaneView || isSmallScreenWidth);
     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]}
         >
-            <View
-                style={[
-                    styles.dFlex,
-                    styles.flexRow,
-                    styles.alignItemsCenter,
-                    styles.flexGrow1,
-                    styles.justifyContentBetween,
-                    styles.overflowHidden,
-                    !shouldFinalShowBackButton && styles.pl5,
-                ]}
-            >
-                {shouldFinalShowBackButton && (
+            <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.justifyContentBetween, styles.overflowHidden, !shouldShowBackButton && styles.pl5]}>
+                {shouldShowBackButton && (
                     <Tooltip text={translate('common.back')}>
                         <PressableWithoutFeedback
                             onPress={() => {

diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
@@ -35,9 +35,7 @@ const defaultProps = {
 function IllustratedHeaderPageLayout({backgroundColor, children, illustration, footer, overlayContent, ...propsToPassToHeader}) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const {isSmallScreenWidth} = useWindowDimensions();
-
-    const shouldUseMaxHeight = propsToPassToHeader.shouldUseCentralPaneView && !isSmallScreenWidth;
+    const shouldUseMaxHeight = !propsToPassToHeader.shouldShowBackButton;
 
     return (
         <HeaderPageLayout

diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
@@ -13,6 +13,7 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultPro
 import withEnvironment from '@components/withEnvironment';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
+import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import Clipboard from '@libs/Clipboard';
 import compose from '@libs/compose';
 import getPlatform from '@libs/getPlatform';
@@ -34,6 +35,7 @@ const propTypes = {
     ...withLocalizePropTypes,
     ...withCurrentUserPersonalDetailsPropTypes,
     ...withThemeStylesPropTypes,
+    ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
@@ -82,8 +84,7 @@ class ShareCodePage extends React.Component {
                 <HeaderWithBackButton
                     title={this.props.translate('common.shareCode')}
                     onBackButtonPress={() => Navigation.goBack(isReport ? ROUTES.REPORT_WITH_ID_DETAILS.getRoute(this.props.report.reportID) : ROUTES.SETTINGS.ROOT)}
-                    shouldUseCentralPaneView
-                    shouldShowBorderBottom
+                    shouldShowBackButton={isReport || this.props.isSmallScreenWidth}
                 />
 
                 <ScrollView style={[this.props.themeStyles.flex1, this.props.themeStyles.mt3]}>
@@ -136,4 +137,4 @@ ShareCodePage.propTypes = propTypes;
 ShareCodePage.defaultProps = defaultProps;
 ShareCodePage.displayName = 'ShareCodePage';
 
-export default compose(withEnvironment, withLocalize, withCurrentUserPersonalDetails, withThemeStyles)(ShareCodePage);
+export default compose(withEnvironment, withLocalize, withCurrentUserPersonalDetails, withThemeStyles, withWindowDimensions)(ShareCodePage);
diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
@@ -11,6 +11,7 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import compose from '@libs/compose';
@@ -42,6 +43,7 @@ function getFlavor() {
 
 function AboutPage(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {translate} = props;
     const popoverAnchor = useRef(null);
     const waitForNavigate = useWaitForNavigation();
@@ -104,8 +106,7 @@ function AboutPage(props) {
                     <HeaderWithBackButton
                         title={props.translate('initialSettingsPage.about')}
                         onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS.ROOT)}
-                        shouldUseCentralPaneView
-                        shouldShowBorderBottom
+                        shouldShowBackButton={props.isSmallScreenWidth}
                     />
                     <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexColumn, styles.justifyContentBetween, safeAreaPaddingBottomStyle]}>
                         <View style={[styles.flex1]}>
@@ -114,6 +115,7 @@ function AboutPage(props) {
                                     <Logo
                                         height={80}
                                         width={80}
+                                        fill={theme.QRLogo}
                                     />
                                     <Text style={[styles.textLabel, styles.alignSelfCenter, styles.mt6, styles.mb2, styles.colorMuted, styles.userSelectText]}>
                                         v{Environment.isInternalTestBuild() ? `${pkg.version} PR:${CONST.PULL_REQUEST_NUMBER}${getFlavor()}` : `${pkg.version}${getFlavor()}`}

diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
@@ -13,6 +13,7 @@ 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';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
@@ -45,14 +46,14 @@ function PreferencesPage(props) {
     const styles = useThemeStyles();
     const {isProduction} = useEnvironment();
     const {translate, preferredLocale} = useLocalize();
+    const {isSmallScreenWidth} = useWindowDimensions();
 
     return (
         <IllustratedHeaderPageLayout
             title={translate('common.preferences')}
-            // onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
             backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.PREFERENCES.ROOT].backgroundColor}
             illustration={LottieAnimations.PreferencesDJ}
-            shouldUseCentralPaneView
+            shouldShowBackButton={isSmallScreenWidth}
         >
             <View style={styles.mb6}>
                 <Text

diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
@@ -109,8 +109,7 @@ function ProfilePage(props) {
             <HeaderWithBackButton
                 title={props.translate('common.profile')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS.ROOT)}
-                shouldUseCentralPaneView
-                shouldShowBorderBottom
+                shouldShowBackButton={props.isSmallScreenWidth}
             />
             <ScrollView>
                 <View style={[styles.mt4]}>

diff --git a/src/pages/settings/Security/SecuritySettingsPage.js b/src/pages/settings/Security/SecuritySettingsPage.js
@@ -11,6 +11,7 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -38,6 +39,7 @@ function SecuritySettingsPage(props) {
     const styles = useThemeStyles();
     const {translate} = props;
     const waitForNavigate = useWaitForNavigation();
+    const {isSmallScreenWidth} = useWindowDimensions();
 
     const menuItems = useMemo(() => {
         const baseMenuItems = [
@@ -67,10 +69,9 @@ function SecuritySettingsPage(props) {
         <IllustratedHeaderPageLayout
             title={translate('initialSettingsPage.security')}
             onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS.ROOT)}
-            shouldShowBackButton
+            shouldShowBackButton={isSmallScreenWidth}
             illustration={LottieAnimations.Safe}
             backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.SECURITY].backgroundColor}
-            shouldUseCentralPaneView
         >
             <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexColumn, styles.justifyContentBetween]}>
                 <View style={[styles.flex1]}>

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -323,7 +323,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
                     <HeaderWithBackButton
                         title={translate('common.wallet')}
                         onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS.ROOT)}
-                        shouldUseCentralPaneView
+                        shouldShowBackButton={isSmallScreenWidth}
                     />
                     <View style={[styles.flex1, styles.mb4]}>
                         <ScrollView>

diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js
@@ -14,6 +14,7 @@ import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -111,6 +112,7 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, u
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
+    const {isSmallScreenWidth} = useWindowDimensions();
 
     /**
      * @param {Boolean} isPaymentItem whether the item being rendered is the payments menu item
@@ -187,7 +189,7 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, u
             illustration={LottieAnimations.WorkspacePlanet}
             onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS.ROOT)}
             title={translate('common.workspaces')}
-            shouldUseCentralPaneView
+            shouldShowBackButton={isSmallScreenWidth}
             footer={
                 <Button
                     accessibilityLabel={translate('workspace.new.newWorkspace')}