You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

You can test the changes on this Pull Request by downloading the APK here.

Hey, thanks for the ping, @zwarm ! This is starting to look really good.

The layout is looking quite tight generally, but before I get into any specific, one general point is that everything looks slightly smaller than I expect.

This could be an issue with the resolution I'm designing at. I have noticed things sometimes render smaller than I expected on Android. Just wonder if you could let me know what values you are using. E.g. are you using Body 16dp for those lines? It looks like 14dp on my device. But it could be my issue. This feedback goes across all screens. Just using this example.

Otherwise they all look right, but just slightly small!

Other than that

• it looks like the blue used in the checkboxes isn't matching the blue elsewhere in the app.
• I also found the checkboxes hard to tap (related to size obviously). Is it a standard component we are using? I based the designs on https://material.io/components/checkboxes

The layout is looking quite tight generally, but before I get into any specific, one general point is that everything looks slightly smaller than I expect.

You are correct the sizes are off, I upped them. Please note that we are sharing components between scan, restore & backup; therefore the styling for common components will be reflected in all of the features.

• it looks like the blue used in the checkboxes isn't matching the blue elsewhere in the app.

The blue matches the checkboxes in the activity log filter, let me know if you want to change that and if so, to what color blue.

• I also found the checkboxes hard to tap (related to size obviously). Is it a standard component we are using? I based the designs on https://material.io/components/checkboxes

Yes, the checkboxes are material design - right out of the box. I increased the tap dimensions (the entire row is tappable too)

@osullivanchris Let me know what you think. Copy will come in a future PR. Thanks

👋 Have done another round of reviewing this, thanks for the fixes. Getting into the nitty gritty this time.

Type sizes
Looks much better now, thanks!

Please note that we are sharing components between scan, restore & backup; therefore the styling for common components will be reflected in all of the features.

That's fine, scan had the same issues and is looking better as a result of these changes too.

General

• bold text in heading looks too heavy. Can we use medium?
• Worried about how we define type sizes. It is now right to my eye. But is it using the right semantics? E.g. I know its 16 dp but is it body? Might affect custom size settings that users have. And is the heading a heading or just hard coded size and weight?

Progress bar

• can we use a more subtle grey for the background, and a brighter blue. Is there colours we are already using that you can try to achieve this?
• In dark mode, the blue colour looks inset in the grey background. I can see a 1px grey border around the blue. Possible to remove?

Checkboxes

• in the mocks, for some of the detailed info in the text I used a secondary grey colour. But I don't know if that's possible to do in the string provided?
• "The blue matches the checkboxes in the activity log filter, let me know if you want to change that and if so, to what color blue." checked this and you're correct. Its a global colour thing. So no fix here.
• I had aligned the text in the checkboxes to the same keyline used for headers, icons etc. Not sure if possible. Maybe its set by default, in which case, its fine. Just mentioning in case we have defined it and its an easy fix

Tablet/Landscape
I don't want to invest in anything too custom or specific here. But I think we need a basic fix on the width. By allowing the layout to go to full-width, buttons and lines of text are getting super long.

Here was what I had played around with in the final designs post. It isn't perfect either. But thinking we should have a max-width for the content area, and a max-width for the button size (maybe just define buttons as text + padding, once we go above phone width?).

I am also open to doing same left aligned, if it is better from a code perspective.

👋 Have done another round of reviewing this, thanks for the fixes. Getting into the nitty gritty this time.

General

• bold text in heading looks too heavy. Can we use medium?

I removed the extra "bold" on the headers.

• Worried about how we define type sizes. It is now right to my eye. But is it using the right semantics?

We are using the WP themes directly. No hardcoding of sizes.

Progress bar

Progress bar matches activity log list progress (so scan, backup, restore and activity log are all the same)

Checkboxes

• in the mocks, for some of the detailed info in the text I used a secondary grey colour. But I don't know if that's possible to do in the string provided?

I didn't see the color gray in the specs, so I randomly chose a gray from here. I can easily change the reference, so let me know which one you want.

• I had aligned the text in the checkboxes to the same keyline used for headers, icons etc. Not sure if possible. Maybe its set by default, in which case, its fine.

I aligned the spacing. :)

Tablet/Landscape

Tablets will be addressed separately, but it may be after the MVP depending on time constraints.

@osullivanchris - Thanks for sticking with me 👋

Ah wow it was already looking pretty good, but its great now. All those little details are looking 👌

Very happy with this. Thanks for fixing all those little details.

Tiny one that I hardly even want to mention because I just want to ✅ this task. But the Share icon after you download a backup is maybe a little large (although I know we usually do 24dp everywhere). I pushed it down to 16dp in the designs.

Share icon after you download a backup is maybe a little large (although I know we usually do 24dp everywhere). I pushed it down to 16dp in the designs.

I'll take this as a separate issue. Thanks