fix(confirmations): use elevated surface on transaction confirmation BottomSheet

[georgewrmarshall]

Description

In Pure Black mode, the main transaction confirmation bottom sheet (Confirm / confirm-component) passed background.default (#000000) via bottomSheetDialogSheet, overriding the component-library BottomSheet elevated surface. The sheet appeared as flat black while info sections inside used background.muted, producing a visible surface mismatch.

This change:

• Removes the bottomSheetDialogSheet bg-default override so the BottomSheet owns the elevated surface color (getElevatedSurfaceColor)
• Updates full-screen flatContainer and spinnerContainer to use getElevatedSurfaceColor(theme), matching other confirmation bottom sheets (e.g. gas-fee-token-modal, edit-spending-cap-modal)

Part of the Pure Black Hex Background Schema epic (TMCU-622).

Changelog

CHANGELOG entry: null

Related issues

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

Manual testing steps

Feature: Transaction confirmation elevated surface in Pure Black mode

  Scenario: confirmation bottom sheet uses elevated surface color
    Given Pure Black mode is enabled
    And the app is in dark mode
    And the user opens a send/transfer transaction confirmation (e.g. Sending 0 SepoliaETH)

    When the confirmation bottom sheet is displayed
    Then the sheet background uses the elevated surface color (#1c1d1f) instead of flat #000000
    And info sections remain visually distinct on the elevated surface

N/A — Pure Black mode requires device/simulator testing with the feature flag enabled; verified via unit test asserting getElevatedSurfaceColor is used for full-screen container styles.

Screenshots/Recordings

Before

User-provided screenshot: transaction confirmation bottom sheet with flat #000000 background behind elevated info sections.

After

N/A — requires Pure Black mode on device/simulator.

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.

  

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeConfirmations
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 92%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are purely visual/styling updates to the confirmation component:

1. confirm-component.styles.ts: Removed the bottomSheetDialogSheet style and updated flatContainer and spinnerContainer background colors from theme.colors.background.default to getElevatedSurfaceColor(theme). This is a theme/visual change to support "pure black" mode (as noted by the TODO comment).

2. confirm-component.tsx: Removed style={styles.bottomSheetDialogSheet} from the BottomSheet component, consistent with the style removal.

3. confirm-component.styles.test.ts: New unit test file verifying the elevated surface color utility is used correctly.

The changes affect the visual appearance of the confirmation modal/sheet UI. No functional logic is changed - no state management, no transaction processing, no API calls. However, since the BottomSheet style prop was removed and background colors changed, it's important to verify that the confirmation UI still renders correctly and doesn't break any confirmation flows.

SmokeConfirmations is selected because:

• The changed component (confirm-component.tsx) is the core confirmation UI component used for all confirmation types (signatures, transactions, approvals)
• The BottomSheet style change could potentially affect layout/rendering of the confirmation modal
• Visual regressions in the confirmation flow could block users from completing transactions

No other tags are needed since:

• The change is isolated to the confirmation component styling
• No navigation, account management, network, or other subsystems are affected
• No performance-sensitive code paths are modified

Performance Test Selection:
The changes are purely visual/styling updates (background color changes using a theme utility function). No performance-sensitive code paths are modified - no rendering loops, no data fetching, no state management changes. The removal of a style prop from BottomSheet and the change of background color utility function have negligible performance impact.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud