Merge pull request #18 from software-mansion-labs/@kosmydel/ideal-nav…

…-fixes refactor & fix back button, and fix logo color
Expensify · Jan 2, 2024 · 50be122 · 50be122
2 parents f25b870 + 31f37bc
commit 50be122
Show file tree

Hide file tree

Showing 25 changed files with 61 additions and 52 deletions.
diff --git a/assets/images/wrench.svg b/assets/images/wrench.svg
diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
@@ -323,10 +323,10 @@ function AvatarWithImagePicker({
                             </View>
                             <View style={[styles.smallEditIcon, styles.smallAvatarEditIcon]}>
                                 <Icon
-                                    src={Expensicons.Camera}
+                                    src={Expensicons.Pencil}
                                     width={variables.iconSizeSmall}
                                     height={variables.iconSizeSmall}
-                                    fill={theme.textLight}
+                                    fill={theme.icon}
                                 />
                             </View>
                         </PressableWithoutFeedback>

diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js
@@ -40,6 +40,9 @@ const propTypes = {
 
     /** Forwarded ref to ContextMenuItem */
     innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+    /** Should limit width. */
+    shouldLimitWidth: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -50,9 +53,10 @@ const defaultProps = {
     isAnonymousAction: false,
     isFocused: false,
     innerRef: null,
+    shouldLimitWidth: true,
 };
 
-function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini, description, isAnonymousAction, isFocused, innerRef}) {
+function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini, description, isAnonymousAction, isFocused, innerRef, shouldLimitWidth}) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {windowWidth} = useWindowDimensions();
@@ -99,7 +103,7 @@ function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini,
             success={!isThrottledButtonActive}
             description={description}
             descriptionTextStyle={styles.breakWord}
