Site migration: progress view adjustments

[andfinally]

Note: This change is behind a feature flag and is part of an in-progress larger project. For context, see pbkcP4-8-p2.

Changes proposed in this Pull Request

• Replaces illustration.
• Wraps domains in subheader in spans to prevent them breaking across lines.
• Sizes and aligns progress item icons.

Testing instructions

• Check out this pull request and run Calypso locally, or view it on calypso.live with the flag tools/migrate.
• Viewing calypso.localhost:3000/migrate/, you should see a SiteSelector component allowing you to choose a site to migrate a Jetpack site into.
• When you select a site, you should see another SiteSelector component, listing all the Jetpack sites your account has access to.
• Selecting one of those sites should take you to a confirmation screen.
• Accept the confirmation. You should see a progress screen detailing the steps of the migration.
  • The illustration should not have a coloured bubble.
  • The progress list item icons should be aligned.
  • The domains in the subheader should not break when you resize your viewport.
• When the migration is done you should see a message telling you it is complete.

[matticbot]

Test live: https://calypso.live/?branch=update/migration--progress

[matticbot]

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

Sections (~30 bytes added 📈 [gzipped])

name     parsed_size           gzip_size
migrate       +425 B  (+0.4%)      +30 B  (+0.1%)

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

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.

[jonathansadowski]

Nice job -- looking good to me. Just two minor points: I observed a line-break in the middle of the domains in the checklist at the bottom of the page. Also: I think we should hold-off on string translations until the copy is finalized.

[andfinally]

Thanks for the review Jon – I've removed the translation calls and wrapped the domains in the progress list in non-breaking spans.

I've had to wrap the progress list text in a second span to get React to respect the single white space between the text and the domain (see Ben Nadel's post on React's behaviour). For some reason React respects it within a fragment in the subheader text, but not in the list item text.

[mattsherman]

Tested, worked as expected. Code looks good.

Suggestions addressed

[mattsherman]

Accepted.