From 1d58befa03b4dd93f27a96cec91823c852b37a8a Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Tue, 2 Jan 2024 10:52:45 +0100
Subject: [PATCH 1/8] refactor & fix back button, and fix logo color

---
 .../headerWithBackButtonPropTypes.js           |  3 ---
 src/components/HeaderWithBackButton/index.js   | 18 ++----------------
 src/components/IllustratedHeaderPageLayout.js  |  4 +---
 src/pages/ShareCodePage.js                     |  7 ++++---
 src/pages/settings/AboutPage/AboutPage.js      |  6 ++++--
 .../settings/Preferences/PreferencesPage.js    |  5 +++--
 src/pages/settings/Profile/ProfilePage.js      |  3 +--
 .../settings/Security/SecuritySettingsPage.js  |  5 +++--
 .../settings/Wallet/WalletPage/WalletPage.js   |  2 +-
 src/pages/workspace/WorkspacesListPage.js      |  4 +++-
 10 files changed, 22 insertions(+), 35 deletions(-)

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.js b/src/components/HeaderWithBackButton/index.js
index eab71beaaf8d..29af23cdbf2c 100755
--- 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,8 +61,6 @@ 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
@@ -72,18 +68,8 @@ function HeaderWithBackButton({
             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
index 89e21c92c31e..765f6c412ab4 100644
--- 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
index 56aaa5d9f66e..cba3456a9ddf 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 {
                 <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
index 2de1b93ac400..e486f4d7120c 100644
--- 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
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 (
         <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
index 7aeb9efaf45d..834d91071bd0 100755
--- 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
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) {
         <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
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
                     <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
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={
                 <Button
                     accessibilityLabel={translate('workspace.new.newWorkspace')}

From 7897986e269d43518fa77b701c50d1b109134828 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Tue, 2 Jan 2024 11:10:34 +0100
Subject: [PATCH 2/8] add missing screen mappings

---
 src/libs/Navigation/FULL_SCREEN_TO_RHP_MAPPING.ts | 1 +
 1 file changed, 1 insertion(+)

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

From 497420fd953a79301d93500f5a650bdccb5dcc46 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Tue, 2 Jan 2024 11:14:17 +0100
Subject: [PATCH 3/8] refactor paddings

---
 src/components/HeaderWithBackButton/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js
index 29af23cdbf2c..e299311fca03 100755
--- a/src/components/HeaderWithBackButton/index.js
+++ b/src/components/HeaderWithBackButton/index.js
@@ -66,9 +66,9 @@ function HeaderWithBackButton({
             // 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, !shouldShowBackButton && styles.pl5]}>
+            <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.justifyContentBetween, styles.overflowHidden]}>
                 {shouldShowBackButton && (
                     <Tooltip text={translate('common.back')}>
                         <PressableWithoutFeedback

From cb8ffe774b18f6cd1b08f8275f68ab47da5a761a Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Tue, 2 Jan 2024 11:54:36 +0100
Subject: [PATCH 4/8] adjust icons

---
 src/components/AvatarWithImagePicker.js | 4 ++--
 src/pages/DetailsPage.js                | 6 +++---
 src/pages/ProfilePage.js                | 6 +++---
 src/styles/index.ts                     | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
index 65fb5ad06a0a..375e3753a185 100644
--- a/src/components/AvatarWithImagePicker.js
+++ b/src/components/AvatarWithImagePicker.js
@@ -322,10 +322,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/pages/DetailsPage.js b/src/pages/DetailsPage.js
index bc7ff5543d66..8df008169eaf 100755
--- 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
index c9e53157d291..891cb43b1558 100755
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -172,10 +172,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/styles/index.ts b/src/styles/index.ts
index f8044e2fd1ba..8cbf376f12db 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2921,7 +2921,7 @@ const styles = (theme: ThemeColors) =>
 
         smallEditIcon: {
             alignItems: 'center',
-            backgroundColor: theme.buttonHoveredBG,
+            backgroundColor: theme.buttonDefaultBG,
             borderColor: theme.appBG,
             borderRadius: 14,
             borderWidth: 3,

From 112619c04a40559aac031a7a9ca93f1e25f96e20 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Tue, 2 Jan 2024 15:32:21 +0100
Subject: [PATCH 5/8] fix copy in account settings -> share code

---
 src/components/ContextMenuItem.js | 8 ++++++--
 src/pages/ShareCodePage.js        | 1 +
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js
index 307cfcde9b10..64e29d34380d 100644
--- a/src/components/ContextMenuItem.js
+++ b/src/components/ContextMenuItem.js
@@ -39,6 +39,9 @@ const propTypes = {
 
     /** Forwarded ref to ContextMenuItem */
     innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+    /** Should limit width. */
+    shouldLimitWidth: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -49,9 +52,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();
@@ -98,7 +102,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/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index cba3456a9ddf..87690163daf8 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -109,6 +109,7 @@ class ShareCodePage extends React.Component {
                             successIcon={Expensicons.Checkmark}
                             successText={this.props.translate('qrCodes.copied')}
                             onPress={() => Clipboard.setString(url)}
+                            shouldLimitWidth={false}
                         />
 
                         {isNative && (

From 7386318058d1b84d27ed55359e330812829f69a0 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Tue, 2 Jan 2024 15:35:27 +0100
Subject: [PATCH 6/8] fix colors in WorkspaceSettings

---
 src/pages/home/sidebar/AllSettingsScreen.js | 1 +
 src/pages/workspace/WorkspaceInitialPage.js | 1 +
 2 files changed, 2 insertions(+)

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/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
                                     />
                                 ))}
                             </View>

From fc1dfdc9edcc8ddc03e06e26669e2a6470873c51 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Tue, 2 Jan 2024 16:00:04 +0100
Subject: [PATCH 7/8] fix lint issues

---
 src/components/IllustratedHeaderPageLayout.js                    | 1 -
 src/libs/Navigation/NavigationRoot.tsx                           | 1 -
 src/pages/home/sidebar/SidebarLinks.js                           | 1 -
 .../home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js | 1 -
 4 files changed, 4 deletions(-)

diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
index 765f6c412ab4..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';
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/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);
 

From 31f37bcff11eaa4c39238f124853fb08133923cc Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Tue, 2 Jan 2024 16:19:05 +0100
Subject: [PATCH 8/8] bottom bar styling, change icon

---
 assets/images/wrench.svg                               | 10 ++++++++++
 src/components/Icon/Expensicons.ts                     |  2 ++
 .../createCustomBottomTabNavigator/BottomTabBar.tsx    |  7 ++++++-
 src/styles/variables.ts                                |  1 +
 4 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 assets/images/wrench.svg

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 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Wrench" clip-path="url(#clip0_931_152974)">
+<path id="Shape" fill-rule="evenodd" clip-rule="evenodd" d="M25.1669 8C25.1669 12.1421 21.809 15.5 17.6669 15.5C17.1701 15.5 16.6846 15.4517 16.2148 15.3595C15.7623 15.2708 15.2846 15.3822 14.9586 15.7083L7.04188 23.625C5.66117 25.0057 3.4226 25.0057 2.04188 23.625C0.661171 22.2443 0.661169 20.0057 2.04188 18.625L9.95858 10.7083C10.2846 10.3822 10.3961 9.90462 10.3074 9.45212C10.2152 8.98233 10.1669 8.4968 10.1669 8C10.1669 3.85786 13.5247 0.5 17.6669 0.5C18.4483 0.5 19.2018 0.619501 19.9101 0.841225C20.327 0.97174 20.424 1.49292 20.115 1.80185L15.7919 6.125L16.4169 9.25L19.5419 9.875L23.865 5.55185C24.174 5.24292 24.6951 5.33985 24.8257 5.75678C25.0474 6.46509 25.1669 7.21859 25.1669 8ZM5.79188 21.125C5.79188 21.8154 5.23224 22.375 4.54188 22.375C3.85153 22.375 3.29188 21.8154 3.29188 21.125C3.29188 20.4346 3.85153 19.875 4.54188 19.875C5.23224 19.875 5.79188 20.4346 5.79188 21.125Z"/>
+</g>
+<defs>
+<clipPath id="clip0_931_152974">
+<rect width="25" height="25" fill="white" transform="translate(0.166992 0.5)"/>
+</clipPath>
+</defs>
+</svg>
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/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
index 404fa7412c1d..4ddea016a434 100644
--- 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/styles/variables.ts b/src/styles/variables.ts
index 7a44f01dc070..0470a2260826 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -78,6 +78,7 @@ export default {
     iconSizeExtraLarge: 40,
     iconSizeSuperLarge: 60,
     iconSizeUltraLarge: 120,
+    iconBottomBar: 25,
     emojiSize: 20,
     emojiLineHeight: 28,
     iouAmountTextSize: 40,