fix(confirmations): align Edit network fee sheet with elevated surfaces

[georgewrmarshall]

Description

In Pure Black dark mode, the Edit network fee bottom sheet (EstimatesModal) showed two visual regressions:

1. The sheet container used background.default (#000000), so it did not match other elevated confirmation bottom sheets.
2. The selected gas option row (e.g. Market) painted a primary.muted fill, creating a visible dark blue/grey band inside the sheet.

This PR applies the same style-only stopgap used elsewhere in confirmations (#33152, gas-fee-token-modal):

• estimates-modal.styles.ts — getElevatedSurfaceColor() + muted border in pure black dark mode
• gas-option.styles.ts — omit primary.muted row fill in pure black dark mode; selection remains on the left-edge indicator

Changelog

CHANGELOG entry: Fixed Edit network fee bottom sheet styling in Pure Black theme so the sheet surface and selected gas option match other elevated confirmation sheets.

Related issues

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

Refs: https://consensyssoftware.atlassian.net/browse/TMCU-622

Manual testing steps

Feature: Edit network fee sheet in Pure Black theme

  Scenario: Selected gas option and sheet surface match elevated sheets
    Given dark mode is enabled and MM_PURE_BLACK_PREVIEW=true
    And the user starts a send flow on an EVM network (e.g. Base)
    When the user opens the confirmation screen and taps Edit network fee
    Then the bottom sheet surface matches other elevated confirmation sheets
    And the selected gas option shows only the left-edge indicator (no primary.muted row fill)
    And unselected options remain visually consistent with the sheet background

Unit tests: gas-option.styles.test.ts, estimates-modal.styles.test.ts, and existing component tests pass.

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.

Made with Cursor

[github-actions]

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.

[metamask-ci]

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 applied the right labels on the PR (see labeling guidelines). Not required for external contributors."). 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.

[github-actions]

🔍 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 PR contains only two files:

1. estimates-modal.styles.ts - A purely cosmetic styling change to the estimates modal container. It updates the background color to use getElevatedSurfaceColor() (instead of direct theme.colors.background.default) and adds a conditional 1px muted border for pure black dark mode. This is a visual-only change with no impact on transaction logic, confirmation flows, or any functional behavior.
2. estimates-modal.styles.test.ts - A new unit test file covering the styling changes above.

These changes are cosmetic in nature (background color and border styling only) and fall under the "COSMETIC CHANGES — IGNORE FOR TEST SELECTION" guidance. The changes do not affect any user-facing functional flows, state management, business logic, or E2E-testable behaviors. No E2E smoke tests are warranted.

Performance Test Selection:
The changes are purely cosmetic styling updates (background color and border) to the estimates modal stylesheet. There is no impact on rendering performance, data fetching, or any performance-sensitive flows. No performance tests are needed.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

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

See analysis details on SonarQube Cloud