From c1086d220d67d2356b26dc72160ad21e0c14b7eb Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Fri, 16 Feb 2024 10:13:57 +0700 Subject: [PATCH 1/5] fix breadcumbs font auto scaling --- src/components/Breadcrumbs.tsx | 9 ++++++++- src/components/Text.tsx | 7 +++++-- src/styles/index.ts | 2 -- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx index 34bc3f7e30c8..d4c1a980e13d 100644 --- a/src/components/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs.tsx @@ -58,6 +58,7 @@ function Breadcrumbs({breadcrumbs, style}: BreadcrumbsProps) { {primaryBreadcrumb.text} @@ -65,10 +66,16 @@ function Breadcrumbs({breadcrumbs, style}: BreadcrumbsProps) { {!!secondaryBreadcrumb && ( <> - / + + / + {secondaryBreadcrumb.text} diff --git a/src/components/Text.tsx b/src/components/Text.tsx index b94530a423f7..05807b1b4b74 100644 --- a/src/components/Text.tsx +++ b/src/components/Text.tsx @@ -27,7 +27,10 @@ type TextProps = RNTextProps & family?: keyof FontUtilsType['fontFamily']['platform']; }; -function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', children, family = 'EXP_NEUE', style = {}, ...props}: TextProps, ref: ForwardedRef) { +function Text( + {color, fontSize = variables.fontSizeNormal, textAlign = 'left', allowFontScaling = false, children, family = 'EXP_NEUE', style = {}, ...props}: TextProps, + ref: ForwardedRef, +) { const theme = useTheme(); const componentStyle: TextStyle = { @@ -44,7 +47,7 @@ function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', c return ( breadcrumb: { color: theme.textSupporting, fontSize: variables.fontSizeh1, - lineHeight: variables.lineHeightSizeh1, ...headlineFont, }, @@ -1489,7 +1488,6 @@ const styles = (theme: ThemeColors) => breadcrumbSeparator: { color: theme.icon, fontSize: variables.fontSizeXLarge, - lineHeight: variables.lineHeightSizeh1, ...headlineFont, }, From 8d09e60158b027e3c4abc8d2ff994687a0a0c201 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Tue, 20 Feb 2024 11:22:28 +0700 Subject: [PATCH 2/5] fix: breadcrums height --- src/styles/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 91e55161e6fe..43edcccc2c83 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1471,7 +1471,7 @@ const styles = (theme: ThemeColors) => }, breadcrumsContainer: { - height: 24, + minHeight: 24, }, breadcrumb: { From 3358cba40501354dc4c7346f027281b78a48c688 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Tue, 5 Mar 2024 10:42:27 +0700 Subject: [PATCH 3/5] fix: change logic scale breadscrumbs size --- src/components/Breadcrumbs.tsx | 9 +-------- src/components/Text.tsx | 7 ++----- src/styles/index.ts | 4 ++-- src/styles/variables.ts | 1 + 4 files changed, 6 insertions(+), 15 deletions(-) diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx index d4c1a980e13d..34bc3f7e30c8 100644 --- a/src/components/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs.tsx @@ -58,7 +58,6 @@ function Breadcrumbs({breadcrumbs, style}: BreadcrumbsProps) { {primaryBreadcrumb.text} @@ -66,16 +65,10 @@ function Breadcrumbs({breadcrumbs, style}: BreadcrumbsProps) { {!!secondaryBreadcrumb && ( <> - - / - + / {secondaryBreadcrumb.text} diff --git a/src/components/Text.tsx b/src/components/Text.tsx index 05807b1b4b74..b94530a423f7 100644 --- a/src/components/Text.tsx +++ b/src/components/Text.tsx @@ -27,10 +27,7 @@ type TextProps = RNTextProps & family?: keyof FontUtilsType['fontFamily']['platform']; }; -function Text( - {color, fontSize = variables.fontSizeNormal, textAlign = 'left', allowFontScaling = false, children, family = 'EXP_NEUE', style = {}, ...props}: TextProps, - ref: ForwardedRef, -) { +function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', children, family = 'EXP_NEUE', style = {}, ...props}: TextProps, ref: ForwardedRef) { const theme = useTheme(); const componentStyle: TextStyle = { @@ -47,7 +44,7 @@ function Text( return ( breadcrumb: { color: theme.textSupporting, - fontSize: variables.fontSizeh1, + fontSize: variables.breadcrumbsFontSize, ...headlineFont, }, breadcrumbStrong: { color: theme.text, - fontSize: variables.fontSizeXLarge, + fontSize: variables.breadcrumbsFontSize, }, breadcrumbSeparator: { diff --git a/src/styles/variables.ts b/src/styles/variables.ts index c6c29fdc4b79..a6a084f466d0 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -47,6 +47,7 @@ export default { avatarSizeSmallSubscript: 12, defaultAvatarPreviewSize: 360, fabBottom: 25, + breadcrumbsFontSize: getValueUsingPixelRatio(19, 32), fontSizeOnlyEmojis: 30, fontSizeOnlyEmojisHeight: 35, fontSizeSmall: getValueUsingPixelRatio(11, 17), From 12d6e5eefdca1749450fe39593ec4b097d3c7944 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 6 Mar 2024 17:16:05 +0700 Subject: [PATCH 4/5] fix: add logo scale --- src/components/Breadcrumbs.tsx | 8 ++++---- src/styles/index.ts | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx index 34bc3f7e30c8..a50f2dafb878 100644 --- a/src/components/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs.tsx @@ -1,6 +1,6 @@ import React from 'react'; import type {StyleProp, ViewStyle} from 'react-native'; -import {View} from 'react-native'; +import {PixelRatio, View} from 'react-native'; import LogoComponent from '@assets/images/expensify-wordmark.svg'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -36,7 +36,7 @@ function Breadcrumbs({breadcrumbs, style}: BreadcrumbsProps) { const theme = useTheme(); const styles = useThemeStyles(); const [primaryBreadcrumb, secondaryBreadcrumb] = breadcrumbs; - + const fontScale = PixelRatio.getFontScale() > 1.5 ? 1.5 : PixelRatio.getFontScale(); return ( {primaryBreadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT ? ( @@ -47,8 +47,8 @@ function Breadcrumbs({breadcrumbs, style}: BreadcrumbsProps) { contentFit="contain" src={LogoComponent} fill={theme.text} - width={variables.lhnLogoWidth} - height={variables.lhnLogoHeight} + width={variables.lhnLogoWidth * fontScale} + height={variables.lhnLogoHeight * fontScale} /> } shouldShowEnvironmentBadge diff --git a/src/styles/index.ts b/src/styles/index.ts index fdd1e33d9920..c672fdb8948c 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1528,7 +1528,7 @@ const styles = (theme: ThemeColors) => breadcrumbSeparator: { color: theme.icon, - fontSize: variables.fontSizeXLarge, + fontSize: variables.breadcrumbsFontSize, ...headlineFont, }, From 9d77850c217364b8aa4a20ee303a2de3ab5d806c Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Mon, 11 Mar 2024 13:28:21 +0700 Subject: [PATCH 5/5] fix add const --- src/CONST.ts | 2 ++ src/components/Breadcrumbs.tsx | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/CONST.ts b/src/CONST.ts index 1e3b33d5d760..755691698286 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -92,6 +92,8 @@ const CONST = { AVATAR_MAX_WIDTH_PX: 4096, AVATAR_MAX_HEIGHT_PX: 4096, + LOGO_MAX_SCALE: 1.5, + BREADCRUMB_TYPE: { ROOT: 'root', STRONG: 'strong', diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx index a50f2dafb878..e5eb09691eba 100644 --- a/src/components/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs.tsx @@ -36,7 +36,7 @@ function Breadcrumbs({breadcrumbs, style}: BreadcrumbsProps) { const theme = useTheme(); const styles = useThemeStyles(); const [primaryBreadcrumb, secondaryBreadcrumb] = breadcrumbs; - const fontScale = PixelRatio.getFontScale() > 1.5 ? 1.5 : PixelRatio.getFontScale(); + const fontScale = PixelRatio.getFontScale() > CONST.LOGO_MAX_SCALE ? CONST.LOGO_MAX_SCALE : PixelRatio.getFontScale(); return ( {primaryBreadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT ? (