Fix global nav styles

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

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

src/components/HeaderGap/index.desktop.js

@@ -2,21 +2,33 @@ 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),
+    styles: stylePropTypes,
+
+    /** If the HeaderGap is placed in the LHN */
+    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 (
+            <View style={[styles.headerGap, styles.globalAndSubNavigationContainer, styles.flexRow]}>
+                <View style={styles.globalNavigation} />
+                <View style={styles.headerGapLhnRight} />
+            </View>
+        );
     }
 }
 
 HeaderGap.propTypes = propTypes;
 HeaderGap.defaultProps = {
     styles: [],
+    isSidebar: false,
 };
 export default HeaderGap;

src/components/HeaderGap/index.js

@@ -1,7 +1,21 @@
-import {PureComponent} from 'react';
+import React, {PureComponent} from 'react';
+import {View} from 'react-native';
+import styles from '../../styles/styles';
+import stylePropTypes from '../../styles/stylePropTypes';
 
-export default class HeaderGap extends PureComponent {
+const propTypes = {
+    /** Styles to apply to the HeaderGap */
+    // eslint-disable-next-line react/forbid-prop-types
+    styles: stylePropTypes,
+};
+class HeaderGap extends PureComponent {
     render() {
-        return null;
+        return <View style={[styles.headerGap, ...this.props.styles]} />;
     }
 }
+
+HeaderGap.propTypes = propTypes;
+HeaderGap.defaultProps = {
+    styles: [],
+};
+export default HeaderGap;

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,

src/components/LHNOptionsList/OptionRowLHN.js

@@ -215,7 +215,13 @@ function OptionRowLHN(props) {
                                 {!_.isEmpty(optionItem.icons) &&
                                     (optionItem.shouldShowSubscript ? (
                                         <SubscriptAvatar
-                                            backgroundColor={props.isFocused ? themeColors.activeComponentBG : themeColors.sidebar}
+                                            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}
@@ -226,9 +232,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 && !props.isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
+                                                StyleUtils.getBackgroundAndBorderStyle(
+                                                    StyleUtils.getAvatarBackgroundColor(
+                                                        props.isFocused,
+                                                        hovered || isContextMenuActive,
+                                                        focusedBackgroundColor,
+                                                        hoveredBackgroundColor,
+                                                        themeColors.sidebar,
+                                                    ),
+                                                ),
                                             ]}
                                             shouldShowTooltip={OptionsListUtils.shouldOptionShowTooltip(optionItem)}
                                         />

src/components/ScreenWrapper/index.js

@@ -35,6 +35,7 @@ function ScreenWrapper({
     shouldDismissKeyboardBeforeClose,
     onEntryTransitionEnd,
     testID,
+    isSidebar,
 }) {
     const {windowHeight, isSmallScreenWidth} = useWindowDimensions();
     const keyboardState = useKeyboardState();
@@ -103,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;
@@ -133,7 +130,10 @@ function ScreenWrapper({
                                     style={styles.flex1}
                                     enabled={shouldEnablePickerAvoiding}
                                 >
-                                    <HeaderGap styles={headerGapStyles} />
+                                    <HeaderGap
+                                        styles={[includePaddingTop && {height: paddingTop}, ...headerGapStyles]}
+                                        isSidebar={isSidebar}
+                                    />
                                     {isDevelopment && <TestToolsModal />}
                                     {isDevelopment && <CustomDevMenu />}
                                     {

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

src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js

@@ -37,10 +37,10 @@ export default (isSmallScreenWidth) => ({
 
         cardStyle: {
             ...getNavigationModalCardStyle(),
-            width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
+            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.sideBarWidth}],
+            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.sideBarWidth,
+            marginLeft: isSmallScreenWidth ? 0 : -variables.lhnWidth,
         },
     },
 
@@ -64,7 +64,7 @@ export default (isSmallScreenWidth) => ({
 
         cardStyle: {
             ...getNavigationModalCardStyle(),
-            paddingRight: isSmallScreenWidth ? 0 : variables.sideBarWidth,
+            paddingRight: isSmallScreenWidth ? 0 : variables.lhnWidth,
         },
     },
 });

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

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.sideBarWidth) < variables.anonymousReportFooterBreakpoint;
+    const isSmallSizeLayout = props.windowWidth - (props.isSmallScreenWidth ? 0 : variables.lhnWidth) < variables.anonymousReportFooterBreakpoint;
     const hideComposer = ReportUtils.shouldDisableWriteActions(props.report);
 
     return (

src/pages/home/sidebar/AvatarWithOptionalStatus.js

@@ -39,22 +39,21 @@ 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>
+                <Text
+                    family="SYSTEM"
+                    style={styles.sidebarStatusAvatarEmoji}
+                    numberOfLines={1}
+                >
+                    {emojiStatus}
+                </Text>
             </PressableWithoutFeedback>
-            <PressableAvatarWithIndicator isCreateMenuOpen={isCreateMenuOpen} />
         </View>
     );
 }

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

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,13 +24,16 @@ const startTimer = () => {
     Performance.markStart(CONST.TIMING.SWITCH_REPORT);
 };
 
+const isDesktop = getPlatform() === CONST.PLATFORM.DESKTOP;
+
 function BaseSidebarScreen(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
             style={[styles.sidebar, Browser.isMobile() ? styles.userSelectNone : {}]}
             testID={BaseSidebarScreen.displayName}
+            isSidebar
         >
             {({insets}) => (
                 <>
@@ -38,6 +42,8 @@ function BaseSidebarScreen(props) {
                         <SubNavigation
                             onLinkClick={startTimer}
                             insets={insets}
+                            // Don't display radius if platform is desktop. In this cases HeaderGap component is handling it.
+                            shouldDisplayRadius={!isDesktop}
                         />
                     </View>
                     {props.children}

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

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}

src/styles/StyleUtils.ts

@@ -1316,6 +1316,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,
@@ -1398,4 +1408,5 @@ export {
     getContainerStyles,
     getEReceiptColorStyles,
     getEReceiptColorCode,
+    getAvatarBackgroundColor,
 };