fix(transactions): tighten the details card stack and drop the header badge - #740
Merged
Conversation
The receipt card, ID card and View in Chat button sat 16pt apart, one spacing for the whole screen. Figma node 9708:118142 puts 8pt between them and a much wider gap above, between the header and the block — they read as one stacked group, not as four evenly spaced items. Groups the three in their own 8pt stack, leaving the header on the outer stack's 16pt. The header gap stays as it was; Figma draws 43pt there and Android draws 10pt, so the two disagree and that one is worth settling before changing. Android spaces all four at `grid.x2`, which is 10dp at NORMAL width. This follows Figma's 8, as the button fill did.
The details header reused the row's avatar wholesale, badge included, so the token appeared twice: once as a coin over the face, and again by name in the line under the amount. Figma draws the header avatar plain — the 80pt frame under node 9708:118182 has no badge child. The badge stays on the row, where the avatar is the only place the token reads. `ActivityAvatar` takes a `showsTokenBadge` flag instead of always deriving it from the activity, and the details header passes false. Turning it off also drops the 8pt trailing overhang the badge reserved, which had been pushing the centred header avatar 4pt off centre.
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.
Follow-on to #739, which landed the button style before these were ready. Both measured against Figma node
9708:105260.The cards sat too far apart
The two cards and the View in Chat 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 header avatar carried a token badge
The header reused the row's avatar wholesale, badge included, so the token appeared twice: once as a coin over the face, once by name in the line under the amount. Figma draws it plain — the 80pt frame under node
9708:118182has no badge child.ActivityAvatarnow takes ashowsTokenBadgeflag rather than always deriving it from the activity; the row keeps its badge, where the avatar is the only place the token reads. Turning it off also drops the 8pt trailing overhang the badge reserved, which had been pushing the centred header avatar 4pt off centre.Where Figma and Android disagree
grid.x2at NORMAL width)The card gap follows Figma, as the button fill in #739 did. The header gap is left alone: Figma and Android are far apart there, and that is worth settling before either platform moves.