fix(transactions): draw View in Chat as a card, not the primary action - #739
Merged
Conversation
The button used `.filled` — solid white on black text, the style reserved for a screen's primary action. Figma node 9708:118123 fills it with rgba(255,255,255,0.05) and white text, the same tint the receipt and ID cards above it already carry, so it reads as a fourth card in the stack rather than the loudest thing on the screen. Android draws it the same way, via `ButtonState.Filled10`. Adds `.filled05` alongside the existing `.filled20`, and drops the button's extra 4pt top padding: that gap held a prominent button off the cards, and a card-shaped button belongs on the stack's own 16pt spacing. Android's `Filled10` is white at 10%, where Figma is 5%. This follows Figma, which is also what `Color.backgroundRow` and the adjacent cards use; the Android side is filed separately.
This was referenced Sep 8, 2026
bmc08gt
added a commit
to code-payments/code-android-app
that referenced
this pull request
Sep 8, 2026
) * fix(txn-details): match "View in Chat" to the cards it sits under The button used ButtonState.Filled10, i.e. White10 (0x1AFFFFFF), while the receipt and ID cards directly above it use White05 (0x0CFFFFFF) via DetailsCard. Figma 9708:118123 gives the button rgba(255,255,255,0.05) — the card fill — so it reads as a fourth card in the stack rather than as a separate control. The two cards were already correct; only the button drifted. CodeButton takes its background solely from ButtonState.colors(), with no per-call override, so expressing the card fill needs a new state. Filled05 is added alongside Filled10, which Callout still uses and which is unchanged. Mirrors the iOS .filled05 added in code-payments/code-ios-app#739. * fix(txn-details): match "View in Chat" corners to the cards too CodeButton defaults to CodeTheme.shapes.small (8dp); DetailsCard uses extraSmall (6dp). Figma 9708:118142 gives all three siblings — receipt card, ID card, button — rounded-[6px], so the button was the odd one out on corners as well as fill.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two fidelity fixes on Transaction Details, both measured against Figma node
9708:105260.The button was the primary-action style
"View in Chat" used
.filled— solid white background, black text, the style reserved for a screen's primary action. Figma node9708:118123fills it withrgba(255,255,255,0.05)and white text: the same tint the receipt and ID cards directly above it carry, so it reads as a fourth card in the stack rather than the loudest thing on the screen. Android draws it the same way, viaButtonState.Filled10.FilledButtonStylegains.filled05, following the existing.filled20pattern.Metrics.buttonRadius(6) andbuttonHeight(60) already match the node.The cards sat too far apart
The two cards and the button were spaced at 16pt, one value for the whole screen. Figma node
9708:118142puts 8pt between them, with a much wider gap above separating them from the header — they read as one stacked group, not four evenly spaced items.They now sit in their own 8pt stack, with the header left on the outer stack's 16pt. The button also drops its
.padding(.top, 4), which had held a prominent primary button off the cards.Where Figma and Android disagree
White10=0x1AFFFFFF)grid.x2at NORMAL width)The first two follow Figma, which is also what
Color.backgroundRowand the adjacent cards already use. The header gap is left alone: Figma and Android are far apart there, and that is worth settling before either platform moves. Matching the Android side to its own cards is filed separately.