Login: Update magic email confirmation styles

[edanzer]

Proposed Changes

Updates styles of the magic email login confirmation screen (shows immediately after clicking send link from magic login page). Caveats:

• Figma: 5p3iZ99zPYfl6ronoTYEXO-fi-4_1291
• P2: p9Jlb4-9mo-p2
• Changes are based on this PR which should be merged first: Login: Update magic login form styles #83546
• Caveat: The width of the text area is narrower than in designs. Because same page structure is used by many pages, I think there is more complexity expanding the width only on this page, but not on others.
• Caveat: The designs also have a new link for 'I didn't receive my email'. I'm going to add that in a separate follow up PR.

Before

After

Testing Instructions

1. In an incognito or non-logged-in browser, go to wordpress.com and click the Login link, and then click 'Email me a login link' to go to the magic email login page
2. Replace wordpress.com with http://calypso.localhost:3000 to load this branch.
3. Enter an email and click Send Link.
4. The confirmation screen should load. Confirm it looks like the screenshot above
5. Using your browser tools, adjust the window to mobile size and confirm styling adjust well.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md 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 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-ajp-p2)?

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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

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

name         parsed_size           gzip_size
entry-login       +265 B  (+0.0%)      +60 B  (+0.0%)

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

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.

[worldomonation]

@worldomonation To consider adding a check in the test/e2e/specs/authentication/authentication__magic-link.ts to explicitly check for the updated UI elements.

[a8ci18n]

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

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

[a8ci18n]

Translation for this Pull Request has now been finished.