Update marketing tab styles (#4794)

* Fix incorrect woocommere-admin spelling

* Update styles

* Add icons

* Add hover effect for coupon icons

* Remove variable comment

* Update color case

* Style lint fixes

* Use $theme-color

* Update icons, use wordpress/icons where possible

* Adjustment for using smaller default icons and no fills in the svgs

* Use var(--wp-admin-theme-color) instead of $theme-color

* Reorg coupons stylesheet

* Update PropTypes for ProductIcon

* Adjust icon export

* Rever to using $theme-color

* Add versions of link, people and currency-dollar

* Overide coupons icon background color

* Add background transition to icon wrapper

client/marketing/components/button/index.js

@@ -13,7 +13,7 @@ export default ( props ) => {
 	return (
 		<Button
 			{ ...props }
-			className={ classnames( props.className, 'woocommere-admin-marketing-button' ) }
+			className={ classnames( props.className, 'woocommerce-admin-marketing-button' ) }
 		/>
 	);
 }

client/marketing/components/button/style.scss

@@ -1,6 +1,6 @@
-.components-button.woocommere-admin-marketing-button {
+.components-button.woocommerce-admin-marketing-button {
 	&:not([disabled]) {
-		border-color: $core-blue-dark-900 !important;
-		color: $core-blue-dark-900 !important;
+		border-color: $theme-color !important;
+		color: $theme-color !important;
 	}
 }

client/marketing/components/knowledge-base/style.scss

@@ -93,11 +93,12 @@
 			font-weight: 600;
 			white-space: normal;
 			color: $core-grey-dark-800;
+			transition: color 0.2s ease;
 		}
 
 		&:hover {
 			h3 {
-				color: $core-blue-dark-900;
+				color: $theme-color;
 			}
 		}
 

client/marketing/components/product-icon/icons/index.js

@@ -0,0 +1,30 @@
+export { default as blank } from './library/blank';
+
+// Amazon & Ebay Integration
+export { default as amazonEbayIntegration } from './library/amazon-ebay';
+export { default as woocommerceAmazonEbayIntegration } from './library/amazon-ebay';
+
+// AutomateWoo
+export { default as automatewoo } from './library/automatewoo';
+export { default as automatewooAlt } from './library/automatewoo-alt';
+
+// Facebook
+export { default as facebook } from './library/facebook';
+export { default as facebookForWoocommerce } from './library/facebook';
+
+// Google Ads
+export { default as googleAds } from './library/google';
+export { default as klikenMarketingForGoogle } from './library/google';
+
+// Hubspot
+export { default as hubspotForWoocommerce } from './library/hubspot';
+
+// Mailchimp
+export { default as mailchimpForWoocommerce } from './library/mailchimp';
+
+// Coupons
+export { default as woocommerceStoreCredit } from './library/currency-dollar';
+export { default as woocommerceFreeGiftCoupons } from './library/gift';
+export { default as woocommerceUrlCoupons } from './library/link';
+export { default as woocommerceGroupCoupons } from './library/people';
+export { default as woocommerceSmartCoupons } from './library/tip';

client/marketing/components/product-icon/icons/library/automatewoo-alt.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const automatewooAlt = (
+	<SVG xmlns="http://www.w3.org/2000/svg">
+		<Path fillRule="evenodd" clipRule="evenodd" d="M4.67708 14.1615h3.77084l.77604 2.1198h1.96354L7.65625 7H5.5625L2 16.2813h1.90625l.77083-2.1198zm3.17188-1.6511H5.28125l1.28646-3.50519 1.28125 3.50519zM22.9791 7h-1.8437l-1.6719 6.4115L17.3906 7h-1.8698l-2.0573 6.3854L11.7604 7H9.8489l2.5781 9.2813h1.8854l2.1198-6.60942 2.1198 6.60942h1.8594L22.9791 7z" />
+	</SVG>
+);
+
+export default automatewooAlt;

client/marketing/components/product-icon/icons/library/automatewoo.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const automatewoo = (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+		<defs>
+			<clipPath id="b">
+				<rect width="100" height="100" />
+			</clipPath>
+		</defs>
+		<g id="a" clipPath="url(#b)">
+			<rect width="100" height="100" fill="#fff" />
+			<rect width="100" height="100" fill="#7532e4" />
+			<g transform="translate(-43.503 -133.512)">
+				<Path d="M78.217,193.13H64.405l-2.823,7.764H54.6L67.648,166.9h7.669l12.934,33.995H81.059Zm-11.6-6.047h9.4L71.33,174.245Z" transform="translate(0 0)" fill="#1ff2e6" />
+				<Path d="M246.639,166.9h6.753l-9.4,33.995h-6.81l-7.764-24.208-7.764,24.208h-6.906L205.3,166.9h7l6.238,23.388,7.535-23.388h6.849l7.592,23.483Z" transform="translate(-121.952)" fill="#1ff2e6" />
+			</g>
+		</g>
+	</SVG >
+);
+
+export default automatewoo;

client/marketing/components/product-icon/icons/library/blank.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG } from '@wordpress/primitives';
+
+const blank = (
+	<SVG width="36" height="36" fill="none" xmlns="http://www.w3.org/2000/svg" />
+);
+
+export default blank;

