Merge pull request #50324 from ShridharGoel/patch-20

Use small icon in tabs
Expensify · Nov 8, 2024 · 1fc5ae3 · 1fc5ae3
2 parents b26f96b + b9bf021
commit 1fc5ae3
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 4 deletions.
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -290,7 +290,7 @@ function Button(
                 <View style={[isContentCentered ? styles.justifyContentCenter : styles.justifyContentBetween, styles.flexRow]}>
                     <View style={[styles.alignItemsCenter, styles.flexRow, styles.flexShrink1]}>
                         {!!icon && (
-                            <View style={[large ? styles.mr2 : styles.mr1, !text && styles.mr0, iconStyles]}>
+                            <View style={[styles.mr2, !text && styles.mr0, iconStyles]}>
                                 <Icon
                                     src={icon}
                                     fill={isHovered ? iconHoverFill ?? defaultFill : iconFill ?? defaultFill}

diff --git a/src/components/TabSelector/TabIcon.tsx b/src/components/TabSelector/TabIcon.tsx
@@ -25,12 +25,14 @@ function TabIcon({icon, activeOpacity = 0, inactiveOpacity = 1}: TabIconProps) {
                         <Icon
                             src={icon}
                             fill={theme.icon}
+                            small
                         />
                     </Animated.View>
                     <Animated.View style={[StyleSheet.absoluteFill, {opacity: activeOpacity}]}>
                         <Icon
                             src={icon}
                             fill={theme.iconMenu}
+                            small
                         />
                     </Animated.View>
                 </>

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -4336,8 +4336,8 @@ const styles = (theme: ThemeColors) =>
                 marginLeft: 8,
                 ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
                 color: isSelected ? theme.text : theme.textSupporting,
-                lineHeight: variables.lineHeightNormal,
-                fontSize: variables.fontSizeNormal,
+                lineHeight: variables.lineHeightLarge,
+                fontSize: variables.fontSizeLabel,
             } satisfies TextStyle),
 
         tabBackground: (hovered: boolean, isFocused: boolean, background: string | Animated.AnimatedInterpolation<string>) => ({

diff --git a/src/styles/variables.ts b/src/styles/variables.ts
@@ -161,7 +161,7 @@ export default {
     signInLogoWidthLargeScreen: 144,
     signInLogoHeightLargeScreen: 108,
     signInLogoWidthPill: 132,
-    tabSelectorButtonHeight: 42,
+    tabSelectorButtonHeight: 40,
     tabSelectorButtonPadding: 12,
     lhnLogoWidth: 95.09,
     lhnLogoHeight: 22.33,