Skip to content
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

Update dark mode illustrations #13392

Merged

Conversation

irfano
Copy link
Contributor

@irfano irfano commented Jan 24, 2025

Description

During the design review, it was commented that the illustrations we use for Jetpack setup flow don't look great in dark theme, so we got new versions that use lighter purple, this PR updates those illustrations.
I also forgot to update the light mode of empty store picker illustration, and updated it here.

Steps to reproduce

Checking the screenshots below should be enough.

Reproduce Empty Site Picker

  1. Log in to a site using an account that is associated with only one site.
  2. After logging in, use another admin account to delete the user from the site.
  3. Go to Menu → Site picker

The tests that have been performed

Screens below

Images/gif

Before After
  • I have considered if this change warrants release notes and have added them to RELEASE-NOTES.txt if necessary. Use the "[Internal]" label for non-user-facing changes.

Reviewer (or Author, in the case of optional code reviews):

Please make sure these conditions are met before approving the PR, or request changes if the PR needs improvement:

  • The PR is small and has a clear, single focus, or a valid explanation is provided in the description. If needed, please request to split it into smaller PRs.
  • Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
  • Manual Testing: The author listed all the tests they ran, including smoke tests when needed (e.g., for refactorings). The reviewer confirmed that the PR works as expected on big (tablet) and small (phone) in case of UI changes, and no regressions are added.

@irfano irfano added the category: design Layout and style elements in the UI or user interface, including color and animations. label Jan 24, 2025
@wpmobilebot
Copy link
Collaborator

📲 You can test the changes from this Pull Request in WooCommerce-Wear Android by scanning the QR code below to install the corresponding build.
App Name WooCommerce-Wear Android
Platform⌚️ Wear OS
FlavorJalapeno
Build TypeDebug
Commitbc513ed
Direct Downloadwoocommerce-wear-prototype-build-pr13392-bc513ed.apk

@wpmobilebot
Copy link
Collaborator

📲 You can test the changes from this Pull Request in WooCommerce Android by scanning the QR code below to install the corresponding build.

App Name WooCommerce Android
Platform📱 Mobile
FlavorJalapeno
Build TypeDebug
Commitbc513ed
Direct Downloadwoocommerce-prototype-build-pr13392-bc513ed.apk

@JorgeMucientes JorgeMucientes self-assigned this Jan 27, 2025
@JorgeMucientes
Copy link
Contributor

Hey @irfano nicely done! I was able to test almost all the cases. However there's one screen I was not able to test:

How do you log in with an account without any sites? Because we currently force the user to enter a site url, so I always land on this screens:

deleted.mp4

(I've deleted that single site that is shown on the list, but still shows there, so the site picker is never empty)

Also I wanted to ask about this illustration from the flow above. Is it correct? Because it feels like it has the "old" look and feel, despite having the new Woo logo there:

Lastly, wanted to ask about the WooCommerce branding on the login email template. Is it under your radar to report this to get it updated? Because it currently shows the old style:

@irfano
Copy link
Contributor Author

irfano commented Jan 28, 2025

How do you log in with an account without any sites? Because we currently force the user to enter a site url, so I always land on this screens:

I removed the user from the site after logging in. I added the instructions to the description.

Also I wanted to ask about this illustration from the flow above. Is it correct?

Yes, that's correct. We only updated the logo and colors on it. Figma reference: Ntkk0ER4hHt5y9KjEGIiGk-fi-3450_5600

Lastly, wanted to ask about the WooCommerce branding on the login email template. Is it under your radar to report this to get it updated? Because it currently shows the old style:

It’s expected that it’s currently showing the old logo for now. But I still reported it to ensure that updating it is included in our plans. (Internal link: p1738072483131849-slack-C07E7D0R761)

@irfano irfano merged commit a20d64a into feature/woo-2.0-brand-updates Jan 28, 2025
17 checks passed
@irfano irfano deleted the feature/update-dark-mode-illustrations branch January 28, 2025 13:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
category: design Layout and style elements in the UI or user interface, including color and animations.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants