Repository: Automattic/wp-calypso
Pull request #102353: Update wp.com login screen designs [WIP]
Author: login: tellthemachines
Labels: name: Login
Created: 2025-04-03T04:36:10Z | Merged: 2025-04-23T03:21:06Z

<!--
Link a related issue to this PR. If the PR does not immediately resolve the issue,
for example, it requires a separate deployment to production, avoid
using the "fixes" keyword and instead attach the [Status] Fix Inbound label to
the linked issue.
-->

Related to #102039

Starts updating the design of the login screen for consistency with onboarding screen.

I basically hijacked the `TopBar` from `StepContainerV2` in order to ensure consistency with the onboarding screens. ~~If we like the look of this approach, I'd suggest moving that component to a more generic location for reusability and perhaps  allowing to pass in different logos to cater for other login variations such as [these](https://github.com/Automattic/wp-calypso/blob/trunk/client/blocks/login/index.jsx#L703).~~

Edit: in subsequent discussion p1743735009062729-slack-C04H4NY6STW it was agreed to not move the component yet; we'll wait until we have a better idea of its uses.

This PR only addresses the header for now.

Screens updated so far:

- log in to your existing account
- regular log in


Other aspects of the login screens remaining to address: width of content, font sizes and the like. Pending updated designs for these particular screens.

## Testing Instructions

<!--
Add as many details as possible to help others reproduce the issue and test the fix.
"Before / After" screenshots can also be very helpful when the change is visual.
-->

* Logged out, go to the "Create your account" screen under`/setup/onboarding/user`.
* Click "continue with email" and enter an email **already linked to an account**.
* Check that the top bar in the "Log in to your existing account" screen looks like the ones on the previous screens.
* Still logged out, go back to the "Create your account" screen and click "log in" in the top right corner.


## Pre-merge Checklist

<!--
Complete applicable items on this checklist **before** merging into trunk. Inapplicable items can be left unchecked.

Both the PR author and reviewer are responsible for ensuring the checklist is completed.
-->

- [ ] Has the general commit checklist been followed? (PCYsg-hS-p2)
- [ ] [Have you written new tests](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](https://github.com/Automattic/wp-calypso/blob/trunk/packages/state-utils/src/create-selector/README.md) and [Using memoizing selectors](https://react-redux.js.org/api/hooks#using-memoizing-selectors) and [Our Approach to Data](https://github.com/Automattic/wp-calypso/blob/trunk/docs/our-approach-to-data.md)
- [ ] 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)?


