fix(confirmations): use elevated surface for edit spending cap modal by georgewrmarshall · Pull Request #33299 · MetaMask/metamask-mobile

georgewrmarshall · 2026-07-14T21:56:35Z

Description

In Pure Black mode, the Edit approval limit bottom sheet (EditSpendingCapModal) used background.default, which collapsed visually against the elevated confirmation surface beneath it.

This change replaces theme.colors.background.default with getElevatedSurfaceColor(theme) on the modal container, matching other confirmation modals (e.g. gas-fee-token-modal).

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-1090

Manual testing steps

Feature: Edit spending cap modal Pure Black surface

  Scenario: user sees elevated surface on edit approval limit sheet
    Given Pure Black mode is enabled
    And the user has opened a token approval confirmation

    When the user taps to edit the spending cap / approval limit
    Then the bottom sheet background uses an elevated surface color
    And the sheet is visually distinct from the confirmation surface behind it

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.

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

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.

In Pure Black mode, the Edit approval limit bottom sheet used background.default, causing it to collapse visually against the elevated confirmation surface beneath it. Replace with getElevatedSurfaceColor(theme) to match other confirmation modals. Fixes TMCU-1090 Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

metamask-ci · 2026-07-14T21:57:16Z

PR template — items to address before "Ready for review"

Warnings — informational, address before merging:

Pre-merge author checklist has unchecked items (e.g. "I've tested on Android"). Every box must be consciously checked — see docs/readme/ready-for-review.md.

See docs/readme/ready-for-review.md for the full Definition of Ready for Review.

Apply muted border on elevated surface in Pure Black dark mode so the spending cap sheet matches other confirmation bottom sheets. Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-07-14T23:17:06Z

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.

georgewrmarshall · 2026-07-14T23:17:07Z

