Description

This PR addresses MDP-694 - "Fix the account selector background" (second action item from MDP-274).

Problem

The Deposit page selectors (Account, Region, Token, Payment Method) had visible borders that made them visually inconsistent with the Aggregator (Buy/Sell) flow selectors. The Deposit selectors used:

• borderWidth: 1
• borderColor: theme.colors.border.muted
• Different background colors in some cases

This created a visual discrepancy between the two flows.

Solution

Updated the Deposit selector styles to match the Aggregator styling pattern:

• Removed borders from all selector components
• Updated background colors to use consistent background.muted token
• Updated the payment duration tag to use background.subsection instead of a border

Files Changed

1. AccountSelector.styles.ts

   • Removed borderWidth: 1 and borderColor from the selector style

2. BuildQuote.styles.ts

   • fiatSelector: Changed background from background.default to background.muted, removed border
   • cryptoPill: Removed border (kept borderRadius: 100 for pill shape)
   • paymentMethodBox: Removed border, added background.muted

3. BuildQuote.tsx

   • Updated TagBase component: Removed includesBorder prop, added custom background.subsection style

Changelog

CHANGELOG entry: fix: Updated Deposit page selectors to have consistent styling without borders

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MDP-694

Manual testing steps

Feature: Deposit Page Selector Styling

  Scenario: User views Account selector without border
    Given user is on the Deposit BuildQuote screen
    When user looks at the Account selector pill
    Then the Account selector has no visible border
    And the Account selector has a muted background color

  Scenario: User views Region selector without border
    Given user is on the Deposit BuildQuote screen
    When user looks at the Region/Country selector (flag icon)
    Then the Region selector has no visible border
    And the Region selector has a muted background color

  Scenario: User views Token selector without border
    Given user is on the Deposit BuildQuote screen
    When user looks at the Token selector pill (e.g., MUSD)
    Then the Token selector has no visible border
    And the Token selector maintains its pill shape

  Scenario: User views Payment Method section without border
    Given user is on the Deposit BuildQuote screen
    When user looks at the "Pay with" section
    Then the Payment Method box has no visible border
    And the duration tag (e.g., "Instant") has a subtle background instead of a border

  Scenario: Visual consistency with Aggregator flow
    Given user has seen the Aggregator (Buy/Sell) BuildQuote screen
    When user navigates to the Deposit BuildQuote screen
    Then the selector styling is visually consistent between both flows

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.