Diff:
diff --git a/client/blocks/login/index.jsx b/client/blocks/login/index.jsx
index 841fb2cac32b..d47dbdcd585b 100644
--- a/client/blocks/login/index.jsx
+++ b/client/blocks/login/index.jsx
@@ -702,17 +702,6 @@ class Login extends Component {
 
 		if ( isFromAkismet ) {
 			headerText = translate( 'Log in to Akismet with WordPress.com' );
-			preHeader = (
-				<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="none">
-					<rect width="44" height="44" fill="#357B49" rx="6" />
-					<path
-						fill="#fff"
-						fillRule="evenodd"
-						d="m29.746 28.31-6.392-16.797c-.152-.397-.305-.672-.789-.675-.673 0-1.408.611-1.746 1.316l-7.378 16.154c-.072.16-.143.311-.214.454-.5.995-1.045 1.546-2.357 1.626a.399.399 0 0 0-.16.033l-.01.004a.399.399 0 0 0-.23.392v.01c0 .054.01.106.03.155l.004.01a.416.416 0 0 0 .394.252h6.212a.417.417 0 0 0 .307-.12.416.416 0 0 0 .124-.305.398.398 0 0 0-.105-.302.399.399 0 0 0-.294-.127c-.757 0-2.197-.062-2.197-1.164.02-.318.103-.63.245-.916l1.399-3.152c.52-1.163 1.654-1.163 2.572-1.163h5.843c.023 0 .044 0 .062.003.13.014.16.081.214.242l1.534 4.07a2.857 2.857 0 0 1 .216 1.04c0 .054-.003.104-.01.153-.09.726-.831.887-1.49.887a.4.4 0 0 0-.294.127l-.007.008-.007.008a.401.401 0 0 0-.092.286v.01c0 .054.01.106.03.155l.005.01a.42.42 0 0 0 .395.252h7.011a.413.413 0 0 0 .279-.13.412.412 0 0 0 .11-.297.387.387 0 0 0-.09-.294.388.388 0 0 0-.277-.135c-1.448-.122-2.295-.643-2.847-2.08Zm-11.985-5.844 2.847-6.304c.361-.728.659-1.486.889-2.265 0-.06.03-.092.06-.092s.061.032.061.091c.02.122.045.247.073.374.197.888.584 1.878.914 2.723l.176.453 1.684 4.529a.927.927 0 0 1 .092.4.473.473 0 0 1-.009.094c-.041.202-.228.272-.602.272h-6.063c-.122 0-.184-.03-.184-.092a.36.36 0 0 1 .062-.183Zm17.107-.721c0 .786-.446 1.231-1.25 1.231-.806 0-1.125-.409-1.125-1.034 0-.786.465-1.231 1.25-1.231.785 0 1.125.427 1.125 1.034ZM9.629 23.002c.803 0 1.25-.447 1.25-1.231 0-.607-.343-1.036-1.128-1.036-.785 0-1.25.447-1.25 1.231 0 .625.325 1.036 1.128 1.036Z"
-						clipRule="evenodd"
-					/>
-				</svg>
-			);
 		}
 
 		if ( isFromAutomatticForAgenciesPlugin ) {
@@ -757,7 +746,7 @@ class Login extends Component {
 						isCoBrand={ isGravatarFlowOAuth2Client( oauth2Client ) }
 					/>
 				) }
-				{ preHeader }
+				{ ! isWhiteLogin && preHeader }
 				<div className="login__form-header">{ headerText }</div>
 				{ postHeader }
 			</div>
diff --git a/client/login/wp-login/index.jsx b/client/login/wp-login/index.jsx
index 5c3d85c1e7f7..18ac61984b28 100644
--- a/client/login/wp-login/index.jsx
+++ b/client/login/wp-login/index.jsx
@@ -2,6 +2,7 @@ import config from '@automattic/calypso-config';
 import page from '@automattic/calypso-router';
 import { Gridicon } from '@automattic/components';
 import { localizeUrl } from '@automattic/i18n-utils';
+import { Step } from '@automattic/onboarding';
 import clsx from 'clsx';
 import { localize } from 'i18n-calypso';
 import { get, startsWith } from 'lodash';
@@ -14,6 +15,7 @@ import DocumentHead from 'calypso/components/data/document-head';
 import LocaleSuggestions from 'calypso/components/locale-suggestions';
 import LoggedOutFormBackLink from 'calypso/components/logged-out-form/back-link';
 import Main from 'calypso/components/main';
+import isAkismetRedirect from 'calypso/lib/akismet/is-akismet-redirect';
 import { getSignupUrl, pathWithLeadingSlash } from 'calypso/lib/login';
 import {
 	isJetpackCloudOAuth2Client,
@@ -381,7 +383,7 @@ export class Login extends Component {
 			: getSignupUrl( currentQuery, currentRoute, oauth2Client, locale, pathname );
 
 		return (
-			<a
+			<Step.LinkButton
 				href={ addQueryArgs(
 					{
 						user_email: usernameOrEmail,
@@ -393,16 +395,12 @@ export class Login extends Component {
 				rel="external"
 			>
 				{ signupLinkText ?? translate( 'Create a new account' ) }
-			</a>
+			</Step.LinkButton>
 		);
 	}
 
 	renderLoginHeaderNavigation() {
-		return (
-			<div className="wp-login__header-navigation">
-				{ this.renderSignUpLink( this.props.translate( 'Create an account' ) ) }
-			</div>
-		);
+		return this.renderSignUpLink( this.props.translate( 'Create an account' ) );
 	}
 
 	renderLoginBlockFooter( { isGravPoweredLoginPage, isSocialFirst } ) {
@@ -549,6 +547,7 @@ export class Login extends Component {
 			isWoo,
 			isBlazePro,
 			isWhiteLogin,
+			isFromAkismet,
 		} = this.props;
 		const canonicalUrl = localizeUrl( 'https://wordpress.com/log-in', locale );
 		const isSocialFirst =
@@ -558,8 +557,32 @@ export class Login extends Component {
 			! isWoo &&
 			! isBlazePro;
 
+		const akismetLogo = (
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 44 44"
+				fill="none"
+			>
+				<rect width="44" height="44" fill="#357B49" rx="6" />
+				<path
+					fill="#fff"
+					fillRule="evenodd"
+					d="m29.746 28.31-6.392-16.797c-.152-.397-.305-.672-.789-.675-.673 0-1.408.611-1.746 1.316l-7.378 16.154c-.072.16-.143.311-.214.454-.5.995-1.045 1.546-2.357 1.626a.399.399 0 0 0-.16.033l-.01.004a.399.399 0 0 0-.23.392v.01c0 .054.01.106.03.155l.004.01a.416.416 0 0 0 .394.252h6.212a.417.417 0 0 0 .307-.12.416.416 0 0 0 .124-.305.398.398 0 0 0-.105-.302.399.399 0 0 0-.294-.127c-.757 0-2.197-.062-2.197-1.164.02-.318.103-.63.245-.916l1.399-3.152c.52-1.163 1.654-1.163 2.572-1.163h5.843c.023 0 .044 0 .062.003.13.014.16.081.214.242l1.534 4.07a2.857 2.857 0 0 1 .216 1.04c0 .054-.003.104-.01.153-.09.726-.831.887-1.49.887a.4.4 0 0 0-.294.127l-.007.008-.007.008a.401.401 0 0 0-.092.286v.01c0 .054.01.106.03.155l.005.01a.42.42 0 0 0 .395.252h7.011a.413.413 0 0 0 .279-.13.412.412 0 0 0 .11-.297.387.387 0 0 0-.09-.294.388.388 0 0 0-.277-.135c-1.448-.122-2.295-.643-2.847-2.08Zm-11.985-5.844 2.847-6.304c.361-.728.659-1.486.889-2.265 0-.06.03-.092.06-.092s.061.032.061.091c.02.122.045.247.073.374.197.888.584 1.878.914 2.723l.176.453 1.684 4.529a.927.927 0 0 1 .092.4.473.473 0 0 1-.009.094c-.041.202-.228.272-.602.272h-6.063c-.122 0-.184-.03-.184-.092a.36.36 0 0 1 .062-.183Zm17.107-.721c0 .786-.446 1.231-1.25 1.231-.806 0-1.125-.409-1.125-1.034 0-.786.465-1.231 1.25-1.231.785 0 1.125.427 1.125 1.034ZM9.629 23.002c.803 0 1.25-.447 1.25-1.231 0-.607-.343-1.036-1.128-1.036-.785 0-1.25.447-1.25 1.231 0 .625.325 1.036 1.128 1.036Z"
+					clipRule="evenodd"
+				/>
+			</svg>
+		);
+
 		return (
-			<div>
+			<>
+				{ isSocialFirst && (
+					<Step.TopBar
+						rightElement={ this.renderLoginHeaderNavigation() }
+						logo={ isFromAkismet && akismetLogo }
+					/>
+				) }
 				<Main
 					className={ clsx( 'wp-login__main', {
 						'is-wpcom-migration': isFromMigrationPlugin,
@@ -582,12 +605,11 @@ export class Login extends Component {
 						] }
 					/>
 
-					{ isSocialFirst && this.renderLoginHeaderNavigation() }
 					<div className="wp-login__container">{ this.renderContent( isSocialFirst ) }</div>
 				</Main>
 
 				{ this.renderFooter() }
-			</div>
+			</>
 		);
 	}
 }
@@ -612,6 +634,9 @@ export default connect(
 				! currentRoute.includes( '/start' ),
 			emailQueryParam:
 				currentQuery.email_address || getInitialQueryArguments( state ).email_address,
+			isFromAkismet: isAkismetRedirect(
+				new URLSearchParams( getRedirectToOriginal( state )?.split( '?' )[ 1 ] ).get( 'back' )
+			),
 			isFromMigrationPlugin: startsWith( get( currentQuery, 'from' ), 'wpcom-migration' ),
 			isWooJPC: isWooJPCFlow( state ),
 			isWCCOM: getIsWCCOM( state ),
diff --git a/client/login/wp-login/style.scss b/client/login/wp-login/style.scss
index d099f155a472..025bf3781fae 100644
--- a/client/login/wp-login/style.scss
+++ b/client/login/wp-login/style.scss
@@ -291,6 +291,11 @@ $image-height: 47px;
 .layout.is-white-login {
 	background-color: #fdfdfd;
 
+	// Specificity bump.
+	.layout__content.layout__content {
+		padding: 0;
+	}
+
 	.login__form-header {
 		@include onboarding-heading-text-mobile;
 		margin-bottom: 0;
@@ -439,6 +444,8 @@ $image-height: 47px;
 	.wp-login__main.is-social-first {
 		max-width: 758px;
 		margin-top: 24px;
+		padding-left: 20px;
+		padding-right: 20px;
 
 		@include break-medium {
 			margin-top: 20.5vh;
@@ -503,17 +510,11 @@ $image-height: 47px;
 	}
 
 	.layout__primary {
-		margin-top: 40px;
+		margin-top: 0;
 
 		/* START - Note: Patches below needed to continue using the current Divider.
 		We can remove when we refactor the Divider itself (or rethink current usage), and leave the default card styles intact.
 		Ideally, the Divider used in Login should be consolidated with the inline Separator's styles used in Signup (see `.auth-form__separator`) */
-		padding-left: 20px;
-		padding-right: 20px;
-
-		@include break-mobile {
-			margin-top: 64px;
-		}
 
 		form {
 			.card.login__form {
diff --git a/packages/onboarding/src/step-container-v2/components/TopBar/TopBar.tsx b/packages/onboarding/src/step-container-v2/components/TopBar/TopBar.tsx
index 53d2712ac6aa..e188159087b8 100644
--- a/packages/onboarding/src/step-container-v2/components/TopBar/TopBar.tsx
+++ b/packages/onboarding/src/step-container-v2/components/TopBar/TopBar.tsx
@@ -6,11 +6,12 @@ import './style.scss';
 interface TopBarProps {
 	leftElement?: ReactNode;
 	rightElement?: ReactNode;
+	logo?: ReactNode;
 }
 
-export const TopBar = ( { leftElement, rightElement }: TopBarProps ) => {
-	return (
-		<div className="step-container-v2__top-bar">
+export const TopBar = ( { leftElement, rightElement, logo }: TopBarProps ) => {
+	const defaultLogo = (
+		<>
 			<WordPressWordmark
 				className="step-container-v2__top-bar-wordpress-logo step-container-v2__top-bar-wordpress-logo--wordmark"
 				color="currentColor"
@@ -19,6 +20,11 @@ export const TopBar = ( { leftElement, rightElement }: TopBarProps ) => {
 				size={ 21 }
 				className="step-container-v2__top-bar-wordpress-logo step-container-v2__top-bar-wordpress-logo--logo"
 			/>
+		</>
+	);
+	return (
+		<div className="step-container-v2__top-bar">
+			{ logo ? logo : defaultLogo }
 
 			{ leftElement && (
 				<>


Reviews:
user: login: zaguiini
body: This is promising ✨ 

I still think we can wrap the whole page with one of the wireframes, though 👍🏻 A bigger rewrite for sure, but it looks doable.
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-11T13:17:26Z
user: login: tellthemachines
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T03:42:16Z
user: login: tellthemachines
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T03:43:04Z
user: login: tellthemachines
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T03:56:36Z
user: login: zaguiini
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T14:46:02Z
user: login: tellthemachines
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T03:28:53Z

Review comments:
diff_hunk: @@ -943,3 +944,9 @@ $image-height: 47px;
 		--login-form-column-max-width: 327px;
 	}
 }
+
+.step-container-v2__link-button {
path: client/login/wp-login/style.scss
user: login: zaguiini
body: Why is this necessary? 🤔 It matches [the styles from the LinkButton stylesheet.](https://github.com/Automattic/wp-calypso/blob/trunk/packages/onboarding/src/step-container-v2/components/buttons/LinkButton/style.scss#L1)
created_at: 2025-04-11T12:59:20Z
author_association: CONTRIBUTOR
diff_hunk: @@ -26,6 +26,7 @@ export { useStepPersistedState, clearStepPersistedState } from './hooks/use-pers
 export * from './navigator';
 export { default as SelectCardCheckbox } from './select-card-checkbox';
 export * from './utils';
+export { TopBar } from './step-container-v2';
path: packages/onboarding/src/index.ts
user: login: zaguiini
body: We can revert this extra export and call `<Step.TopBar />` within `wp-login/index`.
created_at: 2025-04-11T13:09:54Z
author_association: CONTRIBUTOR
diff_hunk: @@ -19,6 +20,11 @@ export const TopBar = ( { leftElement, rightElement }: TopBarProps ) => {
 				size={ 21 }
 				className="step-container-v2__top-bar-wordpress-logo step-container-v2__top-bar-wordpress-logo--logo"
 			/>
+		</>
+	);
+	return (
+		<div className="step-container-v2__top-bar">
+			{ logo ? logo : <DefaultLogo /> }
path: packages/onboarding/src/step-container-v2/components/TopBar/TopBar.tsx
user: login: zaguiini
body: This doesn't need to be a component. We can assign the fragment to a variable. Something like this:

```jsx
const defaultLogo = (
  <>
    {...}
  </>
)

return (
  <div>
    { logo ?? defaultLogo }
  </div>
)
```

Although, I think we can go for a bigger refactor here. Let's say we want to define an extended and a compact logo, just like we're doing for Dotcom.

Maybe that's not needed for now, so let's keep it simple. But it's something to think about.

I'm also a bit concerned about the height of the logo. The `wordpress-logo` has a fixed height of 24px, and I wonder if other brands will cause a layout shift for instance due to their divergence.

It's not the case for Akismet (I think), but I'm thinking of Jetpack compact and expanded too :)
created_at: 2025-04-11T13:16:40Z
author_association: CONTRIBUTOR
diff_hunk: @@ -943,3 +944,9 @@ $image-height: 47px;
 		--login-form-column-max-width: 327px;
 	}
 }
+
+.step-container-v2__link-button {
path: client/login/wp-login/style.scss
user: login: tellthemachines
body: Oh, I should have updated this to use `LinkButton`  🤦 I just restyled the existing component initially to see if it would work. Thanks for catching that!
created_at: 2025-04-14T03:42:16Z
author_association: CONTRIBUTOR
diff_hunk: @@ -26,6 +26,7 @@ export { useStepPersistedState, clearStepPersistedState } from './hooks/use-pers
 export * from './navigator';
 export { default as SelectCardCheckbox } from './select-card-checkbox';
 export * from './utils';
+export { TopBar } from './step-container-v2';
path: packages/onboarding/src/index.ts
user: login: tellthemachines
body: Done! Yes, that's neater when we need to use multiple components from Step.
created_at: 2025-04-14T03:43:04Z
author_association: CONTRIBUTOR
diff_hunk: @@ -19,6 +20,11 @@ export const TopBar = ( { leftElement, rightElement }: TopBarProps ) => {
 				size={ 21 }
 				className="step-container-v2__top-bar-wordpress-logo step-container-v2__top-bar-wordpress-logo--logo"
 			/>
+		</>
+	);
+	return (
+		<div className="step-container-v2__top-bar">
+			{ logo ? logo : <DefaultLogo /> }
path: packages/onboarding/src/step-container-v2/components/TopBar/TopBar.tsx
user: login: tellthemachines
body: > Let's say we want to define an extended and a compact logo, just like we're doing for Dotcom.
> Maybe that's not needed for now, so let's keep it simple. But it's something to think about.

Agree with keeping it simple. I'm inclined to let the amount of logos and conditions for their display be determined by the context the TopBar is in, to avoid complicating this component too much. Also if we ever need to have 3 logo variations on some screen (hopefully not 😅 ) we can do it without changing anything in TopBar.

> I'm also a bit concerned about the height of the logo. The wordpress-logo has a fixed height of 24px, and I wonder if other brands will cause a layout shift for instance due to their divergence.

We can avoid that by ensuring each logo is the same size, with some small adjustments to the SVGs. I'd hesitate to add any generic styling for this as each SVG should really be adjusted individually. I made some changes to the Akismet logo already for it to display at 24x24 (basically just added a `viewbox` and changed width/height). 

The size itself is something that might benefit from design feedback though! I'm uncertain if we have any rules around logo display sizes or if 24x24 will work for all our logos.
created_at: 2025-04-14T03:56:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -19,6 +20,11 @@ export const TopBar = ( { leftElement, rightElement }: TopBarProps ) => {
 				size={ 21 }
 				className="step-container-v2__top-bar-wordpress-logo step-container-v2__top-bar-wordpress-logo--logo"
 			/>
+		</>
+	);
+	return (
+		<div className="step-container-v2__top-bar">
+			{ logo ? logo : <DefaultLogo /> }
path: packages/onboarding/src/step-container-v2/components/TopBar/TopBar.tsx
user: login: zaguiini
body: >I'm inclined to let the amount of logos and conditions for their display be determined by the context the TopBar is in

We need to consider that affecting the top bar will also affect the `Loading` wireframe, which is rendered on the server. In that environment, we cannot use JS to match the viewport and render different logos (expanded in small and above, compact on mobile). We need to do it through CSS and because of that we need to render both logos but show just one of them (check how the logo component is rendered in the CSS file.)

>We can avoid that by ensuring each logo is the same size, with some small adjustments to the SVGs. I'd hesitate to add any generic styling for this as each SVG should really be adjusted individually. I made some changes to the Akismet logo already for it to display at 24x24 (basically just added a viewbox and changed width/height).

>The size itself is something that might benefit from design feedback though! I'm uncertain if we have any rules around logo display sizes or if 24x24 will work for all our logos.

Makes sense. It's easier said than done, though. The WordPress Watermark is used in several places so we can't just change it. 😓 
created_at: 2025-04-14T14:46:02Z
author_association: CONTRIBUTOR
diff_hunk: @@ -19,6 +20,11 @@ export const TopBar = ( { leftElement, rightElement }: TopBarProps ) => {
 				size={ 21 }
 				className="step-container-v2__top-bar-wordpress-logo step-container-v2__top-bar-wordpress-logo--logo"
 			/>
+		</>
+	);
+	return (
+		<div className="step-container-v2__top-bar">
+			{ logo ? logo : <DefaultLogo /> }
path: packages/onboarding/src/step-container-v2/components/TopBar/TopBar.tsx
user: login: tellthemachines
body: > The WordPress Watermark is used in several places so we can't just change it.

Fortunately that one doesn't need changing 😄 

In any case, we should be able to locally resize any reusable SVGs that have a viewbox property by just changing their width with CSS.

The logos for the login page variants though, they're all [inlined in the login block](https://github.com/Automattic/wp-calypso/blob/update/design-picker-modal/client/blocks/login/index.jsx#L687), so we can mess around with them as needed.
created_at: 2025-04-16T03:28:53Z
author_association: CONTRIBUTOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-04-03T04:36:22Z
body: <details>
<summary>Calypso Live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-140429">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-140429%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-140429">https://calypso.live?image=registry.a8c.com/calypso/app:build-140429</a>
</td>
</tr>
</table>
</details>
<details>
<summary>Jetpack Cloud live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-140429&env=jetpack">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-140429%26env%3Djetpack%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-140429&env=jetpack">https://calypso.live?image=registry.a8c.com/calypso/app:build-140429&env=jetpack</a>
</td>
</tr>
</table>
</details>
<details>
<summary>Automattic for Agencies live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-140429&env=a8c-for-agencies">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-140429%26env%3Da8c-for-agencies%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-140429&env=a8c-for-agencies">https://calypso.live?image=registry.a8c.com/calypso/app:build-140429&env=a8c-for-agencies</a>
</td>
</tr>
</table>
</details>
<!--calypso-live-watermark:apr@v1-->
author_association: NONE
user: login: matticbot
created_at: 2025-04-03T04:37:19Z
body: <!-- icfy-watermark: c52822 -->
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

**App Entrypoints** (~601 bytes added 📈 [gzipped])
<details>

```
name           parsed_size           gzip_size
entry-login        +2204 B  (+0.1%)     +582 B  (+0.1%)
entry-stepper        +54 B  (+0.0%)      +18 B  (+0.0%)
```

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

**Sections** (~718 bytes removed 📉 [gzipped])
<details>

```
name             parsed_size           gzip_size
jetpack-connect      -1655 B  (-0.1%)     -757 B  (-0.2%)
marketplace            +54 B  (+0.0%)      +22 B  (+0.0%)
checkout               +54 B  (+0.0%)      +17 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.
</details>

**Async-loaded Components** (~677 bytes removed 📉 [gzipped])
<details>

```
name                                             parsed_size           gzip_size
async-load-design-blocks                             -1655 B  (-0.1%)     -757 B  (-0.1%)
async-load-signup-steps-plans-theme-preselected        +54 B  (+0.0%)      +21 B  (+0.0%)
async-load-signup-steps-plans                          +54 B  (+0.0%)      +21 B  (+0.0%)
async-load-signup-steps-domains                        +54 B  (+0.0%)      +21 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal        +54 B  (+0.0%)      +17 B  (+0.0%)
```

React components that are loaded lazily, when a certain part of UI is displayed for the first time.
</details>

**Legend**
<details>
<summary>What is parsed and gzip size?</summary>

**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.
</details>

Generated by performance advisor bot at [iscalypsofastyet.com](http://iscalypsofastyet.com).
author_association: CONTRIBUTOR
user: login: matticbot
created_at: 2025-04-03T04:39:54Z
body: **This PR modifies the release build for the following Calypso Apps:**

_For info about this notification, see here: PCYsg-OT6-p2_

* help-center

To test WordPress.com changes, run `install-plugin.sh $pluginSlug try/login-screen-design-update` on your sandbox.
<!--calypso-app-artifacts-watermark:apr@v1-->
author_association: CONTRIBUTOR
user: login: tellthemachines
created_at: 2025-04-10T06:06:43Z
body: There's a bunch more login screens that use the same Login component:

<img width="1132" alt="Screenshot 2025-04-10 at 4 00 53 pm" src="https://github.com/user-attachments/assets/e9d7921f-6840-4687-8b71-159ec759c19d" />

<img width="1133" alt="Screenshot 2025-04-10 at 4 04 39 pm" src="https://github.com/user-attachments/assets/dda2b7a6-afaf-4051-a016-89c61305afc0" />

<img width="1133" alt="Screenshot 2025-04-10 at 4 01 18 pm" src="https://github.com/user-attachments/assets/e7ed32aa-98a0-471f-a3cb-498298e9a595" />

<img width="1133" alt="Screenshot 2025-04-10 at 4 01 09 pm" src="https://github.com/user-attachments/assets/3793938c-1a07-43ed-815a-77bedd1a7798" />

I'm thinking we could update them all for consistency? @fcoveram what are your thoughts on this?
author_association: CONTRIBUTOR
user: login: tellthemachines
created_at: 2025-04-11T01:42:02Z
body: I've updated the PR to make the same header adjustments for the Akismet login screen, because it's part of the same family of `is-white-login` as the default wordpress.com login screens. Here's what it looks like:

<img width="412" alt="Screenshot 2025-04-11 at 11 35 05 am" src="https://github.com/user-attachments/assets/a865259d-9ff5-4d6e-abd6-c2c82fc3c36e" />

<img width="1037" alt="Screenshot 2025-04-11 at 11 37 14 am" src="https://github.com/user-attachments/assets/aed5930e-2760-4897-8270-cdda0a4071aa" />

Would be good to have some design validation on this approach before going further. 

In any case, I think this PR is self-contained enough that it can be shipped by itself, so I'm marking it ready for review.
author_association: CONTRIBUTOR
user: login: tellthemachines
created_at: 2025-04-14T04:01:54Z
body: Thanks for the review @zaguiini!

> I still think we can wrap the whole page with one of the wireframes, though 👍🏻 A bigger rewrite for sure, but it looks doable.

Do you mean we should do it in this PR or as a follow-up? I also haven't addressed content width yet and was thinking of dealing with that in a follow-up, mainly to make reviewing easier.
author_association: CONTRIBUTOR
user: login: zaguiini
created_at: 2025-04-14T14:43:25Z
body: >Do you mean we should do it in this PR or as a follow-up? I also haven't addressed content width yet and was thinking of dealing with that in a follow-up, mainly to make reviewing easier.

Yeah, let's go for a second pass to not let this PR grow bigger.
author_association: CONTRIBUTOR
user: login: tellthemachines
created_at: 2025-04-16T03:40:09Z
body: With regards to the remaining login variant screens (the non-`is-white-login` ones), their layouts are different enough that it might be best for a designer to look at them before I start changing things around 😅 so I'm thinking we can ship this PR as is and I'll tackle the content widths/wireframes in the next PR. What do you think @zaguiini?
author_association: CONTRIBUTOR
user: login: fcoveram
created_at: 2025-04-16T09:40:15Z
body: Sorry for arriving late here. 

To @tellthemachines' ping

> I’m thinking we could update them all for consistency? [@fcoveram](https://github.com/fcoveram) what are your thoughts on this?

Thanks for the ping. Based on the screenshots shared, I would not update the screens that include other brands. OAuth and Login pages display other products, and therefore, they might differ in basic styles like headings and body text.

I see value in addressing this level of consistency, but I would leave the design direction to folks working in the A8C ID atelier ([Linear project](https://linear.app/a8c/project/a8c-id-atelier-38180cfb1d7b)).
author_association: NONE
user: login: zaguiini
created_at: 2025-04-16T16:22:45Z
body: >I'm thinking we can ship this PR as is and I'll tackle the content widths/wireframes in the next PR.

Absolutely. We need to be mindful about @fcoveram's comments, though.
author_association: CONTRIBUTOR
user: login: tellthemachines
created_at: 2025-04-17T02:06:33Z
body: > We need to be mindful about @fcoveram's comments, though.

My only concern for this PR is whether we should be updating the Akismet screen. I'd like to go ahead with it because _not_ doing it will introduce more complexity to the login block in adding yet another path, and the screen is sufficiently similar to the wordpress.com screen that I think it would be an overall improvement. But it is a different brand.

Do you have an opinion on this @fcoveram? I'm referring to the update to the Akismet login that I shared [here](https://github.com/Automattic/wp-calypso/pull/102353#issuecomment-2795606924), which essentially only changes the position and size of the brand logo.
author_association: CONTRIBUTOR
user: login: fcoveram
created_at: 2025-04-17T07:27:00Z
body: <!-- linear:replyTo:2760296614 -->

> Do you have an opinion on this @fcoveram? I'm referring to the update to the Akismet login that I shared [here](https://github.com/Automattic/wp-calypso/pull/102353#issuecomment-2795606924), which essentially only changes the position and size of the brand logo.

That looks good and doesn't modify brand traits. Let's do it 🚀
author_association: NONE
user: login: tellthemachines
created_at: 2025-04-22T03:21:52Z
body: Cool, I think all outstanding feedback has been addressed! Are you happy with the code @zaguiini ?
author_association: CONTRIBUTOR
user: login: zaguiini
created_at: 2025-04-22T11:45:40Z
body: Sure I am @tellthemachines 🚀 
author_association: CONTRIBUTOR