fix(txn-details): match "View in Chat" to the cards it sits under - #1434
Merged
Conversation
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.
github-actions
Bot
added
area: ui
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.
The "View in Chat" button on Transaction Details doesn't match the cards directly above it, on two counts.
Fill. It used
ButtonState.Filled10→White10(0x1AFFFFFF), whileDetailsCard— the panel behind both the receipt card and the ID card — usesWhite05(0x0CFFFFFF).Corner radius.
CodeButtondefaults toCodeTheme.shapes.small(8dp);DetailsCardusesextraSmall(6dp).Figma
9708:118142holds all three as siblings — receipt card9708:118165, ID card9708:118143, button9708:118123— and gives every one of themrgba(255,255,255,0.05)androunded-[6px]. All three are even named "Button" in the file. The point of the design is that the button reads as a fourth card in the stack rather than as a control sitting on top of them. The two cards were already correct; only the button had drifted, so this is button-only and not screen-wide. Height needed no change — Figma's 60px is what it already rendered.CodeButtontakes its background solely fromButtonState.colors()and exposes no per-call background override, so no existing state could express the card fill. This addsButtonState.Filled05next toFilled10.Filled10itself is untouched, so its other caller — the action button inCallout— is unaffected. The radius is a per-callshapeargument, whichCodeButtonalready supports.This mirrors the iOS side, which added a
.filled05style for the same discrepancy in code-payments/code-ios-app#739.The module's
TransactionDetailsScreenshotTestrenders PNGs for eyeballing rather than asserting against checked-in goldens, so there were no reference images to update.