Description

The "Convert your stablecoins" card on the Money screen had two visual issues compared to the design:

1. The check icons next to each feature tag (No lockups, No deposits, Daily payouts, Automatic bonus, No MetaMask fee) rendered in IconColor.IconAlternative (grey) instead of the success-green tone that matches the "3% annualized bonus" highlight in the description.
2. The tag background used TagSeverity.Neutral, which resolves to theme.colors.background.alternative. In dark mode this came out almost indistinguishable from the surrounding card surface.

The fix is scoped to the local usage of TagBase inside MoneyConvertStablecoins so it cannot regress any other consumer of TagBase:

• Check icons now use IconColor.SuccessDefault, matching the success-green token already used by the description's bonus highlight.
• The tag background is overridden via the style prop to a 4% white tint in dark mode (rgba(255, 255, 255, 0.04)) and a symmetric 4% black tint in light mode (rgba(0, 0, 0, 0.04)). TagBase merges the per-instance style prop after the severity-derived background, so neutral tags elsewhere in the app are unaffected. Only backgroundColor is touched (not opacity), so the icons and text inside the tag stay fully opaque.
• useTheme() reads themeAppearance so the override stays correct in both light and dark themes without hardcoding a single value.

Changelog

CHANGELOG entry: Updated the Convert Stablecoins card so the feature tag check icons render in green and the tag background uses a subtle muted tint that matches the design.

Related issues

Fixes: MUSD-629

Manual testing steps

Feature: Convert Stablecoins feature tags styling

  Scenario: User views the Convert Stablecoins card in dark mode
    Given the app is set to dark theme
    And the user has no convertible stablecoin balance

    When the user opens the Money screen
    Then the "Convert your stablecoins" card is visible
    And each feature tag (No lockups, No deposits, Daily payouts, Automatic bonus, No MetaMask fee) shows a green check icon
    And each feature tag background is a subtle white tint, clearly distinguishable from the card surface
    And the tag label text remains fully opaque and legible

  Scenario: User views the Convert Stablecoins card in light mode
    Given the app is set to light theme

    When the user opens the Money screen
    Then each feature tag shows a green check icon
    And each feature tag background uses a subtle dark tint that remains distinguishable from the surrounding surface

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.