+    // Drop getElevatedSurfaceColor, isPureBlackEnabled, and AppThemeKey checks.
    container: {
-      backgroundColor: theme.colors.background.default,
+      backgroundColor: getElevatedSurfaceColor(theme),


EditSpendingCapModal is the approval-limit sheet opened from ERC-20 Approve or Increase Allowance flows (edit-spending-cap-button), not Sign Permit value editing. In Pure Black dark the container used background.default and blended into the flat confirmation screen (TMCU-1090); getElevatedSurfaceColor elevates only the outer sheet.

georgewrmarshall · 2026-07-14T23:17:08Z

  const { theme } = params;
+  const { colors } = theme;
+  const isPureBlackDark =
+    isPureBlackEnabled && theme.themeAppearance === AppThemeKey.dark;


isPureBlackDark uses the same gate as ConfirmAlertModal, AlertModal, and gas-fee-token-modal: isPureBlackEnabled plus AppThemeKey.dark. Light mode and non-preview builds are unchanged.

georgewrmarshall · 2026-07-14T23:17:09Z

-      backgroundColor: theme.colors.background.default,
+      backgroundColor: getElevatedSurfaceColor(theme),
+      borderWidth: isPureBlackDark ? 1 : 0,
+      borderColor: isPureBlackDark ? colors.border.muted : undefined,


border.muted on the top sheet edge separates the elevated surface from the flat black confirmation backdrop when borderWidth is 1; borderWidth 0 elsewhere avoids double borders on rounded corners in standard themes.

georgewrmarshall · 2026-07-14T23:17:10Z

+    isPureBlackEnabled && theme.themeAppearance === AppThemeKey.dark;

  return StyleSheet.create({
+    // TODO(Pure Black): Remove once MMDS ships pure-black-aware surface tokens.


Temporary themeUtils shim with TODO until MMDS ships native elevated surface tokens; inner content styles are out of scope for this ticket.

georgewrmarshall · 2026-07-14T23:17:12Z

  return StyleSheet.create({
+    // TODO(Pure Black): Remove once MMDS ships pure-black-aware surface tokens.
+    // Drop getElevatedSurfaceColor, isPureBlackEnabled, and AppThemeKey checks.
    container: {


Manual validation: test-dapp Approve Tokens or Increase Allowance, tap Edit approval limit to open this modal. Enable MM_PURE_BLACK_PREVIEW and dark appearance; sheet should show elevated gray surface with muted top border.

github-actions · 2026-07-14T23:18:44Z

🔍 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:
The only changed file is edit-spending-cap-modal.styles.ts, which is a pure styling/visual change. The diff shows:

Added support for "Pure Black" dark theme mode by using getElevatedSurfaceColor(theme) for background color
Added a conditional border (1px) when pure black dark mode is active
No functional logic changes, no navigation changes, no business logic changes

This is a cosmetic visual change that only affects the appearance of the edit spending cap modal in pure black dark mode. The change is only imported by the modal component itself (edit-spending-cap-modal.tsx). Since this is a styling-only change with zero functional impact on E2E test flows, no E2E test tags need to be run.

Performance Test Selection:
The change is purely a visual styling update to the edit spending cap modal. It only modifies background color and border appearance for pure black dark theme mode. There is no impact on rendering performance, load times, or any performance-sensitive flows.

View GitHub Actions results

codecov-commenter · 2026-07-14T23:37:38Z

Codecov Report

❌ Patch coverage is 25.00000% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 84.37%. Comparing base (c4cb337) to head (d76baf3).
⚠️ Report is 5 commits behind head on main.

Files with missing lines	Patch %	Lines
...ending-cap-modal/edit-spending-cap-modal.styles.ts	25.00%	0 Missing and 3 partials ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##             main   #33299    +/-   ##
========================================
  Coverage   84.37%   84.37%            
========================================
  Files        6127     6129     +2     
  Lines      163530   163632   +102     
  Branches    39887    39906    +19     
========================================
+ Hits       137974   138071    +97     
+ Misses      16050    16047     -3     
- Partials     9506     9514     +8

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

sonarqubecloud · 2026-07-14T23:38:03Z

Quality Gate passed

Issues
1 New issue
0 Accepted issues

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

See analysis details on SonarQube Cloud

metamask-ci Bot added the team-design-system All issues relating to design system in Mobile label Jul 14, 2026

github-actions Bot added the size-XS label Jul 14, 2026

fix(confirmations): add Pure Black border to EditSpendingCapModal

d76baf3

Apply muted border on elevated surface in Pure Black dark mode so the spending cap sheet matches other confirmation bottom sheets. Co-authored-by: Cursor <cursoragent@cursor.com>

georgewrmarshall commented Jul 14, 2026

View reviewed changes

github-actions Bot added size-S and removed size-XS labels Jul 14, 2026

georgewrmarshall self-assigned this Jul 14, 2026

georgewrmarshall marked this pull request as ready for review July 14, 2026 23:19

georgewrmarshall requested a review from a team as a code owner July 14, 2026 23:19

github-actions Bot added the risk:low AI analysis: low risk label Jul 14, 2026

georgewrmarshall enabled auto-merge July 14, 2026 23:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(confirmations): use elevated surface for edit spending cap modal#33299

fix(confirmations): use elevated surface for edit spending cap modal#33299
georgewrmarshall wants to merge 2 commits into
mainfrom
cursor/fix-edit-spending-cap-modal-pure-black-867f

georgewrmarshall commented Jul 14, 2026 •

edited

Loading

Uh oh!

metamask-ci Bot commented Jul 14, 2026

Uh oh!

github-actions Bot commented Jul 14, 2026

Uh oh!

georgewrmarshall Jul 14, 2026

Uh oh!

georgewrmarshall Jul 14, 2026

Uh oh!

georgewrmarshall Jul 14, 2026

Uh oh!

georgewrmarshall Jul 14, 2026

Uh oh!

georgewrmarshall Jul 14, 2026

Uh oh!

github-actions Bot commented Jul 14, 2026

Uh oh!

codecov-commenter commented Jul 14, 2026

Uh oh!

sonarqubecloud Bot commented Jul 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Uh oh!

Conversation

georgewrmarshall commented Jul 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Performance checks (if applicable)

Pre-merge reviewer checklist

Uh oh!

metamask-ci Bot commented Jul 14, 2026

PR template — items to address before "Ready for review"

Uh oh!

github-actions Bot commented Jul 14, 2026

Uh oh!

georgewrmarshall Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jul 14, 2026

🔍 Smart E2E Test Selection

Uh oh!

codecov-commenter commented Jul 14, 2026

Codecov Report

Uh oh!

sonarqubecloud Bot commented Jul 14, 2026

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

georgewrmarshall commented Jul 14, 2026 •

edited

Loading