Update Woo branding for reset password pages #97152

ilyasfoo · 2024-12-06T02:18:04Z

Related to #97149

Proposed Changes

Add is-woo-com-oauth to container class for more precise selector matching
Various fixes to CSS changes so branding update does not override core profiler flow unintentionally
Update reset password pages styling to match branding update
Add back header subtitle text post-reset page (discussion: tp2u3Nk9arcpeNMZcylNG4-fi-616_4910#1044740940)

Stay with the "Log in to your account" screen with the current explanation. I think this screen does need a title, as removing it creates inconsistencies.

Testing Instructions

Set up woocommerce-start-dev-env, point wordpress.com to your local and sandbox public-api.wordpress.com
In your development.json, set woocommerce/rebrand-2-0 to true
Run yarn start

Reset password page

In an incognito window, open https://woocommerce.com/sso?next=%2F
Click on Lost your password?
Observe the page is similar with design

Reset password post-email page

Enter any email and click on Reset my password
Observe the page is similar with design (except for Lost password link which will have underline)

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)?

… not affect core profiler flow

…uth-reset-password

github-actions · 2024-12-06T02:18:17Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2024-12-06T02:18:55Z

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

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

name           parsed_size           gzip_size
entry-login         +165 B  (+0.0%)      +21 B  (+0.0%)
entry-stepper       +117 B  (+0.0%)      +29 B  (+0.0%)
entry-main          +117 B  (+0.0%)      +29 B  (+0.0%)

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

Sections (~8 bytes removed 📉 [gzipped])

name             parsed_size           gzip_size
jetpack-connect        +48 B  (+0.0%)       -8 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.

Async-loaded Components (~8 bytes removed 📉 [gzipped])

name                      parsed_size           gzip_size
async-load-design-blocks        +48 B  (+0.0%)       -8 B  (-0.0%)

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

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.

matticbot · 2024-12-06T02:49:16Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/woo-rebrand-auth-reset-password on your sandbox.

ilyasfoo · 2024-12-06T04:07:36Z

client/blocks/login/index.jsx

@@ -455,7 +455,7 @@ class Login extends Component {
 				} else if ( this.props.twoFactorEnabled ) {
 					headerText = <h3>{ translate( 'Authenticate your login' ) }</h3>;
 				} else if ( currentQuery.lostpassword_flow ) {
-					headerText = null;
+					headerText = <h3>{ translate( 'Log in to your account' ) }</h3>;


Meant to be outside of feature flag

ilyasfoo · 2024-12-06T04:07:42Z

client/blocks/login/lost-password-form.jsx

@@ -129,7 +129,7 @@ const LostPasswordForm = ( {
 			onSubmit={ onSubmit }
 		>
 			<div className="login__form-userdata">
-				<FormLabel htmlFor="email">{ translate( 'Your email address' ) }</FormLabel>
+				<FormLabel htmlFor="email">{ translate( 'Your email' ) }</FormLabel>


Meant to be outside of feature flag

chihsuan

Tested well! Thanks. 🚢

moon0326

LGTM and tested well 👍 🚀

ilyasfoo added 3 commits December 6, 2024 09:31

Add changes for reset password and fixes so rebrand styling update do…

91ca463

… not affect core profiler flow

Use oauth class instead for more precise selector

cabbb81

Merge remote-tracking branch 'origin/trunk' into update/woo-rebrand-a…

4fe5873

…uth-reset-password

Update test

158aca2

ilyasfoo commented Dec 6, 2024

View reviewed changes

ilyasfoo requested review from a team, moon0326 and rjchow December 6, 2024 04:07

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Dec 6, 2024

chihsuan approved these changes Dec 10, 2024

View reviewed changes

moon0326 approved these changes Dec 11, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Woo branding for reset password pages #97152

Update Woo branding for reset password pages #97152

ilyasfoo commented Dec 6, 2024

github-actions bot commented Dec 6, 2024 •

edited by matticbot

Loading

matticbot commented Dec 6, 2024 •

edited

Loading

matticbot commented Dec 6, 2024

ilyasfoo Dec 6, 2024

ilyasfoo Dec 6, 2024

chihsuan left a comment

moon0326 left a comment

Update Woo branding for reset password pages #97152

Are you sure you want to change the base?

Update Woo branding for reset password pages #97152

Conversation

ilyasfoo commented Dec 6, 2024

Proposed Changes

Testing Instructions

Reset password page

Reset password post-email page

Pre-merge Checklist

github-actions bot commented Dec 6, 2024 • edited by matticbot Loading

matticbot commented Dec 6, 2024 • edited Loading

matticbot commented Dec 6, 2024

ilyasfoo Dec 6, 2024

Choose a reason for hiding this comment

ilyasfoo Dec 6, 2024

Choose a reason for hiding this comment

chihsuan left a comment

Choose a reason for hiding this comment

moon0326 left a comment

Choose a reason for hiding this comment

github-actions bot commented Dec 6, 2024 •

edited by matticbot

Loading

matticbot commented Dec 6, 2024 •

edited

Loading