Skip to content

Remove color override from stepper nav top bar right element #103610

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: trunk
Choose a base branch
from

Conversation

adamwoodnz
Copy link
Contributor

@adamwoodnz adamwoodnz commented May 21, 2025

Part of DSGCOM-92: Update primary buttons on 'Continue as user'

Proposed Changes

  • Remove color override from stepper top nav right element
  • Extend Akismet branding to cover the stepper nav, as this is the only branded login to use the stepper nav (afaik)

Why are these changes being made?

Overrides to the design system should be avoided, see discussion.

Testing Instructions

  • Visit the login page
  • Check that the navigation link in the top right corner uses the accent color
  • Visit the Akismet login page and do the same.

Screenshots

Before After
wordpress com_log-in(Desktop) (5) calypso localhost_3000_log-in(Desktop) (3)
wordpress com_log-in_redirect_to=https%3A%2F%2Fr-login wordpress com%2Fremote-login php%3Faction%3Dlink%26back%3Dhttps%253A%252F%252Fakismet com%252Faccount%252F(Desktop) (1) calypso localhost_3000_log-in_redirect_to=https%3A%2F%2Fr-login wordpress com%2Fremote-login php%3Faction%3Dlink%26back%3Dhttps%253A%252F%252Fakismet com%252Faccount%252F signup_url=%2Fstart%2Faccount%2Fuser-social%3Fredirect_to%3Dhttps (3)

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

Copy link

github-actions bot commented May 21, 2025

@adamwoodnz adamwoodnz requested review from zaerl and ciampo May 21, 2025 21:49
@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 21, 2025
@adamwoodnz adamwoodnz requested review from mirka and jasmussen May 21, 2025 21:50
@adamwoodnz adamwoodnz marked this pull request as ready for review May 21, 2025 21:50
@adamwoodnz adamwoodnz requested a review from a team as a code owner May 21, 2025 21:50
@matticbot
Copy link
Contributor

matticbot commented May 21, 2025

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

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

  • help-center
  • notifications
  • wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug DSGCOM-92-fix-stepper-nav-link-button-color on your sandbox.

@matticbot
Copy link
Contributor

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

@adamwoodnz
Copy link
Contributor Author

@zaerl could you please confirm that this fixes your issue 🙏

Copy link
Contributor

@zaerl zaerl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working as expected. 🚢

image

@jasmussen
Copy link
Member

Thank you for the PR! The dark color is actually intentional as far as the current onboarding designs, though in those designs it should be $gray-900. But this effort, in crossing boundaries across the products, does surface some pushback on that design. To that end, I'd love a broader glance and feedback by @Automattic/dotcom-design before you land this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants