From dbd917c65542a3a5a1eec51b2d2182c8a2c3b9ed Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Thu, 12 Oct 2023 13:03:24 +0200
Subject: [PATCH 01/30] fix header gap

---
 src/CONST.ts         | 2 +-
 src/styles/styles.js | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 58fdea7654cb..52d80ecd2d49 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -883,7 +883,7 @@ const CONST = {
         WIDTH: 320,
         HEIGHT: 416,
     },
-    DESKTOP_HEADER_PADDING: 12,
+    DESKTOP_HEADER_PADDING: 27,
     CATEGORY_SHORTCUT_BAR_HEIGHT: 32,
     SMALL_EMOJI_PICKER_SIZE: {
         WIDTH: '100%',
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 8fa81cd98b21..dcd328dc27c8 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -814,6 +814,7 @@ const styles = (theme) => ({
 
     headerGap: {
         height: CONST.DESKTOP_HEADER_PADDING,
+        backgroundColor: theme.highlightBG,
     },
 
     reportOptions: {

From e477710bb09e0a0e5089c2656eacdaf1277a0b72 Mon Sep 17 00:00:00 2001
From: Robert Kozik <robert.kozik@swmansion.com>
Date: Thu, 12 Oct 2023 15:47:47 +0200
Subject: [PATCH 02/30] set the settings root color to darkHighlightBackground

---
 src/styles/themes/default.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
index db4719f5548a..22e14cbc7193 100644
--- a/src/styles/themes/default.js
+++ b/src/styles/themes/default.js
@@ -93,7 +93,7 @@ darkTheme.PAGE_BACKGROUND_COLORS = {
     [SCREENS.SETTINGS.WORKSPACES]: colors.pink800,
     [SCREENS.SETTINGS.SECURITY]: colors.ice500,
     [SCREENS.SETTINGS.STATUS]: colors.green700,
-    [SCREENS.SETTINGS.ROOT]: darkTheme.sidebar,
+    [SCREENS.SETTINGS.ROOT]: colors.darkHighlightBackground,
 };
 
 export default darkTheme;

From 2f16e9297a889c3c8224499ead53ad8d0df42823 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Thu, 12 Oct 2023 14:03:37 +0200
Subject: [PATCH 03/30] change signin button avatar

---
 src/components/Icon/Expensicons.js     |  2 ++
 src/pages/home/sidebar/SignInButton.js | 12 ++++--------
 src/styles/styles.js                   |  3 ---
 3 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js
index dd106c6b3c20..e22891d385c1 100644
--- a/src/components/Icon/Expensicons.js
+++ b/src/components/Icon/Expensicons.js
@@ -42,6 +42,7 @@ import Emoji from '../../../assets/images/emoji.svg';
 import EmptyStateRoutePending from '../../../assets/images/emptystate__routepending.svg';
 import Exclamation from '../../../assets/images/exclamation.svg';
 import Exit from '../../../assets/images/exit.svg';
+import ExpensifyAppIcon from '../../../assets/images/expensify-app-icon.svg';
 import ExpensifyCard from '../../../assets/images/expensifycard.svg';
 import ExpensifyWordmark from '../../../assets/images/expensify-wordmark.svg';
 import Expand from '../../../assets/images/expand.svg';
@@ -174,6 +175,7 @@ export {
     EmptyStateRoutePending,
     Exclamation,
     Exit,
+    ExpensifyAppIcon,
     ExpensifyCard,
     ExpensifyWordmark,
     ExpensifyFooterLogo,
diff --git a/src/pages/home/sidebar/SignInButton.js b/src/pages/home/sidebar/SignInButton.js
index 24b90d778445..770ae369c604 100644
--- a/src/pages/home/sidebar/SignInButton.js
+++ b/src/pages/home/sidebar/SignInButton.js
@@ -2,11 +2,12 @@
 import React from 'react';
 import {View} from 'react-native';
 import PressableWithoutFeedback from '../../../components/Pressable/PressableWithoutFeedback';
-import Button from '../../../components/Button';
 import styles from '../../../styles/styles';
 import * as Session from '../../../libs/actions/Session';
 import useLocalize from '../../../hooks/useLocalize';
 import CONST from '../../../CONST';
+import Avatar from '../../../components/Avatar';
+import * as Expensicons from '../../../components/Icon/Expensicons';
 
 function SignInButton() {
     const {translate} = useLocalize();
@@ -17,13 +18,8 @@ function SignInButton() {
             accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
             onPress={Session.signOutAndRedirectToSignIn}
         >
-            <View style={styles.signInButtonAvatar}>
-                <Button
-                    medium
-                    success
-                    text={translate('common.signIn')}
-                    onPress={Session.signOutAndRedirectToSignIn}
-                />
+            <View style={[styles.sidebarAvatar]}>
+                <Avatar source={Expensicons.ExpensifyAppIcon} />
             </View>
         </PressableWithoutFeedback>
     );
diff --git a/src/styles/styles.js b/src/styles/styles.js
index dcd328dc27c8..ac9855aeb815 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2297,9 +2297,6 @@ const styles = (theme) => ({
         fontSize: variables.fontSizeMedium,
         color: theme.textLight,
     },
-    signInButtonAvatar: {
-        width: 80,
-    },
 
     anonymousRoomFooterSignInButton: {
         width: 110,

From 0e4849be870a0ba4568f5b84d0c41fd6f64ae0bb Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Thu, 12 Oct 2023 16:07:03 +0200
Subject: [PATCH 04/30] change LHP width

---
 .../AppNavigator/getRootNavigatorScreenOptions.js           | 6 +++---
 src/pages/home/report/ReportFooter.js                       | 2 +-
 src/styles/styles.js                                        | 2 +-
 src/styles/variables.ts                                     | 1 +
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
index a7456fb071b4..b45c789a87d3 100644
--- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
+++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
@@ -37,10 +37,10 @@ export default (isSmallScreenWidth) => ({
 
         cardStyle: {
             ...getNavigationModalCardStyle(),
-            width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
+            width: isSmallScreenWidth ? '100%' : variables.lhpWidth,
 
             // We need to translate the sidebar to not be covered by the StackNavigator so it can be clickable.
-            transform: [{translateX: isSmallScreenWidth ? 0 : -variables.sideBarWidth}],
+            transform: [{translateX: isSmallScreenWidth ? 0 : -variables.lhpWidth}],
             ...(isSmallScreenWidth ? {} : styles.borderRight),
         },
     },
@@ -64,7 +64,7 @@ export default (isSmallScreenWidth) => ({
 
         cardStyle: {
             ...getNavigationModalCardStyle(),
-            paddingRight: isSmallScreenWidth ? 0 : variables.sideBarWidth,
+            paddingRight: isSmallScreenWidth ? 0 : variables.lhpWidth,
         },
     },
 });
diff --git a/src/pages/home/report/ReportFooter.js b/src/pages/home/report/ReportFooter.js
index 0711cd181964..72ed09dcd1fa 100644
--- a/src/pages/home/report/ReportFooter.js
+++ b/src/pages/home/report/ReportFooter.js
@@ -65,7 +65,7 @@ function ReportFooter(props) {
     const isArchivedRoom = ReportUtils.isArchivedRoom(props.report);
     const isAnonymousUser = Session.isAnonymousUser();
 
-    const isSmallSizeLayout = props.windowWidth - (props.isSmallScreenWidth ? 0 : variables.sideBarWidth) < variables.anonymousReportFooterBreakpoint;
+    const isSmallSizeLayout = props.windowWidth - (props.isSmallScreenWidth ? 0 : variables.lhpWidth) < variables.anonymousReportFooterBreakpoint;
     const hideComposer = ReportUtils.shouldDisableWriteActions(props.report);
 
     return (
diff --git a/src/styles/styles.js b/src/styles/styles.js
index ac9855aeb815..d64ec1931d86 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2325,7 +2325,7 @@ const styles = (theme) => ({
         borderRadius: 88,
     },
 
-    rootNavigatorContainerStyles: (isSmallScreenWidth) => ({marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWidth, flex: 1}),
+    rootNavigatorContainerStyles: (isSmallScreenWidth) => ({marginLeft: isSmallScreenWidth ? 0 : variables.lhpWidth, flex: 1}),
     RHPNavigatorContainerNavigatorContainerStyles: (isSmallScreenWidth) => ({marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWidth, flex: 1}),
 
     avatarInnerTextChat: {
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 020d742fdeb1..81038de93ff7 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -83,6 +83,7 @@ export default {
     safeInsertPercentage: 0.7,
     globalNavigationWidth: 72,
     sideBarWidth: 303 + 72,
+    lhpWidth: 353 + 72,
     pdfPageMaxWidth: 992,
     tooltipzIndex: 10050,
     gutterWidth: 12,

From fcdae8280357123e87ea62ea3780aaf796feec6b Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Thu, 12 Oct 2023 17:05:55 +0200
Subject: [PATCH 05/30] fix header gap

---
 src/components/HeaderGap/index.desktop.js         | 15 ++++++++++++++-
 src/components/ScreenWrapper/index.js             |  6 +++++-
 src/components/ScreenWrapper/propTypes.js         |  4 ++++
 .../sidebar/SidebarScreen/BaseSidebarScreen.js    |  1 +
 src/styles/styles.js                              |  8 ++++++--
 5 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/components/HeaderGap/index.desktop.js b/src/components/HeaderGap/index.desktop.js
index 6b47f56516de..fd3e61889ec7 100644
--- a/src/components/HeaderGap/index.desktop.js
+++ b/src/components/HeaderGap/index.desktop.js
@@ -7,16 +7,29 @@ const propTypes = {
     /** Styles to apply to the HeaderGap */
     // eslint-disable-next-line react/forbid-prop-types
     styles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Is sidebar */
+    isSidebar: PropTypes.bool,
 };
 
 class HeaderGap extends PureComponent {
     render() {
-        return <View style={[styles.headerGap, ...this.props.styles]} />;
+        if (!this.props.isSidebar) {
+            return <View style={[styles.headerGap, ...this.props.styles]} />;
+        }
+        return (
+            // TODO: Check if this.props.styles is needed
+            <View style={[styles.headerGap, styles.globalAndSubNavigationContainer, styles.flexRow]}>
+                <View style={styles.globalNavigation} />
+                <View style={styles.headerGapLhpRight} />
+            </View>
+        );
     }
 }
 
 HeaderGap.propTypes = propTypes;
 HeaderGap.defaultProps = {
     styles: [],
+    isSidebar: false,
 };
 export default HeaderGap;
diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index e2af40589a8a..eef7058b3a9d 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -35,6 +35,7 @@ function ScreenWrapper({
     shouldDismissKeyboardBeforeClose,
     onEntryTransitionEnd,
     testID,
+    isSidebar,
 }) {
     const {windowHeight, isSmallScreenWidth} = useWindowDimensions();
     const keyboardState = useKeyboardState();
@@ -133,7 +134,10 @@ function ScreenWrapper({
                                     style={styles.flex1}
                                     enabled={shouldEnablePickerAvoiding}
                                 >
-                                    <HeaderGap styles={headerGapStyles} />
+                                    <HeaderGap
+                                        styles={headerGapStyles}
+                                        isSidebar={isSidebar}
+                                    />
                                     {isDevelopment && <TestToolsModal />}
                                     {isDevelopment && <CustomDevMenu />}
                                     {
diff --git a/src/components/ScreenWrapper/propTypes.js b/src/components/ScreenWrapper/propTypes.js
index 848aa28cde43..d27e6f224879 100644
--- a/src/components/ScreenWrapper/propTypes.js
+++ b/src/components/ScreenWrapper/propTypes.js
@@ -45,6 +45,9 @@ const propTypes = {
 
     /** Styles for the offline indicator */
     offlineIndicatorStyle: stylePropTypes,
+
+    /** Is screen in Sidebar */
+    isSidebar: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -60,6 +63,7 @@ const defaultProps = {
     shouldShowOfflineIndicator: true,
     offlineIndicatorStyle: [],
     headerGapStyles: [],
+    isSidebar: false,
 };
 
 export {propTypes, defaultProps};
diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
index 97f1f7eaee20..b02ebd66ba22 100644
--- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
+++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
@@ -30,6 +30,7 @@ function BaseSidebarScreen(props) {
             shouldEnableKeyboardAvoidingView={false}
             style={[styles.sidebar, Browser.isMobile() ? styles.userSelectNone : {}]}
             testID={BaseSidebarScreen.displayName}
+            isSidebar
         >
             {({insets}) => (
                 <>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index d64ec1931d86..751cb42aec37 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -814,7 +814,12 @@ const styles = (theme) => ({
 
     headerGap: {
         height: CONST.DESKTOP_HEADER_PADDING,
-        backgroundColor: theme.highlightBG,
+    },
+
+    headerGapLhpRight: {
+        backgroundColor: theme.sidebar,
+        borderTopLeftRadius: variables.componentBorderRadiusRounded,
+        flex: 1,
     },
 
     reportOptions: {
@@ -1250,7 +1255,6 @@ const styles = (theme) => ({
     subNavigationContainer: {
         backgroundColor: theme.sidebar,
         flex: 1,
-        borderTopLeftRadius: variables.componentBorderRadiusRounded,
     },
 
     sidebarAnimatedWrapperContainer: {

From 117a8461cf26f650c1b6654891062a8e5d0527e5 Mon Sep 17 00:00:00 2001
From: Robert Kozik <robert.kozik@swmansion.com>
Date: Thu, 12 Oct 2023 22:27:19 +0200
Subject: [PATCH 06/30] display profile status as bubble beneth avatar

---
 src/pages/home/sidebar/AvatarWithOptionalStatus.js |  7 ++-----
 src/styles/styles.js                               | 14 +++++++++++---
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/pages/home/sidebar/AvatarWithOptionalStatus.js b/src/pages/home/sidebar/AvatarWithOptionalStatus.js
index adf9cdda5cd0..afb2ae69d61a 100644
--- a/src/pages/home/sidebar/AvatarWithOptionalStatus.js
+++ b/src/pages/home/sidebar/AvatarWithOptionalStatus.js
@@ -39,22 +39,19 @@ function AvatarWithOptionalStatus({emojiStatus, isCreateMenuOpen}) {
 
     return (
         <View style={styles.sidebarStatusAvatarContainer}>
+            <PressableAvatarWithIndicator isCreateMenuOpen={isCreateMenuOpen} />
             <PressableWithoutFeedback
                 accessibilityLabel={translate('sidebarScreen.buttonMySettings')}
                 accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                 onPress={showStatusPage}
-                style={styles.flex1}
+                style={[styles.flex1, styles.sidebarStatusAvatar]}
             >
-                <View style={styles.sidebarStatusAvatar}>
                     <Text
-                        style={styles.emojiStatusLHN}
                         numberOfLines={1}
                     >
                         {emojiStatus}
                     </Text>
-                </View>
             </PressableWithoutFeedback>
-            <PressableAvatarWithIndicator isCreateMenuOpen={isCreateMenuOpen} />
         </View>
     );
 }
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 751cb42aec37..e57e60051431 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3670,16 +3670,16 @@ const styles = (theme) => ({
     },
 
     emojiStatusLHN: {
-        fontSize: 22,
+        fontSize: 22
     },
     sidebarStatusAvatarContainer: {
         height: 44,
-        width: 84,
+        width: 44,
         backgroundColor: theme.componentBG,
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        borderRadius: 42,
+        borderRadius: 22,
         paddingHorizontal: 2,
         marginVertical: -2,
         marginRight: -2,
@@ -3688,6 +3688,14 @@ const styles = (theme) => ({
         flex: 1,
         alignItems: 'center',
         justifyContent: 'center',
+        zIndex: 1,
+        position: 'absolute',
+        right: '-4px',
+        bottom: '-4px',
+        height: '25px',
+        width: '25px',
+        borderRadius: '13px',
+        backgroundColor: theme.sidebar,
     },
 
     moneyRequestViewImage: {

From 0bba34c6235ed187e7fdbf786776f5705c6bf06b Mon Sep 17 00:00:00 2001
From: Robert Kozik <robert.kozik@swmansion.com>
Date: Fri, 13 Oct 2023 10:54:31 +0200
Subject: [PATCH 07/30] center traffic lights, set padding top to 20px

---
 desktop/main.js | 1 +
 src/CONST.ts    | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/desktop/main.js b/desktop/main.js
index f2c11e73e513..73fe352292c1 100644
--- a/desktop/main.js
+++ b/desktop/main.js
@@ -276,6 +276,7 @@ const mainWindow = () => {
                         sandbox: false,
                     },
                     titleBarStyle: 'hidden',
+                    trafficLightPosition: { x: 9, y: 5 }
                 });
 
                 ipcMain.handle(ELECTRON_EVENTS.REQUEST_DEVICE_ID, () => machineId());
diff --git a/src/CONST.ts b/src/CONST.ts
index 52d80ecd2d49..bc49e8775502 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -883,7 +883,7 @@ const CONST = {
         WIDTH: 320,
         HEIGHT: 416,
     },
-    DESKTOP_HEADER_PADDING: 27,
+    DESKTOP_HEADER_PADDING: 20,
     CATEGORY_SHORTCUT_BAR_HEIGHT: 32,
     SMALL_EMOJI_PICKER_SIZE: {
         WIDTH: '100%',

From 3ecbe7d743c331e1af3160205a30264a41a50c2e Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Mon, 16 Oct 2023 12:28:49 +0200
Subject: [PATCH 08/30] fix color around the avatar

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

diff --git a/src/styles/styles.js b/src/styles/styles.js
index e57e60051431..e0abbf69c57d 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1463,7 +1463,7 @@ const styles = (theme) => ({
     },
 
     sidebarLinkActiveLHN: {
-        backgroundColor: theme.highlightBG,
+        backgroundColor: theme.activeComponentBG,
         textDecorationLine: 'none',
     },
 
@@ -3670,7 +3670,7 @@ const styles = (theme) => ({
     },
 
     emojiStatusLHN: {
-        fontSize: 22
+        fontSize: 22,
     },
     sidebarStatusAvatarContainer: {
         height: 44,

From 3e2b25e83a0a59f58227719c5e401fab69b0164f Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Mon, 16 Oct 2023 12:41:02 +0200
Subject: [PATCH 09/30] fix typing

---
 src/styles/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 05bfb9e47fc1..bde8fbf4f507 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -2390,7 +2390,7 @@ const styles = (theme: ThemeDefault) =>
             borderRadius: 88,
         },
 
-        rootNavigatorContainerStyles: (isSmallScreenWidth) => ({marginLeft: isSmallScreenWidth ? 0 : variables.lhpWidth, flex: 1}),
+        rootNavigatorContainerStyles: (isSmallScreenWidth) => ({marginLeft: isSmallScreenWidth ? 0 : variables.lhpWidth, flex: 1} satisfies ViewStyle),
         RHPNavigatorContainerNavigatorContainerStyles: (isSmallScreenWidth: boolean) => ({marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWidth, flex: 1} satisfies ViewStyle),
 
         avatarInnerTextChat: {

From c54e9fdc436ceb3cbf394a22804354bdb0040d2e Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Mon, 16 Oct 2023 13:33:09 +0200
Subject: [PATCH 10/30] fix LHP width

---
 .../Navigation/AppNavigator/getRootNavigatorScreenOptions.js   | 2 +-
 src/pages/home/report/AnimatedEmptyStateBackground.js          | 2 +-
 src/styles/styles.ts                                           | 3 +--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
index b45c789a87d3..c304e1952c95 100644
--- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
+++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
@@ -52,7 +52,7 @@ export default (isSmallScreenWidth) => ({
             ...getNavigationModalCardStyle(),
 
             // This is necessary to cover whole screen. Including translated sidebar.
-            marginLeft: isSmallScreenWidth ? 0 : -variables.sideBarWidth,
+            marginLeft: isSmallScreenWidth ? 0 : -variables.lhpWidth,
         },
     },
 
diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.js b/src/pages/home/report/AnimatedEmptyStateBackground.js
index 67d9a9584b39..27f8df682e10 100644
--- a/src/pages/home/report/AnimatedEmptyStateBackground.js
+++ b/src/pages/home/report/AnimatedEmptyStateBackground.js
@@ -14,7 +14,7 @@ function AnimatedEmptyStateBackground() {
     const IMAGE_OFFSET_X = windowWidth / 2;
 
     // If window width is greater than the max background width, repeat the background image
-    const maxBackgroundWidth = variables.sideBarWidth + CONST.EMPTY_STATE_BACKGROUND.ASPECT_RATIO * CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.IMAGE_HEIGHT;
+    const maxBackgroundWidth = variables.lhpWidth + CONST.EMPTY_STATE_BACKGROUND.ASPECT_RATIO * CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.IMAGE_HEIGHT;
 
     // Get data from phone rotation sensor and prep other variables for animation
     const animatedSensor = useAnimatedSensor(SensorType.GYROSCOPE);
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index bde8fbf4f507..e009682f933f 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -1419,7 +1419,7 @@ const styles = (theme: ThemeDefault) =>
 
         createMenuPositionReportActionCompose: (windowHeight: number) =>
             ({
-                horizontal: 18 + variables.sideBarWidth,
+                horizontal: 18 + variables.lhpWidth,
                 vertical: windowHeight - 83,
             } satisfies AnchorPosition),
 
@@ -2391,7 +2391,6 @@ const styles = (theme: ThemeDefault) =>
         },
 
         rootNavigatorContainerStyles: (isSmallScreenWidth) => ({marginLeft: isSmallScreenWidth ? 0 : variables.lhpWidth, flex: 1} satisfies ViewStyle),
-        RHPNavigatorContainerNavigatorContainerStyles: (isSmallScreenWidth: boolean) => ({marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWidth, flex: 1} satisfies ViewStyle),
 
         avatarInnerTextChat: {
             color: theme.textLight,

From b2247727c970e94fa3d7a07821ea551e2360ab86 Mon Sep 17 00:00:00 2001
From: Robert Kozik <robert.kozik@swmansion.com>
Date: Mon, 16 Oct 2023 14:13:04 +0200
Subject: [PATCH 11/30] run prettier against changed files

---
 desktop/main.js                                    | 2 +-
 src/pages/home/sidebar/AvatarWithOptionalStatus.js | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/desktop/main.js b/desktop/main.js
index 73fe352292c1..782617ef78b5 100644
--- a/desktop/main.js
+++ b/desktop/main.js
@@ -276,7 +276,7 @@ const mainWindow = () => {
                         sandbox: false,
                     },
                     titleBarStyle: 'hidden',
-                    trafficLightPosition: { x: 9, y: 5 }
+                    trafficLightPosition: {x: 9, y: 5},
                 });
 
                 ipcMain.handle(ELECTRON_EVENTS.REQUEST_DEVICE_ID, () => machineId());
diff --git a/src/pages/home/sidebar/AvatarWithOptionalStatus.js b/src/pages/home/sidebar/AvatarWithOptionalStatus.js
index afb2ae69d61a..f5360ad17c3b 100644
--- a/src/pages/home/sidebar/AvatarWithOptionalStatus.js
+++ b/src/pages/home/sidebar/AvatarWithOptionalStatus.js
@@ -46,11 +46,7 @@ function AvatarWithOptionalStatus({emojiStatus, isCreateMenuOpen}) {
                 onPress={showStatusPage}
                 style={[styles.flex1, styles.sidebarStatusAvatar]}
             >
-                    <Text
-                        numberOfLines={1}
-                    >
-                        {emojiStatus}
-                    </Text>
+                <Text numberOfLines={1}>{emojiStatus}</Text>
             </PressableWithoutFeedback>
         </View>
     );

From f763129019e5c7ce3ed1ba3273106417f19bc8ed Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Mon, 16 Oct 2023 14:22:57 +0200
Subject: [PATCH 12/30] remove todo, add better comment

---
 src/components/HeaderGap/index.desktop.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/HeaderGap/index.desktop.js b/src/components/HeaderGap/index.desktop.js
index fd3e61889ec7..f9edcf578cb0 100644
--- a/src/components/HeaderGap/index.desktop.js
+++ b/src/components/HeaderGap/index.desktop.js
@@ -8,7 +8,7 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     styles: PropTypes.arrayOf(PropTypes.object),
 
-    /** Is sidebar */
+    /** If the HeaderGap is placed in the LHP */
     isSidebar: PropTypes.bool,
 };
 
@@ -18,8 +18,7 @@ class HeaderGap extends PureComponent {
             return <View style={[styles.headerGap, ...this.props.styles]} />;
         }
         return (
-            // TODO: Check if this.props.styles is needed
-            <View style={[styles.headerGap, styles.globalAndSubNavigationContainer, styles.flexRow]}>
+            <View style={[styles.headerGap, styles.globalAndSubNavigationContainer, styles.flexRow, ...this.props.styles]}>
                 <View style={styles.globalNavigation} />
                 <View style={styles.headerGapLhpRight} />
             </View>

From 0fbb284f631e9a2dd632e46cc2b5261cb76a9c2a Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Mon, 16 Oct 2023 14:26:18 +0200
Subject: [PATCH 13/30] reduce desktop header padding

---
 src/CONST.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index a950a7256240..4ae608f0fa9f 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -884,7 +884,7 @@ const CONST = {
         WIDTH: 320,
         HEIGHT: 416,
     },
-    DESKTOP_HEADER_PADDING: 20,
+    DESKTOP_HEADER_PADDING: 16,
     CATEGORY_SHORTCUT_BAR_HEIGHT: 32,
     SMALL_EMOJI_PICKER_SIZE: {
         WIDTH: '100%',

From 859e14774fc564f24962c8cd7736f235229307a0 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Mon, 16 Oct 2023 15:14:57 +0200
Subject: [PATCH 14/30] change desktop padding

---
 src/CONST.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 4ae608f0fa9f..d1d9bb1dede9 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -884,7 +884,7 @@ const CONST = {
         WIDTH: 320,
         HEIGHT: 416,
     },
-    DESKTOP_HEADER_PADDING: 16,
+    DESKTOP_HEADER_PADDING: 12,
     CATEGORY_SHORTCUT_BAR_HEIGHT: 32,
     SMALL_EMOJI_PICKER_SIZE: {
         WIDTH: '100%',

From 972911c7bdfab0381befc3464dcfdd0c46939c88 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Mon, 16 Oct 2023 15:30:52 +0200
Subject: [PATCH 15/30] fix avatar with workspace border color

---
 src/components/LHNOptionsList/OptionRowLHN.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index 4e6564646cac..12d2901195f9 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -152,6 +152,16 @@ function OptionRowLHN(props) {
     const statusContent = formattedDate ? `${statusText} (${formattedDate})` : statusText;
     const isStatusVisible = Permissions.canUseCustomStatus(props.betas) && !!emojiCode && ReportUtils.isOneOnOneChat(optionItem);
 
+    const getSubscriptAvatarBackgroundColor = (hovered) => {
+        if (props.isFocused) {
+            return themeColors.activeComponentBG;
+        }
+        if (hovered || isContextMenuActive) {
+            return hoveredBackgroundColor;
+        }
+        return themeColors.sidebar;
+    };
+
     return (
         <OfflineWithFeedback
             pendingAction={optionItem.pendingAction}
@@ -202,7 +212,7 @@ function OptionRowLHN(props) {
                                 {!_.isEmpty(optionItem.icons) &&
                                     (optionItem.shouldShowSubscript ? (
                                         <SubscriptAvatar
-                                            backgroundColor={props.isFocused ? themeColors.activeComponentBG : themeColors.sidebar}
+                                            backgroundColor={getSubscriptAvatarBackgroundColor(hovered)}
                                             mainAvatar={optionItem.icons[0]}
                                             secondaryAvatar={optionItem.icons[1]}
                                             size={props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : defaultSubscriptSize}
@@ -215,7 +225,7 @@ function OptionRowLHN(props) {
                                             secondAvatarStyle={[
                                                 StyleUtils.getBackgroundAndBorderStyle(themeColors.sidebar),
                                                 props.isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
-                                                hovered && !props.isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
+                                                (hovered || isContextMenuActive) && !props.isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
                                             ]}
                                             shouldShowTooltip={OptionsListUtils.shouldOptionShowTooltip(optionItem)}
                                         />

From e41d3a77e1ac627900aa808675d97c98b4e27cff Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Mon, 16 Oct 2023 16:03:42 +0200
Subject: [PATCH 16/30] refactor avatar background color

---
 src/components/LHNOptionsList/OptionRowLHN.js | 30 ++++++++++---------
 src/styles/StyleUtils.ts                      | 11 +++++++
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index 12d2901195f9..abca0898f68b 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -152,16 +152,6 @@ function OptionRowLHN(props) {
     const statusContent = formattedDate ? `${statusText} (${formattedDate})` : statusText;
     const isStatusVisible = Permissions.canUseCustomStatus(props.betas) && !!emojiCode && ReportUtils.isOneOnOneChat(optionItem);
 
-    const getSubscriptAvatarBackgroundColor = (hovered) => {
-        if (props.isFocused) {
-            return themeColors.activeComponentBG;
-        }
-        if (hovered || isContextMenuActive) {
-            return hoveredBackgroundColor;
-        }
-        return themeColors.sidebar;
-    };
-
     return (
         <OfflineWithFeedback
             pendingAction={optionItem.pendingAction}
@@ -212,7 +202,13 @@ function OptionRowLHN(props) {
                                 {!_.isEmpty(optionItem.icons) &&
                                     (optionItem.shouldShowSubscript ? (
                                         <SubscriptAvatar
-                                            backgroundColor={getSubscriptAvatarBackgroundColor(hovered)}
+                                            backgroundColor={StyleUtils.getAvatarBackgroundColor(
+                                                props.isFocused,
+                                                hovered || isContextMenuActive,
+                                                themeColors.activeComponentBG,
+                                                hoveredBackgroundColor,
+                                                themeColors.sidebar,
+                                            )}
                                             mainAvatar={optionItem.icons[0]}
                                             secondaryAvatar={optionItem.icons[1]}
                                             size={props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : defaultSubscriptSize}
@@ -223,9 +219,15 @@ function OptionRowLHN(props) {
                                             isFocusMode={props.viewMode === CONST.OPTION_MODE.COMPACT}
                                             size={props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
                                             secondAvatarStyle={[
-                                                StyleUtils.getBackgroundAndBorderStyle(themeColors.sidebar),
-                                                props.isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
-                                                (hovered || isContextMenuActive) && !props.isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
+                                                StyleUtils.getBackgroundAndBorderStyle(
+                                                    StyleUtils.getAvatarBackgroundColor(
+                                                        props.isFocused,
+                                                        hovered || isContextMenuActive,
+                                                        focusedBackgroundColor,
+                                                        hoveredBackgroundColor,
+                                                        themeColors.sidebar,
+                                                    ),
+                                                ),
                                             ]}
                                             shouldShowTooltip={OptionsListUtils.shouldOptionShowTooltip(optionItem)}
                                         />
diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
index 62da2bf3be4b..63f37ce85bbd 100644
--- a/src/styles/StyleUtils.ts
+++ b/src/styles/StyleUtils.ts
@@ -1312,6 +1312,16 @@ function getTransparentColor(color: string) {
     return `${color}00`;
 }
 
+function getAvatarBackgroundColor(isFocused: boolean, hovered: boolean, focusedBackgroundColor: string, hoveredBackgroundColor: string, defaultBackgroundColor: string) {
+    if (isFocused) {
+        return focusedBackgroundColor;
+    }
+    if (hovered) {
+        return hoveredBackgroundColor;
+    }
+    return defaultBackgroundColor;
+}
+
 export {
     combineStyles,
     displayIfTrue,
@@ -1394,4 +1404,5 @@ export {
     getContainerStyles,
     getEReceiptColorStyles,
     getEReceiptColorCode,
+    getAvatarBackgroundColor,
 };

From fae9c87c23daf9c6cb981cd4eb63c6fd5b6da656 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Mon, 16 Oct 2023 16:04:56 +0200
Subject: [PATCH 17/30] cleanup

---
 src/components/LHNOptionsList/OptionRowLHN.js | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index abca0898f68b..810bd8e5c548 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -218,17 +218,15 @@ function OptionRowLHN(props) {
                                             icons={optionItem.icons}
                                             isFocusMode={props.viewMode === CONST.OPTION_MODE.COMPACT}
                                             size={props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
-                                            secondAvatarStyle={[
-                                                StyleUtils.getBackgroundAndBorderStyle(
-                                                    StyleUtils.getAvatarBackgroundColor(
-                                                        props.isFocused,
-                                                        hovered || isContextMenuActive,
-                                                        focusedBackgroundColor,
-                                                        hoveredBackgroundColor,
-                                                        themeColors.sidebar,
-                                                    ),
+                                            secondAvatarStyle={StyleUtils.getBackgroundAndBorderStyle(
+                                                StyleUtils.getAvatarBackgroundColor(
+                                                    props.isFocused,
+                                                    hovered || isContextMenuActive,
+                                                    focusedBackgroundColor,
+                                                    hoveredBackgroundColor,
+                                                    themeColors.sidebar,
                                                 ),
-                                            ]}
+                                            )}
                                             shouldShowTooltip={OptionsListUtils.shouldOptionShowTooltip(optionItem)}
                                         />
                                     ))}

From 2daaf3d25324e11d95ad7b4f204cab4339e535cf Mon Sep 17 00:00:00 2001
From: Robert Kozik <robert.kozik@swmansion.com>
Date: Mon, 16 Oct 2023 17:57:36 +0200
Subject: [PATCH 18/30] update optionRow/attachemts/indicator sidebar color

---
 src/components/LHNOptionsList/OptionRowLHN.js | 8 ++++----
 src/styles/styles.ts                          | 6 +++---
 src/styles/themes/default.ts                  | 2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index 810bd8e5c548..05655c3426b3 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -109,7 +109,7 @@ function OptionRowLHN(props) {
             ? [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRowCompact, styles.justifyContentCenter]
             : [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRow, styles.justifyContentCenter],
     );
-    const hoveredBackgroundColor = props.hoverStyle && props.hoverStyle.backgroundColor ? props.hoverStyle.backgroundColor : themeColors.sidebar;
+    const hoveredBackgroundColor = props.hoverStyle && props.hoverStyle.backgroundColor ? props.hoverStyle.backgroundColor : themeColors.highlightBG;
     const focusedBackgroundColor = styles.sidebarLinkActiveLHN.backgroundColor;
 
     const hasBrickError = optionItem.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
@@ -189,7 +189,7 @@ function OptionRowLHN(props) {
                             styles.justifyContentBetween,
                             styles.sidebarLinkLHN,
                             styles.sidebarLinkInnerLHN,
-                            StyleUtils.getBackgroundColorStyle(themeColors.sidebar),
+                            StyleUtils.getBackgroundColorStyle(themeColors.highlightBG),
                             props.isFocused ? styles.sidebarLinkActive : null,
                             (hovered || isContextMenuActive) && !props.isFocused ? props.hoverStyle : null,
                         ]}
@@ -207,7 +207,7 @@ function OptionRowLHN(props) {
                                                 hovered || isContextMenuActive,
                                                 themeColors.activeComponentBG,
                                                 hoveredBackgroundColor,
-                                                themeColors.sidebar,
+                                                themeColors.highlightBG,
                                             )}
                                             mainAvatar={optionItem.icons[0]}
                                             secondaryAvatar={optionItem.icons[1]}
@@ -224,7 +224,7 @@ function OptionRowLHN(props) {
                                                     hovered || isContextMenuActive,
                                                     focusedBackgroundColor,
                                                     hoveredBackgroundColor,
-                                                    themeColors.sidebar,
+                                                    themeColors.highlightBG,
                                                 ),
                                             )}
                                             shouldShowTooltip={OptionsListUtils.shouldOptionShowTooltip(optionItem)}
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index e009682f933f..4e96a1317965 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -1330,7 +1330,7 @@ const styles = (theme: ThemeDefault) =>
 
         statusIndicator: (backgroundColor = theme.danger) =>
             ({
-                borderColor: theme.sidebar,
+                borderColor: theme.highlightBG,
                 backgroundColor,
                 borderRadius: 8,
                 borderWidth: 2,
@@ -1921,7 +1921,7 @@ const styles = (theme: ThemeDefault) =>
         },
 
         chatItemAttachmentPlaceholder: {
-            backgroundColor: theme.sidebar,
+            backgroundColor: theme.highlightBG,
             borderColor: theme.border,
             borderWidth: 1,
             borderRadius: variables.componentBorderRadiusNormal,
@@ -2199,7 +2199,7 @@ const styles = (theme: ThemeDefault) =>
         },
 
         defaultAttachmentView: {
-            backgroundColor: theme.sidebar,
+            backgroundColor: theme.highlightBG,
             borderRadius: variables.componentBorderRadiusNormal,
             borderWidth: 1,
             borderColor: theme.border,
diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts
index 6d894769cc63..330d9a37c61d 100644
--- a/src/styles/themes/default.ts
+++ b/src/styles/themes/default.ts
@@ -93,7 +93,7 @@ darkTheme.PAGE_BACKGROUND_COLORS = {
     [SCREENS.SETTINGS.WORKSPACES]: colors.pink800,
     [SCREENS.SETTINGS.SECURITY]: colors.ice500,
     [SCREENS.SETTINGS.STATUS]: colors.green700,
-    [SCREENS.SETTINGS.ROOT]: colors.darkHighlightBackground,
+    [SCREENS.SETTINGS.ROOT]: darkTheme.highlightBG,
 };
 
 export default darkTheme;

From a8fbd2c8ea6aea04e2f56f6f1f89469c5a810e6a Mon Sep 17 00:00:00 2001
From: Robert Kozik <robert.kozik@swmansion.com>
Date: Mon, 16 Oct 2023 17:58:32 +0200
Subject: [PATCH 19/30] fix style type - array expected

---
 src/components/LHNOptionsList/OptionRowLHN.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index 05655c3426b3..c58a06b54674 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -218,15 +218,17 @@ function OptionRowLHN(props) {
                                             icons={optionItem.icons}
                                             isFocusMode={props.viewMode === CONST.OPTION_MODE.COMPACT}
                                             size={props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
-                                            secondAvatarStyle={StyleUtils.getBackgroundAndBorderStyle(
-                                                StyleUtils.getAvatarBackgroundColor(
-                                                    props.isFocused,
-                                                    hovered || isContextMenuActive,
-                                                    focusedBackgroundColor,
-                                                    hoveredBackgroundColor,
-                                                    themeColors.highlightBG,
+                                            secondAvatarStyle={[
+                                                StyleUtils.getBackgroundAndBorderStyle(
+                                                    StyleUtils.getAvatarBackgroundColor(
+                                                        props.isFocused,
+                                                        hovered || isContextMenuActive,
+                                                        focusedBackgroundColor,
+                                                        hoveredBackgroundColor,
+                                                        themeColors.highlightBG,
+                                                    ),
                                                 ),
-                                            )}
+                                            ]}
                                             shouldShowTooltip={OptionsListUtils.shouldOptionShowTooltip(optionItem)}
                                         />
                                     ))}

From 12aa12ed5fa7c120c3bca02c7c927dbcdee3aa90 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Tue, 17 Oct 2023 09:36:41 +0200
Subject: [PATCH 20/30] Fix colors in option row

---
 src/components/LHNOptionsList/OptionRowLHN.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index c58a06b54674..abca0898f68b 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -109,7 +109,7 @@ function OptionRowLHN(props) {
             ? [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRowCompact, styles.justifyContentCenter]
             : [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRow, styles.justifyContentCenter],
     );
-    const hoveredBackgroundColor = props.hoverStyle && props.hoverStyle.backgroundColor ? props.hoverStyle.backgroundColor : themeColors.highlightBG;
+    const hoveredBackgroundColor = props.hoverStyle && props.hoverStyle.backgroundColor ? props.hoverStyle.backgroundColor : themeColors.sidebar;
     const focusedBackgroundColor = styles.sidebarLinkActiveLHN.backgroundColor;
 
     const hasBrickError = optionItem.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
@@ -189,7 +189,7 @@ function OptionRowLHN(props) {
                             styles.justifyContentBetween,
                             styles.sidebarLinkLHN,
                             styles.sidebarLinkInnerLHN,
-                            StyleUtils.getBackgroundColorStyle(themeColors.highlightBG),
+                            StyleUtils.getBackgroundColorStyle(themeColors.sidebar),
                             props.isFocused ? styles.sidebarLinkActive : null,
                             (hovered || isContextMenuActive) && !props.isFocused ? props.hoverStyle : null,
                         ]}
@@ -207,7 +207,7 @@ function OptionRowLHN(props) {
                                                 hovered || isContextMenuActive,
                                                 themeColors.activeComponentBG,
                                                 hoveredBackgroundColor,
-                                                themeColors.highlightBG,
+                                                themeColors.sidebar,
                                             )}
                                             mainAvatar={optionItem.icons[0]}
                                             secondaryAvatar={optionItem.icons[1]}
@@ -225,7 +225,7 @@ function OptionRowLHN(props) {
                                                         hovered || isContextMenuActive,
                                                         focusedBackgroundColor,
                                                         hoveredBackgroundColor,
-                                                        themeColors.highlightBG,
+                                                        themeColors.sidebar,
                                                     ),
                                                 ),
                                             ]}

From 567f65f3143f88100c60e214860df85dca3cdb09 Mon Sep 17 00:00:00 2001
From: Robert Kozik <robert.kozik@swmansion.com>
Date: Tue, 24 Oct 2023 08:58:26 +0200
Subject: [PATCH 21/30] remove excess padding from search icon

---
 src/pages/home/sidebar/SidebarLinks.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index d3ff3070466f..30ceccdf7e3c 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -155,7 +155,6 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
                     <PressableWithoutFeedback
                         accessibilityLabel={translate('sidebarScreen.buttonSearch')}
                         accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                        style={[styles.flexRow, styles.ph5]}
                         onPress={Session.checkIfActionIsAllowed(showSearchPage)}
                     >
                         <Icon src={Expensicons.MagnifyingGlass} />

From 0d2417b9a3cbfaa7b4f8c6cd85762ce0027a53cc Mon Sep 17 00:00:00 2001
From: Robert Kozik <robert.kozik@swmansion.com>
Date: Tue, 24 Oct 2023 18:35:35 +0200
Subject: [PATCH 22/30] unify emoji status displaying

---
 .../home/sidebar/AvatarWithOptionalStatus.js  |  8 +++++-
 src/styles/styles.ts                          | 26 ++++++++++++-------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/pages/home/sidebar/AvatarWithOptionalStatus.js b/src/pages/home/sidebar/AvatarWithOptionalStatus.js
index f5360ad17c3b..fa9291258031 100644
--- a/src/pages/home/sidebar/AvatarWithOptionalStatus.js
+++ b/src/pages/home/sidebar/AvatarWithOptionalStatus.js
@@ -46,7 +46,13 @@ function AvatarWithOptionalStatus({emojiStatus, isCreateMenuOpen}) {
                 onPress={showStatusPage}
                 style={[styles.flex1, styles.sidebarStatusAvatar]}
             >
-                <Text numberOfLines={1}>{emojiStatus}</Text>
+                <Text
+                    family="SYSTEM"
+                    style={styles.sidebarStatusAvatarEmoji}
+                    numberOfLines={1}
+                >
+                    {emojiStatus}
+                </Text>
             </PressableWithoutFeedback>
         </View>
     );
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 4e96a1317965..928db6b0efb4 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -3805,7 +3805,7 @@ const styles = (theme: ThemeDefault) =>
         sidebarStatusAvatarContainer: {
             height: 44,
             width: 44,
-            backgroundColor: theme.componentBG,
+            backgroundColor: theme.highlightBG,
             flexDirection: 'row',
             alignItems: 'center',
             justifyContent: 'space-between',
@@ -3815,19 +3815,25 @@ const styles = (theme: ThemeDefault) =>
             marginRight: -2,
         },
         sidebarStatusAvatar: {
-            flex: 1,
-            alignItems: 'center',
-            justifyContent: 'center',
-            zIndex: 1,
             position: 'absolute',
-            right: -4,
-            bottom: -4,
-            height: 25,
-            width: 25,
-            borderRadius: 13,
+            right: -6,
+            bottom: -6,
+            borderRadius: variables.componentBorderRadiusLarge,
+            borderWidth: 2,
+            borderColor: theme.sidebar,
             backgroundColor: theme.sidebar,
         },
 
+        sidebarStatusAvatarEmoji: {
+            height: variables.fontSizeNormalHeight,
+            width: variables.fontSizeNormalHeight,
+            fontSize: variables.fontSizeSmall,
+            lineHeight: variables.fontSizeNormalHeight,
+            textAlign: 'center',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
         moneyRequestViewImage: {
             ...spacing.mh5,
             ...spacing.mv3,

From 1eadbc3c2eb2e93a87e607c0e91060a69b6fe180 Mon Sep 17 00:00:00 2001
From: Robert Kozik <robert.kozik@swmansion.com>
Date: Tue, 24 Oct 2023 20:34:40 +0200
Subject: [PATCH 23/30] extend padding top over the safe area

---
 src/components/HeaderGap/index.desktop.js     | 34 -------------------
 src/components/HeaderGap/index.js             | 33 ++++++++++++++++--
 src/components/ScreenWrapper/index.js         |  7 ++--
 .../SidebarScreen/BaseSidebarScreen.js        |  7 +++-
 .../sidebar/SubNavigation/SubNavigation.js    |  7 ++--
 src/styles/styles.ts                          |  5 +--
 6 files changed, 46 insertions(+), 47 deletions(-)
 delete mode 100644 src/components/HeaderGap/index.desktop.js

diff --git a/src/components/HeaderGap/index.desktop.js b/src/components/HeaderGap/index.desktop.js
deleted file mode 100644
index f9edcf578cb0..000000000000
--- a/src/components/HeaderGap/index.desktop.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, {PureComponent} from 'react';
-import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import styles from '../../styles/styles';
-
-const propTypes = {
-    /** Styles to apply to the HeaderGap */
-    // eslint-disable-next-line react/forbid-prop-types
-    styles: PropTypes.arrayOf(PropTypes.object),
-
-    /** If the HeaderGap is placed in the LHP */
-    isSidebar: PropTypes.bool,
-};
-
-class HeaderGap extends PureComponent {
-    render() {
-        if (!this.props.isSidebar) {
-            return <View style={[styles.headerGap, ...this.props.styles]} />;
-        }
-        return (
-            <View style={[styles.headerGap, styles.globalAndSubNavigationContainer, styles.flexRow, ...this.props.styles]}>
-                <View style={styles.globalNavigation} />
-                <View style={styles.headerGapLhpRight} />
-            </View>
-        );
-    }
-}
-
-HeaderGap.propTypes = propTypes;
-HeaderGap.defaultProps = {
-    styles: [],
-    isSidebar: false,
-};
-export default HeaderGap;
diff --git a/src/components/HeaderGap/index.js b/src/components/HeaderGap/index.js
index ca81056d5f7a..f9edcf578cb0 100644
--- a/src/components/HeaderGap/index.js
+++ b/src/components/HeaderGap/index.js
@@ -1,7 +1,34 @@
-import {PureComponent} from 'react';
+import React, {PureComponent} from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import styles from '../../styles/styles';
 
-export default class HeaderGap extends PureComponent {
+const propTypes = {
+    /** Styles to apply to the HeaderGap */
+    // eslint-disable-next-line react/forbid-prop-types
+    styles: PropTypes.arrayOf(PropTypes.object),
+
+    /** If the HeaderGap is placed in the LHP */
+    isSidebar: PropTypes.bool,
+};
+
+class HeaderGap extends PureComponent {
     render() {
-        return null;
+        if (!this.props.isSidebar) {
+            return <View style={[styles.headerGap, ...this.props.styles]} />;
+        }
+        return (
+            <View style={[styles.headerGap, styles.globalAndSubNavigationContainer, styles.flexRow, ...this.props.styles]}>
+                <View style={styles.globalNavigation} />
+                <View style={styles.headerGapLhpRight} />
+            </View>
+        );
     }
 }
+
+HeaderGap.propTypes = propTypes;
+HeaderGap.defaultProps = {
+    styles: [],
+    isSidebar: false,
+};
+export default HeaderGap;
diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index eef7058b3a9d..011d07e7080b 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -104,10 +104,6 @@ function ScreenWrapper({
             {({insets, paddingTop, paddingBottom, safeAreaPaddingBottomStyle}) => {
                 const paddingStyle = {};
 
-                if (includePaddingTop) {
-                    paddingStyle.paddingTop = paddingTop;
-                }
-
                 // We always need the safe area padding bottom if we're showing the offline indicator since it is bottom-docked.
                 if (includeSafeAreaPaddingBottom || isOffline) {
                     paddingStyle.paddingBottom = paddingBottom;
@@ -135,7 +131,7 @@ function ScreenWrapper({
                                     enabled={shouldEnablePickerAvoiding}
                                 >
                                     <HeaderGap
-                                        styles={headerGapStyles}
+                                        styles={[includePaddingTop && Boolean(paddingTop) && {height: paddingTop}, ...headerGapStyles]}
                                         isSidebar={isSidebar}
                                     />
                                     {isDevelopment && <TestToolsModal />}
@@ -147,6 +143,7 @@ function ScreenWrapper({
                                                   insets,
                                                   safeAreaPaddingBottomStyle,
                                                   didScreenTransitionEnd,
+                                                  paddingTop,
                                               })
                                             : children
                                     }
diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
index b02ebd66ba22..0b826ede836f 100644
--- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
+++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
@@ -9,6 +9,7 @@ import Performance from '../../../../libs/Performance';
 import * as Browser from '../../../../libs/Browser';
 import GlobalNavigation from '../GlobalNavigation';
 import SubNavigation from '../SubNavigation/SubNavigation';
+import getPlatform from '../../../../libs/getPlatform';
 
 const propTypes = {
     /** Children to wrap (floating button). */
@@ -23,6 +24,8 @@ const startTimer = () => {
     Performance.markStart(CONST.TIMING.SWITCH_REPORT);
 };
 
+const isDesktop = getPlatform() === CONST.PLATFORM.DESKTOP;
+
 function BaseSidebarScreen(props) {
     return (
         <ScreenWrapper
@@ -32,13 +35,15 @@ function BaseSidebarScreen(props) {
             testID={BaseSidebarScreen.displayName}
             isSidebar
         >
-            {({insets}) => (
+            {({insets, paddingTop}) => (
                 <>
                     <View style={[styles.flex1, styles.flexRow, styles.globalAndSubNavigationContainer]}>
                         <GlobalNavigation />
                         <SubNavigation
                             onLinkClick={startTimer}
                             insets={insets}
+                            // Don't display radius if there is exisiting padding top or platform is desktop. In this cases HeaderGap component is handling it.
+                            shouldDisplayRadius={!(paddingTop || isDesktop)}
                         />
                     </View>
                     {props.children}
diff --git a/src/pages/home/sidebar/SubNavigation/SubNavigation.js b/src/pages/home/sidebar/SubNavigation/SubNavigation.js
index 0c893b356099..20f007723fd0 100644
--- a/src/pages/home/sidebar/SubNavigation/SubNavigation.js
+++ b/src/pages/home/sidebar/SubNavigation/SubNavigation.js
@@ -14,16 +14,19 @@ const propTypes = {
 
     /** Insets for SidebarLInksData */
     insets: safeAreaInsetPropTypes.isRequired,
+
+    /** Whether the sidebar should display a radius */
+    shouldDisplayRadius: PropTypes.bool.isRequired,
 };
 
-function SubNavigation({onLinkClick, insets}) {
+function SubNavigation({onLinkClick, insets, shouldDisplayRadius}) {
     useEffect(() => {
         Performance.markStart(CONST.TIMING.SIDEBAR_LOADED);
         Timing.start(CONST.TIMING.SIDEBAR_LOADED, true);
     }, []);
 
     return (
-        <View style={styles.subNavigationContainer}>
+        <View style={styles.subNavigationContainer(shouldDisplayRadius)}>
             <SidebarLinksData
                 insets={insets}
                 onLinkClick={onLinkClick}
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 928db6b0efb4..c38f46efb324 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -1303,10 +1303,11 @@ const styles = (theme: ThemeDefault) =>
             alignItems: 'center',
         },
 
-        subNavigationContainer: {
+        subNavigationContainer: (shouldDisplayRadius = true) => ({
             backgroundColor: theme.sidebar,
             flex: 1,
-        },
+            borderTopLeftRadius: shouldDisplayRadius ? variables.componentBorderRadiusRounded : 0,
+        }),
 
         sidebarAnimatedWrapperContainer: {
             height: '100%',

From 82ae6d7d1b017a199d766a7792f5f47ca6b29d9e Mon Sep 17 00:00:00 2001
From: Robert Kozik <robert.kozik@swmansion.com>
Date: Tue, 24 Oct 2023 22:14:19 +0200
Subject: [PATCH 24/30] change styling of status bar

---
 src/components/CustomStatusBar/index.js       |  2 +-
 src/components/HeaderGap/index.desktop.js     | 34 +++++++++++++++++++
 src/components/HeaderGap/index.js             | 19 ++---------
 src/components/ScreenWrapper/index.js         |  3 +-
 .../SidebarScreen/BaseSidebarScreen.js        |  6 ++--
 src/styles/themes/default.ts                  |  2 +-
 6 files changed, 43 insertions(+), 23 deletions(-)
 create mode 100644 src/components/HeaderGap/index.desktop.js

diff --git a/src/components/CustomStatusBar/index.js b/src/components/CustomStatusBar/index.js
index 4848e6e35f59..dab20e706dee 100644
--- a/src/components/CustomStatusBar/index.js
+++ b/src/components/CustomStatusBar/index.js
@@ -10,7 +10,7 @@ function CustomStatusBar() {
             // If we don't have any colour defined for a route, fall back to
             // appBG color.
             const currentRoute = navigationRef.getCurrentRoute();
-            let currentScreenBackgroundColor = themeColors.appBG;
+            let currentScreenBackgroundColor = themeColors.sidebar;
             if (currentRoute && 'name' in currentRoute && currentRoute.name in themeColors.PAGE_BACKGROUND_COLORS) {
                 currentScreenBackgroundColor = themeColors.PAGE_BACKGROUND_COLORS[currentRoute.name];
             }
diff --git a/src/components/HeaderGap/index.desktop.js b/src/components/HeaderGap/index.desktop.js
new file mode 100644
index 000000000000..efc175d4bd38
--- /dev/null
+++ b/src/components/HeaderGap/index.desktop.js
@@ -0,0 +1,34 @@
+import React, {PureComponent} from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import styles from '../../styles/styles';
+import stylePropTypes from '../../styles/stylePropTypes';
+
+const propTypes = {
+    /** Styles to apply to the HeaderGap */
+    styles: stylePropTypes,
+
+    /** If the HeaderGap is placed in the LHP */
+    isSidebar: PropTypes.bool,
+};
+
+class HeaderGap extends PureComponent {
+    render() {
+        if (!this.props.isSidebar) {
+            return <View style={[styles.headerGap, ...this.props.styles]} />;
+        }
+        return (
+            <View style={[styles.headerGap, styles.globalAndSubNavigationContainer, styles.flexRow]}>
+                <View style={styles.globalNavigation} />
+                <View style={styles.headerGapLhpRight} />
+            </View>
+        );
+    }
+}
+
+HeaderGap.propTypes = propTypes;
+HeaderGap.defaultProps = {
+    styles: [],
+    isSidebar: false,
+};
+export default HeaderGap;
diff --git a/src/components/HeaderGap/index.js b/src/components/HeaderGap/index.js
index f9edcf578cb0..c0b93b26e68c 100644
--- a/src/components/HeaderGap/index.js
+++ b/src/components/HeaderGap/index.js
@@ -1,34 +1,21 @@
 import React, {PureComponent} from 'react';
 import {View} from 'react-native';
-import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
+import stylePropTypes from '../../styles/stylePropTypes';
 
 const propTypes = {
     /** Styles to apply to the HeaderGap */
     // eslint-disable-next-line react/forbid-prop-types
-    styles: PropTypes.arrayOf(PropTypes.object),
-
-    /** If the HeaderGap is placed in the LHP */
-    isSidebar: PropTypes.bool,
+    styles: stylePropTypes,
 };
-
 class HeaderGap extends PureComponent {
     render() {
-        if (!this.props.isSidebar) {
-            return <View style={[styles.headerGap, ...this.props.styles]} />;
-        }
-        return (
-            <View style={[styles.headerGap, styles.globalAndSubNavigationContainer, styles.flexRow, ...this.props.styles]}>
-                <View style={styles.globalNavigation} />
-                <View style={styles.headerGapLhpRight} />
-            </View>
-        );
+        return <View style={[styles.headerGap, ...this.props.styles]} />;
     }
 }
 
 HeaderGap.propTypes = propTypes;
 HeaderGap.defaultProps = {
     styles: [],
-    isSidebar: false,
 };
 export default HeaderGap;
diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index 011d07e7080b..fcc972e57a8e 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -131,7 +131,7 @@ function ScreenWrapper({
                                     enabled={shouldEnablePickerAvoiding}
                                 >
                                     <HeaderGap
-                                        styles={[includePaddingTop && Boolean(paddingTop) && {height: paddingTop}, ...headerGapStyles]}
+                                        styles={[includePaddingTop && {height: paddingTop}, ...headerGapStyles]}
                                         isSidebar={isSidebar}
                                     />
                                     {isDevelopment && <TestToolsModal />}
@@ -143,7 +143,6 @@ function ScreenWrapper({
                                                   insets,
                                                   safeAreaPaddingBottomStyle,
                                                   didScreenTransitionEnd,
-                                                  paddingTop,
                                               })
                                             : children
                                     }
diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
index 0b826ede836f..1ad37f07e31a 100644
--- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
+++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
@@ -35,15 +35,15 @@ function BaseSidebarScreen(props) {
             testID={BaseSidebarScreen.displayName}
             isSidebar
         >
-            {({insets, paddingTop}) => (
+            {({insets}) => (
                 <>
                     <View style={[styles.flex1, styles.flexRow, styles.globalAndSubNavigationContainer]}>
                         <GlobalNavigation />
                         <SubNavigation
                             onLinkClick={startTimer}
                             insets={insets}
-                            // Don't display radius if there is exisiting padding top or platform is desktop. In this cases HeaderGap component is handling it.
-                            shouldDisplayRadius={!(paddingTop || isDesktop)}
+                            // Don't display radius if platform is desktop. In this cases HeaderGap component is handling it.
+                            shouldDisplayRadius={!isDesktop}
                         />
                     </View>
                     {props.children}
diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts
index 330d9a37c61d..1538b06b2c42 100644
--- a/src/styles/themes/default.ts
+++ b/src/styles/themes/default.ts
@@ -87,7 +87,7 @@ const darkTheme = {
 } satisfies ThemeBase;
 
 darkTheme.PAGE_BACKGROUND_COLORS = {
-    [SCREENS.HOME]: darkTheme.sidebar,
+    [SCREENS.HOME]: darkTheme.highlightBG,
     [SCREENS.SAVE_THE_WORLD.ROOT]: colors.tangerine800,
     [SCREENS.SETTINGS.PREFERENCES]: colors.blue500,
     [SCREENS.SETTINGS.WORKSPACES]: colors.pink800,

From b8d3b52d827d76371ef1c976098366289441a22f Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Thu, 26 Oct 2023 09:07:31 +0200
Subject: [PATCH 25/30] fix typo

---
 src/components/HeaderGap/index.desktop.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HeaderGap/index.desktop.js b/src/components/HeaderGap/index.desktop.js
index efc175d4bd38..bddfb4c83d90 100644
--- a/src/components/HeaderGap/index.desktop.js
+++ b/src/components/HeaderGap/index.desktop.js
@@ -8,7 +8,7 @@ const propTypes = {
     /** Styles to apply to the HeaderGap */
     styles: stylePropTypes,
 
-    /** If the HeaderGap is placed in the LHP */
+    /** If the HeaderGap is placed in the LHN */
     isSidebar: PropTypes.bool,
 };
 

From 64511f23e0fe9c9013e631401a874f4518a2a4a8 Mon Sep 17 00:00:00 2001
From: Robert Kozik <robert.kozik@swmansion.com>
Date: Thu, 26 Oct 2023 09:47:36 +0200
Subject: [PATCH 26/30] set default headerGap color same as global navigation

---
 src/styles/styles.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index a728a48c96e7..b2ba4f0b86cf 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -865,6 +865,7 @@ const styles = (theme: ThemeDefault) =>
 
         headerGap: {
             height: CONST.DESKTOP_HEADER_PADDING,
+            backgroundColor: theme.highlightBG,
         },
 
         headerGapLhpRight: {

From d57956c39d1e0c881260a56a56296a62806f7cc4 Mon Sep 17 00:00:00 2001
From: Robert Kozik <robert.kozik@swmansion.com>
Date: Thu, 26 Oct 2023 10:58:59 +0200
Subject: [PATCH 27/30] fix naming lhp to lhn

---
 src/components/HeaderGap/index.desktop.js                 | 2 +-
 .../AppNavigator/getRootNavigatorScreenOptions.js         | 8 ++++----
 src/pages/home/report/AnimatedEmptyStateBackground.js     | 2 +-
 src/pages/home/report/ReportFooter.js                     | 2 +-
 src/styles/styles.ts                                      | 6 +++---
 src/styles/variables.ts                                   | 2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/HeaderGap/index.desktop.js b/src/components/HeaderGap/index.desktop.js
index bddfb4c83d90..875ce090eb5e 100644
--- a/src/components/HeaderGap/index.desktop.js
+++ b/src/components/HeaderGap/index.desktop.js
@@ -20,7 +20,7 @@ class HeaderGap extends PureComponent {
         return (
             <View style={[styles.headerGap, styles.globalAndSubNavigationContainer, styles.flexRow]}>
                 <View style={styles.globalNavigation} />
-                <View style={styles.headerGapLhpRight} />
+                <View style={styles.headerGapLhnRight} />
             </View>
         );
     }
diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
index c304e1952c95..690ac8b0d6eb 100644
--- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
+++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
@@ -37,10 +37,10 @@ export default (isSmallScreenWidth) => ({
 
         cardStyle: {
             ...getNavigationModalCardStyle(),
-            width: isSmallScreenWidth ? '100%' : variables.lhpWidth,
+            width: isSmallScreenWidth ? '100%' : variables.lhnWidth,
 
             // We need to translate the sidebar to not be covered by the StackNavigator so it can be clickable.
-            transform: [{translateX: isSmallScreenWidth ? 0 : -variables.lhpWidth}],
+            transform: [{translateX: isSmallScreenWidth ? 0 : -variables.lhnWidth}],
             ...(isSmallScreenWidth ? {} : styles.borderRight),
         },
     },
@@ -52,7 +52,7 @@ export default (isSmallScreenWidth) => ({
             ...getNavigationModalCardStyle(),
 
             // This is necessary to cover whole screen. Including translated sidebar.
-            marginLeft: isSmallScreenWidth ? 0 : -variables.lhpWidth,
+            marginLeft: isSmallScreenWidth ? 0 : -variables.lhnWidth,
         },
     },
 
@@ -64,7 +64,7 @@ export default (isSmallScreenWidth) => ({
 
         cardStyle: {
             ...getNavigationModalCardStyle(),
-            paddingRight: isSmallScreenWidth ? 0 : variables.lhpWidth,
+            paddingRight: isSmallScreenWidth ? 0 : variables.lhnWidth,
         },
     },
 });
diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.js b/src/pages/home/report/AnimatedEmptyStateBackground.js
index 90385b9d8afa..657d5d587192 100644
--- a/src/pages/home/report/AnimatedEmptyStateBackground.js
+++ b/src/pages/home/report/AnimatedEmptyStateBackground.js
@@ -14,7 +14,7 @@ function AnimatedEmptyStateBackground() {
     const IMAGE_OFFSET_X = windowWidth / 2;
 
     // If window width is greater than the max background width, repeat the background image
-    const maxBackgroundWidth = variables.lhpWidth + CONST.EMPTY_STATE_BACKGROUND.ASPECT_RATIO * CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.IMAGE_HEIGHT;
+    const maxBackgroundWidth = variables.lhnWidth + CONST.EMPTY_STATE_BACKGROUND.ASPECT_RATIO * CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.IMAGE_HEIGHT;
 
     // Get data from phone rotation sensor and prep other variables for animation
     const animatedSensor = useAnimatedSensor(SensorType.GYROSCOPE);
diff --git a/src/pages/home/report/ReportFooter.js b/src/pages/home/report/ReportFooter.js
index 64d7e035e554..465c6c97bc37 100644
--- a/src/pages/home/report/ReportFooter.js
+++ b/src/pages/home/report/ReportFooter.js
@@ -69,7 +69,7 @@ function ReportFooter(props) {
     const isArchivedRoom = ReportUtils.isArchivedRoom(props.report);
     const isAnonymousUser = Session.isAnonymousUser();
 
-    const isSmallSizeLayout = props.windowWidth - (props.isSmallScreenWidth ? 0 : variables.lhpWidth) < variables.anonymousReportFooterBreakpoint;
+    const isSmallSizeLayout = props.windowWidth - (props.isSmallScreenWidth ? 0 : variables.lhnWidth) < variables.anonymousReportFooterBreakpoint;
     const hideComposer = ReportUtils.shouldDisableWriteActions(props.report);
 
     return (
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index b2ba4f0b86cf..571c84e12168 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -868,7 +868,7 @@ const styles = (theme: ThemeDefault) =>
             backgroundColor: theme.highlightBG,
         },
 
-        headerGapLhpRight: {
+        headerGapLhnRight: {
             backgroundColor: theme.sidebar,
             borderTopLeftRadius: variables.componentBorderRadiusRounded,
             flex: 1,
@@ -1420,7 +1420,7 @@ const styles = (theme: ThemeDefault) =>
 
         createMenuPositionReportActionCompose: (windowHeight: number) =>
             ({
-                horizontal: 18 + variables.lhpWidth,
+                horizontal: 18 + variables.lhnWidth,
                 vertical: windowHeight - 83,
             } satisfies AnchorPosition),
 
@@ -2394,7 +2394,7 @@ const styles = (theme: ThemeDefault) =>
             borderRadius: 88,
         },
 
-        rootNavigatorContainerStyles: (isSmallScreenWidth) => ({marginLeft: isSmallScreenWidth ? 0 : variables.lhpWidth, flex: 1} satisfies ViewStyle),
+        rootNavigatorContainerStyles: (isSmallScreenWidth) => ({marginLeft: isSmallScreenWidth ? 0 : variables.lhnWidth, flex: 1} satisfies ViewStyle),
 
         avatarInnerTextChat: {
             color: theme.textLight,
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 7d1625d6e1d9..ed688e122b51 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -85,7 +85,7 @@ export default {
     safeInsertPercentage: 0.7,
     globalNavigationWidth: 72,
     sideBarWidth: 303 + 72,
-    lhpWidth: 353 + 72,
+    lhnWidth: 353 + 72,
     pdfPageMaxWidth: 992,
     tooltipzIndex: 10050,
     gutterWidth: 12,

From fad43114e60838606687f21131ebd77de4fe8c05 Mon Sep 17 00:00:00 2001
From: Robert Kozik <robert.kozik@swmansion.com>
Date: Mon, 30 Oct 2023 10:00:00 +0100
Subject: [PATCH 28/30] inverse condition isnside desktop HeaderGap component

---
 src/components/HeaderGap/index.desktop.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/HeaderGap/index.desktop.js b/src/components/HeaderGap/index.desktop.js
index 8b42bc870f5a..14f717653c77 100644
--- a/src/components/HeaderGap/index.desktop.js
+++ b/src/components/HeaderGap/index.desktop.js
@@ -15,15 +15,15 @@ const propTypes = {
 
 class HeaderGap extends PureComponent {
     render() {
-        if (!this.props.isSidebar) {
-            return <View style={[styles.headerGap, ...this.props.styles]} />;
+        if (this.props.isSidebar) {
+            return (
+                <View style={[styles.headerGap, styles.globalAndSubNavigationContainer, styles.flexRow]}>
+                    <View style={styles.globalNavigation} />
+                    <View style={styles.headerGapLhnRight} />
+                </View>
+            );   
         }
-        return (
-            <View style={[styles.headerGap, styles.globalAndSubNavigationContainer, styles.flexRow]}>
-                <View style={styles.globalNavigation} />
-                <View style={styles.headerGapLhnRight} />
-            </View>
-        );
+        return <View style={[styles.headerGap, ...this.props.styles]} />;
     }
 }
 

From 7309b93c68ff41312f49fd47a1cee1988b4e8ddc Mon Sep 17 00:00:00 2001
From: Robert Kozik <robert.kozik@swmansion.com>
Date: Mon, 30 Oct 2023 10:18:34 +0100
Subject: [PATCH 29/30] fix merge

---
 src/components/HeaderGap/index.desktop.js                 | 1 -
 src/components/HeaderGap/index.js                         | 4 ++--
 src/components/Icon/Expensicons.js                        | 1 +
 src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js | 1 +
 src/pages/home/sidebar/SignInButton.js                    | 3 ++-
 5 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/HeaderGap/index.desktop.js b/src/components/HeaderGap/index.desktop.js
index 14f717653c77..2abec5fb5d9f 100644
--- a/src/components/HeaderGap/index.desktop.js
+++ b/src/components/HeaderGap/index.desktop.js
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React, {PureComponent} from 'react';
 import {View} from 'react-native';
-import PropTypes from 'prop-types';
 import styles from '@styles/styles';
 import stylePropTypes from '@styles/styles/stylePropTypes';
 
diff --git a/src/components/HeaderGap/index.js b/src/components/HeaderGap/index.js
index c0b93b26e68c..a515895e181e 100644
--- a/src/components/HeaderGap/index.js
+++ b/src/components/HeaderGap/index.js
@@ -1,7 +1,7 @@
 import React, {PureComponent} from 'react';
 import {View} from 'react-native';
-import styles from '../../styles/styles';
-import stylePropTypes from '../../styles/stylePropTypes';
+import styles from '@styles/styles';
+import stylePropTypes from '@styles/stylePropTypes';
 
 const propTypes = {
     /** Styles to apply to the HeaderGap */
diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js
index 028127d15416..8b5ffe92d944 100644
--- a/src/components/Icon/Expensicons.js
+++ b/src/components/Icon/Expensicons.js
@@ -126,6 +126,7 @@ import Users from '@assets/images/users.svg';
 import Wallet from '@assets/images/wallet.svg';
 import Workspace from '@assets/images/workspace-default-avatar.svg';
 import Zoom from '@assets/images/zoom.svg';
+import ExpensifyAppIcon from '@assets/images/expensify-app-icon.svg';
 import LoungeAccess from './svgs/LoungeAccessIcon';
 
 export {
diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
index bf4dabfd6466..5e8c5cf70dee 100644
--- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
+++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
@@ -9,6 +9,7 @@ import SubNavigation from '@pages/home/sidebar/SubNavigation/SubNavigation';
 import styles from '@styles/styles';
 import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';
+import getPlatform from '@libs/getPlatform';
 
 const propTypes = {
     /** Children to wrap (floating button). */
diff --git a/src/pages/home/sidebar/SignInButton.js b/src/pages/home/sidebar/SignInButton.js
index f5b1157b174d..3c87c745e222 100644
--- a/src/pages/home/sidebar/SignInButton.js
+++ b/src/pages/home/sidebar/SignInButton.js
@@ -1,12 +1,13 @@
 /* eslint-disable rulesdir/onyx-props-must-have-default */
 import React from 'react';
 import {View} from 'react-native';
-import Button from '@components/Button';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import useLocalize from '@hooks/useLocalize';
 import styles from '@styles/styles';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
+import Avatar from '@components/Avatar';
+import * as Expensicons from '@components/Icon/Expensicons';
 
 function SignInButton() {
     const {translate} = useLocalize();

From 6f6ecd0c050e0051b04477fb6e12da0e8aaf2581 Mon Sep 17 00:00:00 2001
From: Robert Kozik <robert.kozik@swmansion.com>
Date: Mon, 30 Oct 2023 10:27:23 +0100
Subject: [PATCH 30/30] run prettier against files

---
 src/components/HeaderGap/index.desktop.js                 | 2 +-
 src/components/HeaderGap/index.js                         | 2 +-
 src/components/Icon/Expensicons.js                        | 2 +-
 src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js | 2 +-
 src/pages/home/sidebar/SignInButton.js                    | 4 ++--
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/HeaderGap/index.desktop.js b/src/components/HeaderGap/index.desktop.js
index 2abec5fb5d9f..1880d10f8e88 100644
--- a/src/components/HeaderGap/index.desktop.js
+++ b/src/components/HeaderGap/index.desktop.js
@@ -20,7 +20,7 @@ class HeaderGap extends PureComponent {
                     <View style={styles.globalNavigation} />
                     <View style={styles.headerGapLhnRight} />
                 </View>
-            );   
+            );
         }
         return <View style={[styles.headerGap, ...this.props.styles]} />;
     }
diff --git a/src/components/HeaderGap/index.js b/src/components/HeaderGap/index.js
index a515895e181e..0ff8aefc35b3 100644
--- a/src/components/HeaderGap/index.js
+++ b/src/components/HeaderGap/index.js
@@ -1,7 +1,7 @@
 import React, {PureComponent} from 'react';
 import {View} from 'react-native';
-import styles from '@styles/styles';
 import stylePropTypes from '@styles/stylePropTypes';
+import styles from '@styles/styles';
 
 const propTypes = {
     /** Styles to apply to the HeaderGap */
diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js
index 8b5ffe92d944..d2453f6c201a 100644
--- a/src/components/Icon/Expensicons.js
+++ b/src/components/Icon/Expensicons.js
@@ -50,6 +50,7 @@ import EReceiptIcon from '@assets/images/eReceiptIcon.svg';
 import Exclamation from '@assets/images/exclamation.svg';
 import Exit from '@assets/images/exit.svg';
 import Expand from '@assets/images/expand.svg';
+import ExpensifyAppIcon from '@assets/images/expensify-app-icon.svg';
 import ExpensifyFooterLogoVertical from '@assets/images/expensify-footer-logo-vertical.svg';
 import ExpensifyFooterLogo from '@assets/images/expensify-footer-logo.svg';
 import ExpensifyWordmark from '@assets/images/expensify-wordmark.svg';
@@ -126,7 +127,6 @@ import Users from '@assets/images/users.svg';
 import Wallet from '@assets/images/wallet.svg';
 import Workspace from '@assets/images/workspace-default-avatar.svg';
 import Zoom from '@assets/images/zoom.svg';
-import ExpensifyAppIcon from '@assets/images/expensify-app-icon.svg';
 import LoungeAccess from './svgs/LoungeAccessIcon';
 
 export {
diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
index 5e8c5cf70dee..b1d2d1ddf996 100644
--- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
+++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
@@ -3,13 +3,13 @@ import React from 'react';
 import {View} from 'react-native';
 import ScreenWrapper from '@components/ScreenWrapper';
 import * as Browser from '@libs/Browser';
+import getPlatform from '@libs/getPlatform';
 import Performance from '@libs/Performance';
 import GlobalNavigation from '@pages/home/sidebar/GlobalNavigation';
 import SubNavigation from '@pages/home/sidebar/SubNavigation/SubNavigation';
 import styles from '@styles/styles';
 import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';
-import getPlatform from '@libs/getPlatform';
 
 const propTypes = {
     /** Children to wrap (floating button). */
diff --git a/src/pages/home/sidebar/SignInButton.js b/src/pages/home/sidebar/SignInButton.js
index 3c87c745e222..4aa1e878bf67 100644
--- a/src/pages/home/sidebar/SignInButton.js
+++ b/src/pages/home/sidebar/SignInButton.js
@@ -1,13 +1,13 @@
 /* eslint-disable rulesdir/onyx-props-must-have-default */
 import React from 'react';
 import {View} from 'react-native';
+import Avatar from '@components/Avatar';
+import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import useLocalize from '@hooks/useLocalize';
 import styles from '@styles/styles';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
-import Avatar from '@components/Avatar';
-import * as Expensicons from '@components/Icon/Expensicons';
 
 function SignInButton() {
     const {translate} = useLocalize();