chore: Polish Money patterns for visual cohesion

[amandaye0h]

Description

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

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

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

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• 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 format if applicable
• I've applied the right labels on the PR (see labeling guidelines). 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.

---

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.

^{Reviewed by Cursor Bugbot for commit 5ae2126. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[amandaye0h]

I have read the CLA Document and I hereby sign the CLA

[github-actions]

✅ E2E Fixture Validation — Schema is up to date
11 value mismatches detected (expected — fixture represents an existing user).
View details

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit ef18098. Configure here.}

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: None (no tests recommended)
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 92%

click to see 🤖 AI reasoning details

E2E Test Selection:
All 8 changed files are in app/components/UI/Money/ and contain purely cosmetic/UI styling changes:

1. MoneyActivityView.tsx: Replaced StyleSheet-based styles with Tailwind classes (twClassName), removed unused FontWeight import
2. MoneyActionButtonRow.tsx: Updated button layout, icon size/color, text styling properties
3. MoneyActivityItem.tsx: Changed AvatarSize from Md to Lg, font weights from Regular to Medium
4. MoneyActivityList.tsx: Minor padding adjustment (px-3 → px-4)
5. MoneyBalanceSummary.tsx: Font weight Medium → Bold, text variant BodySm → BodyMd
6. MoneyHeader.tsx: Padding adjustment (px-1 → px-2)
7. MoneySectionHeader.tsx: Removed unused FontWeight import and prop
8. MoneyWhyMetaMaskMoney.tsx: Changed alignment and icon wrapping for benefit rows

Key findings:

• These are the Money feature components (MoneyHomeView, MoneyActivityView routes), which is DISTINCT from the MetaMask Card feature (app/components/UI/Card/)
• No E2E tests exist for the Money feature - no .spec.ts files reference any of these components
• SmokeCard tests reference CardHomeView from app/components/UI/Card/, not these Money components
• No shared/critical components are affected (no TabBar, navigation, modals, confirmations)
• No logic, state management, API calls, or navigation changes - purely visual/styling
• No performance-sensitive code paths changed (no list rendering logic, no data fetching)

Since there are no existing E2E tests covering these Money UI components, and the changes are purely cosmetic styling adjustments with no functional impact, no E2E test tags need to be run.

Performance Test Selection:
The changes are purely cosmetic UI styling adjustments (padding, font weights, icon sizes, Tailwind class replacements). No performance-sensitive code paths are affected - no list rendering logic changes, no data fetching, no state management, no component mount/unmount patterns that would impact render performance. The Money feature components are not covered by any existing performance test tags.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[nickewansmith]

lgtm, thank you @amandaye0h