fix(confirmations): use elevated surface color for TextWithTooltip modal in Pure Black mode by georgewrmarshall · Pull Request #33300 · MetaMask/metamask-mobile

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

Description

In Pure Black mode, the TextWithTooltip info bottom sheet used background.default, which collapsed visually into the flat black confirmation surface beneath it. This change uses getElevatedSurfaceColor(theme) on the modal container so the bottom sheet renders with the correct elevated surface color in Pure Black dark mode, matching other confirmation UI components.

Changelog

CHANGELOG entry: null

Related issues

Fixes: TMCU-1094

Manual testing steps

Feature: TextWithTooltip Pure Black elevated surface

  Scenario: tooltip bottom sheet uses elevated surface in Pure Black mode
    Given Pure Black mode is enabled
    And the app is in dark mode
    And a confirmation screen with a TextWithTooltip row is open

    When the user taps the tooltip/info value to open the bottom sheet
    Then the bottom sheet background is visibly elevated above the confirmation surface
    And it does not appear as flat black against the underlying screen

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.

Replace background.default with getElevatedSurfaceColor(theme) on the TextWithTooltip bottom sheet container so Pure Black mode shows the correct elevated surface instead of flat black. Fixes TMCU-1094 Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

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

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.

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

github-actions · 2026-07-14T23:21:30Z

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:21:32Z

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


TextWithTooltip wraps info rows such as token-value and currency-display: tapping the value opens a BottomModal sheet with explanatory copy, not a full confirmation modal. In Pure Black dark the container used background.default and vanished against the flat confirmation screen (TMCU-1094); getElevatedSurfaceColor elevates only this sheet chrome.

georgewrmarshall · 2026-07-14T23:21:33Z

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


isPureBlackDark uses the same gate as other confirmation bottom sheets: isPureBlackEnabled plus AppThemeKey.dark. Light mode and non-preview builds are unchanged.

georgewrmarshall · 2026-07-14T23:21:34Z

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


border.muted separates the elevated sheet from the flat black confirmation backdrop when borderWidth is 1; borderWidth 0 in standard themes avoids extra chrome on the rounded BottomModal.

georgewrmarshall · 2026-07-14T23:21:36Z

      top: 10,
      position: 'absolute',
    },
+    // TODO(Pure Black): Remove once MMDS ships pure-black-aware surface tokens.


Temporary themeUtils shim with TODO until MMDS ships native elevated surface tokens; tooltipHeader and tooltipContext inner layout are out of scope.

georgewrmarshall · 2026-07-14T23:21:37Z

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


Manual validation: open any confirmation with a tappable info value (token or fiat amount using TextWithTooltip), tap the value to open the info sheet. With MM_PURE_BLACK_PREVIEW and dark appearance the sheet should show elevated gray with muted top border.

github-actions · 2026-07-14T23:23:02Z

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The change is a styling update to text-with-tooltip.styles.ts in the confirmations UI. It adds pure black theme support by:

Using getElevatedSurfaceColor for the tooltip container background
Adding a border (width=1, muted color) when pure black dark mode is enabled

This is a visual-only change affecting the tooltip component within the confirmations flow. No functional logic is changed. The risk is low - it only affects the visual appearance of tooltips in confirmations screens. SmokeConfirmations is selected as the most relevant tag since this component lives in the confirmations UI directory and could affect how confirmation screens render during E2E tests.

Performance Test Selection:
This is a pure styling change to a tooltip component in the confirmations UI. It only modifies background color and border styling based on theme settings. There is no performance-sensitive code changed (no rendering loops, no data fetching, no state management changes), so no performance tests are needed.

View GitHub Actions results

sonarqubecloud · 2026-07-14T23:42:53Z

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 TextWithTooltip sheet

9afff54

Apply muted border on elevated surface in Pure Black dark mode so the info bottom 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:30

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

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(confirmations): use elevated surface color for TextWithTooltip modal in Pure Black mode#33300

fix(confirmations): use elevated surface color for TextWithTooltip modal in Pure Black mode#33300
georgewrmarshall wants to merge 2 commits into
mainfrom
cursor/fix-text-with-tooltip-pure-black-4dee

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!

sonarqubecloud Bot commented Jul 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 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!

sonarqubecloud Bot commented Jul 14, 2026

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

georgewrmarshall commented Jul 14, 2026 •

edited

Loading