P2: signup: initial styling #43021

lamosty · 2020-06-05T14:35:25Z

Part of introducing the revamped signup flow for the P2 project.

In this PR, we add the redesigned "site" signup step for P2.

Testing instructions

Navigate to http://calypso.localhost:3000/start/p2 and go through the flow. It should look and work fine. Try both in an incognito window (=> new wp.com account) and with your current wp.com account.

matticbot · 2020-06-05T14:35:27Z

Test live: https://calypso.live/?branch=p2-signup/apply-initial-styling

matticbot · 2020-06-05T14:44:03Z

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

Sections (~311 bytes added 📈 [gzipped])

name    parsed_size           gzip_size
signup      +1371 B  (+0.6%)     +311 B  (+0.6%)

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 (~105 bytes added 📈 [gzipped])

name                             parsed_size           gzip_size
async-load-signup-steps-p2-site       -104 B  (-0.4%)     +105 B  (+1.6%)

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.

client/signup/p2-processing-screen/index.jsx

lamosty · 2020-06-10T08:23:44Z

I still need to add translations and unify the css to variables, but it's ready for testing and feedback!

lezama · 2020-06-10T12:53:14Z

Tests great!

@evilluendas you can use https://hash-acc9b837d2f8b890fc904fe0947d13aab31fed76.calypso.live/start/p2/p2-site

This feels too static while waiting

do we have plans to make it look as something is going on?

lamosty · 2020-06-10T14:54:32Z

@griffbrad hey, could you give this a look too, please? :)

griffbrad

Overall, LGTM. Left a few comments about minor JS API changes you could make, but I realize you were mostly mirroring surrounding usages already present. On the simpler, purely presentation components (e.g. P2StepWrapper) it probably also makes sense to use a function component rather than a class component with just a render method.

griffbrad · 2020-06-10T16:26:47Z

client/signup/controller.js

+		return;
+	}
+
+	document.body.className = document.body.className.split( 'is-p2-signup' ).join( '' );


Could use classList here:
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

griffbrad · 2020-06-10T16:28:06Z

client/signup/controller.js

