Merge pull request #36794 from software-mansion-labs/update-account-s…

…ettings/wallet-page-badge-fix [Update Account Settings] Fix Wallet Page default badge style
Expensify · Feb 21, 2024 · 61d9dfe · 61d9dfe
2 parents 52b6d70 + f67a9b2
commit 61d9dfe
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/components/MenuItem.tsx b/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,
                                         ]}
                                     />

diff --git a/src/styles/index.ts b/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,