P2: customize signup page

[annemirasol]

Changes proposed in this Pull Request

• Customizes the signup page for P2 flows, as described in p9lV3a-2Lp-p2. This is part of the P2 Onboarding project.
• Refactor: move parts of the customized styles for accept-invite signup to logged-out-form so it can be reused by the start/p2 flow

Testing instructions

• Regression test: verify that non-P2 signup flows have the regular signup screen.
• Regression test: verify that accepting invites for non-P2 sites have the regular signup screen.
• Check that nothing looks broken for the following:
  • sign up screen when accepting P2 invites
  • sign up screen for the /start/p2 flow
• Check that you can successfully sign up via the /start/p2 flow

Screens

1. Before expanding the email signup form

2. After expanding the email signup form (at 80%)

3. (Refactored so styles for email signup form are shared) The accept-invite-logged-out screen

[github-actions]

Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:build-15184
Link to Jetpack Cloud live: https://calypso.live?image=registry.a8c.com/calypso/app:build-15184&env=jetpack

[annemirasol]

Buttons on this screen look a little bit narrower for me:

Fixed.

[matticbot]

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

App Entrypoints (~42 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-main                  -360 B  (-0.0%)      -42 B  (-0.0%)
entry-login                 -252 B  (-0.0%)      -57 B  (-0.0%)
entry-gutenboarding         -252 B  (-0.0%)      -57 B  (-0.0%)
entry-domains-landing       -252 B  (-0.0%)      -57 B  (-0.0%)
entry-browsehappy           -252 B  (-0.3%)      -57 B  (-0.2%)

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

Sections (~204 bytes removed 📉 [gzipped])

name             parsed_size           gzip_size
accept-invite        +1984 B  (+1.5%)     +332 B  (+0.9%)
jetpack-connect      +1978 B  (+0.3%)     +330 B  (+0.2%)
signup                -909 B  (-0.3%)      -34 B  (-0.1%)
pages                 +372 B  (+0.1%)     -406 B  (-0.4%)
hosting               -220 B  (-0.1%)     -103 B  (-0.1%)
stats                 -143 B  (-0.0%)       +9 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 (~3064 bytes added 📈 [gzipped])

name                                 parsed_size           gzip_size
async-load-signup-steps-user             +3701 B  (+2.0%)     +678 B  (+1.2%)
async-load-signup-steps-p2-details        -109 B  (-0.1%)     -370 B  (-1.3%)
async-load-signup-steps-p2-site            -44 B  (-0.0%)     -565 B  (-1.7%)
async-load-calypso-my-sites-sidebar        -39 B  (-0.0%)      +61 B  (+0.1%)

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.

[unDemian]

Code looks good! 🎉 I've successfully tested the following

✅ Regression test: verify that non-P2 signup flows have the regular signup screen.
✅ Regression test: verify that accepting invites for non-P2 sites have the regular signup screen.

Check that nothing looks broken for the following:
✅ sign up screen when accepting P2 invites
✅ sign up screen for the /start/p2 flow

Not sure if this was introduced by this PR but I think we should take a look at error handling during sign up.

❌ Check that you can successfully sign up via the /start/p2 flow

• From the accept invite url if I try to sign up and I encounter an error it is not displayed and the screen just feels stuck https://d.pr/i/294koB
• From /start/p2 if I sign up and encounter an error I get redirected around with no indication of what happened https://d.pr/v/Eta5mT

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/6637739

Thank you @annemirasol for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.