Theme Showcase: Update the theme detail page layout

[taipeicoder]

Proposed Changes

This PR updates the theme detail page layout as per the design spec in 0EogtxvlmxMGcnEEaMVECv-fi-2412%3A63031. In the spirit of controlling the scope of this PR, style variations and upsell banners will be continued to be worked on in later PRs. In other words, this PR is about the layout changes made to the theme detail page for both desktop and mobile views.

Desktop view

Before	After

Mobile view

Before	After

Testing Instructions

• Head to the logged-in Theme Showcase /themes/${site_slug}. If using calypso.live, the flag themes/showcase-i4/details-and-preview is required.
• Ensure that the layout update is as per the design spec in 0EogtxvlmxMGcnEEaMVECv-fi-2412%3A63031 (see the ready for dev area).
• Ensure to test the logged-out theme showcase as well.

Note: There will be flash of old UI before the new UI is applied. This is due to the feature flag being activated with a delay, and so the flash of old UI won't happen once the feature flag is enabled by default.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-57560

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-57560&env=jetpack

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~54 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
entry-stepper               +258 B  (+0.0%)      +51 B  (+0.0%)
entry-main                  +258 B  (+0.0%)      +50 B  (+0.0%)
entry-login                 +258 B  (+0.0%)      +49 B  (+0.0%)
entry-domains-landing       +258 B  (+0.0%)      +49 B  (+0.0%)
entry-browsehappy           +258 B  (+0.2%)      +49 B  (+0.2%)
entry-gutenboarding         +245 B  (+0.0%)      +51 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~3537 bytes added 📈 [gzipped])

name   parsed_size           gzip_size
theme     +12905 B  (+2.7%)    +3537 B  (+2.5%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~2261 bytes added 📈 [gzipped])

name                                                                 parsed_size           gzip_size
async-load-automattic-design-preview-src-components-style-variation   +1164747 B    (new)  +348886 B    (new)
async-load-automattic-design-preview                                      +618 B  (+0.1%)      +63 B  (+0.0%)
async-load-pattern-list-renderer                                           -13 B  (-0.0%)      +17 B  (+0.0%)
async-load-pattern-large-preview                                           -13 B  (-0.0%)      +15 B  (+0.0%)
async-load-pattern-assembler-container                                     -13 B  (-0.0%)      +19 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[arthur791004]

Some design feedback:

• The height of the style variations looks weird on mobile
  
• The background color is darker than before, is it intended?
  

[taipeicoder]

Some design feedback:

• The height of the style variations looks weird on mobile
  

Hmmm, seems that the way the height is calculated is quite fragile 😅 I've adjusted its size to be smaller for the mobile view.

• The background color is darker than before, is it intended?
  

This is intended to follow the same style in /plugins (e.g.: https://wordpress.com/plugins/woocommerce). Mentioned by @davewhitley in 0EogtxvlmxMGcnEEaMVECv-fi-2412%3A63031 and

[arthur791004]

Looks like it should be 1024px 😅

[taipeicoder]

Good catch, fixed 🙂

[arthur791004]

👍