fix(pure-black): Network pill and enabled-network list styling#33143
fix(pure-black): Network pill and enabled-network list styling#33143georgewrmarshall wants to merge 2 commits into
Conversation
mm-token-exchange-service
Bot
added
the
team-design-system
Set PickerNetwork default background to background.muted instead of alternative so the first-screen network selector matches the elevated surface spec (TMCU-1078) across themes without per-caller overrides. Co-authored-by: Cursor <cursoragent@cursor.com>
georgewrmarshall
force-pushed
the
cursor/pure-black-network-selector-bg-muted-d768
branch
from
5644917 to
e1bed84
Compare
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: Pure Black gating missing
- Added Pure Black dark-mode gating so PickerNetwork uses background.muted only when the preview flag is on and theme is dark, otherwise background.alternative.
Or push these changes by commenting:
@cursor push 817d2259fd
Preview (817d2259fd)
diff --git a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.styles.ts b/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.styles.ts
--- a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.styles.ts
+++ b/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.styles.ts
@@ -2,7 +2,8 @@
import { StyleSheet, ViewStyle } from 'react-native';
// External dependencies.
-import { Theme } from '../../../../util/theme/models';
+import { AppThemeKey, Theme } from '../../../../util/theme/models';
+import { isPureBlackEnabled } from '../../../../util/theme/themeUtils';
// Internal dependencies.
import { PickerNetworkStyleSheetVars } from './PickerNetwork.types';
@@ -31,7 +32,11 @@
paddingHorizontal: 8,
flexDirection: 'row',
alignItems: 'center',
- backgroundColor: colors.background.muted,
+ // Use muted background ONLY for Pure Black dark mode, otherwise keep previous alternative background
+ backgroundColor:
+ isPureBlackEnabled && theme.themeAppearance === AppThemeKey.dark
+ ? colors.background.muted
+ : colors.background.alternative,
alignSelf: 'center',
} as ViewStyle,
style,You can send follow-ups to the cloud agent here.
Reviewed by Cursor Bugbot for commit e1bed84. Configure here.
Custom RPC row titles collapsed to zero width inside CellSelectWithMenu, and ListItemMultiSelectButton painted background.default on every idle row. Stretch the title row, fix flex shrink, and only apply muted fill when selected. 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:
These changes affect the visual rendering of the NetworkSelector (network management UI), PickerNetwork (network picker pill), and ListItemMultiSelectButton (used in multi-select network lists). No functional logic, state management, navigation, or data flows are changed. SmokeNetworkAbstractions is selected because it directly tests the Network Manager UI, network selector bottom sheet, and network selection flows — exactly the components modified here. No other tags are warranted since the changes are isolated to styling of network-related UI components with no impact on confirmations, accounts, swaps, browser, snaps, or other flows. Performance Test Selection: |
| flexDirection: 'row', | ||
| alignItems: 'center', | ||
| backgroundColor: colors.background.alternative, | ||
| backgroundColor: colors.background.muted, |
There was a problem hiding this comment.
The network pill uses background.muted as the default fill instead of alternative
| container: Object.assign( | ||
| { | ||
| backgroundColor: theme.colors.background.default, | ||
| flexDirection: 'row', |
There was a problem hiding this comment.
Idle rows no longer paint background.default on every CellSelectWithMenu row. Selected state still uses background.muted; unselected rows inherit the sheet surface, matching the ListItemSelect transparent-idle pattern from #33127.
| variant={TextVariant.BodyMD} | ||
| numberOfLines={1} | ||
| style={styles.networkNameText} | ||
| <Box twClassName="w-full flex-row gap-2 items-center self-stretch"> |
There was a problem hiding this comment.
Custom JSX titles for RPC rows with the No network fee tag must span the full cellBaseInfo width. Without w-full and self-stretch the nested Text with flex collapsed to zero width, which is why enabled-network names disappeared while icons and tags still rendered.
| }, | ||
| networkNameText: { | ||
| flex: 1, | ||
| flexGrow: 1, |
There was a problem hiding this comment.
flexGrow and flexShrink with minWidth 0 let the label ellipsize beside the tag instead of flex:1 fighting an auto-sized parent. Pair this with the stretched Box in the title JSX when reviewing row truncation.
georgewrmarshall
changed the title
|
3 participants
Description
Fixes Pure Black theming for the onboarding General network pill and the global Select a network enabled list (TMCU-1078).
PickerNetwork pill:
PickerNetworknow defaults tobackground.mutedinstead ofbackground.alternativeso the "Choose your network" pill stays visible on Pure Black sheets. This is a component-level default (not feature-flag gated); callers can still override viastyle.Enabled network list rows: In
NetworkSelector, RPC rows that render a custom JSX title (with the "No network fee" tag) had collapsed to zero width insideCellSelectWithMenu, so network names were invisible while icons and tags still showed. The title row now stretches to full width and uses safer flex shrink/grow.ListItemMultiSelectButtonalso stops paintingbackground.defaulton every idle row; only the selected row keepsbackground.muted, matching the transparent-idleListItemSelectpattern from #33127.Scope:
PickerNetwork,NetworkSelector, andListItemMultiSelectButton(allCellSelectWithMenuconsumers inherit the idle-row change). Import NFTNetworkListBottomSheetis unchanged (#33131).Changelog
CHANGELOG entry: Fixed Pure Black styling for the network selector pill and enabled network list rows
Related issues
Fixes: TMCU-1078
Refs: TMCU-622 (Pure Black epic)
Related: PR #33127 (
ListItemSelecttransparent idle rows), PR #33131 (Import NFT network sheet)Manual testing steps
Screenshots/Recordings
Before
Simulator.Screen.Recording.-.iPhone.17.Pro.Max.-.2026-07-10.at.15.55.25.mov
After
Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-07-10.at.15.54.30.mov
Pre-merge author checklist
Performance checks (if applicable)
Pre-merge reviewer checklist
Slack Thread