UI feedback

Posting an updated video. My impressions:

1. The progress screen is now empty, but this might be okay.
2. All three screens (QR, progress, error) now have different modal dimensions. Aligning them would make the progress screen feel emptier.

Thanks, this looks way better! We're almost there... only thing left is to align the dimensions. I feel strongly that dimensions of a modal should not randomly change in size. It's okay that it looks kind of empty, we can eg. vertical-align the progress step indicator to make it look better. Additionally, realizing that the process of the subtitle in the header in only some cases (not on the starting screen) will be weird, so probably best to move the subtitle below the "underline" that appears under the header, so that the underline looks look like it jumps around.

Aligning to the largerst screen (error) looks like this:

I'm still not convinced that we should align sizes to the error screen that should normally be displayed rarely. Perhaps aligning only the QR and progress screens should be sufficient

Thanks, this looks better!

Please see above:

vertical-align the progress step indicator to make it look better

Perhaps it's not clear, but I meant to suggest centering it vertically.

Regarding this:

Perhaps aligning only the QR and progress screens should be sufficient

I'd be more okay with having the error modal a different size. But also, it seems like there is a lot of text in the error modal.

I wonder if we can reduce the amount of text. Where is it sourced from? I'd like to provide suggestions, but I can't see the source here.

Separately, question: does the test_error line wrap?

I wonder if we can reduce the amount of text. Where is it sourced from? I'd like to provide suggestions, but I can't see the source here.

We've been discussing error screen contents on Linear. I've just put up a diff for native: https://phab.comm.dev/D14924 - this web screen has the exact same content.

Perhaps it's not clear, but I meant to suggest centering it vertically.

Like this?

Separately, question: does the test_error line wrap?

Yes, so in some cases, the error modal could become taller than the initial height (it has the min-height set)

Okay, let's try this to keep the height consistent, even for the error screen:

1. Remove subtitle entirely
2. Remove "Failed to restore your data from backup" line (on mobile as well)
3. Replace "Since your backup appears to be corrupt, you may lose data if you log out of your primary device at this time." with "Your backup appears to be corrupt. Be careful with your primary device, as you may lose data if you log out of it at this time.
4. Replace "Continue without restoring" with "Log in without restoring"
5. Remove the line "You can try restoring again..."
6. Prevent the error message line from wrapping on web (not mobile)
7. This should reduce some height from the combined screen. If there is still extra space in the QR code screen, then try vertically centering the QR code in the whitespace
8. If it still looks like too much space, we can try making the buttons on the error screen on web appear side-by-side instead of on top of each other

Can you share videos of both web and mobile?

If after all of this it doesn't look good, then we can consider making the error screen a different height than the other two.

Thank you for the feedback!

• The issue with error screen height seems solved, The QR code screen now takes the same amount of space as the error screen.
• On the other hand, the progress view now looks empty, compared to the initial video. To fill this empty space, I'd keep these progress steps at the top (in the same place as on the error screen) and fill the empty space with an SVG logo or something similiar? But that would require designing one
• Also I hid the debug info (it shouldn't affect the prod design) and made the error text no-wrap (it's scrollable when too long).

Here it is how web looks like after applying the suggestions:

For mobile, the initial scope assumed the same RestoreBackupScreen is reused for both primary restore and QR auth. However, I'm planning to improve the UI here as well, following the web design: ENG-10992.

• For the QR login, I matched the error screen content with the above suggestions.
• For the primary restore, the "[...] Be careful with your primary device [...]" doesn't make sense, so I left the "Failed to restore your data from backup".

Thanks! This looks great :)

Just two things:

First, I wonder if we should move the "Be careful with your primary device" message to the actual primary device. Something like "If you log out of this device now, you may lose some data."

On the other hand, the progress view now looks empty, compared to the initial video. To fill this empty space, I'd keep these progress steps at the top (in the same place as on the error screen) and fill the empty space with an SVG logo or something similiar? But that would require designing one

Second, regarding this... I agree it looks empty. We could potentially bring a spinner back, but I think it looks weird to have two spinners. If we do this, I'd suggest removing the existing small spinner in the progress steps. I also think that box around the big spinner in the original video looked weird... I would remove the box.

Nice work! Looks good to me :)

Do you mean showing an alert on the primary device? Such information could be sent via Tunnelbroker, and this is not a bad idea. I'll create a follow-up task for this. Regardless, let's keep this message on the secondary device UI as well.

Ah, I got confused. You shared two videos: one of the primary and one of the secondary. For some reason I thought the primary was showing the process of scanning a QR code, but after rewatching it's clear that it's showing the restore flow.