Merge pull request #19889 from daraksha-dk/daraksha-dk-fix-lineheight…

…-issue Fix spacing issue with headers when text is multiline
Expensify · Jun 1, 2023 · 98ae1ae · 98ae1ae
2 parents 1b46dab + 67f50bd
commit 98ae1ae
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 2 deletions.
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -56,6 +56,7 @@ const SignInPageContent = (props) => (
                             <Text
                                 style={[
                                     styles.loginHeroHeader,
+                                    StyleUtils.getLineHeightStyle(variables.lineHeightSignInHeroXSmall),
                                     StyleUtils.getFontSizeStyle(variables.fontSizeSignInHeroXSmall),
                                     !props.welcomeText ? styles.mb5 : {},
                                     !props.isSmallScreenWidth ? styles.textAlignLeft : {},

diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
@@ -965,6 +965,18 @@ function getFontSizeStyle(fontSize) {
     };
 }
 
+/**
+ * Returns lineHeight style
+ *
+ * @param {Number} lineHeight
+ * @returns {Object}
+ */
+function getLineHeightStyle(lineHeight) {
+    return {
+        lineHeight,
+    };
+}
+
 /**
  * Gets the correct size for the empty state container based on screen dimensions
  *
@@ -1208,6 +1220,7 @@ export {
     getEmojiReactionCounterTextStyle,
     getDirectionStyle,
     getFontSizeStyle,
+    getLineHeightStyle,
     getSignInWordmarkWidthStyle,
     getGoogleListViewStyle,
     getMentionStyle,

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -326,6 +326,7 @@ const styles = {
     textHero: {
         fontSize: variables.fontSizeHero,
         fontFamily: fontFamily.EXP_NEW_KANSAS_MEDIUM,
+        lineHeight: variables.lineHeightHero,
     },
 
     textStrong: {
@@ -343,13 +344,15 @@ const styles = {
         ...whiteSpace.preWrap,
         color: themeColors.heading,
         fontSize: variables.fontSizeXLarge,
+        lineHeight: variables.lineHeightXXLarge,
     },
 
     textHeadlineH1: {
         ...headlineFont,
         ...whiteSpace.preWrap,
         color: themeColors.heading,
         fontSize: variables.fontSizeh1,
+        lineHeight: variables.lineHeightSizeh1,
     },
 
     textDecorationNoLine: {
@@ -730,6 +733,7 @@ const styles = {
         color: themeColors.heading,
         fontFamily: fontFamily.EXP_NEW_KANSAS_MEDIUM,
         fontSize: variables.fontSizeXLarge,
+        lineHeight: variables.lineHeightXXLarge,
     },
 
     headerText: {
@@ -2047,6 +2051,7 @@ const styles = {
         ...headlineFont,
         color: themeColors.heading,
         fontSize: variables.fontSizeXLarge,
+        lineHeight: variables.lineHeightXXLarge,
         marginTop: 20,
         marginBottom: 8,
         textAlign: 'center',
@@ -3287,7 +3292,7 @@ const styles = {
     newKansasLarge: {
         ...headlineFont,
         fontSize: variables.fontSizeXLarge,
-        lineHeight: 27,
+        lineHeight: variables.lineHeightXXLarge,
     },
 
     moneyRequestHeaderCheckmark: {

diff --git a/src/styles/variables.js b/src/styles/variables.js
@@ -59,7 +59,7 @@ export default {
     fontSizeSignInHeroXSmall: 26,
     fontSizeSignInHeroSmall: 28,
     fontSizeSignInHeroBody: 20,
-    lineHeightHero: 40,
+    lineHeightHero: 45,
     iconSizeXXXSmall: 4,
     iconSizeXXSmall: 8,
     iconSizeExtraSmall: 12,
@@ -90,6 +90,8 @@ export default {
     lineHeightLarge: getValueUsingPixelRatio(18, 24),
     lineHeightXLarge: getValueUsingPixelRatio(20, 24),
     lineHeightXXLarge: getValueUsingPixelRatio(27, 32),
+    lineHeightSizeh1: getValueUsingPixelRatio(23, 28),
+    lineHeightSignInHeroXSmall: getValueUsingPixelRatio(32, 37),
     inputHeight: getValueUsingPixelRatio(52, 72),
     inputHeightSmall: 28,
     formErrorLineHeight: getValueUsingPixelRatio(18, 23),