fix: Polish section headers for consistency

[amandaye0h]

Description

This PR aligns the header styles across features so the UI is polished:

• Swaps: Heading Lg > Md
• DS Component: Icon Size Sm > Md to match designs, impacts Home Page
• Perps: See all modified to Icon-Arrow-Right

This is part of a wider initiative to polish our header styles.

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensys.slack.com/archives/C09AYKX30P3/p1778687896266179

Manual testing steps

Feature: Section header QA (icons, typography, Perps recent activity)

  Scenario: User sees a larger chevron on navigable section headers
    Given a screen that uses SectionHeader with onPress (for example Home Tokens)
    When the header is shown
    Then the trailing arrow icon uses the medium size instead of small

  Scenario: User sees the Bridge trending title match heading-md styling
    Given the user is on Bridge with the trending tokens block visible
    When the trending section title is shown
    Then the title uses heading-md weight and has the updated top and bottom spacing

  Scenario: User opens full activity from Perps recent trades
    Given the user is on a Perps market with recent trades loaded
    When the recent activity header is shown
    Then the heading and arrow sit together with a small gap instead of opposite ends of the row
    And the control shows a medium arrow (not a “See all” text link) with an accessible label
    When the user taps the arrow control
    Then the app navigates to the Perps activity flow as before

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.

Performance checks (if applicable)

• I've tested on Android
  • Ideally on a mid-range device; emulator is acceptable
• I've tested with a power user scenario
  • Use these power-user SRPs to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

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, primarily UI polish (typography, spacing, and iconography) with minimal logic changes; main risk is minor visual regressions from updated design-system tokens and layout tweaks.

Overview
Polishes section header presentation for consistency across the app by standardizing trailing arrow affordances and heading sizes.

Updates SectionHeader to use a medium trailing arrow icon, adjusts Bridge Trending Tokens to use HeadingMd with refined spacing, and refines Perps “Recent activity” header layout (use gap and replace “See all” text with an accessible arrow icon). Also migrates Perps trade list text styling to design-system Text tokens and removes the now-unneeded Text mock in tests.

^{Reviewed by Cursor Bugbot for commit 2029a4a. 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.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokePerps, SmokeWalletPlatform, SmokeSwap, SmokeConfirmations
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 90%

click to see 🤖 AI reasoning details

E2E Test Selection:
All 5 changed files are purely UI/visual changes with no logic, state, or navigation modifications:

1. SectionHeader.tsx: Arrow icon size changed from Sm to Md. Used in Perps components (PerpsHomeSection, PerpsMarketTypeSection) — affects Perps UI.

2. BridgeTrendingTokensSection.tsx: Heading text variant changed from HeadingLg to HeadingMd, added mt-1 margin — minor visual tweak in the Bridge/Swap trending tokens section.

3. PerpsMarketTradesList.tsx: Migrated from local Text component to @metamask/design-system-react-native, updated text variant/color naming conventions, replaced "See All" text button with an arrow icon, added accessibility attributes. Visual refactor only.

4. PerpsMarketTradesList.styles.ts: Layout change from justifyContent: 'space-between' to gap: 4 in the header row.

5. PerpsMarketTradesList.test.tsx: Removed outdated mock for old Text component (cleanup after migration).

Tag selection rationale:

• SmokePerps: Perps components (PerpsMarketTradesList, SectionHeader used in PerpsHomeSection/PerpsMarketTypeSection) are directly modified.
• SmokeWalletPlatform: Required by SmokePerps description (Perps is a section inside Trending tab). SectionHeader changes affect Perps views embedded in Trending.
• SmokeSwap: BridgeTrendingTokensSection is part of the Bridge/Swap flow and is directly modified.
• SmokeConfirmations: Required by both SmokePerps (Add Funds deposits are on-chain transactions) and SmokeSwap (transaction confirmations are part of the flow).

No controller, navigation, or shared infrastructure changes — no need for broader test coverage.

Performance Test Selection:
All changes are minor UI/visual tweaks (icon sizes, text variants, margins, layout gap). No changes to data loading, state management, list rendering performance, or app initialization. The layout change from justifyContent:space-between to gap:4 in PerpsMarketTradesList header is negligible and would not produce measurable performance differences.

View GitHub Actions results

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 81.86%. Comparing base (3751d9a) to head (2029a4a).
⚠️ Report is 219 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #30168      +/-   ##
==========================================
+ Coverage   81.54%   81.86%   +0.31%     
==========================================
  Files        5343     5435      +92     
  Lines      142128   144922    +2794     
  Branches    32411    33097     +686     
==========================================
+ Hits       115899   118641    +2742     
+ Misses      18299    18172     -127     
- Partials     7930     8109     +179     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[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