fix(confirmations): use elevated surface color in ConfirmAlertModal for Pure Black#33296
fix(confirmations): use elevated surface color in ConfirmAlertModal for Pure Black#33296georgewrmarshall wants to merge 2 commits into
Conversation
Replace background.default with getElevatedSurfaceColor in the ConfirmAlertModal bottom sheet so Pure Black mode shows the correct elevated surface when stacked on the confirmation screen. Fixes TMCU-1093 Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
metamask-ci
Bot
added
the
team-design-system
PR template — items to address before "Ready for review"Warnings — informational, address before merging:
See docs/readme/ready-for-review.md for the full Definition of Ready for Review. |
Adds a muted border in Pure Black dark mode so the elevated sheet edge reads clearly against the flat confirmation background. Co-authored-by: Cursor <cursoragent@cursor.com>
|
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. |
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection:
This is a visual/cosmetic change with no functional logic changes. However, since it modifies the styling of the confirm-alert-modal component which is part of the confirmations flow, running SmokeConfirmations is appropriate to verify the modal renders correctly and doesn't break any confirmation UI flows. No other test areas are impacted as this is isolated to the confirmations modal styling. Performance Test Selection: |
|
| // Drop getElevatedSurfaceColor, isPureBlackEnabled, and AppThemeKey checks. | ||
| modalContainer: { | ||
| backgroundColor: theme.colors.background.default, | ||
| backgroundColor: getElevatedSurfaceColor(theme), |
There was a problem hiding this comment.
ConfirmAlertModal opens over the confirmations screen, which is flat black in Pure Black dark. background.default on the sheet matched that parent (TMCU-1093); getElevatedSurfaceColor maps to background.alternative only when Pure Black preview and dark appearance are both active.
| const styleSheet = (params: { theme: Theme }) => { | ||
| const { theme } = params; | ||
| const { colors } = theme; | ||
| const isPureBlackDark = |
There was a problem hiding this comment.
isPureBlackDark uses the same gate as gas-fee-token-modal.styles.ts: isPureBlackEnabled plus AppThemeKey.dark. Light mode and non-preview builds keep background.default with no border, so this is scoped to the Pure Black dark case only.
| modalContainer: { | ||
| backgroundColor: theme.colors.background.default, | ||
| backgroundColor: getElevatedSurfaceColor(theme), | ||
| borderWidth: isPureBlackDark ? 1 : 0, |
There was a problem hiding this comment.
The 1px border.muted edge matches gas-fee-token-modal and the value-detail bottom sheet follow-up. Elevated fill alone was still hard to read against the flat confirmation backdrop in device QA.
| isPureBlackEnabled && theme.themeAppearance === AppThemeKey.dark; | ||
|
|
||
| return StyleSheet.create({ | ||
| // TODO(Pure Black): Remove once MMDS ships pure-black-aware surface tokens. |
There was a problem hiding this comment.
Temporary Pure Black shim per repo convention: themeUtils branching here until MMDS exposes surface tokens that distinguish default vs elevated without local isPureBlackEnabled checks.
| return StyleSheet.create({ | ||
| // TODO(Pure Black): Remove once MMDS ships pure-black-aware surface tokens. | ||
| // Drop getElevatedSurfaceColor, isPureBlackEnabled, and AppThemeKey checks. | ||
| modalContainer: { |
There was a problem hiding this comment.
Style-only change; no new tests. Manual validation path: test-dapp Sign In With Ethereum Bad Domain, acknowledge the inline Request from alert, then tap Confirm to surface this modal (testID confirm-alert-modal). Blockaid malicious batch is an alternate path if security alerts flag the request.
2 participants
Description
In Pure Black mode, the
ConfirmAlertModal(high-risk / Blockaid warnings) bottom sheet usedbackground.default, which collapses visually against the elevated confirmation surface beneath it.This change replaces
theme.colors.background.defaultwithgetElevatedSurfaceColor(theme)on the modal container, matching other confirmation modals (e.g.gas-fee-token-modal).Changelog
CHANGELOG entry: null
Related issues
Fixes: TMCU-1093
Manual testing steps
Screenshots/Recordings
Before
After
Pre-merge author checklist
Performance checks (if applicable)
N/A
Pre-merge reviewer checklist