🍒 Cherry pick PR #18802 to staging 🍒

android/app/build.gradle

@@ -106,8 +106,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001031413
-        versionName "1.3.14-13"
+        versionCode 1001031414
+        versionName "1.3.14-14"
     }
 
     splits {

ios/NewExpensify/Info.plist

@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.14.13</string>
+	<string>1.3.14.14</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.14.13</string>
+	<string>1.3.14.14</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.14-13",
+  "version": "1.3.14-14",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/components/Badge.js

@@ -26,6 +26,10 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     badgeStyles: PropTypes.arrayOf(PropTypes.object),
 
+    /** Styles for Badge Text */
+    // eslint-disable-next-line react/forbid-prop-types
+    textStyles: PropTypes.arrayOf(PropTypes.object),
+
     /** Callback to be called on onPress */
     onPress: PropTypes.func,
 };
@@ -35,6 +39,7 @@ const defaultProps = {
     error: false,
     pressable: false,
     badgeStyles: [],
+    textStyles: [],
     onPress: undefined,
     environment: CONST.ENVIRONMENT.DEV,
 };
@@ -55,7 +60,7 @@ const Badge = (props) => {
             onPress={props.onPress}
         >
             <Text
-                style={[styles.badgeText, textStyles]}
+                style={[styles.badgeText, textStyles, ...props.textStyles]}
                 numberOfLines={1}
             >
                 {props.text}

src/components/EnvironmentBadge.js

@@ -26,7 +26,8 @@ const EnvironmentBadge = (props) => {
             success={props.environment === CONST.ENVIRONMENT.STAGING || props.environment === CONST.ENVIRONMENT.ADHOC}
             error={props.environment !== CONST.ENVIRONMENT.STAGING && props.environment !== CONST.ENVIRONMENT.ADHOC}
             text={text}
-            badgeStyles={[styles.alignSelfCenter]}
+            badgeStyles={[styles.alignSelfEnd, styles.headerEnvBadge]}
+            textStyles={[styles.headerEnvBadgeText]}
             environment={props.environment}
         />
     );

src/components/Header.js

@@ -8,7 +8,7 @@ import EnvironmentBadge from './EnvironmentBadge';
 
 const propTypes = {
     /** Title of the Header */
-    title: PropTypes.string.isRequired,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 
     /** Subtitle of the header */
     subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
@@ -22,19 +22,24 @@ const propTypes = {
 };
 
 const defaultProps = {
-    shouldShowEnvironmentBadge: false,
+    title: '',
     subtitle: '',
     textStyles: [],
+    shouldShowEnvironmentBadge: false,
 };
 const Header = (props) => (
     <View style={[styles.flex1, styles.flexRow]}>
         <View style={styles.mw100}>
-            <Text
-                numberOfLines={2}
-                style={[styles.headerText, styles.textLarge, ...props.textStyles]}
-            >
-                {props.title}
-            </Text>
+            {_.isString(props.title)
+                ? Boolean(props.title) && (
+                      <Text
+                          numberOfLines={2}
+                          style={[styles.headerText, styles.textLarge, ...props.textStyles]}
+                      >
+                          {props.title}
+                      </Text>
+                  )
+                : props.title}
             {/* If there's no subtitle then display a fragment to avoid an empty space which moves the main title */}
             {_.isString(props.subtitle)
                 ? Boolean(props.subtitle) && (

src/languages/en.js

@@ -301,7 +301,6 @@ export default {
         newChat: 'New chat',
         newGroup: 'New group',
         newRoom: 'New room',
-        headerChat: 'Chats',
         buttonSearch: 'Search',
         buttonMySettings: 'My settings',
         fabNewChat: 'New chat (Floating action)',

src/languages/es.js

@@ -300,7 +300,6 @@ export default {
         newChat: 'Nuevo chat',
         newGroup: 'Nuevo grupo',
         newRoom: 'Nueva sala de chat',
-        headerChat: 'Chats',
         buttonSearch: 'Buscar',
         buttonMySettings: 'Mi configuración',
         fabNewChat: 'Nuevo chat',

src/pages/home/sidebar/SidebarLinks.js

@@ -14,7 +14,6 @@ import compose from '../../../libs/compose';
 import Navigation from '../../../libs/Navigation/Navigation';
 import ROUTES from '../../../ROUTES';
 import Icon from '../../../components/Icon';
-import Header from '../../../components/Header';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import AvatarWithIndicator from '../../../components/AvatarWithIndicator';
 import Tooltip from '../../../components/Tooltip';
@@ -30,7 +29,11 @@ import LHNOptionsList from '../../../components/LHNOptionsList/LHNOptionsList';
 import SidebarUtils from '../../../libs/SidebarUtils';
 import reportPropTypes from '../../reportPropTypes';
 import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
+import Header from '../../../components/Header';
+import defaultTheme from '../../../styles/themes/default';
 import OptionsListSkeletonView from '../../../components/OptionsListSkeletonView';
+import variables from '../../../styles/variables';
+import LogoComponent from '../../../../assets/images/expensify-wordmark.svg';
 
 const propTypes = {
     /** Toggles the navigation menu open and closed */
@@ -148,11 +151,15 @@ class SidebarLinks extends React.Component {
                     nativeID="drag-area"
                 >
                     <Header
-                        title={this.props.translate('sidebarScreen.headerChat')}
-                        accessibilityLabel={this.props.translate('sidebarScreen.headerChat')}
+                        title={
+                            <LogoComponent
+                                fill={defaultTheme.textLight}
+                                width={variables.lhnLogoWidth}
+                                height={variables.lhnLogoHeight}
+                            />
+                        }
                         accessibilityRole="text"
                         shouldShowEnvironmentBadge
-                        textStyles={[styles.textHeadline]}
                     />
                     <Tooltip text={this.props.translate('common.search')}>
                         <TouchableOpacity

src/styles/styles.js

@@ -3239,6 +3239,21 @@ const styles = {
         borderWidth: 2,
         backgroundColor: themeColors.highlightBG,
     },
+
+    headerEnvBadge: {
+        marginLeft: 0,
+        marginBottom: 2,
+        height: 12,
+        paddingLeft: 4,
+        paddingRight: 4,
+        alignItems: 'center',
+    },
+
+    headerEnvBadgeText: {
+        fontSize: 7,
+        fontWeight: fontWeightBold,
+        lineHeight: undefined,
+    },
 };
 
 export default styles;

src/styles/variables.js

@@ -126,6 +126,8 @@ export default {
     signInLogoWidth: 120,
     signInLogoWidthLargeScreen: 144,
     signInLogoWidthPill: 132,
+    lhnLogoWidth: 108,
+    lhnLogoHeight: 28,
     signInLogoWidthLargeScreenPill: 162,
     modalContentMaxWidth: 360,
     listItemHeightNormal: 64,