From e9a421f3b7323a7aad2370497d93010e0aee7f7d Mon Sep 17 00:00:00 2001
From: Filip Solecki <filip.solecki@swmansion.com>
Date: Mon, 19 Feb 2024 11:23:44 +0100
Subject: [PATCH 1/4] Adjust badge to new designs

---
 src/components/MenuItem.tsx | 1 +
 src/styles/index.ts         | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 8fc9c62bfb38..d0f9309b6632 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -573,6 +573,7 @@ function MenuItem(
                                 {badgeText && (
                                     <Badge
                                         text={badgeText}
+                                        textStyles={styles.menuItemBadge}
                                         badgeStyles={[
                                             styles.alignSelfCenter,
                                             brickRoadIndicator ? styles.mr2 : undefined,
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 856f8ece917c..ab2d1cae19c7 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -827,6 +827,8 @@ const styles = (theme: ThemeColors) =>
             borderWidth: 1,
             borderRadius: variables.componentBorderRadiusSmall,
             borderColor: theme.border,
+            paddingHorizontal: 12,
+            minHeight: 28,
         },
 
         badgeText: {
@@ -836,6 +838,11 @@ const styles = (theme: ThemeColors) =>
             ...whiteSpace.noWrap,
         },
 
+        menuItemBadge: {
+            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
+            fontWeight: FontUtils.fontWeight.bold,
+        },
+
         border: {
             borderWidth: 1,
             borderRadius: variables.componentBorderRadius,

From fcfed5c05bf022f8a5f05d9fe734dae57ed5ca1a Mon Sep 17 00:00:00 2001
From: Filip Solecki <filip.solecki@swmansion.com>
Date: Tue, 20 Feb 2024 07:59:58 +0100
Subject: [PATCH 2/4] Adjust badge for Wallet menu item

---
 src/pages/settings/InitialSettingsPage.js | 6 +++++-
 src/styles/index.ts                       | 4 ++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 941cdb2f0643..4474fd3173c6 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -265,6 +265,7 @@ function InitialSettingsPage(props) {
                     {_.map(menuItemsData.items, (item, index) => {
                         const keyTitle = item.translationKey ? translate(item.translationKey) : item.title;
                         const isPaymentItem = item.translationKey === 'common.wallet';
+                        const isFocusedItem = activeRoute && item.routeName && activeRoute.toLowerCase().replaceAll('_', '') === item.routeName.toLowerCase().replaceAll('/', '');
 
                         return (
                             <MenuItem
@@ -285,6 +286,7 @@ function InitialSettingsPage(props) {
                                 })}
                                 iconStyles={item.iconStyles}
                                 badgeText={getWalletBalance(isPaymentItem)}
+                                badgeStyle={[styles.badgeBordered, isFocusedItem ? styles.activeItemBadge : undefined]}
                                 fallbackIcon={item.fallbackIcon}
                                 brickRoadIndicator={item.brickRoadIndicator}
                                 floatRightAvatars={item.floatRightAvatars}
@@ -294,7 +296,7 @@ function InitialSettingsPage(props) {
                                 hoverAndPressStyle={styles.hoveredComponentBG}
                                 shouldBlockSelection={Boolean(item.link)}
                                 onSecondaryInteraction={item.link ? (event) => openPopover(item.link, event) : undefined}
-                                focused={activeRoute && item.routeName && activeRoute.toLowerCase().replaceAll('_', '') === item.routeName.toLowerCase().replaceAll('/', '')}
+                                focused={isFocusedItem}
                                 isPaneMenu
                                 iconRight={item.iconRight}
                                 shouldShowRightIcon={item.shouldShowRightIcon}
@@ -305,6 +307,8 @@ function InitialSettingsPage(props) {
             );
         },
         [
+            styles.badgeBordered,
+            styles.activeItemBadge,
             styles.pb4,
             styles.mh3,
             styles.sectionTitle,
diff --git a/src/styles/index.ts b/src/styles/index.ts
index ab2d1cae19c7..b1e43976829b 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -843,6 +843,10 @@ const styles = (theme: ThemeColors) =>
             fontWeight: FontUtils.fontWeight.bold,
         },
 
+        activeItemBadge: {
+            borderColor: theme.buttonHoveredBG,
+        },
+
         border: {
             borderWidth: 1,
             borderRadius: variables.componentBorderRadius,

From e597e1a1a51ab0df11ebe671d09f27392a70527a Mon Sep 17 00:00:00 2001
From: Filip Solecki <filip.solecki@swmansion.com>
Date: Tue, 20 Feb 2024 08:22:32 +0100
Subject: [PATCH 3/4] Remove unnecessary style

---
 src/components/MenuItem.tsx | 2 +-
 src/styles/index.ts         | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index d0f9309b6632..42ce83e6a909 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -573,7 +573,7 @@ function MenuItem(
                                 {badgeText && (
                                     <Badge
                                         text={badgeText}
-                                        textStyles={styles.menuItemBadge}
+                                        textStyles={styles.textStrong}
                                         badgeStyles={[
                                             styles.alignSelfCenter,
                                             brickRoadIndicator ? styles.mr2 : undefined,
diff --git a/src/styles/index.ts b/src/styles/index.ts
index b1e43976829b..0b964e0d53ad 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -838,11 +838,6 @@ const styles = (theme: ThemeColors) =>
             ...whiteSpace.noWrap,
         },
 
-        menuItemBadge: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
-            fontWeight: FontUtils.fontWeight.bold,
-        },
-
         activeItemBadge: {
             borderColor: theme.buttonHoveredBG,
         },

From f67a9b231e61bfb8779f71ccc90ffa28ea34c4e7 Mon Sep 17 00:00:00 2001
From: Filip Solecki <filip.solecki@swmansion.com>
Date: Tue, 20 Feb 2024 14:09:37 +0100
Subject: [PATCH 4/4] Change badge style globally

---
 src/components/MenuItem.tsx               | 3 ++-
 src/pages/settings/InitialSettingsPage.js | 6 +-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 42ce83e6a909..1c2a8a3197fe 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -576,8 +576,9 @@ function MenuItem(
                                         textStyles={styles.textStrong}
                                         badgeStyles={[
                                             styles.alignSelfCenter,
+                                            styles.badgeBordered,
                                             brickRoadIndicator ? styles.mr2 : undefined,
-                                            focused || isHovered || pressed ? styles.buttonHoveredBG : {},
+                                            focused || isHovered || pressed ? styles.activeItemBadge : {},
                                             badgeStyle,
                                         ]}
                                     />
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 4474fd3173c6..941cdb2f0643 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -265,7 +265,6 @@ function InitialSettingsPage(props) {
                     {_.map(menuItemsData.items, (item, index) => {
                         const keyTitle = item.translationKey ? translate(item.translationKey) : item.title;
                         const isPaymentItem = item.translationKey === 'common.wallet';
-                        const isFocusedItem = activeRoute && item.routeName && activeRoute.toLowerCase().replaceAll('_', '') === item.routeName.toLowerCase().replaceAll('/', '');
 
                         return (
                             <MenuItem
@@ -286,7 +285,6 @@ function InitialSettingsPage(props) {
                                 })}
                                 iconStyles={item.iconStyles}
                                 badgeText={getWalletBalance(isPaymentItem)}
-                                badgeStyle={[styles.badgeBordered, isFocusedItem ? styles.activeItemBadge : undefined]}
                                 fallbackIcon={item.fallbackIcon}
                                 brickRoadIndicator={item.brickRoadIndicator}
                                 floatRightAvatars={item.floatRightAvatars}
@@ -296,7 +294,7 @@ function InitialSettingsPage(props) {
                                 hoverAndPressStyle={styles.hoveredComponentBG}
                                 shouldBlockSelection={Boolean(item.link)}
                                 onSecondaryInteraction={item.link ? (event) => openPopover(item.link, event) : undefined}
-                                focused={isFocusedItem}
+                                focused={activeRoute && item.routeName && activeRoute.toLowerCase().replaceAll('_', '') === item.routeName.toLowerCase().replaceAll('/', '')}
                                 isPaneMenu
                                 iconRight={item.iconRight}
                                 shouldShowRightIcon={item.shouldShowRightIcon}
@@ -307,8 +305,6 @@ function InitialSettingsPage(props) {
             );
         },
         [
-            styles.badgeBordered,
-            styles.activeItemBadge,
             styles.pb4,
             styles.mh3,
             styles.sectionTitle,