[Site Design Revamp] Enlarges design thumbnails

[antonis]

Fixes #16408

Description

This PR enlarges the the thumbnails of the site design picker by dynamically setting the layout dimension. This is achieved by:

1. defining a common dimension provider interface for both layout/design pickers
2. passing a different implementation for the Page Layout picker
   and the Site Design picker
3. setting the desired preview thumbnail dimensions programmatically

The PR also sets the loading skeleton dimensions to match those of the thumbnails on each screen.

Note:
Other alternative approaches were considered/tried. One involved creating separate layout files but due to the structure of the code this required duplicating the implementation of the LayoutCategoryAdapter and its nested components.

To test

Start the site creation flow and verify that the thumbnails are enlarged

Before (feature/site-design-revamp)	After

Verify that the UI of the page layout picker is unchanged

Before (19.8)	After

Regression Notes

1. Potential unintended areas of impact
   Page Layout Picker UI

2. What I did to test those areas of impact (or what existing automated tests I relied on)
   Manual testing and the existing ModalLayoutPickerViewModelTest

3. What automated tests I added (or what prevented me from doing so)
   Relied on existing tests

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[peril-wordpress-mobile]

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

[peril-wordpress-mobile]

You can test the changes on this Pull Request by downloading the APKs:

• Jetpack-pr-16474-build-122808.apk

• WordPress-pr-16474-build-122808.apk

[twstokes]

👋 I've updated the issue to include the exact dimensions from the designs, which it looks like you're matching for mobile (200px). 👍

I'm not sure if Android will need to handle tablet widths, which appear to be 250px.

[antonis]

👋 I've updated the issue to include the exact dimensions from the designs, which it looks like you're matching for mobile (200px). 👍

I'm not sure if Android will need to handle tablet widths, which appear to be 250px.

Thank you for pointing this out @twstokes 🙇
I've added a different dimension for tablet with 3f080de

[mkevins]

I tested this on a Pixel 3a (physical device) for both the page and site design pickers, in both portrait and landscape modes, and it is working as described. Also, the code changes look great.

Thank you for also mentioning the alternative approaches, and the rationale for going with this approach. I completely agree with the rationale, and appreciate the effort to find the cleanest way forward, reducing the potential for tensions to arise between the usages of these shared implementations. Great work Antonis!

One minor observation (not a blocker, but perhaps just something to confirm), I noticed that in the screenshots for the page picker provided in the description:

screenshots

Verify that the UI of the page layout picker is unchanged

Before (19.8)	After

the first category (Blog) seems slightly smaller in the "after" image (i.e. the horizontal rules seem closer together vertically compared to the "before" image). I didn't notice this in my testing, but only when looking closely at the provided screenshots, so perhaps this is more of an issue with the screenshots themselves? I also notice the clock is offset a bit, so I'm thinking it's a screenshot issue, and not an implementation issue.

[antonis]

Thank you for reviewing @mkevins 🙇

the first category (Blog) seems slightly smaller in the "after" image (i.e. the horizontal rules seem closer together vertically compared to the "before" image)
I hadn't noticed that but I think it has to do with the way the markdown table is rendered since when I open the full size images the match on the size of the rows.

I noticed thought the issue with the subtitle width/margin (notice that the 2nd line breaks on a different place) 🤔
I'll proceed with merging this PR and look into it separately since this seem to exist on our feature branch already.

[mkevins]

when I open the full size images the match on the size of the rows

Thanks for confirming 👍 I figured it must be from the way it was displayed, since the clock was not aligned either, and that's not part of "our" UI 😄 .