chore(pure-black): use background.section for bottom sheets that disappear against pure black#30411
Conversation
… against pure black
…ppear against pure black
|
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. |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #30411 +/- ##
==========================================
- Coverage 82.03% 82.02% -0.01%
==========================================
Files 5454 5456 +2
Lines 145830 145859 +29
Branches 33411 33425 +14
==========================================
+ Hits 119629 119647 +18
- Misses 18016 18018 +2
- Partials 8185 8194 +9 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Introduces useElevatedSurface() hook and getElevatedSurfaceColor() helper to correctly resolve background colors for bottom sheets and action list surfaces. Fixes invisibility caused by background.default being overridden to #000000 when the pure black dark mode flag is enabled.
…-635-action-bottom-sheet
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection: The PR introduces a new theme utility (
Since the BottomSheetDialog change is pervasive (affects all bottom sheets), and the changes touch entry points for many major flows, broad test coverage is warranted. The changes are purely visual/styling (no logic changes), which reduces risk somewhat, but the wide surface area justifies running most test suites. SmokeConfirmations is included because confirmations use bottom sheets extensively. Performance Test Selection: |
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit ceb577c. Configure here.
| const colors = this.context.colors || mockTheme.colors; | ||
| return createStyles(colors); | ||
| const { themeAppearance } = this.context || mockTheme; | ||
| const isDark = themeAppearance === 'dark'; |
There was a problem hiding this comment.
Raw string literal used for theme comparison
Low Severity
The newly introduced comparison themeAppearance === 'dark' uses a raw string literal instead of the AppThemeKey.dark enum constant. The same file already imports from themeUtils (a TypeScript module), so importing AppThemeKey from ../../../util/theme/models is straightforward. The sibling utility themeUtils.ts correctly uses AppThemeKey.dark for the same check, making this inconsistent.
Triggered by learned rule: Use enum constants for themeAppearance comparisons, not string literals
Reviewed by Cursor Bugbot for commit ceb577c. Configure here.
|
Description
Part of an ongoing initiative to audit all app flows against pure black dark mode. Pure black is currently behind the
MM_PURE_BLACK_PREVIEWfeature flag (off by default) and is not yet user-facing — this work is being done ahead of the design-tokens package bump that will make pure black the default dark theme.When the flag is enabled,
background.defaultandbackground.alternativeare both overridden to#000000, causing bottom sheet and action sheet surfaces to become invisible against the pure black screen background. This PR fixes the affected surfaces by replacing those tokens withbackground.section(#1c1d1f), which is intentionally not overridden by the flag and provides the correct elevated surface appearance per the Figma spec.Components updated:
TradeWalletActions— action sheet container + list itemsMoneyAddMoneySheet— bottom sheet backgroundNetworkManager— tab bar + sheet containerNetworkMultiSelector— list body + select-all cellNetworkListBottomSheet— sheet backgroundFundActionMenu— sheet backgroundListItemMultiSelectButton— unselected row backgroundChangelog
CHANGELOG entry:null
Related issues
Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-635
Manual testing steps
Screenshots/Recordings
Buy/Sell
Dark
Light (Unaffected)
Network Picker from Import Token
Dark
Light (Unaffected)
Web
Dark
Light (Unaffected)
Network Manager
Dark
Light (Unaffected)
Money
Dark
Light (Unaffected)
Main Trade Action
Dark
Light (Unaffected)
Before
~After
~Pre-merge author checklist
Performance checks (if applicable)
trace()for usage andaddTokenfor an exampleFor performance guidelines and tooling, see the Performance Guide.
Pre-merge reviewer checklist
Note
Low Risk
Primarily visual/theming changes gated behind
MM_PURE_BLACK_PREVIEW; risk is limited to UI regressions in sheet backgrounds and pressed states across several screens.Overview
Introduces
themeUtilshelpers (getElevatedSurfaceColor,useElevatedSurface) to switch elevated surfaces tobackground.sectionin dark mode whenMM_PURE_BLACK_PREVIEWis enabled.Updates multiple bottom sheets/action sheets and list items to use these helpers (via
twClassName/Tailwind classes or theme-derived colors), preventing sheet surfaces from blending into pure black backgrounds; also adjustsTabsto avoid usingbackground.alternativewhen pure black is enabled in dark mode.Reviewed by Cursor Bugbot for commit ceb577c. Bugbot is set up for automated code reviews on this repo. Configure here.