Update marketing tab styles

[jconroy]

In progress work for updating styles used on the marketing tab and coupons pages to reflect designs below

Changes

• Updated styles of the coupons page recommended extensions (see below)
• Moved to use local copies of product icons/svgs so that inline svgs could be used far more easily - making use of a few existing icons from @wordpress/icons
• Fixed instances of "woocommere-admin"
• Moved to use theme colors

Screenshots

Other

• Tested in IE11
• Using SVG component with recommended accessibility fields

Detailed test instructions:

• Check out this branch
• Open test site
• Go to Marketing > Overview and Marketing > Coupons
• Check design

Changelog Note:

Tweak: Style improvements for Marketing hub.

[danielbitzer]

Looks great! Left a few comments

[danielbitzer]

@j111q @jconroy just one other thought on the Marketing > Overview tab we have a max-width on the cards. I noticed on a wide screen these components don't look so great. Especially the knowledge base card. Should we be adding a max-width the cards on the coupons page?

[jconroy]

I noticed on a wide screen these components don't look so great.

Just noting that the original design spec has them as fluid/full width to match the table/components - so that's what we've gone with

[jconroy]

@j111q @danielbitzer I opted to go with $theme-color - I thought a few times working on this we should just keep things consistent for the time being

[j111q]

@jconroy @danielbitzer Great points and thank you for the thoughts. Yes, I think going with $theme-color is the best solution too. We did want to introduce the new blue, but I'd agree it's jarring, and since the new WC Home page does the same, let's align with using $theme-color instead.

Re: max-width of cards, yes, I believe the original design intended to match the width of the table, which I'd agree with. If we introduce a max-width for the cards, I'd like to have a max-width for the table and other components like the notice banner as well.

[jconroy]

Updated based on feedback and re-tested in browsers including edge and ie11

Also flipped to using var(--wp-admin-theme-color) instead of $theme-color as suggested by design

[JPry]

Also flipped to using var(--wp-admin-theme-color) instead of $theme-color

This doesn't seem to be working on the Coupons page. I don't see any hover affect in my local testing.

I've also noted a few other issues I came across.

[JPry]

One other thing that's not quite in the scope of the PR: I noticed that we're making use of the @woocommerce/components module. We should ensure this is included in the dependencies of the package.json file.

[JPry]

LGTM 👍

[danielbitzer]

Looks like CSS variables like --wp-admin-theme-color were added in 8.4.0. WordPress/gutenberg#23048

[jconroy]

So WC Admin's minimum supported WP version is 5.3 which means the min Gutenberg version is 6.5. And it looks like the icons package was added in Gutenberg 7.4

Ahh right now I understand what you mean. So I **do need** to bundle the other 3 right?

[danielbitzer]

So I do need to bundle the other 3 right?

I'm afraid so. Sorry I should have checked compatibility before I suggested using @wordpress/icons.

[jconroy]

Sorry I should have checked

@danielbitzer All good! its more my own inexperience, thanks for taking a look. I've added them in.