From d9260f440c9e8f750cc7bed665cce3642e8fd34f Mon Sep 17 00:00:00 2001 From: Yauheni Date: Mon, 11 Sep 2023 13:03:08 +0200 Subject: [PATCH 1/8] Fix styles for wallet money badge which is not center vertically --- src/styles/styles.js | 2 +- src/styles/variables.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 1c1340600a51..4c4ad70eea40 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -760,7 +760,7 @@ const styles = { badgeText: { color: themeColors.text, fontSize: variables.fontSizeSmall, - lineHeight: variables.lineHeightNormal, + lineHeight: variables.lineHeightXSmall, ...whiteSpace.noWrap, }, diff --git a/src/styles/variables.ts b/src/styles/variables.ts index eb182ab1eca0..eccfc61795b8 100644 --- 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), From 72ade3dc942914bf416b0f8b88075ec81ed5b5fb Mon Sep 17 00:00:00 2001 From: Yauheni Date: Mon, 11 Sep 2023 14:54:10 +0200 Subject: [PATCH 2/8] Update styles for safari --- src/styles/styles.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 4c4ad70eea40..e90591c9e720 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -32,6 +32,8 @@ import Colors from './colors'; // 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'} : {}; +const lineHeightBadgeSafari = Browser.isSafari() ? {lineHeight: variables.lineHeightXSmall} : {}; + const picker = { backgroundColor: themeColors.transparent, color: themeColors.text, @@ -760,7 +762,8 @@ const styles = { badgeText: { color: themeColors.text, fontSize: variables.fontSizeSmall, - lineHeight: variables.lineHeightXSmall, + lineHeight: variables.lineHeightNormal, + ...lineHeightBadgeSafari, ...whiteSpace.noWrap, }, From 79086884d390450b99d8b4750f940acef9a738c2 Mon Sep 17 00:00:00 2001 From: Yauheni Date: Wed, 13 Sep 2023 09:20:20 +0200 Subject: [PATCH 3/8] Refactor styles --- src/components/MenuItem.js | 4 ++-- src/styles/styles.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index adf3fa0cdd80..890933ce8093 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -266,9 +266,9 @@ const MenuItem = React.forwardRef((props, ref) => { - {Boolean(props.badgeText) && ( + {true && ( Date: Wed, 13 Sep 2023 09:23:04 +0200 Subject: [PATCH 4/8] Revert changes --- src/components/MenuItem.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 890933ce8093..adf3fa0cdd80 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -266,9 +266,9 @@ const MenuItem = React.forwardRef((props, ref) => { - {true && ( + {Boolean(props.badgeText) && ( Date: Fri, 15 Sep 2023 00:18:34 +0200 Subject: [PATCH 5/8] Fix conflicts --- 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 f07d7d43be9d..f863f56d27f2 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -34,7 +34,7 @@ const touchCalloutNone = Browser.isMobileSafari() ? {WebkitTouchCallout: 'none'} const lineHeightBadge = getPlatform() === CONST.PLATFORM.WEB ? {lineHeight: variables.lineHeightXSmall} : {lineHeight: variables.lineHeightNormal}; -const picker = { +const picker = (theme) => ({ backgroundColor: theme.transparent, color: theme.text, fontFamily: fontFamily.EXP_NEUE, From a524c898cd27ce4e573969024afd83c971fb889e Mon Sep 17 00:00:00 2001 From: Yauheni Date: Mon, 18 Sep 2023 09:05:26 +0200 Subject: [PATCH 6/8] Add comment --- 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 f863f56d27f2..a91320617690 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -31,7 +31,7 @@ import Colors from './colors'; // 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 browsers for badges, new lineHeight values have been added const lineHeightBadge = getPlatform() === CONST.PLATFORM.WEB ? {lineHeight: variables.lineHeightXSmall} : {lineHeight: variables.lineHeightNormal}; const picker = (theme) => ({ From 5305a7bb534f3e3302e3a8f2c03d324801fcd86a Mon Sep 17 00:00:00 2001 From: Yauheni Date: Mon, 18 Sep 2023 10:21:00 +0200 Subject: [PATCH 7/8] Make changes only for Safari --- src/styles/styles.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index a91320617690..e4e9692c4d61 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -22,7 +22,6 @@ import pointerEventsAuto from './pointerEventsAuto'; import getPopOverVerticalOffset from './getPopOverVerticalOffset'; import overflowXHidden from './overflowXHidden'; import CONST from '../CONST'; -import getPlatform from '../libs/getPlatform'; import * as Browser from '../libs/Browser'; import cursor from './utilities/cursor'; import userSelect from './utilities/userSelect'; @@ -31,8 +30,8 @@ import Colors from './colors'; // 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 browsers for badges, new lineHeight values have been added -const lineHeightBadge = getPlatform() === CONST.PLATFORM.WEB ? {lineHeight: variables.lineHeightXSmall} : {lineHeight: variables.lineHeightNormal}; +// 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, From 8f6dd9264843d6711e613d326e219938c12be8cc Mon Sep 17 00:00:00 2001 From: Yauheni Date: Mon, 18 Sep 2023 10:21:39 +0200 Subject: [PATCH 8/8] Make changes only for Safari x2 --- 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 e4e9692c4d61..0c88d5aa74f5 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -31,7 +31,7 @@ import Colors from './colors'; // 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 lineHeightBadge = Browser.isSafari() ? {lineHeight: variables.lineHeightXSmall} : {lineHeight: variables.lineHeightNormal}; const picker = (theme) => ({ backgroundColor: theme.transparent,