client/marketing/components/product-icon/icons/library/currency-dollar.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const currencyDollar = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M3.25 12a8.75 8.75 0 1117.5 0 8.75 8.75 0 01-17.5 0zM12 4.75a7.25 7.25 0 100 14.5 7.25 7.25 0 000-14.5zm-1.338 4.877c-.314.22-.412.452-.412.623 0 .171.098.403.412.623.312.218.783.377 1.338.377.825 0 1.605.233 2.198.648.59.414 1.052 1.057 1.052 1.852 0 .795-.461 1.438-1.052 1.852-.41.286-.907.486-1.448.582v.316a.75.75 0 01-1.5 0v-.316a3.64 3.64 0 01-1.448-.582c-.59-.414-1.052-1.057-1.052-1.852a.75.75 0 011.5 0c0 .171.098.403.412.623.312.218.783.377 1.338.377s1.026-.159 1.338-.377c.314-.22.412-.452.412-.623 0-.171-.098-.403-.412-.623-.312-.218-.783-.377-1.338-.377-.825 0-1.605-.233-2.198-.648-.59-.414-1.052-1.057-1.052-1.852 0-.795.461-1.438 1.052-1.852a3.64 3.64 0 011.448-.582V7.5a.75.75 0 011.5 0v.316c.54.096 1.039.296 1.448.582.59.414 1.052 1.057 1.052 1.852a.75.75 0 01-1.5 0c0-.171-.098-.403-.412-.623-.312-.218-.783-.377-1.338-.377s-1.026.159-1.338.377z" />
+	</SVG>
+);
+
+export default currencyDollar;

client/marketing/components/product-icon/icons/library/facebook.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const facebook = (
+	<SVG width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path fill-rule="evenodd" clip-rule="evenodd" d="M34 0H2C0.8 0 0 0.8 0 2V34C0 35 0.8 36 2 36H19.2V22H14.6V16.6H19.2V12.6C19.2 8 22 5.4 26.2 5.4C28.2 5.4 29.8 5.6 30.4 5.6V10.4H27.6C25.4 10.4 25 11.4 25 13V16.4H30.4L29.6 22H25V36H34C35 36 36 35.2 36 34V2C36 0.8 35.2 0 34 0Z" fill="#3B5997" />
+	</SVG>
+);
+
+export default facebook;

client/marketing/components/product-icon/icons/library/gift.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const gift = (
+	<SVG xmlns="http://www.w3.org/2000/svg">
+		<Path fill-rule="evenodd" clip-rule="evenodd" d="M14.75 9C16.1307 9 17.25 7.88071 17.25 6.5C17.25 5.11929 16.1307 4 14.75 4C13.3693 4 12.25 5.11929 12.25 6.5C12.25 5.11929 11.1307 4 9.75 4C8.36929 4 7.25 5.11929 7.25 6.5C7.25 7.88071 8.36929 9 9.75 9H4V20L20 20V9L14.75 9ZM14.75 7.5C15.3023 7.5 15.75 7.05228 15.75 6.5C15.75 5.94772 15.3023 5.5 14.75 5.5C14.1977 5.5 13.75 5.94772 13.75 6.5V7.5H14.75ZM18.5 18.5V10.5H13V18.5H18.5ZM11.5 18.5H5.5L5.5 10.5H11.5L11.5 18.5ZM8.75 6.5C8.75 7.05228 9.19772 7.5 9.75 7.5H10.75V6.5C10.75 5.94772 10.3023 5.5 9.75 5.5C9.19772 5.5 8.75 5.94772 8.75 6.5Z" />
+	</SVG>
+);
+
+export default gift;

client/marketing/components/product-icon/icons/library/hubspot.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const hubspot = (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+		<defs>
+			<clipPath id="b">
+				<rect width="100" height="100" />
+			</clipPath>
+		</defs>
+		<g id="a" clipPath="url(#b)">
+			<rect width="100" height="100" fill="#fff" />
+			<Path d="M100,100H0V0H100V100ZM40.665,75.539a6.446,6.446,0,1,0,6.447,6.447,6.376,6.376,0,0,0-.3-1.843L54.158,72.8A19.808,19.808,0,1,0,69.206,37.48h.015V28.455a6.959,6.959,0,0,0,4.013-6.273v-.211a6.971,6.971,0,0,0-6.952-6.953H66.07a6.97,6.97,0,0,0-6.952,6.953v.211a6.957,6.957,0,0,0,4.013,6.273V37.5a19.745,19.745,0,0,0-9.376,4.126L28.935,22.295a7.919,7.919,0,0,0-4.148-9.145,7.845,7.845,0,0,0-3.5-.817,7.919,7.919,0,1,0,3.938,14.786l24.4,19a19.775,19.775,0,0,0,.3,22.3l-7.426,7.427A6.362,6.362,0,0,0,40.665,75.539Zm25.522-8.321h0l-.023,0a10.164,10.164,0,0,1,.023-20.328H66.2a10.166,10.166,0,0,1-.012,20.333Z" fill="#ff7a59" />
+		</g>
+	</SVG>
+);
+
+export default hubspot;

client/marketing/components/product-icon/icons/library/link.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const link = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M15.6 7.2H14v1.5h1.6c2 0 3.7 1.7 3.7 3.7s-1.7 3.7-3.7 3.7H14v1.5h1.6c2.8 0 5.2-2.3 5.2-5.2 0-2.9-2.3-5.2-5.2-5.2zM4.7 12.4c0-2 1.7-3.7 3.7-3.7H10V7.2H8.4c-2.9 0-5.2 2.3-5.2 5.2 0 2.9 2.3 5.2 5.2 5.2H10v-1.5H8.4c-2 0-3.7-1.7-3.7-3.7zm4.6.9h5.3v-1.5H9.3v1.5z" />
+	</SVG>
+);
+
+export default link;