diff --git a/assets/images/wrench.svg b/assets/images/wrench.svg new file mode 100644 index 000000000000..7bfc3eaed0a7 --- /dev/null +++ b/assets/images/wrench.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index 4518f1504e32..86c74f4aa4f8 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -323,10 +323,10 @@ function AvatarWithImagePicker({ diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js index e7d2bda3a667..6564a42bdb70 100644 --- 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 index a98ab7d52741..109e60adf672 100644 --- 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 index eb950ea83fa6..dd59a90aa748 100755 --- 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 ( - - {shouldFinalShowBackButton && ( + + {shouldShowBackButton && ( { diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts index 106cc6581e83..3a1f2926dab9 100644 --- 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 index 89e21c92c31e..fd571f2968df 100644 --- 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 ( @@ -59,8 +62,10 @@ function BottomTabBar() { style={styles.bottomTabBarItem} > diff --git a/src/libs/Navigation/FULL_SCREEN_TO_RHP_MAPPING.ts b/src/libs/Navigation/FULL_SCREEN_TO_RHP_MAPPING.ts index 202914a42fd6..1ed8494b07af 100755 --- 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> = { 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 index d249c8a2aa1c..db6703e8d446 100644 --- 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 index b0362a69b4d6..02238fa5e848 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -146,10 +146,10 @@ function DetailsPage(props) { > diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js index b50798f2d856..415ee1e9abbf 100755 --- a/src/pages/ProfilePage.js +++ b/src/pages/ProfilePage.js @@ -168,10 +168,10 @@ function ProfilePage(props) { > diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js index 56aaa5d9f66e..87690163daf8 100644 --- 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 { Navigation.goBack(isReport ? ROUTES.REPORT_WITH_ID_DETAILS.getRoute(this.props.report.reportID) : ROUTES.SETTINGS.ROOT)} - shouldUseCentralPaneView - shouldShowBorderBottom + shouldShowBackButton={isReport || this.props.isSmallScreenWidth} /> @@ -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 index a92fc3145029..b3f704095703 100644 --- 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 index b0863548ba70..17abb3bdb43b 100644 --- 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 index a86ad16e11be..532bd1d2ad48 100644 --- 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 index b37e8faf8f57..9ea076a74f80 100644 --- 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) { Navigation.goBack(ROUTES.SETTINGS.ROOT)} - shouldUseCentralPaneView - shouldShowBorderBottom + shouldShowBackButton={props.isSmallScreenWidth} /> @@ -116,6 +117,7 @@ function AboutPage(props) { src={Logo} height={80} width={80} + fill={theme.QRLogo} /> 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 index 8357b22866f8..1e72456e4f58 100755 --- 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 ( Navigation.goBack(ROUTES.SETTINGS)} backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.PREFERENCES.ROOT].backgroundColor} illustration={LottieAnimations.PreferencesDJ} - shouldUseCentralPaneView + shouldShowBackButton={isSmallScreenWidth} > Navigation.goBack(ROUTES.SETTINGS.ROOT)} - shouldUseCentralPaneView - shouldShowBorderBottom + shouldShowBackButton={props.isSmallScreenWidth} /> diff --git a/src/pages/settings/Security/SecuritySettingsPage.js b/src/pages/settings/Security/SecuritySettingsPage.js index b475855e2f4e..f67ea15c5e13 100644 --- 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) { Navigation.goBack(ROUTES.SETTINGS.ROOT)} - shouldShowBackButton + shouldShowBackButton={isSmallScreenWidth} illustration={LottieAnimations.Safe} backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.SECURITY].backgroundColor} - shouldUseCentralPaneView > diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js index 2d9fe599ccb7..38a00071c427 100644 --- 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 Navigation.goBack(ROUTES.SETTINGS.ROOT)} - shouldUseCentralPaneView + shouldShowBackButton={isSmallScreenWidth} /> diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js index 665e95d3713d..6a13fc7735f0 100644 --- a/src/pages/workspace/WorkspaceInitialPage.js +++ b/src/pages/workspace/WorkspaceInitialPage.js @@ -290,6 +290,7 @@ function WorkspaceInitialPage(props) { brickRoadIndicator={item.brickRoadIndicator} wrapperStyle={styles.sectionMenuItem} focused={activeRoute && activeRoute.startsWith(item.routeName)} + isPaneMenu /> ))} diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js index 686eff6e25ba..08e0065884ae 100755 --- 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={