-            style={StyleUtils.getContextMenuItemStyles(windowWidth)}
+            style={shouldLimitWidth && StyleUtils.getContextMenuItemStyles(windowWidth)}
             isAnonymousAction={isAnonymousAction}
             focused={isFocused}
             interactive={isThrottledButtonActive}

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.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 CONST from '@src/CONST';
@@ -42,7 +41,6 @@ function HeaderWithBackButton({
     shouldShowPinButton = false,
     shouldShowThreeDotsButton = false,
     shouldDisableThreeDotsButton = false,
-    shouldUseCentralPaneView = false,
     stepCounter,
     subtitle = '',
     title = '',
@@ -66,28 +64,16 @@ function HeaderWithBackButton({
     // @ts-expect-error TODO: Remove this once useKeyboardState (https://github.com/Expensify/App/issues/24941) is migrated to TypeScript.
     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]}
+            style={[styles.headerBar, shouldShowBorderBottom && styles.borderBottom, shouldShowBackButton ? styles.pl2 : styles.pl5]}
         >
-            <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 && (
                     <Tooltip text={translate('common.back')}>
                         <PressableWithoutFeedback
                             onPress={() => {

diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts
@@ -131,6 +131,7 @@ import User from '@assets/images/user.svg';
 import Users from '@assets/images/users.svg';
 import Wallet from '@assets/images/wallet.svg';
 import Workspace from '@assets/images/workspace-default-avatar.svg';
+import Wrench from '@assets/images/wrench.svg';
 import Zoom from '@assets/images/zoom.svg';
 import LoungeAccess from './svgs/LoungeAccessIcon';
 
@@ -145,6 +146,7 @@ export {
     ArrowRight,
     ArrowRightLong,
     ArrowsUpDown,
+    Wrench,
     BackArrow,
     Bank,
     Bill,

diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import HeaderPageLayout from './HeaderPageLayout';
 import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes';
 import Lottie from './Lottie';
@@ -35,9 +34,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/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
@@ -12,6 +12,7 @@ import getTopmostBottomTabRoute from '@libs/Navigation/getTopmostBottomTabRoute'
 import Navigation from '@libs/Navigation/Navigation';
 import {RootStackParamList} from '@libs/Navigation/types';
 import BottomTabBarFloatingActionButton from '@pages/home/sidebar/BottomTabBarFloatingActionButton';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
@@ -44,6 +45,8 @@ function BottomTabBar() {
                     <Icon
                         src={Expensicons.ChatBubble}
                         fill={currentTabName === SCREENS.HOME ? theme.iconMenu : theme.icon}
+                        width={variables.iconBottomBar}
+                        height={variables.iconBottomBar}
                     />
                 </PressableWithFeedback>
             </Tooltip>
@@ -59,8 +62,10 @@ function BottomTabBar() {
                     style={styles.bottomTabBarItem}
                 >
                     <Icon
-                        src={Expensicons.Gear}
+                        src={Expensicons.Wrench}
                         fill={currentTabName === SCREENS.ALL_SETTINGS || currentTabName === SCREENS.WORKSPACE.INITIAL ? theme.iconMenu : theme.icon}
+                        width={variables.iconBottomBar}
+                        height={variables.iconBottomBar}
                     />
                 </PressableWithFeedback>
             </Tooltip>

diff --git a/src/libs/Navigation/FULL_SCREEN_TO_RHP_MAPPING.ts b/src/libs/Navigation/FULL_SCREEN_TO_RHP_MAPPING.ts
@@ -35,6 +35,7 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial<Record<FullScreenName, string[]>> = {
         SCREENS.SETTINGS.WALLET.CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS,
     ],
     [SCREENS.SETTINGS.SECURITY]: [SCREENS.SETTINGS.TWO_FACTOR_AUTH, SCREENS.SETTINGS.CLOSE],
+    [SCREENS.SETTINGS.ABOUT]: [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS, SCREENS.KEYBOARD_SHORTCUTS],
 };
 
 export default FULL_SCREEN_TO_RHP_MAPPING;
diff --git a/src/libs/Navigation/NavigationRoot.tsx b/src/libs/Navigation/NavigationRoot.tsx
@@ -81,7 +81,6 @@ function NavigationRoot({authenticated, onReady}: NavigationRootProps) {
             currentReportIDValue?.updateCurrentReportID(state);
         }, 0);
         parseAndLogRoute(state);
-        console.log(state);
     };
 
     return (

diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js
@@ -146,10 +146,10 @@ function DetailsPage(props) {
                                         >
                                             <OfflineWithFeedback pendingAction={lodashGet(details, 'pendingFields.avatar', null)}>
                                                 <Avatar
-                                                    containerStyles={[styles.avatarLarge, styles.mb3]}
-                                                    imageStyles={[styles.avatarLarge]}
+                                                    containerStyles={[styles.avatarXLarge, styles.mb3]}
+                                                    imageStyles={[styles.avatarXLarge]}
                                                     source={UserUtils.getAvatar(details.avatar, details.accountID)}
-                                                    size={CONST.AVATAR_SIZE.LARGE}
+                                                    size={CONST.AVATAR_SIZE.XLARGE}
                                                     fallbackIcon={details.fallbackIcon}
                                                 />
                                             </OfflineWithFeedback>

diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
@@ -168,10 +168,10 @@ function ProfilePage(props) {
                                     >
                                         <OfflineWithFeedback pendingAction={lodashGet(details, 'pendingFields.avatar', null)}>
                                             <Avatar
-                                                containerStyles={[styles.avatarLarge, styles.mb3]}
-                                                imageStyles={[styles.avatarLarge]}
+                                                containerStyles={[styles.avatarXLarge, styles.mb3]}
+                                                imageStyles={[styles.avatarXLarge]}
                                                 source={UserUtils.getAvatar(avatar, accountID)}
-                                                size={CONST.AVATAR_SIZE.LARGE}
+                                                size={CONST.AVATAR_SIZE.XLARGE}
                                                 fallbackIcon={fallbackIcon}
                                             />
                                         </OfflineWithFeedback>

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]}>
@@ -108,6 +109,7 @@ class ShareCodePage extends React.Component {
                             successIcon={Expensicons.Checkmark}
                             successText={this.props.translate('qrCodes.copied')}
                             onPress={() => Clipboard.setString(url)}
+                            shouldLimitWidth={false}
                         />
 
                         {isNative && (
@@ -136,4 +138,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/home/sidebar/AllSettingsScreen.js b/src/pages/home/sidebar/AllSettingsScreen.js
@@ -90,6 +90,7 @@ function AllSettingsScreen() {
                             })}
                             shouldBlockSelection={Boolean(item.link)}
                             focused={activeRoute && activeRoute.startsWith(item.routeName)}
+                            isPaneMenu
                         />
                     );
                 })}

diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
@@ -4,7 +4,6 @@ import React, {useCallback, useEffect, useRef} from 'react';
 import {InteractionManager, StyleSheet, View} from 'react-native';
 import _ from 'underscore';
 import Breadcrumbs from '@components/Breadcrumbs';
-import ImageSVG from '@components/ImageSVG';
 import LHNOptionsList from '@components/LHNOptionsList/LHNOptionsList';
 import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
 import useLocalize from '@hooks/useLocalize';

diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
@@ -81,7 +81,6 @@ function FloatingActionButtonAndPopover(props) {
     const [isCreateMenuActive, setIsCreateMenuActive] = useState(false);
     const isAnonymousUser = Session.isAnonymousUser();
     const fabRef = useRef(null);
-    const fabWrapperRef = useRef(null);
 
     const prevIsFocused = usePrevious(props.isFocused);
 

diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
@@ -12,6 +12,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]}>
@@ -116,6 +117,7 @@ function AboutPage(props) {
                                         src={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]}>