Change LHN header to Expensify

src/components/ImageHeader.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import styles from '../styles/styles';
+import EnvironmentBadge from './EnvironmentBadge';
+
+const propTypes = {
+    children: PropTypes.node.isRequired,
+
+    /** Subtitle of the header */
+    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+
+    /** Should we show the environment badge (dev/stg)?  */
+    shouldShowEnvironmentBadge: PropTypes.bool,
+};
+
+const defaultProps = {
+    shouldShowEnvironmentBadge: false,
+    subtitle: '',
+};
+const ImageHeader = props => (
+    <View style={[styles.flex1, styles.flexRow]}>
+        <View style={styles.mw100}>
+            {props.children}
+            {/* 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) && <Text style={[styles.mutedTextLabel, styles.pre]} numberOfLines={1}>{props.subtitle}</Text>
+                : props.subtitle}
+        </View>
+        {props.shouldShowEnvironmentBadge && (
+            <EnvironmentBadge />
+        )}
+    </View>
+);
+
+ImageHeader.displayName = 'ImageHeader';
+ImageHeader.propTypes = propTypes;
+ImageHeader.defaultProps = defaultProps;
+export default ImageHeader;

src/languages/en.js

@@ -295,7 +295,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

@@ -294,7 +294,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,7 @@ 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 ImageHeader from '../../../components/ImageHeader';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import AvatarWithIndicator from '../../../components/AvatarWithIndicator';
 import Tooltip from '../../../components/Tooltip';
@@ -31,6 +31,8 @@ import SidebarUtils from '../../../libs/SidebarUtils';
 import reportPropTypes from '../../reportPropTypes';
 import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
 import LHNSkeletonView from '../../../components/LHNSkeletonView';
+import LogoWordmark from '../../../../assets/images/expensify-wordmark.svg';
+import defaultTheme from '../../../styles/themes/default';
 
 const propTypes = {
     /** Toggles the navigation menu open and closed */
@@ -153,13 +155,13 @@ class SidebarLinks extends React.Component {
                     ]}
                     nativeID="drag-area"
                 >
-                    <Header
-                        title={this.props.translate('sidebarScreen.headerChat')}
-                        accessibilityLabel={this.props.translate('sidebarScreen.headerChat')}
+                    <ImageHeader
+                        accessibilityLabel={"Expensify"}
                         accessibilityRole="text"
                         shouldShowEnvironmentBadge
-                        textStyles={[styles.textHeadline]}
-                    />
+                    >
+                        <LogoWordmark width={108} fill={defaultTheme.textLight} />
+                    </ImageHeader>
                     <Tooltip text={this.props.translate('common.search')}>
                         <TouchableOpacity
                             accessibilityLabel={this.props.translate('sidebarScreen.buttonSearch')}