chore: Polish Money patterns for visual cohesion (#28712)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This PR polishes the Money feature so the patterns for Headers, List,
Sections, Filtering and Spacing are visually cohesive.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: Money account activity and hub layout polish

  Scenario: User opens Money activity from the Money hub
    Given the user is logged in with a Money account that can show activity
    And the user is on the Money hub (home) screen

    When the user navigates to Money activity (Activity)
    Then the activity screen loads with the expected header and back affordance
    And activity is grouped and readable (date sections and list items render without layout overlap)

  Scenario: User filters Money activity by type
    Given the user is on the Money activity screen
    And there is activity data available for more than one filter category

    When the user changes the activity filter (e.g. All / Deposits / Transfers as applicable)
    Then the list updates to match the selected filter
    And section headers and row content remain correctly aligned and legible

  Scenario: User reviews Money hub summary and quick actions after layout updates
    Given the user is on the Money hub (home) screen

    When the user views the balance summary and the primary action buttons row
    Then balances and labels use the updated typography and spacing (no clipped text or misaligned controls)
    And primary actions remain tappable with expected labels and icons
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<img width="1462" height="680" alt="Screenshot 2026-04-13 at 4 30 22 PM"
src="https://github.com/user-attachments/assets/38255e3a-a6c7-4ada-9a5b-7a0b5406eba0"
/>



### **After**

<img width="1442" height="643" alt="Screenshot 2026-04-13 at 4 30 37 PM"
src="https://github.com/user-attachments/assets/5bf37578-baf5-4b7f-8391-2a9611bb11c1"
/>




## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I've included tests if applicable
- [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk visual-only tweaks to layout, spacing, and typography within
Money screens; main risk is minor UI regressions like
truncation/clipping on edge device sizes.
> 
> **Overview**
> Improves visual cohesion across Money hub and activity screens by
adjusting padding/spacing, alignment, and typography in headers, section
headers, lists, and filter buttons.
> 
> Updates action buttons and activity rows to better handle sizing and
truncation (larger icons/avatars, centered/stretch layouts,
`min-w-0`/`shrink` Tailwind classes), and lightly refines secondary text
weights and button container padding for consistency.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
5ae2126. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: amandaye0h

app/components/UI/Money/Views/MoneyActivityView/MoneyActivityView.tsx

@@ -13,7 +13,6 @@ import {
   ButtonIcon,
   ButtonSize,
   ButtonVariant,
-  FontWeight,
   IconName,
   Text,
   TextColor,
@@ -30,12 +29,6 @@ import { MoneyActivityViewTestIds } from './MoneyActivityView.testIds';
 
 const styles = StyleSheet.create({
   safeArea: { flex: 1 },
-  filterButtonSpacing: {
-    minWidth: 0,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    minHeight: 48,
-  },
 });
 
 interface DateSection {
@@ -134,8 +127,8 @@ const MoneyActivityView = () => {
         flexDirection={BoxFlexDirection.Row}
         alignItems={BoxAlignItems.Center}
         justifyContent={BoxJustifyContent.Start}
-        paddingHorizontal={1}
         paddingVertical={2}
+        twClassName="px-2"
       >
         <ButtonIcon
           iconName={IconName.ArrowLeft}
@@ -149,7 +142,6 @@ const MoneyActivityView = () => {
       <Box paddingHorizontal={4} paddingTop={4} paddingBottom={6}>
         <Text
           variant={TextVariant.HeadingLg}
-          fontWeight={FontWeight.Medium}
           testID={MoneyActivityViewTestIds.TITLE}
         >
           {strings('money.activity.title')}
@@ -169,7 +161,7 @@ const MoneyActivityView = () => {
               : ButtonVariant.Secondary
           }
           size={ButtonSize.Md}
-          style={styles.filterButtonSpacing}
+          twClassName="min-w-0 shrink"
           onPress={() => setFilter(MoneyActivityFilter.All)}
           testID={MoneyActivityViewTestIds.FILTER_ALL}
         >
@@ -182,7 +174,7 @@ const MoneyActivityView = () => {
               : ButtonVariant.Secondary
           }
           size={ButtonSize.Md}
-          style={styles.filterButtonSpacing}
+          twClassName="min-w-0 shrink"
           onPress={() => setFilter(MoneyActivityFilter.Deposits)}
           testID={MoneyActivityViewTestIds.FILTER_DEPOSITS}
         >
@@ -195,7 +187,7 @@ const MoneyActivityView = () => {
               : ButtonVariant.Secondary
           }
           size={ButtonSize.Md}
-          style={styles.filterButtonSpacing}
+          twClassName="min-w-0 shrink"
           onPress={() => setFilter(MoneyActivityFilter.Transfers)}
           testID={MoneyActivityViewTestIds.FILTER_TRANSFERS}
         >

app/components/UI/Money/components/MoneyActionButtonRow/MoneyActionButtonRow.tsx

@@ -3,12 +3,15 @@ import {
   Box,
   BoxAlignItems,
   BoxFlexDirection,
+  BoxJustifyContent,
   ButtonBase,
   FontWeight,
   Icon,
+  IconColor,
   IconName,
   IconSize,
   Text,
+  TextColor,
   TextVariant,
 } from '@metamask/design-system-react-native';
 import { strings } from '../../../../../../locales/i18n';
@@ -32,17 +35,29 @@ const ActionButton = ({
   testID: string;
 }) => (
   <ButtonBase
-    twClassName="flex-1 rounded-xl bg-muted h-auto px-0 py-3"
+    twClassName="flex-1 self-stretch h-full min-h-12 rounded-xl bg-muted px-1 py-3"
     onPress={onPress}
     testID={testID}
   >
     <Box
       flexDirection={BoxFlexDirection.Column}
       alignItems={BoxAlignItems.Center}
-      twClassName="gap-0.5"
+      justifyContent={BoxJustifyContent.Center}
+      twClassName="w-full flex-1"
     >
-      <Icon name={iconName} size={IconSize.Md} />
-      <Text variant={TextVariant.BodySm} fontWeight={FontWeight.Medium}>
+      <Icon
+        name={iconName}
+        size={IconSize.Lg}
+        color={IconColor.IconAlternative}
+      />
+      <Text
+        variant={TextVariant.BodySm}
+        fontWeight={FontWeight.Medium}
+        color={TextColor.TextDefault}
+        numberOfLines={1}
+        ellipsizeMode="tail"
+        twClassName="mt-0.5 w-full shrink-0 min-w-0 text-center"
+      >
         {label}
       </Text>
     </Box>
@@ -64,7 +79,7 @@ const MoneyActionButtonRow = ({
   return (
     <Box
       flexDirection={BoxFlexDirection.Row}
-      alignItems={BoxAlignItems.Center}
+      alignItems={BoxAlignItems.Stretch}
       twClassName="px-4 pt-4 pb-7 gap-2"
       testID={MoneyActionButtonRowTestIds.CONTAINER}
     >

app/components/UI/Money/components/MoneyActivityItem/MoneyActivityItem.tsx

@@ -83,15 +83,15 @@ const MoneyActivityItem = ({
           <AvatarToken
             name={MUSD_TOKEN.name}
             imageSource={MUSD_TOKEN.imageSource}
-            size={AvatarSize.Md}
+            size={AvatarSize.Lg}
           />
         </BadgeWrapper>
       ) : (
         <Box twClassName="self-center">
           <AvatarToken
             name={MUSD_TOKEN.name}
             imageSource={MUSD_TOKEN.imageSource}
-            size={AvatarSize.Md}
+            size={AvatarSize.Lg}
           />
         </Box>
       )}
@@ -107,7 +107,7 @@ const MoneyActivityItem = ({
         {display.description ? (
           <Text
             variant={TextVariant.BodySm}
-            fontWeight={FontWeight.Regular}
+            fontWeight={FontWeight.Medium}
             color={TextColor.TextAlternative}
             numberOfLines={1}
           >
@@ -126,7 +126,7 @@ const MoneyActivityItem = ({
         </Text>
         <Text
           variant={TextVariant.BodySm}
-          fontWeight={FontWeight.Regular}
+          fontWeight={FontWeight.Medium}
           color={TextColor.TextAlternative}
           twClassName="text-right"
         >

app/components/UI/Money/components/MoneyActivityList/MoneyActivityList.tsx

@@ -50,7 +50,7 @@ const MoneyActivityList = ({
         />
       ))}
       {onViewAllPress && (
-        <Box twClassName="px-3 my-3">
+        <Box twClassName="px-4 my-3">
           <Button
             variant={ButtonVariant.Secondary}
             isFullWidth

app/components/UI/Money/components/MoneyBalanceSummary/MoneyBalanceSummary.tsx

@@ -32,14 +32,14 @@ const MoneyBalanceSummary = ({ apy }: MoneyBalanceSummaryProps) => (
     <Box twClassName="px-4">
       <Text
         variant={TextVariant.DisplayLg}
-        fontWeight={FontWeight.Medium}
+        fontWeight={FontWeight.Bold}
         testID={MoneyBalanceSummaryTestIds.BALANCE}
         twClassName="mb-1"
       >
         {HARDCODED_BALANCE}
       </Text>
       <Text
-        variant={TextVariant.BodySm}
+        variant={TextVariant.BodyMd}
         fontWeight={FontWeight.Medium}
         color={TextColor.SuccessDefault}
         testID={MoneyBalanceSummaryTestIds.APY}

app/components/UI/Money/components/MoneyHeader/MoneyHeader.tsx

@@ -26,7 +26,7 @@ const MoneyHeader = ({ onBackPress, onMenuPress }: MoneyHeaderProps) => (
     flexDirection={BoxFlexDirection.Row}
     alignItems={BoxAlignItems.Center}
     justifyContent={BoxJustifyContent.Between}
-    twClassName="px-1 pt-2 pb-5"
+    twClassName="px-2 pt-2 pb-5"
     testID={MoneyHeaderTestIds.CONTAINER}
   >
     <ButtonIcon

app/components/UI/Money/components/MoneySectionHeader/MoneySectionHeader.tsx

@@ -4,7 +4,6 @@ import {
   Box,
   BoxAlignItems,
   BoxFlexDirection,
-  FontWeight,
   Icon,
   IconColor,
   IconName,
@@ -38,7 +37,6 @@ const MoneySectionHeader = ({ title, onPress }: MoneySectionHeaderProps) => {
     >
       <Text
         variant={TextVariant.HeadingMd}
-        fontWeight={FontWeight.Medium}
         testID={MoneySectionHeaderTestIds.TITLE}
       >
         {title}

app/components/UI/Money/components/MoneyWhyMetaMaskMoney/MoneyWhyMetaMaskMoney.tsx

@@ -27,14 +27,16 @@ interface MoneyWhyMetaMaskMoneyProps {
 const BenefitRow = ({ children }: { children: React.ReactNode }) => (
   <Box
     flexDirection={BoxFlexDirection.Row}
-    alignItems={BoxAlignItems.Center}
-    twClassName="gap-2"
+    alignItems={BoxAlignItems.Start}
+    twClassName="gap-3"
   >
-    <Icon
-      name={IconName.Check}
-      size={IconSize.Sm}
-      color={IconColor.SuccessDefault}
-    />
+    <Box twClassName="shrink-0 pt-1">
+      <Icon
+        name={IconName.Check}
+        size={IconSize.Sm}
+        color={IconColor.SuccessDefault}
+      />
+    </Box>
     <Box twClassName="flex-1">{children}</Box>
   </Box>
 );