Update content area of login screens to use StepContainerV2

[tellthemachines]

Related to #102039

Proposed Changes

Updates the login screens using isWhiteLogin design to make use of the Step.CenteredColumnLayout wireframe.

WIP - still very messy atm

TODO:

• Work out best place for logic that decides which heading to render (might be better in parent Login component rather than Login block)
• Use StepContainer to render heading
• Redo error message for "Login to your existing account" screen
• Move tos to correct place in new design

Note: having two Login components one of which uses the other is messy given that we're checking many of the same conditions in both, so it's unclear what should belong to which one.

Why are these changes being made?

Testing Instructions

1. Logged out, go to the "Create your account" screen under/setup/onboarding/user.
2. Click "continue with email" and enter an email already linked to an account.
3. Check that content layout is consistent with design:

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 UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• 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-aUh-p2)?

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-141791&env=a8c-for-agencies

[matticbot]

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

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

name                    parsed_size           gzip_size
entry-login                 +6177 B  (+0.3%)    +1201 B  (+0.2%)
entry-stepper               -2055 B  (-0.2%)     -117 B  (-0.0%)
entry-domains-landing         +92 B  (+0.0%)      -36 B  (-0.0%)
entry-dashboard-dotcom        +92 B  (+0.0%)      -36 B  (-0.0%)
entry-dashboard-a4a           +92 B  (+0.0%)      -36 B  (-0.0%)
entry-browsehappy             +92 B  (+0.0%)      -36 B  (-0.1%)
entry-subscriptions           +42 B  (+0.0%)      -47 B  (-0.0%)
entry-reauth-required         +42 B  (+0.0%)      -52 B  (-0.0%)
entry-main                    +42 B  (+0.0%)      -52 B  (-0.0%)

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

Sections (~3392 bytes added 📈 [gzipped])

name                        parsed_size           gzip_size
async-step-use-my-domain         -349 B  (-0.1%)     -507 B  (-0.3%)
stepper-user-step                -196 B  (-0.0%)     -613 B  (-0.3%)
site-setup-flow                   -50 B  (-0.0%)      -16 B  (-0.0%)
onboarding-flow                   -50 B  (-0.0%)      -16 B  (-0.0%)
new-hosted-site-flow              -50 B  (-0.0%)      -16 B  (-0.0%)
hundred-year-plan                 -50 B  (-0.0%)      -16 B  (-0.0%)
hundred-year-domain               -50 B  (-0.0%)      -16 B  (-0.0%)
connect-domain                    -50 B  (-0.0%)      -16 B  (-0.0%)
async-step-unified-plans          -50 B  (-0.0%)      -16 B  (-0.0%)
async-step-unified-domains        -50 B  (-0.0%)      -16 B  (-0.0%)

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 (~16 bytes removed 📉 [gzipped])

name                                       parsed_size           gzip_size
async-load-automattic-help-center-stepper        -50 B  (-0.0%)      -16 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.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• help-center
• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/login-screens-content on your sandbox.