fix(pure-black): migrate ActionModal buttons to MMDS

[georgewrmarshall]

Description

Fixes a Pure Black contrast bug on ActionModal secondary buttons (TMCU-1080) by migrating ActionContent from legacy StyledButton to MMDS Button.

With MM_PURE_BLACK_PREVIEW=true in dark mode, the legacy secondary/cancel button background read too bright against the elevated modal surface (e.g. Settings → Advanced → Reset account).

Fix: Replace StyledButton with Button from @metamask/design-system-react-native. A mapModeToProps helper maps legacy button modes (neutral, warning, transparent-blue, etc.) to MMDS variant (Primary / Secondary / Link) and isDanger. Cancel still defaults to Secondary; destructive confirms use Primary + danger styling.

Scope: ActionContent only — shared by ActionModal, ActionView, transaction modals, and other confirmation flows. Modal surface styling (getElevatedSurfaceColor + Pure Black border) is unchanged from prior work.

Changelog

CHANGELOG entry: Fixed Pure Black ActionModal secondary button contrast by migrating to MMDS Button

Related issues

Fixes: TMCU-1080

Refs: TMCU-622 (Pure Black epic)

Manual testing steps

Feature: ActionModal buttons use MMDS with correct Pure Black theming

  Scenario: Reset Account modal shows muted Secondary cancel on Pure Black
    Given MM_PURE_BLACK_PREVIEW="true" and the app is rebuilt in Dark mode
    When I open Settings → Advanced → Reset account
    Then the confirmation modal appears
    And the Cancel button uses MMDS Secondary with muted background/border
    And the Yes, reset button uses MMDS Primary with danger styling

  Scenario: other ActionModal callers still work
    Given MM_PURE_BLACK_PREVIEW="true" in Dark mode
    When I open any flow using ActionModal (e.g. Clear cookies and history)
    Then buttons render and trigger the same actions as before

  Scenario: standard themes are unchanged
    Given the app is in Light mode, or Dark mode with MM_PURE_BLACK_PREVIEW unset or false
    When I open a confirmation modal that uses ActionContent
    Then button layout and behavior match previous releases

Screenshots/Recordings

Before/after recordings in progress by author.

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
• I've tested with a power user scenario
• I've instrumented key operations with Sentry traces for production performance metrics

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.

Slack Thread

  

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeAccounts, SmokeWalletPlatform, SmokeConfirmations
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 72%

click to see 🤖 AI reasoning details

E2E Test Selection:
The change migrates ActionContent/index.js from using StyledButton to the MMDS Button component (@metamask/design-system-react-native). This is a UI component swap that affects the cancel/confirm buttons rendered in modals across multiple flows.

Key consumers of ActionContent (via ActionModal):

1. AccountBackupStep1B and HintModal (ManualBackupStep3) — SRP backup/onboarding flows → SmokeAccounts
2. ProtectYourWalletModal — wallet protection prompt shown in main nav → SmokeWalletPlatform
3. TransactionNotification — transaction action buttons → SmokeConfirmations, SmokeWalletPlatform

The change preserves testID props (critical for E2E selectors), onPress handlers, and disabled state (renamed disabled → isDisabled). The button mode mapping logic is new and could have edge cases. Risk is medium because the functional behavior is preserved but the component swap could affect rendering, interaction, or visual appearance in E2E tests.

Not selecting SmokeSwap, SmokeStake, SmokeNetworkAbstractions, etc. as those flows don't directly use ActionContent/ActionModal in their critical paths.

Performance Test Selection:
The change is a UI component migration (StyledButton → MMDS Button) in a modal action content component. This does not affect app launch, login, onboarding performance metrics, asset loading, or any other performance-sensitive flows measured by the available performance tags. No performance tests are warranted.

View GitHub Actions results

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Cancel flag ignores explicit button modes
  • Removed the isCancel override in mapModeToProps so explicit modes on cancel (e.g., warning, sign, confirm) now map to their intended Primary or danger variants.

Or push these changes by commenting:

@cursor push 94ddf58f77

Preview (94ddf58f77)

diff --git a/app/components/UI/ActionModal/ActionContent/index.js b/app/components/UI/ActionModal/ActionContent/index.js
--- a/app/components/UI/ActionModal/ActionContent/index.js
+++ b/app/components/UI/ActionModal/ActionContent/index.js
@@ -96,9 +96,8 @@
       return { variant: ButtonVariant.Link, isDanger: normalized.includes('warning') };
     }
 
-    // Secondary for cancel or explicit neutral/secondary/cancel
+    // Secondary for explicit neutral/secondary/cancel
     if (
-      isCancel ||
       normalized === 'neutral' ||
       normalized === 'secondary' ||
       normalized === 'cancel' ||

_{You can send follow-ups to the cloud agent here.}

^{Reviewed by Cursor Bugbot for commit 3408c86. Configure here.}

[cursor]

Cancel flag ignores explicit button modes

Medium Severity

mapModeToProps treats every cancel button as MMDS Secondary because isCancel is checked before legacy modes like warning, sign, and confirm. Callers that put the primary or destructive action on the cancel side lose the intended variant and danger styling.

Additional Locations (1)

• app/components/UI/ActionModal/ActionContent/index.js#L134-L138

 

^{Reviewed by Cursor Bugbot for commit 3408c86. Configure here.}

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
95.2% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud