From b548a3e50923e0eac84df0735176be7c91c8d78c Mon Sep 17 00:00:00 2001 From: David Bondy Date: Thu, 4 May 2023 15:41:56 -0600 Subject: [PATCH 01/30] change LHN header to Expensify --- src/languages/en.js | 2 +- src/languages/es.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index 7b45cca7cce8..948779a63942 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -295,7 +295,7 @@ export default { newChat: 'New chat', newGroup: 'New group', newRoom: 'New room', - headerChat: 'Chats', + headerChat: 'Expensify', buttonSearch: 'Search', buttonMySettings: 'My settings', fabNewChat: 'New chat (Floating action)', diff --git a/src/languages/es.js b/src/languages/es.js index 001687c1df06..6daf7cbbc901 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -294,7 +294,7 @@ export default { newChat: 'Nuevo chat', newGroup: 'Nuevo grupo', newRoom: 'Nueva sala de chat', - headerChat: 'Chats', + headerChat: 'Expensify', buttonSearch: 'Buscar', buttonMySettings: 'Mi configuración', fabNewChat: 'Nuevo chat', From 3b461e23899c6ee5b1cefc5caab4d51ab0218f87 Mon Sep 17 00:00:00 2001 From: David Bondy Date: Fri, 5 May 2023 15:30:58 -0600 Subject: [PATCH 02/30] update the header component so it can accept react components (or anything really) to be rendered inside the header --- src/components/Header.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/Header.js b/src/components/Header.js index 01752e8e0740..c97a948ca0ce 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -8,7 +8,10 @@ import EnvironmentBadge from './EnvironmentBadge'; const propTypes = { /** Title of the Header */ - title: PropTypes.string.isRequired, + title: PropTypes.string, + + /** Things to be rendered inside the header*/ + children: PropTypes.node, /** Subtitle of the header */ subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), @@ -22,6 +25,8 @@ const propTypes = { }; const defaultProps = { + title: '', + children: '', shouldShowEnvironmentBadge: false, subtitle: '', textStyles: [], @@ -29,9 +34,9 @@ const defaultProps = { const Header = props => ( - - {props.title} - + {!_.isEmpty(props.children) + ? props.children + : {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) && {props.subtitle} From 735725c87039a142577550ea64788fdd9c93a586 Mon Sep 17 00:00:00 2001 From: David Bondy Date: Fri, 5 May 2023 15:31:28 -0600 Subject: [PATCH 03/30] import the wordmark logo and render it in the header --- src/pages/home/sidebar/SidebarLinks.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 65329cebc1f4..77493c5151e1 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -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 */ @@ -159,6 +161,7 @@ class SidebarLinks extends React.Component { accessibilityRole="text" shouldShowEnvironmentBadge textStyles={[styles.textHeadline]} + children={} /> Date: Fri, 5 May 2023 16:13:54 -0600 Subject: [PATCH 04/30] fix style --- src/components/Header.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header.js b/src/components/Header.js index c97a948ca0ce..faff46ae1aa7 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -10,7 +10,7 @@ const propTypes = { /** Title of the Header */ title: PropTypes.string, - /** Things to be rendered inside the header*/ + /** Things to be rendered inside the header */ children: PropTypes.node, /** Subtitle of the header */ From 1fa9eedebf003bec3fe95b134e4fc887609c4dfc Mon Sep 17 00:00:00 2001 From: David Bondy Date: Fri, 5 May 2023 16:38:46 -0600 Subject: [PATCH 05/30] create new component for imageheader to properly use children to render content --- src/components/Header.js | 13 +++----- src/components/ImageHeader.js | 45 ++++++++++++++++++++++++++ src/pages/home/sidebar/SidebarLinks.js | 11 +++---- 3 files changed, 54 insertions(+), 15 deletions(-) create mode 100644 src/components/ImageHeader.js diff --git a/src/components/Header.js b/src/components/Header.js index faff46ae1aa7..01752e8e0740 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -8,10 +8,7 @@ import EnvironmentBadge from './EnvironmentBadge'; const propTypes = { /** Title of the Header */ - title: PropTypes.string, - - /** Things to be rendered inside the header */ - children: PropTypes.node, + title: PropTypes.string.isRequired, /** Subtitle of the header */ subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), @@ -25,8 +22,6 @@ const propTypes = { }; const defaultProps = { - title: '', - children: '', shouldShowEnvironmentBadge: false, subtitle: '', textStyles: [], @@ -34,9 +29,9 @@ const defaultProps = { const Header = props => ( - {!_.isEmpty(props.children) - ? props.children - : {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) && {props.subtitle} diff --git a/src/components/ImageHeader.js b/src/components/ImageHeader.js new file mode 100644 index 000000000000..8f086e1fecf5 --- /dev/null +++ b/src/components/ImageHeader.js @@ -0,0 +1,45 @@ +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, + + /** Additional text styles */ + // eslint-disable-next-line react/forbid-prop-types + textStyles: PropTypes.arrayOf(PropTypes.object), +}; + +const defaultProps = { + shouldShowEnvironmentBadge: false, + subtitle: '', + textStyles: [], +}; +const ImageHeader = props => ( + + + {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) && {props.subtitle} + : props.subtitle} + + {props.shouldShowEnvironmentBadge && ( + + )} + +); + +ImageHeader.displayName = 'ImageHeader'; +ImageHeader.propTypes = propTypes; +ImageHeader.defaultProps = defaultProps; +export default ImageHeader; diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 77493c5151e1..a7ec9afa6f1c 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/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'; @@ -155,14 +155,13 @@ class SidebarLinks extends React.Component { ]} nativeID="drag-area" > -
} - /> + > + + Date: Fri, 5 May 2023 16:41:58 -0600 Subject: [PATCH 06/30] remove unused props --- src/components/ImageHeader.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/ImageHeader.js b/src/components/ImageHeader.js index 8f086e1fecf5..5c82006e392a 100644 --- a/src/components/ImageHeader.js +++ b/src/components/ImageHeader.js @@ -13,16 +13,11 @@ const propTypes = { /** 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: [], }; const ImageHeader = props => ( From 0bc7607bf37e760b83eaf954f3b149d272dfb6c6 Mon Sep 17 00:00:00 2001 From: David Bondy Date: Fri, 5 May 2023 16:53:19 -0600 Subject: [PATCH 07/30] removing unneeded string --- src/languages/en.js | 1 - src/languages/es.js | 1 - src/pages/home/sidebar/SidebarLinks.js | 2 +- 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index 948779a63942..9cbf6954b15e 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -295,7 +295,6 @@ export default { newChat: 'New chat', newGroup: 'New group', newRoom: 'New room', - headerChat: 'Expensify', buttonSearch: 'Search', buttonMySettings: 'My settings', fabNewChat: 'New chat (Floating action)', diff --git a/src/languages/es.js b/src/languages/es.js index 6daf7cbbc901..508555cba1a7 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -294,7 +294,6 @@ export default { newChat: 'Nuevo chat', newGroup: 'Nuevo grupo', newRoom: 'Nueva sala de chat', - headerChat: 'Expensify', 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 a7ec9afa6f1c..57f2df7b2c18 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -156,7 +156,7 @@ class SidebarLinks extends React.Component { nativeID="drag-area" > From 398546cb2709445448e9ac08915011c569a6ce64 Mon Sep 17 00:00:00 2001 From: David Bondy Date: Mon, 8 May 2023 15:43:56 -0600 Subject: [PATCH 08/30] remove unnecessary new component since we have a wordmark that we can update and use --- src/components/ImageHeader.js | 40 -------------------------- src/pages/home/sidebar/SidebarLinks.js | 15 ++++------ 2 files changed, 6 insertions(+), 49 deletions(-) delete mode 100644 src/components/ImageHeader.js diff --git a/src/components/ImageHeader.js b/src/components/ImageHeader.js deleted file mode 100644 index 5c82006e392a..000000000000 --- a/src/components/ImageHeader.js +++ /dev/null @@ -1,40 +0,0 @@ -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 => ( - - - {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) && {props.subtitle} - : props.subtitle} - - {props.shouldShowEnvironmentBadge && ( - - )} - -); - -ImageHeader.displayName = 'ImageHeader'; -ImageHeader.propTypes = propTypes; -ImageHeader.defaultProps = defaultProps; -export default ImageHeader; diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 57f2df7b2c18..6630aacd52c2 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 ImageHeader from '../../../components/ImageHeader'; import * as Expensicons from '../../../components/Icon/Expensicons'; import AvatarWithIndicator from '../../../components/AvatarWithIndicator'; import Tooltip from '../../../components/Tooltip'; @@ -31,7 +30,7 @@ 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 ExpensifyWordmark from '../../../components/ExpensifyWordmark'; import defaultTheme from '../../../styles/themes/default'; const propTypes = { @@ -155,13 +154,11 @@ class SidebarLinks extends React.Component { ]} nativeID="drag-area" > - - - + + + Date: Mon, 8 May 2023 15:47:54 -0600 Subject: [PATCH 09/30] remove in-svg styles so we can modify them via props --- assets/images/expensify-logo--dev.svg | 19 +++++++++---------- assets/images/expensify-logo--staging.svg | 19 +++++++++---------- 2 files changed, 18 insertions(+), 20 deletions(-) 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 @@ - - - + + - - - - - + + - From 9968ab733c64201273cc96e67a271930f3136d7b Mon Sep 17 00:00:00 2001 From: David Bondy Date: Mon, 8 May 2023 15:48:31 -0600 Subject: [PATCH 10/30] update the wordmark component to accept more customization so it can be re-used in various places --- src/components/ExpensifyWordmark.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.js index 11999dad22d2..489675cd8125 100644 --- a/src/components/ExpensifyWordmark.js +++ b/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'; @@ -16,6 +17,18 @@ import variables from '../styles/variables'; const propTypes = { ...environmentPropTypes, ...windowDimensionsPropTypes, + + /** The styles to apply for the View wrapping the svg */ + containerStyles: PropTypes.array, + + /** Fill color of the svg */ + color: PropTypes.string, +}; + + +const defaultProps = { + containerStyles: [], + color: themeColors.success, }; const logoComponents = { @@ -32,10 +45,10 @@ const ExpensifyWordmark = (props) => { - + ); From 8a14e2e514e63f6fff39adf0b63f60e5867764bc Mon Sep 17 00:00:00 2001 From: David Bondy Date: Mon, 8 May 2023 15:49:10 -0600 Subject: [PATCH 11/30] fix typo --- src/components/ExpensifyWordmark.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.js index 489675cd8125..0187d0905189 100644 --- a/src/components/ExpensifyWordmark.js +++ b/src/components/ExpensifyWordmark.js @@ -56,6 +56,7 @@ const ExpensifyWordmark = (props) => { ExpensifyWordmark.displayName = 'ExpensifyWordmark'; ExpensifyWordmark.propTypes = propTypes; +ExpensifyWordmark.defaultProps = defaultProps; export default compose( withEnvironment, withWindowDimensions, From 4843a61b63e1870fead3959ce42db561f46446f6 Mon Sep 17 00:00:00 2001 From: David Bondy Date: Mon, 8 May 2023 15:49:58 -0600 Subject: [PATCH 12/30] update usage of wordmark component based on new api --- src/pages/signin/SignInPageLayout/SignInPageContent.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 9991cac126c2..3e0bdb6d3421 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -13,6 +13,7 @@ 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'; const propTypes = { /** The children to show inside the layout */ @@ -34,6 +35,7 @@ const propTypes = { ...withLocalizePropTypes, ...windowDimensionsPropTypes, + ...environmentPropTypes, }; const SignInPageContent = props => ( @@ -49,7 +51,9 @@ const SignInPageContent = props => ( - + {(props.shouldShowWelcomeHeader && props.welcomeHeader) ? ( @@ -92,4 +96,5 @@ export default compose( withWindowDimensions, withLocalize, withSafeAreaInsets, + withEnvironment, )(SignInPageContent); From 8920c49e498f90dfa8db1173bc98c397ec4d6015 Mon Sep 17 00:00:00 2001 From: David Bondy Date: Mon, 8 May 2023 15:55:45 -0600 Subject: [PATCH 13/30] linter fixes --- src/components/ExpensifyWordmark.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.js index 0187d0905189..109af767341b 100644 --- a/src/components/ExpensifyWordmark.js +++ b/src/components/ExpensifyWordmark.js @@ -10,7 +10,6 @@ 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'; @@ -19,13 +18,12 @@ const propTypes = { ...windowDimensionsPropTypes, /** The styles to apply for the View wrapping the svg */ - containerStyles: PropTypes.array, + containerStyles: PropTypes.arrayOf(PropTypes.object), /** Fill color of the svg */ color: PropTypes.string, }; - const defaultProps = { containerStyles: [], color: themeColors.success, From 64de69bae63e91dff1ccc3dab8ff8e96daacd85e Mon Sep 17 00:00:00 2001 From: David Bondy Date: Mon, 8 May 2023 15:59:16 -0600 Subject: [PATCH 14/30] fixing proptypes b/c linter complains --- src/components/ExpensifyWordmark.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.js index 109af767341b..1bcc02e1a82d 100644 --- a/src/components/ExpensifyWordmark.js +++ b/src/components/ExpensifyWordmark.js @@ -18,7 +18,7 @@ const propTypes = { ...windowDimensionsPropTypes, /** The styles to apply for the View wrapping the svg */ - containerStyles: PropTypes.arrayOf(PropTypes.object), + containerStyles: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.string)), /** Fill color of the svg */ color: PropTypes.string, From 2d1eb9b90a6b8b120a91af484c79902bd9d98d13 Mon Sep 17 00:00:00 2001 From: David Bondy Date: Mon, 8 May 2023 16:07:17 -0600 Subject: [PATCH 15/30] remove the unneeded badge component from header component --- src/components/Header.js | 7 ------- src/stories/Header.stories.js | 1 - 2 files changed, 8 deletions(-) diff --git a/src/components/Header.js b/src/components/Header.js index 01752e8e0740..7016631b95a8 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -13,16 +13,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 +33,6 @@ const Header = props => ( ? Boolean(props.subtitle) && {props.subtitle} : props.subtitle} - {props.shouldShowEnvironmentBadge && ( - - )} ); diff --git a/src/stories/Header.stories.js b/src/stories/Header.stories.js index 09c13b54d7d6..1cdc1d7c9c37 100644 --- a/src/stories/Header.stories.js +++ b/src/stories/Header.stories.js @@ -19,7 +19,6 @@ const Template = args =>
; const Default = Template.bind({}); Default.args = { title: 'Chats', - shouldShowEnvironmentBadge: true, }; export default story; From 8d25d70a66956699794d3345d7d548c5d1fd85e1 Mon Sep 17 00:00:00 2001 From: David Bondy Date: Mon, 8 May 2023 16:07:28 -0600 Subject: [PATCH 16/30] include const lib --- src/pages/signin/SignInPageLayout/SignInPageContent.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 3e0bdb6d3421..9904e478f4b0 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -14,6 +14,7 @@ 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 */ From b4aee41a456f53fa701982a7423cfcb2daf88eb0 Mon Sep 17 00:00:00 2001 From: David Bondy Date: Mon, 8 May 2023 16:11:07 -0600 Subject: [PATCH 17/30] remove unneeded import --- src/components/Header.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Header.js b/src/components/Header.js index 7016631b95a8..77dd4e60f5a1 100644 --- a/src/components/Header.js +++ b/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 */ From 24c325926bed24491cf50f59e2aa2cbb4ef297af Mon Sep 17 00:00:00 2001 From: David Bondy Date: Mon, 8 May 2023 16:21:06 -0600 Subject: [PATCH 18/30] linter be damned this is what works --- src/components/ExpensifyWordmark.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.js index 1bcc02e1a82d..109af767341b 100644 --- a/src/components/ExpensifyWordmark.js +++ b/src/components/ExpensifyWordmark.js @@ -18,7 +18,7 @@ const propTypes = { ...windowDimensionsPropTypes, /** The styles to apply for the View wrapping the svg */ - containerStyles: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.string)), + containerStyles: PropTypes.arrayOf(PropTypes.object), /** Fill color of the svg */ color: PropTypes.string, From a29631b947530833f4722adf56fa9e267850176b Mon Sep 17 00:00:00 2001 From: David Bondy Date: Tue, 9 May 2023 13:52:19 -0600 Subject: [PATCH 19/30] import style props to appease linter --- src/components/ExpensifyWordmark.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.js index 109af767341b..942ee58f9c8b 100644 --- a/src/components/ExpensifyWordmark.js +++ b/src/components/ExpensifyWordmark.js @@ -12,13 +12,14 @@ import compose from '../libs/compose'; import themeColors from '../styles/themes/default'; 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: PropTypes.arrayOf(PropTypes.object), + containerStyles: stylePropTypes, /** Fill color of the svg */ color: PropTypes.string, From e76740c0577c371eb1ecfb98f1334d0f63ad8da2 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 12 May 2023 03:27:28 +0530 Subject: [PATCH 20/30] Fix the icon --- src/pages/home/sidebar/SidebarLinks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 9a6c23d0861b..e6d1b5129941 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -148,7 +148,7 @@ class SidebarLinks extends React.Component { style={[styles.flexRow, styles.ph5, styles.pv3, styles.justifyContentBetween, styles.alignItemsCenter]} nativeID="drag-area" > - + From b9e5209cd22ea499072bbffa866ff9af91fc2931 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 12 May 2023 04:11:39 +0530 Subject: [PATCH 21/30] Logo dimensions adjustments --- src/components/ExpensifyWordmark.js | 11 ++++++----- src/pages/home/sidebar/SidebarLinks.js | 7 ++++++- src/styles/StyleUtils.js | 8 ++++++++ src/styles/variables.js | 3 +++ 4 files changed, 23 insertions(+), 6 deletions(-) diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.js index d2416779e078..6723640cbbec 100644 --- a/src/components/ExpensifyWordmark.js +++ b/src/components/ExpensifyWordmark.js @@ -41,11 +41,12 @@ const ExpensifyWordmark = (props) => { const LogoComponent = logoComponents[props.environment] || AdHocLogo; return ( <> - diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index e6d1b5129941..aef816e155e4 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -6,6 +6,7 @@ import _ from 'underscore'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import {Freeze} from 'react-freeze'; +import withEnvironment, {environmentPropTypes} from '../../../components/withEnvironment'; import styles from '../../../styles/styles'; import * as StyleUtils from '../../../styles/StyleUtils'; import ONYXKEYS from '../../../ONYXKEYS'; @@ -32,6 +33,7 @@ import OfflineWithFeedback from '../../../components/OfflineWithFeedback'; import ExpensifyWordmark from '../../../components/ExpensifyWordmark'; import defaultTheme from '../../../styles/themes/default'; import OptionsListSkeletonView from '../../../components/OptionsListSkeletonView'; +import variables from '../../../styles/variables'; const propTypes = { /** Toggles the navigation menu open and closed */ @@ -77,6 +79,7 @@ const propTypes = { priorityMode: PropTypes.string, ...withLocalizePropTypes, + ...environmentPropTypes, }; const defaultProps = { @@ -148,9 +151,10 @@ class SidebarLinks extends React.Component { style={[styles.flexRow, styles.ph5, styles.pv3, styles.justifyContentBetween, styles.alignItemsCenter]} nativeID="drag-area" > - + @@ -286,6 +290,7 @@ export default compose( withLocalize, withCurrentUserPersonalDetails, withWindowDimensions, + withEnvironment, withOnyx({ // Note: It is very important that the keys subscribed to here are the same // keys that are subscribed to at the top of SidebarUtils.js. If there was a key missing from here and data was updated diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 1b43a12b253c..b27913c56c7a 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -369,6 +369,13 @@ function getSignInWordmarkWidthStyle(environment, isSmallScreenWidth) { return isSmallScreenWidth ? {width: variables.signInLogoWidthPill} : {width: variables.signInLogoWidthLargeScreenPill}; } +function getLHNWordmarkWidthStyle(environment) { + if (environment === CONST.ENVIRONMENT.PRODUCTION) { + return {width: variables.lhnLogoWidth}; + } + return {width: variables.lhnLogoWidthPill}; +} + /** * Converts a color in hexadecimal notation into RGB notation. * @@ -1174,6 +1181,7 @@ export { getDirectionStyle, getFontSizeStyle, getSignInWordmarkWidthStyle, + getLHNWordmarkWidthStyle, getGoogleListViewStyle, getMentionStyle, getMentionTextColor, diff --git a/src/styles/variables.js b/src/styles/variables.js index f6bc4b2fe16c..683bcc2d02a9 100644 --- a/src/styles/variables.js +++ b/src/styles/variables.js @@ -123,9 +123,12 @@ export default { signInContentMinHeight: 800, signInLogoHeightSmallScreen: 28, signInLogoHeight: 34, + lhnLogoHeight: 30, signInLogoWidth: 120, signInLogoWidthLargeScreen: 144, signInLogoWidthPill: 132, + lhnLogoWidth: 126, + lhnLogoWidthPill: 140, signInLogoWidthLargeScreenPill: 162, modalContentMaxWidth: 360, listItemHeightNormal: 64, From af95cb1fee6690dc5b6fecd534587c0620efa453 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 16 May 2023 21:23:40 +0530 Subject: [PATCH 22/30] New design for header --- src/components/Badge.js | 7 ++++++- src/components/EnvironmentBadge.js | 3 ++- src/components/Header.js | 25 ++++++++++++++++++------- src/pages/home/sidebar/SidebarLinks.js | 20 +++++++++++++------- src/styles/StyleUtils.js | 8 -------- src/styles/styles.js | 11 +++++++++++ src/styles/variables.js | 5 ++--- 7 files changed, 52 insertions(+), 27 deletions(-) diff --git a/src/components/Badge.js b/src/components/Badge.js index f1a2ff0772c4..9ab9614ef37c 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 */ + // 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 78830018ba50..efbc1529e8f9 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -4,32 +4,42 @@ 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 */ - title: PropTypes.string.isRequired, + title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), /** 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 = { + 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) && ( @@ -42,6 +52,7 @@ const Header = (props) => ( ) : props.subtitle} + {props.shouldShowEnvironmentBadge && } ); diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index aef816e155e4..40455933b107 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -30,10 +30,11 @@ import LHNOptionsList from '../../../components/LHNOptionsList/LHNOptionsList'; import SidebarUtils from '../../../libs/SidebarUtils'; import reportPropTypes from '../../reportPropTypes'; import OfflineWithFeedback from '../../../components/OfflineWithFeedback'; -import ExpensifyWordmark from '../../../components/ExpensifyWordmark'; +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 */ @@ -151,12 +152,17 @@ class SidebarLinks extends React.Component { style={[styles.flexRow, styles.ph5, styles.pv3, styles.justifyContentBetween, styles.alignItemsCenter]} nativeID="drag-area" > - - - +
+ } + accessibilityRole="text" + shouldShowEnvironmentBadge + /> Date: Tue, 16 May 2023 21:25:49 +0530 Subject: [PATCH 23/30] Code cleanuo --- src/components/Badge.js | 2 +- src/pages/home/sidebar/SidebarLinks.js | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/Badge.js b/src/components/Badge.js index 9ab9614ef37c..01861c6c30ff 100644 --- a/src/components/Badge.js +++ b/src/components/Badge.js @@ -26,7 +26,7 @@ const propTypes = { // eslint-disable-next-line react/forbid-prop-types badgeStyles: PropTypes.arrayOf(PropTypes.object), - /** Styles for Badge */ + /** Styles for Badge Text */ // eslint-disable-next-line react/forbid-prop-types textStyles: PropTypes.arrayOf(PropTypes.object), diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 40455933b107..d48ca795a3e8 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -6,7 +6,6 @@ import _ from 'underscore'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import {Freeze} from 'react-freeze'; -import withEnvironment, {environmentPropTypes} from '../../../components/withEnvironment'; import styles from '../../../styles/styles'; import * as StyleUtils from '../../../styles/StyleUtils'; import ONYXKEYS from '../../../ONYXKEYS'; @@ -80,7 +79,6 @@ const propTypes = { priorityMode: PropTypes.string, ...withLocalizePropTypes, - ...environmentPropTypes, }; const defaultProps = { @@ -296,7 +294,6 @@ export default compose( withLocalize, withCurrentUserPersonalDetails, withWindowDimensions, - withEnvironment, withOnyx({ // Note: It is very important that the keys subscribed to here are the same // keys that are subscribed to at the top of SidebarUtils.js. If there was a key missing from here and data was updated From f10b4e80826f5038a89958ac9806240108af346b Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 16 May 2023 21:29:36 +0530 Subject: [PATCH 24/30] More refactor to clean the code --- src/components/ExpensifyWordmark.js | 8 ++++---- src/styles/styles.js | 1 + 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.js index 6723640cbbec..bd750fcf1c4d 100644 --- a/src/components/ExpensifyWordmark.js +++ b/src/components/ExpensifyWordmark.js @@ -15,14 +15,14 @@ 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, + + ...environmentPropTypes, + ...windowDimensionsPropTypes, }; const defaultProps = { @@ -45,7 +45,7 @@ const ExpensifyWordmark = (props) => { style={[ StyleUtils.getSignInWordmarkWidthStyle(props.environment, props.isSmallScreenWidth), StyleUtils.getHeight(props.isSmallScreenWidth ? variables.signInLogoHeightSmallScreen : variables.signInLogoHeight), - ...props.containerStyles, + ...StyleUtils.parseStyleAsArray(props.containerStyles), ]} > diff --git a/src/styles/styles.js b/src/styles/styles.js index f4f5a375115a..fe1a0437111b 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -3253,6 +3253,7 @@ const styles = { paddingLeft: 4, paddingRight: 4, }, + headerEnvBadgeText: { fontSize: 7, }, From bae718be12338e9e327c226bc2e830dc28bc931b Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 16 May 2023 21:35:58 +0530 Subject: [PATCH 25/30] Revert Changes --- src/components/ExpensifyWordmark.js | 19 +++---------------- .../SignInPageLayout/SignInPageContent.js | 9 ++------- src/stories/Header.stories.js | 1 + 3 files changed, 6 insertions(+), 23 deletions(-) diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.js index bd750fcf1c4d..7d693e468bdf 100644 --- a/src/components/ExpensifyWordmark.js +++ b/src/components/ExpensifyWordmark.js @@ -1,6 +1,5 @@ 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'; @@ -10,26 +9,15 @@ 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 = { - /** The styles to apply for the View wrapping the svg */ - containerStyles: stylePropTypes, - - /** Fill color of the svg */ - color: PropTypes.string, - ...environmentPropTypes, ...windowDimensionsPropTypes, }; -const defaultProps = { - containerStyles: [], - color: themeColors.success, -}; - const logoComponents = { [CONST.ENVIRONMENT.DEV]: DevLogo, [CONST.ENVIRONMENT.STAGING]: StagingLogo, @@ -45,10 +33,10 @@ const ExpensifyWordmark = (props) => { style={[ StyleUtils.getSignInWordmarkWidthStyle(props.environment, props.isSmallScreenWidth), StyleUtils.getHeight(props.isSmallScreenWidth ? variables.signInLogoHeightSmallScreen : variables.signInLogoHeight), - ...StyleUtils.parseStyleAsArray(props.containerStyles), + props.isSmallScreenWidth && (props.environment === CONST.ENVIRONMENT.DEV || props.environment === CONST.ENVIRONMENT.STAGING) ? styles.ml3 : {}, ]} > - + ); @@ -56,6 +44,5 @@ const ExpensifyWordmark = (props) => { ExpensifyWordmark.displayName = 'ExpensifyWordmark'; ExpensifyWordmark.propTypes = propTypes; -ExpensifyWordmark.defaultProps = defaultProps; export default compose(withEnvironment, withWindowDimensions)(ExpensifyWordmark); diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 7ec5f489de18..3f1dea8997d9 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -13,8 +13,6 @@ 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 */ @@ -36,7 +34,6 @@ const propTypes = { ...withLocalizePropTypes, ...windowDimensionsPropTypes, - ...environmentPropTypes, }; const SignInPageContent = (props) => ( @@ -52,9 +49,7 @@ const SignInPageContent = (props) => ( - + {props.shouldShowWelcomeHeader && props.welcomeHeader ? ( @@ -92,4 +87,4 @@ const SignInPageContent = (props) => ( SignInPageContent.propTypes = propTypes; SignInPageContent.displayName = 'SignInPageContent'; -export default compose(withWindowDimensions, withLocalize, withSafeAreaInsets, withEnvironment)(SignInPageContent); +export default compose(withWindowDimensions, withLocalize, withSafeAreaInsets)(SignInPageContent); diff --git a/src/stories/Header.stories.js b/src/stories/Header.stories.js index e16965894af8..1b11f9a752c1 100644 --- a/src/stories/Header.stories.js +++ b/src/stories/Header.stories.js @@ -19,6 +19,7 @@ const Template = (args) =>
; const Default = Template.bind({}); Default.args = { title: 'Chats', + shouldShowEnvironmentBadge: true, }; export default story; From c09f945ef1ed078e82c0ac9522c476f445b8544d Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 16 May 2023 21:40:24 +0530 Subject: [PATCH 26/30] Remove left gap from badge --- src/styles/styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index fe1a0437111b..b59dccb2311f 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -3247,7 +3247,7 @@ const styles = { }, headerEnvBadge: { - marginLeft: 2, + marginLeft: 0, marginBottom: 2, height: 12, paddingLeft: 4, From ea3d582f70b2fdb22ecc0339f12ccc8e0c0aee29 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 16 May 2023 21:41:33 +0530 Subject: [PATCH 27/30] Reset changes --- src/components/ExpensifyWordmark.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.js index 7d693e468bdf..376f83f886d4 100644 --- a/src/components/ExpensifyWordmark.js +++ b/src/components/ExpensifyWordmark.js @@ -44,5 +44,4 @@ const ExpensifyWordmark = (props) => { ExpensifyWordmark.displayName = 'ExpensifyWordmark'; ExpensifyWordmark.propTypes = propTypes; - export default compose(withEnvironment, withWindowDimensions)(ExpensifyWordmark); From fdb9b396ee0395087290aed42c54db16a85afe0b Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 16 May 2023 21:43:51 +0530 Subject: [PATCH 28/30] font weight bold --- src/styles/styles.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/styles.js b/src/styles/styles.js index b59dccb2311f..07e495621f4a 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -3256,6 +3256,7 @@ const styles = { headerEnvBadgeText: { fontSize: 7, + fontWeight: fontWeightBold, }, }; From 898cf53ffd6bafc1cefb6128c513d553ad2e6a41 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 16 May 2023 21:58:25 +0530 Subject: [PATCH 29/30] lineHeight Auto --- src/styles/styles.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/styles/styles.js b/src/styles/styles.js index 07e495621f4a..4ccd4714d59a 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -3252,11 +3252,13 @@ const styles = { height: 12, paddingLeft: 4, paddingRight: 4, + alignItems: 'center', }, headerEnvBadgeText: { fontSize: 7, fontWeight: fontWeightBold, + lineHeight: undefined, }, }; From ca85fadee8b996ebd42636fd68bf065a69fae057 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 16 May 2023 22:07:18 +0530 Subject: [PATCH 30/30] Lint fixes --- src/components/Header.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Header.js b/src/components/Header.js index efbc1529e8f9..1605231994ba 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -32,12 +32,12 @@ const Header = (props) => ( {_.isString(props.title) ? Boolean(props.title) && ( - - {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 */}