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] 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,