From bc45762119519cf1f1afa2a9c57402f1a0816ee1 Mon Sep 17 00:00:00 2001
From: Shridhar Goel <35566748+ShridharGoel@users.noreply.github.com>
Date: Mon, 7 Oct 2024 12:47:22 +0530
Subject: [PATCH 1/6] Use small icon in tabs

---
 src/components/TabSelector/TabIcon.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/TabSelector/TabIcon.tsx b/src/components/TabSelector/TabIcon.tsx
index 31833b2fc852..bd4e1b1e2fc3 100644
--- 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>
                 </>

From 10c5dfb2c171d8c26a4ac55c008ff51ae47c95ed Mon Sep 17 00:00:00 2001
From: Shridhar Goel <35566748+ShridharGoel@users.noreply.github.com>
Date: Fri, 18 Oct 2024 17:09:58 +0530
Subject: [PATCH 2/6] Update

---
 src/styles/index.ts     | 4 ++--
 src/styles/variables.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index 3ea14bb14515..2b7e488325d9 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4310,8 +4310,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
index dc6655791489..eb52fe2a0534 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -159,7 +159,7 @@ export default {
     signInLogoWidthLargeScreen: 144,
     signInLogoHeightLargeScreen: 108,
     signInLogoWidthPill: 132,
-    tabSelectorButtonHeight: 42,
+    tabSelectorButtonHeight: 40,
     tabSelectorButtonPadding: 12,
     lhnLogoWidth: 95.09,
     lhnLogoHeight: 22.33,

From 20d46864a9b1c586c36d641f2c5dc4d93f9de425 Mon Sep 17 00:00:00 2001
From: Shridhar Goel <35566748+ShridharGoel@users.noreply.github.com>
Date: Mon, 21 Oct 2024 20:24:57 +0530
Subject: [PATCH 3/6] Use 8 as icon margin for buttons

---
 src/components/Button/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 04607ef1cc7f..0a8aa1c69dad 100644
--- 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}
                                     hasText={!!text}

From d724165360acd97b0866981c583938ace5a98015 Mon Sep 17 00:00:00 2001
From: Shridhar Goel <35566748+ShridharGoel@users.noreply.github.com>
Date: Mon, 7 Oct 2024 12:47:22 +0530
Subject: [PATCH 4/6] Use small icon in tabs

---
 src/components/TabSelector/TabIcon.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/TabSelector/TabIcon.tsx b/src/components/TabSelector/TabIcon.tsx
index 31833b2fc852..bd4e1b1e2fc3 100644
--- 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>
                 </>

From 94b16372ed5dd3cee8426a2a64f325a9f3165e8c Mon Sep 17 00:00:00 2001
From: Shridhar Goel <35566748+ShridharGoel@users.noreply.github.com>
Date: Fri, 18 Oct 2024 17:09:58 +0530
Subject: [PATCH 5/6] Update

---
 src/styles/index.ts     | 4 ++--
 src/styles/variables.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index 3ea14bb14515..2b7e488325d9 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4310,8 +4310,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
index dc6655791489..eb52fe2a0534 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -159,7 +159,7 @@ export default {
     signInLogoWidthLargeScreen: 144,
     signInLogoHeightLargeScreen: 108,
     signInLogoWidthPill: 132,
-    tabSelectorButtonHeight: 42,
+    tabSelectorButtonHeight: 40,
     tabSelectorButtonPadding: 12,
     lhnLogoWidth: 95.09,
     lhnLogoHeight: 22.33,

From a94d103bcda66b25c6f97f4ba8f56f51411cda71 Mon Sep 17 00:00:00 2001
From: Shridhar Goel <35566748+ShridharGoel@users.noreply.github.com>
Date: Mon, 21 Oct 2024 20:24:57 +0530
Subject: [PATCH 6/6] Use 8 as icon margin for buttons

---
 src/components/Button/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 04607ef1cc7f..0a8aa1c69dad 100644
--- 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}
                                     hasText={!!text}