Merge pull request #36794 from software-mansion-labs/update-account-settings/wallet-page-badge-fix

[Update Account Settings] Fix Wallet Page default badge style

Author: mountiny

src/components/MenuItem.tsx

@@ -573,10 +573,12 @@ function MenuItem(
                                 {badgeText && (
                                     <Badge
                                         text={badgeText}
+                                        textStyles={styles.textStrong}
                                         badgeStyles={[
                                             styles.alignSelfCenter,
+                                            styles.badgeBordered,
                                             brickRoadIndicator ? styles.mr2 : undefined,
-                                            focused || isHovered || pressed ? styles.buttonHoveredBG : {},
+                                            focused || isHovered || pressed ? styles.activeItemBadge : {},
                                             badgeStyle,
                                         ]}
                                     />

src/styles/index.ts

@@ -826,6 +826,8 @@ const styles = (theme: ThemeColors) =>
             borderWidth: 1,
             borderRadius: variables.componentBorderRadiusSmall,
             borderColor: theme.border,
+            paddingHorizontal: 12,
+            minHeight: 28,
         },
 
         badgeText: {
@@ -835,6 +837,10 @@ const styles = (theme: ThemeColors) =>
             ...whiteSpace.noWrap,
         },
 
+        activeItemBadge: {
+            borderColor: theme.buttonHoveredBG,
+        },
+
         border: {
             borderWidth: 1,
             borderRadius: variables.componentBorderRadius,