Fix: use custom compatibility notice style (#5147)

woocommerce · Nov 22, 2021 · e8c4fa1 · e8c4fa1
1 parent 0ca14ab
commit e8c4fa1
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git a/assets/js/editor-components/compatibility-notices/cart-checkout-compatibility-notice.tsx b/assets/js/editor-components/compatibility-notices/cart-checkout-compatibility-notice.tsx
@@ -28,7 +28,7 @@ export function CartCheckoutCompatibilityNotice( {
 
 	return (
 		<Guide
-			className="edit-post-welcome-guide"
+			className="wc-block-welcome-guide"
 			contentLabel={ __(
 				'Compatibility notice',
 				'woo-gutenberg-products-block'
@@ -40,13 +40,13 @@ export function CartCheckoutCompatibilityNotice( {
 					image: <WooImage />,
 					content: (
 						<>
-							<h1 className="edit-post-welcome-guide__heading">
+							<h1 className="wc-block-welcome-guide__heading">
 								{ __(
 									'Compatibility notice',
 									'woo-gutenberg-products-block'
 								) }
 							</h1>
-							<p className="edit-post-welcome-guide__text">
+							<p className="wc-block-welcome-guide__text">
 								{ createInterpolateElement(
 									__(
 										'This block may not be compatible with <em>all</em> checkout extensions and integrations.',
@@ -57,7 +57,7 @@ export function CartCheckoutCompatibilityNotice( {
 									}
 								) }
 							</p>
-							<p className="edit-post-welcome-guide__text">
+							<p className="wc-block-welcome-guide__text">
 								{ createInterpolateElement(
 									__(
 										'We recommend reviewing our <a>expanding list</a> of compatible extensions prior to using this block on a live store.',

diff --git a/assets/js/editor-components/compatibility-notices/style.scss b/assets/js/editor-components/compatibility-notices/style.scss
@@ -0,0 +1,31 @@
+.wc-block-welcome-guide {
+	width: 312px;
+
+	&.components-modal__frame.components-guide {
+		height: auto;
+	}
+
+	&__image {
+		background: #00a0d2;
+		margin: 0 0 $gap;
+	}
+
+	&__heading {
+		font-size: 24px;
+		line-height: 1.4;
+		margin: $gap 0;
+		padding: 0 $gap-large;
+	}
+
+	&__text {
+		font-size: 13px;
+		line-height: 1.4;
+		margin: 0 0 $gap-large;
+		padding: 0 $gap-large;
+	}
+
+	&__inserter-icon {
+		margin: 0 4px;
+		vertical-align: text-top;
+	}
+}
diff --git a/assets/js/editor-components/compatibility-notices/woo-image.js b/assets/js/editor-components/compatibility-notices/woo-image.js
@@ -1,6 +1,6 @@
 const WooImage = ( props ) => (
 	<div
-		className="edit-post-welcome-guide__image edit-post-welcome-guide__image__prm-np"
+		className="wc-block-welcome-guide__image"
 		style={ {
 			display: 'flex',
 			justifyContent: 'center',