diff --git a/assets/images/expensify-logo--dev.svg b/assets/images/expensify-logo--dev.svg
index 42a0f1d8e952..f68fafbad806 100644
--- a/assets/images/expensify-logo--dev.svg
+++ b/assets/images/expensify-logo--dev.svg
@@ -4,7 +4,6 @@
viewBox="0 0 162 34" style="enable-background:new 0 0 162 34;" xml:space="preserve">
@@ -16,22 +15,22 @@
-
-
-
+
+
-
-
-
-
-
+
+
-
diff --git a/assets/images/expensify-logo--staging.svg b/assets/images/expensify-logo--staging.svg
index 335c41a294e3..12b0b9bf6e79 100644
--- a/assets/images/expensify-logo--staging.svg
+++ b/assets/images/expensify-logo--staging.svg
@@ -4,7 +4,6 @@
viewBox="0 0 162 34" style="enable-background:new 0 0 162 34;" xml:space="preserve">
@@ -16,22 +15,22 @@
-
-
-
+
+
-
-
-
-
-
+
+
-
diff --git a/src/components/Badge.js b/src/components/Badge.js
index f1a2ff0772c4..01861c6c30ff 100644
--- a/src/components/Badge.js
+++ b/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}
>
{props.text}
diff --git a/src/components/EnvironmentBadge.js b/src/components/EnvironmentBadge.js
index 9e85b3ef2d97..73d97e8060cb 100644
--- a/src/components/EnvironmentBadge.js
+++ b/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}
/>
);
diff --git a/src/components/Header.js b/src/components/Header.js
index 3944a0f3a973..1605231994ba 100644
--- a/src/components/Header.js
+++ b/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) => (
-
- {props.title}
-
+ {_.isString(props.title)
+ ? Boolean(props.title) && (
+
+ {props.title}
+
+ )
+ : 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) && (
diff --git a/src/languages/en.js b/src/languages/en.js
index 9f3badd88e96..f44ad5d5651e 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -302,7 +302,6 @@ export default {
newChat: 'New chat',
newGroup: 'New group',
newRoom: 'New room',
- headerChat: 'Chats',
buttonSearch: 'Search',
buttonMySettings: 'My settings',
fabNewChat: 'New chat (Floating action)',
diff --git a/src/languages/es.js b/src/languages/es.js
index 20c3247c500b..a269001d2c49 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -301,7 +301,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',
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 04880da16f45..d48ca795a3e8 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/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"
>
+ }
accessibilityRole="text"
shouldShowEnvironmentBadge
- textStyles={[styles.textHeadline]}
/>