fix(confirmations): use elevated surface color in AdvancedGasPriceModal

[georgewrmarshall]

Description

In Pure Black mode, the Advanced gas price bottom sheet (AdvancedGasPriceModal) used background.default (#000000) on its container while stacked over an elevated confirmation surface, making the modal appear flat and indistinguishable from the parent.

This change replaces theme.colors.background.default with getElevatedSurfaceColor(theme) on the modal container, matching the pattern used by other confirmation gas modals (e.g. gas-fee-token-modal). A muted border is also applied in Pure Black dark mode for visual separation.

Fixes TMCU-1092.

Changelog

CHANGELOG entry: Fixed Advanced gas price bottom sheet background in Pure Black mode on transaction confirmations.

Related issues

Fixes: TMCU-1092

Manual testing steps

Feature: Advanced gas price modal Pure Black background

  Scenario: Advanced gas modal uses elevated surface in Pure Black mode
    Given Pure Black mode is enabled
    And the user opens a transaction confirmation on a legacy gas-price network
    When the user taps Edit network fee then Advanced
    Then the Advanced gas price bottom sheet background uses the elevated surface color
    And the modal is visually distinct from the confirmation surface beneath it

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I have read the contributing guidelines and code of conduct.
• I have completed the PR template to the best of my ability.
• I have included tests if applicable.
• I have documented code with JSDoc if applicable.
• I have applied the right labels for this PR.

Performance checks (if applicable)

• N/A — styling-only change with no performance impact.

Pre-merge reviewer checklist

• Reviewer item

  

[metamask-ci]

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

Warnings — informational, address before merging:

• Pre-merge author checklist has only 6 of the required 8 items. Every checklist row must be present and consciously checked — do not delete rows.

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: 92%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR contains only two files:

1. advanced-gas-price-modal.styles.ts: A purely visual/styling change to the advanced gas price modal. It updates the background color to use getElevatedSurfaceColor() (for pure black theme support) and adds a conditional border (1px muted border) when pure black dark mode is enabled. This is a cosmetic change — no functional logic, no gas fee calculation, no transaction flow changes.

2. advanced-gas-price-modal.styles.test.ts: A new unit test file added to validate the styling logic above. This is a unit test, not an E2E test.

The changes are limited to:

• Visual appearance of the advanced gas price modal (background color + border for pure black theme)
• A new unit test for the stylesheet

These changes do not affect:

• Gas fee calculation or submission logic
• Transaction confirmation flow
• Any shared components (TabBar, navigation, modals logic)
• Any controller or engine code
• Any E2E test infrastructure

Since the changes are purely cosmetic (styling/theming adjustments) and only affect the visual appearance of the modal in pure black dark mode, no E2E smoke tests need to be triggered. The unit tests added cover the styling logic adequately.

Performance Test Selection:
The changes are purely cosmetic styling changes to the advanced gas price modal (background color and border for pure black theme). There is no impact on performance-sensitive flows such as app launch, login, onboarding, swaps, or asset loading. No performance tests are warranted.

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