Perps: align Home and Markets header typography/spacing

[geositta]

Description

Perps: align Home and Markets header typography/spacing

Uses TextVariant.BodyLGMedium intentionally for this header/list-item update.

In our design tokens, BodyLGMedium and HeadingMD share the same size and line-height (fontSize5, lineHeight4), but differ in weight (medium vs bold). There is currently no medium-weight heading variant in TextVariant, so BodyLGMedium is the closest token match to the Figma spec while preserving the intended hierarchy styling.

https://www.figma.com/design/Jp8owZibGXg26diIjDjVuq/Mobile-Perps?node-id=13924-14951&m=dev

https://www.figma.com/design/Jp8owZibGXg26diIjDjVuq/Mobile-Perps?node-id=12331-5993&m=dev

1. Home section header typography mismatch

• Before: Home section titles (e.g., Positions/Orders) used HeadingMD in places.
• After: Home section titles use BodyLGMedium for consistent section heading style.
• Code: PerpsHomeSection.tsx

2. Activity header typography mismatch

• Before: Activity title used HeadingMD.
• After: Activity title uses BodyLGMedium in loading/empty/populated states.
• Code: PerpsRecentActivityList.tsx, PerpsRecentActivityList.test.tsx

3. Activity header bottom spacing inconsistency

• Before: Activity header marginBottom: 8.
• After: Activity header marginBottom: 12.

4. Perps Tab header spacing logic for Positions/Orders

• After: Explicit top/below-section spacing variants applied based on layout state.

Changelog

CHANGELOG entry:

Related issues

Fixes:

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

Before

After

PerpsHomeHeaders.mov

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.

[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.

[sonarqubecloud]

Quality Gate failed

Failed conditions
50.0% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokePerps, SmokeWalletPlatform, SmokeConfirmations
• Selected Performance tags: @PerformancePreps
• Risk Level: low
• AI Confidence: 85%

click to see 🤖 AI reasoning details

E2E Test Selection:
The only changed file is PerpsRecentActivityList.styles.ts, which affects styling of a Perps UI component. There are no logic, controller, Engine, or state management changes—only presentation-layer updates. However, this component is part of the Perps feature and rendered within the Trending section. Visual or layout regressions could impact Perps flows and their integration in Trending.

Per tag requirements:

• SmokePerps: Required because the change is within a Perps component (Recent Activity list UI).
• SmokeWalletPlatform: Required dependency when selecting SmokePerps, as Perps is embedded inside the Trending tab.
• SmokeConfirmations: Required dependency when selecting SmokePerps, since Perps Add Funds flow includes on-chain confirmations.

No other areas (accounts, network abstraction, identity, snaps, ramps, swaps, multi-chain API) are impacted by a styles-only change in a Perps-specific component.

Performance Test Selection:
Although the change is styling-only, it affects a list component within the Perps feature. Layout or style changes (e.g., spacing, conditional rendering wrappers, or style recalculations) can impact list rendering performance. Running @PerformancePreps ensures no regression in Perps screen load and activity rendering performance.

View GitHub Actions results

[github-actions]

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

[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