Skip to content

chore: fix Pay With sheet elevation mismatch for pure black #32909

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
georgewrmarshall merged 4 commits into from
Jul 8, 2026
+6 −5
Merged

chore: fix Pay With sheet elevation mismatch for pure black #32909

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
990026d
fix(confirmations): use elevated surface in Pay With bottom sheet sec…
cursoragent Jul 7, 2026
9559c0e
fix(confirmations): use transparent background for Pay With rows
georgewrmarshall Jul 7, 2026
478c4d1
fix(confirmations): let Pay With bottom sheet own section background
georgewrmarshall Jul 7, 2026
3ed6a79
Merge branch 'main' into cursor/fix-pay-with-pure-black-tmcu-994-d276
georgewrmarshall Jul 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion app/components/Views/confirmations/components/UI/pay-with-section/pay-with-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
TextColor,
TextVariant,
} from '@metamask/design-system-react-native';
import { useElevatedSurface } from '../../../../../../util/theme/themeUtils';
import PaymentMethodRow from '../payment-method-row';
import { PayWithSectionConfig } from '../../modals/pay-with-bottom-sheet/pay-with-bottom-sheet.types';

Expand All @@ -14,6 +15,7 @@ export interface PayWithSectionProps {

const PayWithSection = ({ config }: PayWithSectionProps) => {
const testID = config.testID ?? `pay-with-section-${config.id}`;
const surfaceClass = useElevatedSurface();

@georgewrmarshall georgewrmarshall Jul 7, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The container is responsible for the background color. PayWithBottomSheet applies useElevatedSurface on the BottomSheet, so this rows wrapper no longer paints bg-default and child rows inherit the elevated surface.


return (
<Box twClassName="py-2" testID={testID}>
Expand All @@ -27,7 +29,7 @@ const PayWithSection = ({ config }: PayWithSectionProps) => {
{config.title.toUpperCase()}
</Text>
) : null}
<Box twClassName="bg-default" testID={`${testID}-rows`}>
<Box twClassName={surfaceClass} testID={`${testID}-rows`}>
{config.rows.map((row) => (
<PaymentMethodRow key={row.id} {...row} />
))}
Expand Down
9 changes: 5 additions & 4 deletions app/components/Views/confirmations/components/UI/payment-method-row/payment-method-row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ const PaymentMethodRow = ({
}: PaymentMethodRowProps) => {
const tw = useTailwind();
const resolvedTestID = testID ?? `payment-method-row-${id}`;
const rowBackgroundClass = isSelected ? 'bg-section' : 'bg-transparent';

@georgewrmarshall georgewrmarshall Jul 7, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

List items follow the same rule: the BottomSheet container owns the default background. Unselected rows use bg-transparent; bg-section is only for the selected highlight.

@georgewrmarshall georgewrmarshall Jul 7, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

List items follow the same pattern: the BottomSheet container owns the background color. Unselected rows use bg-transparent. bg-section is only for the selected highlight; per-row bg-default was a second surface fill and caused the visible black bands.

const iconSlotTestID = `${resolvedTestID}-icon-slot`;
const tag = renderFirstTag(tagRenderers);

Expand Down Expand Up @@ -131,9 +132,9 @@ const PaymentMethodRow = ({
<Box
flexDirection={BoxFlexDirection.Row}
alignItems={BoxAlignItems.Center}
twClassName={`px-4 py-3 ${
isSelected ? 'bg-section' : 'bg-default'
} ${disabled ? 'opacity-50' : ''}`}
twClassName={`px-4 py-3 ${rowBackgroundClass} ${
disabled ? 'opacity-50' : ''
}`}
testID={resolvedTestID}
>
{content}
Expand All @@ -150,7 +151,7 @@ const PaymentMethodRow = ({
style={({ pressed }) =>
tw.style(
'flex-row items-center px-4 py-3',
isSelected ? 'bg-section' : 'bg-default',
rowBackgroundClass,

@georgewrmarshall georgewrmarshall Jul 7, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a minimal pure-black hotfix. A follow-up PR should replace the bespoke Pressable/Box row with MMDS ListItem or ListItemSelect so selection, press, and surface tokens come from the design system.

@georgewrmarshall georgewrmarshall Jul 7, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rowBackgroundClass keeps the static Box and Pressable paths aligned. The container supplies the default background; rows only add a fill for explicit interaction states such as selected or pressed.

pressed && !disabled ? 'bg-pressed' : '',
disabled ? 'opacity-50' : '',
)
Expand Down
Loading