Merge pull request #36655 from dukenv0307/fix/35785

fix breadcumbs font auto scaling
Expensify · Mar 11, 2024 · 3d4504e · 3d4504e
2 parents ab1997d + 9d77850
commit 3d4504e
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 10 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -98,6 +98,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
@@ -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() > CONST.LOGO_MAX_SCALE ? CONST.LOGO_MAX_SCALE : PixelRatio.getFontScale();
     return (
         <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1, styles.w100, styles.breadcrumsContainer, style]}>
             {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
@@ -1512,25 +1512,23 @@ const styles = (theme: ThemeColors) =>
         },
 
         breadcrumsContainer: {
-            height: 24,
+            minHeight: 24,
         },
 
         breadcrumb: {
             color: theme.textSupporting,
-            fontSize: variables.fontSizeh1,
-            lineHeight: variables.lineHeightSizeh1,
+            fontSize: variables.breadcrumbsFontSize,
             ...headlineFont,
         },
 
         breadcrumbStrong: {
             color: theme.text,
-            fontSize: variables.fontSizeXLarge,
+            fontSize: variables.breadcrumbsFontSize,
         },
 
         breadcrumbSeparator: {
             color: theme.icon,
-            fontSize: variables.fontSizeXLarge,
-            lineHeight: variables.lineHeightSizeh1,
+            fontSize: variables.breadcrumbsFontSize,
             ...headlineFont,
         },
 

diff --git 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),