Logo dimensions adjustments

ojasjadhav2 · May 11, 2023 · b9e5209 · b9e5209
1 parent e76740c
commit b9e5209
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.js
@@ -41,11 +41,12 @@ const ExpensifyWordmark = (props) => {
     const LogoComponent = logoComponents[props.environment] || AdHocLogo;
     return (
         <>
-            <View style={[
-                StyleUtils.getSignInWordmarkWidthStyle(props.environment, props.isSmallScreenWidth),
-                StyleUtils.getHeight(props.isSmallScreenWidth ? variables.signInLogoHeightSmallScreen : variables.signInLogoHeight),
-                ...props.containerStyles,
-            ]}
+            <View
+                style={[
+                    StyleUtils.getSignInWordmarkWidthStyle(props.environment, props.isSmallScreenWidth),
+                    StyleUtils.getHeight(props.isSmallScreenWidth ? variables.signInLogoHeightSmallScreen : variables.signInLogoHeight),
+                    ...props.containerStyles,
+                ]}
             >
                 <LogoComponent fill={props.color} />
             </View>

diff --git 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"
                 >
-                    <View style={[styles.flex1, styles.flexRows]}>
+                    <View style={[styles.flex1, styles.flexRow]}>
                         <ExpensifyWordmark
                             color={defaultTheme.textLight}
+                            containerStyles={[StyleUtils.getLHNWordmarkWidthStyle(this.props.environment, this.props.isSmallScreenWidth), StyleUtils.getHeight(variables.lhnLogoHeight)]}
                         />
                     </View>
                     <Tooltip text={this.props.translate('common.search')}>
@@ -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
@@ -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
@@ -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,