Changed notice classnames to use __{$variant} pattern as well. Rest…

…ored 40px bottom margin to notices on viewports 600px and above.
woocommerce · Feb 20, 2024 · 257221c · 257221c
1 parent dee47c8
commit 257221c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/plugins/woocommerce-admin/client/marketplace/components/notice/notice.scss b/plugins/woocommerce-admin/client/marketplace/components/notice/notice.scss
@@ -12,23 +12,23 @@
 		padding: 12px;
 		transition: opacity 1s ease-out;
 
-		&-info {
+		&--info {
 			border-left: 4px solid var(--wp-admin-theme-color, #007cba);
 		}
 
-		&-error {
+		&--error {
 			border-left: 4px solid $alert-red;
 		}
 
-		&-warning {
+		&--warning {
 			border-left: 4px solid $alert-yellow;
 		}
 
-		&-success {
+		&--success {
 			border-left: 4px solid $valid-green;
 		}
 
-		&-icon {
+		&--icon {
 			align-self: flex-start;
 
 			&--info {
@@ -85,3 +85,9 @@
 		}
 	}
 }
+
+@media only screen and (min-width: 600px) {
+	.woocommerce-marketplace__notice {
+		margin-bottom: 40px;
+	}
+}
diff --git a/plugins/woocommerce-admin/client/marketplace/components/notice/notice.tsx b/plugins/woocommerce-admin/client/marketplace/components/notice/notice.tsx
@@ -51,7 +51,7 @@ export default function Notice( props: NoticeProps ): JSX.Element | null {
 
 	const classes = classNames(
 		'woocommerce-marketplace__notice',
-		`woocommerce-marketplace__notice-${ variant }`,
+		`woocommerce-marketplace__notice--${ variant }`,
 		{
 			'is-dismissible': isDismissible,
 		}