Change badge style globally

Expensify · Feb 20, 2024 · f67a9b2 · f67a9b2
1 parent e597e1a
commit f67a9b2
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 6 deletions.
diff --git 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
@@ -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,