@@ -70,6 +88,18 @@ export default {
 			context.params.flowName === 'account'
 		) {
 			removeWhiteBackground();
+			next();
+		} else if ( context.pathname.indexOf( 'p2' ) >= 0 ) {


includes could be used here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes

griffbrad · 2020-06-10T16:30:38Z

client/signup/p2-processing-screen/index.jsx

+			<div className="p2-processing-screen">
+				<div className="p2-processing-screen__logo">
+					<img
+						src="https://wpcom.files.wordpress.com/2020/06/p2-logo-light.png"


Should probably add this to static assets in Calypso:
https://github.com/Automattic/wp-calypso/tree/master/static/images

nsakaimbo · 2020-06-10T19:19:31Z

Bump: runtime error with wp-desktop. I think this looks like the issue that was fixed in Calypso master a couple days ago. Hopefully a rebase will help, otherwise it's probably something else unique to this branch.

lamosty · 2020-06-11T12:57:30Z

Thank you for the great feedback @griffbrad! Addressed.

a8ci18n · 2020-06-12T13:42:26Z

client/signup/steps/p2-site/index.jsx

@@ -253,7 +251,7 @@ class P2Site extends React.Component {
 					className="p2-site__validation-site-title"
 				>
 					<FormLabel htmlFor="site-title-input">
-						{ this.props.translate( "What's the name of your team or project?" ) }
+						{ this.props.translate( 'Name your team or project' ) }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 20 times:
translate( 'Please enter your team or project name.' ) ES Score: 7

evilluendas · 2020-06-12T13:49:48Z

I just pushed a few tweaks to the css, mostly overwriting the Calypso styles in the form inputs. I'd like to tweak a couple of things so it looks better in mobile, I'll do it asap and commit the changes.

I've noticed a couple of things that I don't know how to fix:

When you click on the button it immediately changes to "Creating your site", even if you haven't entered anything. Instead of changing the label, I would disable the button while it's thinking (it'll probably require some tweaks to the CSS of the disabled button too, I'll do them after the change).

In the gif above you can also see that the first field doesn't get the is-error red border when there is an error. I think it's a matter of adding the class.
In the old-style login signup screen the contents aren't centered but on the left side. I'd say it's this class limiting the width:

Aside from that, looks great! I'd like to add some animation to the background of the "Hooray, site is creating" screen but I'd need to pause the flow there instead of automatically go to the frontend and I'll need your help, as we've talked in Slack. 😄

We'll also need to implement the second step explaining (461-gh-p2) that P2 works with wpcom accounts, but we can do it in a separate PR.

lamosty · 2020-06-15T11:24:51Z

Thanks for the styling fixes @evilluendas and sorry for missing those.

I'll look at the rest of the things you've mentioned.

a8ci18n · 2020-06-16T15:16:49Z

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

Hi @lamosty, could you please edit the description of this PR and add a screenshot for our translators? Ideally it'd include all of the following strings:

{{h2}}Hooray!{{br/}}Your new P2 is{{br/}}almost ready.{{/h2}}
Name your team or project
Share, discuss, review, and collaborate across time zones, without interruptions.

Thank you in advance!

a8ci18n · 2020-08-04T15:28:30Z

Translation for this Pull Request has now been finished.

lamosty added the [Status] In Progress label Jun 5, 2020

lamosty requested a review from a team June 5, 2020 14:35

lamosty self-assigned this Jun 5, 2020

lamosty force-pushed the p2-signup/refactor-to-p2 branch from 85bdbe9 to 9cbd7b7 Compare June 8, 2020 10:28

lamosty force-pushed the p2-signup/apply-initial-styling branch from 62deddf to c3cd652 Compare June 8, 2020 10:40

lezama reviewed Jun 9, 2020

View reviewed changes

client/signup/p2-processing-screen/index.jsx Outdated Show resolved Hide resolved

lamosty force-pushed the p2-signup/refactor-to-p2 branch from 9cbd7b7 to e721387 Compare June 9, 2020 12:49

lamosty force-pushed the p2-signup/apply-initial-styling branch from b28fbad to 06b587e Compare June 9, 2020 13:25

lamosty added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Feature] Signup & Account Creation All screens and flows for making a new WordPress.com account. and removed [Status] In Progress labels Jun 10, 2020

Base automatically changed from p2-signup/refactor-to-p2 to master June 10, 2020 11:29

lamosty requested a review from griffbrad June 10, 2020 14:54

lamosty force-pushed the p2-signup/apply-initial-styling branch from 7eb608a to d1c33ea Compare June 10, 2020 15:19

griffbrad approved these changes Jun 10, 2020

View reviewed changes

lamosty force-pushed the p2-signup/apply-initial-styling branch from 99e3ac5 to a6fb114 Compare June 11, 2020 12:58

a8ci18n reviewed Jun 12, 2020

View reviewed changes

lamosty force-pushed the p2-signup/apply-initial-styling branch from 8124f75 to 66956ab Compare June 15, 2020 11:18

lamosty force-pushed the p2-signup/apply-initial-styling branch from fb93191 to ef35d10 Compare June 15, 2020 14:27

nsakaimbo added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Jun 15, 2020

lamosty and others added 24 commits June 16, 2020 14:33

Add footer text

675d21d

Fix focus state on btn

63245b0

Add is-p2-signup for P2 site signups

3633e41

Fix controller

a412afd

Remove P2 styling for the user signup step

c168240

Add dummy P2ProcessingScreen

764f496

Reset padding on P2 signup flows

240baaf

Show a P2 processing screen in the P2 flow

5dcb564

Add body class name if loading screen is shown

cfe30e7

Apply special body class name for p2 processing screen

1ca5d13

Style p2 processing screen

e76ebc8

Fix logo resolution

4e11b98

Add translation to p2-processing-screen

2b0cf48

Use variables for p2 colors

c6be1d7

Use br instead of multiple h2 for heading newlines

1364945

Use border-box to see footer

15e0a44

Update fonts

dbca18b

Use classList to add/remove css

0604b7e

Use includes instead of indexOf

682b8ec

Host logos in Calypso

4799734

Rework components to stateless ones

d490e24

Visual tweaks

808f993

Address design feedback

0d4a364

Style disabled btn

c8e2757

lamosty force-pushed the p2-signup/apply-initial-styling branch from 131c94c to c8e2757 Compare June 16, 2020 12:33

lamosty merged commit 6540609 into master Jun 16, 2020

lamosty deleted the p2-signup/apply-initial-styling branch June 16, 2020 13:03

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jun 16, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

P2: signup: initial styling #43021

P2: signup: initial styling #43021

lamosty commented Jun 5, 2020 •

edited

matticbot commented Jun 5, 2020

matticbot commented Jun 5, 2020 •

edited

lamosty commented Jun 10, 2020

lezama commented Jun 10, 2020

lamosty commented Jun 10, 2020

griffbrad left a comment

griffbrad Jun 10, 2020

griffbrad Jun 10, 2020

griffbrad Jun 10, 2020

nsakaimbo commented Jun 10, 2020

lamosty commented Jun 11, 2020

a8ci18n Jun 12, 2020

evilluendas commented Jun 12, 2020 •

edited by annemirasol

lamosty commented Jun 15, 2020

a8ci18n commented Jun 16, 2020

a8ci18n commented Aug 4, 2020

P2: signup: initial styling #43021

P2: signup: initial styling #43021

Conversation

lamosty commented Jun 5, 2020 • edited

Testing instructions

matticbot commented Jun 5, 2020

matticbot commented Jun 5, 2020 • edited

lamosty commented Jun 10, 2020

lezama commented Jun 10, 2020

lamosty commented Jun 10, 2020

griffbrad left a comment

Choose a reason for hiding this comment

griffbrad Jun 10, 2020

Choose a reason for hiding this comment

griffbrad Jun 10, 2020

Choose a reason for hiding this comment

griffbrad Jun 10, 2020

Choose a reason for hiding this comment

nsakaimbo commented Jun 10, 2020

lamosty commented Jun 11, 2020

a8ci18n Jun 12, 2020

Choose a reason for hiding this comment

evilluendas commented Jun 12, 2020 • edited by annemirasol

lamosty commented Jun 15, 2020

a8ci18n commented Jun 16, 2020

a8ci18n commented Aug 4, 2020

lamosty commented Jun 5, 2020 •

edited

matticbot commented Jun 5, 2020 •

edited

evilluendas commented Jun 12, 2020 •

edited by annemirasol