Migration: add header to confirmation dialog

[jonathansadowski]

Changes proposed in this Pull Request

• Update the confirmation modal to include a header

Before:

After:

Testing instructions

• Click on "Import" in the sidebar while a Simple (or Atomic) site is selected.
• Select "WordPress".
• Enter the URL to a Jetpack-connected WordPress site.
• Select "Import Everything".
• Continue through the flow until you see the confirmation dialog.

Fixes #39580

[matticbot]

Test live: https://calypso.live/?branch=update/migration--confirmation-modal-header

[jonathansadowski]

@danhauk #39580 has a different design for the header within the confirmation dialog, but there were already explicit styles in place, so I didn't overwrite them. Let me know if you'd like me to do so.

I also removed the suggested sentence about returning the site to the current state, as that won't always be true if a backup of the target site isn't completed ahead of the restore.

[mattsherman]

Approved. An improvement over current UX.

The line height for the Dialog is too large, but that is a general issue, so I've created a separate issue to address that...

#39748

[jonathansadowski]

Thanks for the review

[matticbot]

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

Sections (~16 bytes added 📈 [gzipped])

name     parsed_size           gzip_size
migrate       +127 B  (+0.1%)      +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.

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.