Fix hardcoded admin colors, use admin theme colors

[PanosSynetos]

💡 The task has finished, and I've asked for a CFT pdqkbG-2V7-p2 - If there are any comments, please add them in the CFT comments

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

With this PR, I use the admin theme colors wherever possible, so we harmonize the experience.

Wherever it was not possible to use the variable, I've either used grey or the new woo pink.

Closes #37172, Closes #37166, Closes #30829, Closes #29267, Closes Automattic/wc-calypso-bridge#1215 .

• Buttons are using wrong purple color, should be using WP primary color #37172
• Update button color in the Product and Orders empty state #37166
• Old Woo Purple a36597 & a16696 #30829
• Use WordPress theme color to replace legacy purple #29267
• Fix hardcoded colors in WooCommerce Core Automattic/wc-calypso-bridge#1215

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

1. Install and activate WooCommerce 7.8.0 before installing the zip from this branch.
2. Check the plugins screen to verify that there is an update available.
3. Install the zip of this branch replacing the existing version.
4. Alternatively, you can find a zip of this branch in this P2 Call For Testing pdqkbG-2V7-p2 (which will help you test wp-admin/update-core.php modal)
5. Chose a dashboard theme other than the Default under Users -> Profile

The changes can be tested on any site, Atomic, WPCOM, Self Hosted, Woo Express, WoA dev - it doesn't need Calypso; no changes have been done on Calypso.

Here are the before/after screenshots so you can validate the changes.

Empty states

All empty state buttons are affected by this change. I decided to remove the hardcoded colors, and let the admin theme color.css do its magic.

- wp-admin/edit.php?post_type=shop_coupon
- wp-admin/edit.php?post_type=product
- wp-admin/edit.php?post_type=shop_order
- wp-admin/admin.php?page=wc-settings&tab=advanced&section=keys
- wp-admin/admin.php?page=wc-settings&tab=advanced&section=webhooks

There is no need to test every single empty state above. The CSS selectors are common, so if you test one of the above, consider the rest tested.

Reminder: the empty state is not shown if the trash has items.

Importer

- wp-admin/edit.php?post_type=product&page=product_importer

Toggles

- wp-admin/admin.php?page=wc-settings&tab=checkout&section

All toggles throughout the admin are affected by thing change. Status icons are updated too.

🔔 The pink question-mark comes from WC Payments. I’ll open a PR in WC Pay to fix this color, once this PR gets merged.

Status Icons

- wp-admin/admin.php?page=wc-settings&tab=email

Breadcrumb up icon

- wp-admin/admin.php?page=wc-settings&tab=checkout&section=bacs

WooCommerce notices

- wp-admin/admin.php?page=wc-status

React Notices

Thank you @xristos3490

Hover on order preview

- wp-admin/edit.php?post_type=shop_order

Update Core

- wp-admin/update-core.php

That's a tricky one to trigger; see

• Update confirmation modal uses old purple and button style woocommerce-admin#6619
  for replication steps

Alternative/easier method, you can download a zip from pdqkbG-2V7-p2 , install it, visit wp-admin/update-core.php , open the browser console and execute jQuery( '#wc-upgrade-warning' ).trigger( 'click' )

Changes

• Heading has a smaller font size
• Couldn’t use the theme color for the header, without including an additional CSS
  • So I went with grey to be as neutral as possible

Shipping empty states

- wp-admin/admin.php?page=wc-settings&tab=shipping

This screen has been slightly modified, apart from the button colors

• Set the background to white
• Changed the globe color to a neutral grey
  • I tried the theme color and it was too obtrusive
• Slightly smaller font sizes
• Made the button the same size as all the other empty states

Auth screen

- wc-auth/v1/authorize?app_name=testing&user_id=1&return_url=https://google.com&callback_url=https://google.com&scope=read

That was a catch from @beaulebens

WC Admin Empty Content

- wp-admin/admin.php?page=wc-admin

To trigger the empty content,

• open your browser's console,
• go to network tab and search for the notes XHR call.
• Right click on it and block it.
• Reload the page

Another one from @beaulebens

I couldn’t change the icon to have the admin theme color, as it needed to modify a react component (which others extend), so I took the liberty to make it grey to avoid having to change it in the future.

Marketplace

- wp-admin/admin.php?page=wc-addons

Marketplace Helper

- wp-admin/admin.php?page=wc-addons&section=helper

Known issues

The following two issues are not related to WooCommerce Core, but since you might see them in the settings, I thought I should mention them, to avoid unnecessary reports.

WooCommerce Payments

The icon needs to change on the WC Payments side.

WooCommerce Services

The colors need to change on the https://github.com/Automattic/woocommerce-services repo.

---

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement

Message

Comment

[github-actions]

Test Results Summary

Commit SHA: 155420f

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	1m 7s
E2E Tests	189	0	0	19	0	208	16m 38s

---

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

[github-actions]

Hi @jorgeatorres, @rrennick, @xristos3490, @jimjasson, @jarekmorawski,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[rrennick]

That's a tricky one to trigger; see

woocommerce/woocommerce-admin#6619 for replication steps

@PanosSynetos We need better testing instructions for this. I installed this and edited the plugin header version to 7.8.0. I was able to update from the plugins page without getting the popup.

wp-admin/admin.php?page=wc-admin

This will need instructions on blocking an api call as I wasn't able to get the empty screen on any page=wc-admin URL.

[rrennick]

@PanosSynetos Nice work on this. All of the things that I was able to test looked great.

I edited the testing instruction in some places to add details for the QA folks that will test this. Plus I left the comment regarding a couple screens I couldn't trigger/access. I tested this on an AT site so I didn't test any calypso bridge specific changes. It would be good to clarify when testing needs a wccom site with calypso.

[rrennick]

I forgot to mention that https://github.com/woocommerce/woocommerce/files/11806335/test-plugins-37343.zip contains a plugin-B plugin that is explicitly incompatible with HPOS that can be included in the testing instructions where appropriate.

[PanosSynetos]

Thank you @rrennick for your feedback and the changes you've made.
The changes do not touch calypso, that's why I didn't mention it - Now I know :)

• I'll add instructions for the wc-admin error.
• As for the update modal, I have an idea to make testing easier;

I'll update the instructions during the day and let you know

[PanosSynetos]

Hey @rrennick - I've updated the missing instructions - hope we're good now. Thank you for your suggestions, you were spot on!

[jimjasson]

@PanosSynetos

Tested this and looks good! ✅

I used the sunrise theme in my tests.

Empty states and database upgrade

Importer

Toggles

Status Icons

Breadcrumb up icon

Preview

Update Core

Shipping empty states

Auth screen

WC Admin Empty Content

Marketplace

Marketplace Helper

[jorgeatorres]

LGTM. Great job on this one @PanosSynetos. Thank you! 🙇

[xristos3490]

Looks good! Great job showcasing each change! 👌