fix(quickbuy): align Pay with token list styling with Figma

[xavier-brochard]

Description

This PR applies the TSA-689 "Style fixes" to the QuickBuy "Pay with" token-list screen so it matches the Figma design (Swap Next, node 2296:34769).

Why: the implemented screen drifted from the design in three ways — the token rows and chain-filter chips had more vertical spacing than the design, the token name/symbol/value text used the regular font weight instead of medium, and the slider used an icon-color token for its unfilled track.

What changed:

• Slider track color (QuickBuyPercentageSlider.tsx): the unfilled track now uses the bg-background-muted token instead of bg-icon-muted, matching the design-system convention for slider tracks (e.g. VipPointsSection, PredictCryptoUpDownMarketCard).
• Pay-with row vertical spacing (QuickBuyPayWithRow.tsx): the name/symbol and fiat/balance stacks now use gap={0} (Figma Frame 141839/141841 use gap 0), removing the extra 4px between the two lines.
• Pay-with row font weight (QuickBuyPayWithRow.tsx): the token name, symbol, fiat value and balance now use FontWeight.Medium (Figma: all row text is Geist Medium / 500), keeping the existing BodyMd/BodySm sizes (16/14px).
• Chain-filter chip spacing (QuickBuyPayWithChainFilter.tsx): removed the redundant mb-3 from each chip; the container already applies pb-3 (12px), which matches the Figma chip-container paddingBottom of 12px (the mb-3 was doubling it to 24px).

Note: the verified-token badge (blue check next to the name) called out in the ticket's annotated screenshot is already implemented in QuickBuyPayWithRow.tsx (IconName.VerifiedFilled / IconColor.InfoDefault, gated on token.isVerified, with BridgeToken.isVerified populated by useTokensWithBalance and covered by tests), so no change was needed there.

Changelog

CHANGELOG entry: Fixed the QuickBuy "Pay with" token list styling (slider track color, row vertical spacing, font weights, and chain-filter chip spacing) to match the design.

Related issues

Fixes: TSA-689

Manual testing steps

Feature: QuickBuy "Pay with" token list styling

  Scenario: User opens the Pay with token list
    Given the user is on a Social/Trade trader position
    When the user starts a Quick Buy and opens the "Pay with" token selector
    Then the token rows match the Figma design with tight vertical spacing
    And the token name, symbol, fiat value and balance use medium font weight
    And the chain-filter chips sit close to the token list without extra spacing
    And verified tokens display the blue verification badge next to their name

  Scenario: User drags the Quick Buy amount slider
    Given the user is on the Quick Buy amount screen
    When the user views the percentage slider
    Then the unfilled track uses the muted background color matching the design

Screenshots/Recordings

Design reference (source of truth): Figma — Swap Next, node 2296:34769

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
Tailwind and design-system styling only in QuickBuy Social Leaderboard components; no logic, data, or payment flow changes.

Overview
Aligns the QuickBuy “Pay with” token picker and related controls with Figma (TSA-689) via presentation-only updates.

Pay-with rows (QuickBuyPayWithRow.tsx): name/symbol and fiat/balance stacks now use gap={0} instead of gap={1}, and row text uses FontWeight.Medium while keeping existing BodyMd / BodySm sizes.

Chain filter chips (QuickBuyPayWithChainFilter.tsx): drops per-chip mb-3 so spacing relies on the container’s pb-3 only, removing extra gap above the list.

Amount slider (QuickBuyPercentageSlider.tsx): the unfilled track switches from bg-icon-muted to bg-background-muted for consistency with other sliders in the app.

^{Reviewed by Cursor Bugbot for commit 44fe152. 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: None (no tests recommended)
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 95%

click to see 🤖 AI reasoning details

E2E Test Selection:
All three changed files are in the SocialLeaderboard/TraderPositionView/QuickBuy component directory and contain purely cosmetic/UI styling changes:

1. QuickBuyPayWithChainFilter.tsx: Removes mb-3 (margin-bottom) from a Tailwind chip class — minor spacing adjustment.
2. QuickBuyPayWithRow.tsx: Adds FontWeight.Medium to text elements and changes gap={1} to gap={0} — typography and spacing styling only.
3. QuickBuyPercentageSlider.tsx: Changes background color class from bg-icon-muted to bg-background-muted — a color token fix.

Per the COSMETIC CHANGES rule, these changes (spacing, font weight, color tokens) have zero functional impact and must not trigger additional test selection. No E2E tests reference these QuickBuy components directly (confirmed via grep). No functional logic, state management, navigation, or API calls were modified.

Performance Test Selection:
All changes are purely cosmetic UI styling adjustments (spacing, font weight, color tokens) with no impact on rendering performance, data fetching, or any performance-sensitive flows.

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