Change LHN header to Expensify

src/components/ExpensifyWordmark.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
+import PropTypes from 'prop-types';
 import ProductionLogo from '../../assets/images/expensify-wordmark.svg';
 import DevLogo from '../../assets/images/expensify-logo--dev.svg';
 import StagingLogo from '../../assets/images/expensify-logo--staging.svg';
@@ -9,13 +10,24 @@ import withEnvironment, {environmentPropTypes} from './withEnvironment';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import compose from '../libs/compose';
 import themeColors from '../styles/themes/default';
-import styles from '../styles/styles';
 import * as StyleUtils from '../styles/StyleUtils';
 import variables from '../styles/variables';
+import stylePropTypes from '../styles/stylePropTypes';
 
 const propTypes = {
     ...environmentPropTypes,
     ...windowDimensionsPropTypes,
+
+    /** The styles to apply for the View wrapping the svg */
+    containerStyles: stylePropTypes,
+
+    /** Fill color of the svg */
+    color: PropTypes.string,
+};
+
+const defaultProps = {
+    containerStyles: [],
+    color: themeColors.success,
 };
 
 const logoComponents = {
@@ -32,17 +44,18 @@ const ExpensifyWordmark = (props) => {
             <View style={[
                 StyleUtils.getSignInWordmarkWidthStyle(props.environment, props.isSmallScreenWidth),
                 StyleUtils.getHeight(props.isSmallScreenWidth ? variables.signInLogoHeightSmallScreen : variables.signInLogoHeight),
-                (props.isSmallScreenWidth && (props.environment === CONST.ENVIRONMENT.DEV || props.environment === CONST.ENVIRONMENT.STAGING)) ? styles.ml3 : {},
+                ...props.containerStyles,
             ]}
             >
-                <LogoComponent fill={themeColors.success} />
+                <LogoComponent fill={props.color} />
             </View>
         </>
     );
 };
 
 ExpensifyWordmark.displayName = 'ExpensifyWordmark';
 ExpensifyWordmark.propTypes = propTypes;
+ExpensifyWordmark.defaultProps = defaultProps;
 export default compose(
     withEnvironment,
     withWindowDimensions,

src/components/Header.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import _ from 'underscore';
 import styles from '../styles/styles';
 import Text from './Text';
-import EnvironmentBadge from './EnvironmentBadge';
 
 const propTypes = {
     /** Title of the Header */
@@ -13,16 +12,12 @@ const propTypes = {
     /** Subtitle of the header */
     subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 
-    /** Should we show the environment badge (dev/stg)?  */
-    shouldShowEnvironmentBadge: PropTypes.bool,
-
     /** Additional text styles */
     // eslint-disable-next-line react/forbid-prop-types
     textStyles: PropTypes.arrayOf(PropTypes.object),
 };
 
 const defaultProps = {
-    shouldShowEnvironmentBadge: false,
     subtitle: '',
     textStyles: [],
 };
@@ -37,9 +32,6 @@ const Header = props => (
                 ? Boolean(props.subtitle) && <Text style={[styles.mutedTextLabel, styles.pre]} numberOfLines={1}>{props.subtitle}</Text>
                 : props.subtitle}
         </View>
-        {props.shouldShowEnvironmentBadge && (
-            <EnvironmentBadge />
-        )}
     </View>
 );
 

src/languages/en.js

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

@@ -295,7 +295,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';
@@ -31,6 +30,8 @@ import SidebarUtils from '../../../libs/SidebarUtils';
 import reportPropTypes from '../../reportPropTypes';
 import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
 import LHNSkeletonView from '../../../components/LHNSkeletonView';
+import ExpensifyWordmark from '../../../components/ExpensifyWordmark';
+import defaultTheme from '../../../styles/themes/default';
 
 const propTypes = {
     /** Toggles the navigation menu open and closed */
@@ -153,13 +154,11 @@ class SidebarLinks extends React.Component {
                     ]}
                     nativeID="drag-area"
                 >
-                    <Header
-                        title={this.props.translate('sidebarScreen.headerChat')}
-                        accessibilityLabel={this.props.translate('sidebarScreen.headerChat')}
-                        accessibilityRole="text"
-                        shouldShowEnvironmentBadge
-                        textStyles={[styles.textHeadline]}
-                    />
+                    <View>
+                        <ExpensifyWordmark
+                            color={defaultTheme.textLight}
+                        />
+                    </View>
                     <Tooltip text={this.props.translate('common.search')}>
                         <TouchableOpacity
                             accessibilityLabel={this.props.translate('sidebarScreen.buttonSearch')}

src/pages/signin/SignInPageLayout/SignInPageContent.js

@@ -13,6 +13,8 @@ import OfflineIndicator from '../../../components/OfflineIndicator';
 import SignInHeroImage from '../SignInHeroImage';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import variables from '../../../styles/variables';
+import withEnvironment, {environmentPropTypes} from '../../../components/withEnvironment';
+import CONST from '../../../CONST';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -34,6 +36,7 @@ const propTypes = {
 
     ...withLocalizePropTypes,
     ...windowDimensionsPropTypes,
+    ...environmentPropTypes,
 };
 
 const SignInPageContent = props => (
@@ -49,7 +52,9 @@ const SignInPageContent = props => (
             <View style={[styles.flexGrow2, styles.mb8]}>
                 <SignInPageForm style={[styles.alignSelfStretch]}>
                     <View style={[props.isSmallScreenWidth ? styles.mb8 : styles.mb15, props.isSmallScreenWidth ? styles.alignItemsCenter : styles.alignSelfStart]}>
-                        <ExpensifyWordmark />
+                        <ExpensifyWordmark
+                            containerStyles={[(props.isSmallScreenWidth && (props.environment === CONST.ENVIRONMENT.DEV || props.environment === CONST.ENVIRONMENT.STAGING)) ? styles.ml3 : {}]}
+                        />
                     </View>
                     <View style={[styles.signInPageWelcomeTextContainer]}>
                         {(props.shouldShowWelcomeHeader && props.welcomeHeader) ? (
@@ -92,4 +97,5 @@ export default compose(
     withWindowDimensions,
     withLocalize,
     withSafeAreaInsets,
+    withEnvironment,
 )(SignInPageContent);

src/stories/Header.stories.js

@@ -19,7 +19,6 @@ const Template = args => <Header {...args} />;
 const Default = Template.bind({});
 Default.args = {
     title: 'Chats',
-    shouldShowEnvironmentBadge: true,
 };
 
 export default story;