Description

The "3% bonus" tag in the Asset Overview "Your bonus" section (reached from the Money page / mUSD token detail view) was rendered with the legacy design-system TagBase defaults (4px border radius, 8px horizontal padding), which drift from the current Figma spec (node 9740:12682).

Rather than replace TagBase with a custom component, this PR overrides only the two style values that differ from the design so the colors and text styling continue to come from the TagSeverity.Success preset.

What changed

• borderRadius: 4 → 8
• paddingHorizontal: 8 → 6

Colors (success.muted background, success.default text), vertical padding, and typography already match.

Changelog

CHANGELOG entry: null

Related issues

Fixes: MUSD-634

Manual testing steps

Feature: mUSD claim bonus tag shape

  Scenario: user opens the mUSD asset detail screen
    Given the user has mUSD holdings
    When the user navigates to the mUSD asset overview
    Then the "3% bonus" tag next to the "Your bonus" heading has an 8px border radius and 6px horizontal padding
    And the tag uses the success (green) color tokens

Screenshots/Recordings

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.