Wp-calypso: Gutenboarding: refine UI for the style picker step

[simison]

Now:

Goal:

Let's build (could each be their own PRs):

• [x] Browser chrome and sizing for the preview (@sirreal https://github.com/Automattic/wp-calypso/pull/40290)
• [x] Spacing around elements (@sirreal #40297)
• [x] Font picker (@sirreal #40227)

Context pbAok1-sr-p2

[simison]

Note also moving "create my site" button from the header to the content area (https://github.com/Automattic/wp-calypso/issues/40138#issuecomment-599508709)

@Automattic/gutenboarding-design should the button at style picker say "continue" (via Figma) or "create my site" (via prototype)?

[joanrho]

@simison Let's keep the "Create my site" CTA like in the prototype. Thanks!

[chriskmnds]

Updated to say "spacing around elements" instead for the second TODO, as we are dealing with the header elsewhere (https://github.com/Automattic/wp-calypso/issues/40138)

[sirreal]

• [ ] Browser chrome for the preview

This is partially complete already:

It needs to respond to changes to the selected viewport. Mobile has different chrome.

[sirreal]

@dubielzyk Is there different chrome for the tablet viewport, or should we reuse the desktop or mobile chrome?

EDIT Let's move feedback to #40290

[dubielzyk]

Same chrome. Desktop view has the three system controls in the top left. I just hid them on mobile and tablet.

[sirreal]

Same chrome. Desktop view has the three system controls in the top left. I just hid them on mobile and tablet.

Could you take a look at the screenshots in #40290 (already landed) and let us know what chrome needs to be changed?

[dubielzyk]

Looks good to me from the screenshot. I'd half the opacity of the drop-shadow though. I't s a bit dark at the moment. But I can do a PR later if you want.

[sirreal]

Looks good to me from the screenshot. I'd half the opacity of the drop-shadow though. I't s a bit dark at the moment. But I can do a PR later if you want.

Awesome, thanks! I noticed that desktop and mobile had different alpha in the figma, .25 and .14 respectively, which is how they're currently set.

A PR would be 💯 thanks!

[sirreal]

Noting that moving the buttons is tracked by https://github.com/Automattic/wp-calypso/issues/40241 and #40227 will land the font changes imminently.

I'll close this now, we can open new issues for any other changes.