Apply consistent admin theme colors to common UI components

[eason9487]

Changes proposed in this Pull Request:

Closes #2058

This PR applies the admin theme colors for:

• The links within the unsupported notices on the Get Started page.
• The active dot icon of the page control in Guide component.
• The chevron icon in TopBar component.

In addition, this PR also simplifies the layout and style of TopBar component.

💡 The color of native <select> won't be fixed in this PR as it's specified in WP core.

Screenshots:

📷 Link color on the Get Started page

📷 Active dot in the page control

📷 Icon color when hovering

Detailed test instructions:

Locally change the value of mcSupportedCountry, mcSupportedLanguage, and adsSetupComplete to false:

google-listings-and-ads/src/Admin/Admin.php

Lines 130 to 133 in 2df2bd8

	'mcSupportedCountry' => $this->merchant_center->is_store_country_supported(),
	'mcSupportedLanguage' => $this->merchant_center->is_language_supported(),
	'adsCampaignConvertStatus' => $this->options->get( OptionsInterface::CAMPAIGN_CONVERT_STATUS ),
	'adsSetupComplete' => $this->ads->is_setup_complete(),

1. Use a WP version >= 6.1
2. Install a nightly build WooCommerce to have the latest color fixes in WC core
3. Go to WP Admin > Users > Profile page: /wp-admin/profile.php
   • In the Admin Color Scheme setting, select an option rather than "Default", such as "Modern"
   • Click the "Update Profile" button at the bottom to save the change
4. Go to the Get Started page
   • Check the color of links within the unsupported notices
5. Go to this page: /wp-admin/admin.php?page=wc-admin&path=%2Fgoogle%2Fproduct-feed&guide=submission-success
   • Check the color of the active dot icon of the page control
6. Go to the Edit Free Listings page
   • Over the chevron icon at the top-left corner to check its :hover color
   • Check if the TopBar component layout is rendered as it was before

Changelog entry

Tweak - Apply consistent admin theme colors to common UI components.

[martynmjones]

Hey @eason9487, thanks for improving the colours used throughout GLA 👍

Tested locally and following your testing instructions all relevant colours were updated to match the admin selection. There are two areas where the hard-coded colour is still coming through.

Unchecked requirements on the pre-launch list:

Both final URL icons on the Optimize your campaign screen:

[eason9487]

Hi @martynmjones, thanks for the review.

Unchecked requirements on the pre-launch list: [...]

Thanks for catching this! Fixed in fcb0dcd.

Both final URL icons on the Optimize your campaign screen:

These two I didn't include because they are non-interactive icons and are paired with other colors in it or the background color where it is used.

---

Could you help with a new round of code reviews?

[martynmjones]

These two I didn't include because they are non-interactive icons and are paired with other colors in it or the background color where it is used.

That makes sense and thanks for the clarification 👍

Tested again and the issue with the pre-launch checklist has been fixed so LGTM ✅