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
Details
Details
Check if the screen looks correct.
Diff Detail
Diff Detail
- Repository
- rCOMM Comm
- Lint
No Lint Coverage - Unit
No Test Coverage
Event Timeline
Comment Actions
Don't specify the safe area twice
| native/account/sign-in-navigator.react.js | ||
|---|---|---|
| 55 | RegistrationContainer wraps its children with the SafeAreaView. | |
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
But it looks quite big and might cause some issues depending on the aspect ratio.
There are two directions in which we can improve the consistency:
- Make all the items on this screen centered, so that they are consistent with how we display the QR
- Make all the items left-aligned, so that this screen is consistent with other screens in this flow
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.