fix(login): match the iOS layout of the account switcher rows - #1637
Merged
Merged
Conversation
The account name used textLarge (20sp) and the secondary lines textSmall (14sp); iOS sets them at 16pt (appTextMedium) and 12pt (appTextHeading). Move the name to textMedium and the created date, owner address and balance-status lines to caption.
iOS pads each row 20pt and sets the name line 9pt above the secondary lines. On the 5dp grid that is grid.x4 of vertical padding and an extra grid.x1 under the name, for 10dp.
bmc08gt
changed the title
iOS draws a rowSeparator hairline (white at 10%) between the rows. Draw a 0.5dp HorizontalDivider in CodeTheme.colors.divider, which is the same White10, above every row but the first.
bmc08gt
changed the title
iOS sets the name and balance in one bottom-aligned HStack, 10pt apart, with the secondary lines below. Move the balance slot, including its not-found, unavailable and loading states, into a Row with the name, spaced by grid.x2.
Draw it below every row but the last, keyed on lastIndex, rather than above every row but the first.
bmc08gt
changed the title
iOS marks an unknown account with Badge(decoration: .circle(.textError)): a 6pt dot in textError and the label in appTextSmall, textSecondary, set directly after the name. Draw the same with errorText (0xFFFF8383, the iOS textError value) and textSmall, and let the name wrap its width so the badge follows it.
The view model cut the owner address to its first and last four characters. iOS shows the full base58 key on one line and truncates the middle only when it does not fit. Pass the full key through, set it on one line with TextOverflow.MiddleEllipsis, and drop truncateAddress and its tests.
iOS draws the balance with AmountText(flagSize: .small), a 15pt flag beside the amount. Draw it with PriceWithFlag at grid.x3 (15dp). That component hides the amount when there is no flag, so fall back to the plain amount in that case.
iOS titles the screen "Select Account"; Android read "Select an Account". Update title_selectAccount, which both the in-app switcher and the onboarding picker use, and the two Maestro flows that assert on it.
FlagWithFiat is the core-ui component the activity and transaction screens use for a Fiat with its flag. It looks the flag up itself and keeps the amount when there is none, so the PriceWithFlag fallback goes.
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 account rows on the switch account screen were set larger and tighter than iOS. This moves each line to the typography token with the iOS size, and the row spacing to the grid step with the iOS gap. Rows are now separated by a divider, and the balance sits on the name line, as on iOS.
textLarge(20sp)textMedium(16sp)appTextMedium(16pt)textSmall(14sp)caption(12sp)appTextHeading(12pt)textSmall(14sp)caption(12sp)textSmall(14sp), balance slottextMedium(16sp)appTextMedium(16pt)Spacing uses
CodeTheme.dimens.grid, which is a 5dp grid on NORMAL-width phones, the same scale as the iOS values:grid.x3(15dp)grid.x4(20dp)grid.x1(5dp)grid.x1+grid.x1(10dp)grid.x1(5dp)grid.x3(15dp)The divider is a 0.5dp
HorizontalDividerinCodeTheme.colors.divider(White10), which is the color of iOSrowSeparator(white at 10%). It is drawn after every row but the last and spans the list'sinseton both sides.The balance slot, including its not-found, unavailable and loading states, now shares a bottom-aligned
Rowwith the name, spaced bygrid.x2(10dp), matching the iOSHStack(alignment: .bottom, spacing: 10). The name takes the remaining width and ellipsizes."Not Found" is now a badge after the name, matching iOS
Badge(decoration: .circle(.textError)): a 6dp dot inerrorText(0xFFFF8383, the iOStextErrorvalue) and the label intextSmall,textSecondary. iOS spaces the dot 8pt from the label; this usesgrid.x2(10dp), the nearest grid step.The balance now has its currency flag, matching iOS
AmountText(flagSize: .small):FlagWithFiatfrom core-ui, as the activity and transaction screens use it, with agrid.x3(15dp) flag.The owner address is the full base58 key on one line with
TextOverflow.MiddleEllipsis, as iOS sets it with.truncationMode(.middle). It was cut to the first and last four characters in the view model;truncateAddressand its tests are gone.The screen title is "Select Account", as on iOS, rather than "Select an Account".
title_selectAccountalso titles the onboarding picker, and the two Maestro flows that assert on it are updated.Weights still differ: iOS uses bold, and the Android tokens are SemiBold (
captionis Medium). I kept the tokens rather than overriding weight per call site.