Avoid using hardcoded margin and make the styling consistent with the registration flow. In the following diffs new screens from the restoration flow are introduced and all of these should follow the same theme.
Depends on D13906
Differential D14064
[native] Make QR screen style consistent with the registration flow tomek on Thu, Nov 28, 5:31 AM. Authored by Tags None Referenced Files
Subscribers
Details Avoid using hardcoded margin and make the styling consistent with the registration flow. In the following diffs new screens from the restoration flow are introduced and all of these should follow the same theme. Depends on D13906 Check if the screen looks correct.
Diff Detail
Event TimelineComment Actions Don't specify the safe area twice
Comment Actions It looks weird that we're left-aligning the header and body, but the QR code and the graphic below it are centered. Do you think we can make it more consistent? Comment Actions There are two directions in which we can improve the consistency:
It seems like the 2nd approach is better, because it will make the whole experience more consistent. The problem with it is that the QR code doesn't look great (at least to me) when not centered: One solution to that is making it bigger, to take the whole width: But it looks quite big and might cause some issues depending on the aspect ratio. We can also consider keeping just the QR at the center: I don't have an intuition about other directions which we can take. One idea, how to make this centered and consistent is to pretend it's left-aligned by adding a padding around it, e.g.: Regarding the instructions, we can remove the border, left-align them, and use secondary color for the title, and tertiary for the steps: Yet another option is to display the QR in a similar way to how we display big icons on the other registration-like screens: Comment Actions I think these two options were the best: Maybe something in between, where the QR code is large and takes up most of the space, but not quite as much as in your largest example? Worth considering how this looks on mini devices (eg. iPhone 12 mini) or devices with strange dimensions Comment Actions One other thing is that it would be good to have bullet points for the three lines of instructions for finding the scanner. Comment Actions The QR code size was made to depend on the screen width, which is always less than the height. This allows the user to always be able to see the full QR even for the most uncommon aspect rations (sometimes the user would need to scroll this screen). Tested on two devices, one of which has 16:9 aspect. Added the bullet points - it seems like the common practice is to use Unicode chars for that. |