Merge pull request #27137 from ZhenjaHorbach/fix/money-text-in-wallet…

…-badge-is-not-center-vertically
Expensify · Sep 18, 2023 · 099fac6 · 099fac6
2 parents 4d97719 + 8f6dd92
commit 099fac6
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -29,6 +29,8 @@ import textUnderline from './utilities/textUnderline';
 
 // touchCallout is an iOS safari only property that controls the display of the callout information when you touch and hold a target
 const touchCalloutNone = Browser.isMobileSafari() ? {WebkitTouchCallout: 'none'} : {};
+// to prevent vertical text offset in Safari for badges, new lineHeight values have been added
+const lineHeightBadge = Browser.isSafari() ? {lineHeight: variables.lineHeightXSmall} : {lineHeight: variables.lineHeightNormal};
 
 const picker = (theme) => ({
     backgroundColor: theme.transparent,
@@ -758,7 +760,7 @@ const styles = (theme) => ({
     badgeText: {
         color: theme.text,
         fontSize: variables.fontSizeSmall,
-        lineHeight: variables.lineHeightNormal,
+        ...lineHeightBadge,
         ...whiteSpace.noWrap,
     },
 

diff --git a/src/styles/variables.ts b/src/styles/variables.ts
@@ -88,6 +88,7 @@ export default {
     optionRowHeightCompact: 52,
     optionsListSectionHeaderHeight: getValueUsingPixelRatio(32, 38),
     overlayOpacity: 0.6,
+    lineHeightXSmall: getValueUsingPixelRatio(11, 17),
     lineHeightSmall: getValueUsingPixelRatio(14, 16),
     lineHeightNormal: getValueUsingPixelRatio(16, 21),
     lineHeightLarge: getValueUsingPixelRatio(18, 24),