Improve new invite screen

[claudiucelfilip]

Part of #100416

Proposed Changes

Updates the layout and copy of the invite screen as per design:

Why are these changes being made?

We're updating the interface to be more concise and offer more clarity.

Testing Instructions

• Send yourself an invite from the User screen
• Access the emailed link both as a logged-in user and logged-out
• Ensure the logged-out screen is unaffected

• The logged-in screen should match the design

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests 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 UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• 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-aUh-p2)?

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-143595&env=a8c-for-agencies

[Copilot]

Pull Request Overview

This PR updates the invite screen UI to be more concise and aligned with the new design specification. The changes include updated translation strings with inline line breaks, refined styling adjustments across various invite screens, and revisions to component layouts and copy details.

• Translation strings in InviteFormHeader now include explicit line breaks.
• CSS adjustments in multiple SCSS files improve layout dimensions, spacing, and alignment.
• InviteAcceptLoggedIn now renders join details (username and email) directly and updates button variants and text.

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
client/my-sites/invites/invite-form-header/index.jsx	Updated translation strings to use inline elements for logged-in invite titles.
client/my-sites/invites/invite-accept/style.scss	Adjusted maximum width for the invite accept form.
client/my-sites/invites/invite-accept-logged-out/style.scss	Modified vertical spacing and background styles for the logged-out invite screen.
client/my-sites/invites/invite-accept-logged-in/style.scss	Revised typographic styles and layout for the logged-in invite screen, including updated button and card styling.
client/my-sites/invites/invite-accept-logged-in/index.jsx	Refactored the join-as text to render username and email directly and updated button component usage.

Comments suppressed due to low confidence (3)

client/my-sites/invites/invite-form-header/index.jsx:116

• Ensure that inserting
  components within translation strings is supported across all locales and renders as intended per design.

br: <br />,

client/my-sites/invites/invite-accept-logged-out/style.scss:14

• Review spacing adjustments as switching from margin-top to padding-top along with differing media query margins could lead to layout inconsistencies across screen sizes.

padding-top: 50px;

client/my-sites/invites/invite-accept-logged-in/index.jsx:64

• Confirm that replacing the translation-based join text with a direct rendering of username and email aligns with internationalization requirements for consistent localization.

return (

[claudiucelfilip]

Flyby fix: there's a barely visible background difference in the logged-out invite form (#fff vs #fdfdfd).

[fditrapani]

Thanks for fixing this. I noticed it too.

[matticbot]

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

Sections (~94 bytes added 📈 [gzipped])

name           parsed_size           gzip_size
accept-invite        -18 B  (-0.0%)      +94 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.

[a8ci18n]

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

Some locales (Brazilian Portuguese, Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

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

[fditrapani]

Nice! Thanks for these updates. Looks good to me.