From 19bea3832e4d990e7ab94cfe9f1c8dbfbb9ccd45 Mon Sep 17 00:00:00 2001
From: Kathy <507025+helgatheviking@users.noreply.github.com>
Date: Fri, 10 Jun 2022 03:37:06 -0600
Subject: [PATCH] First pass: Twenty Twenty One notice styles. Closes #29560.
 (#33379)

---
 .../fix-29560-twentytwentyone-notices         |  4 +
 .../legacy/css/twenty-twenty-one.scss         | 75 ++++++-------------
 2 files changed, 26 insertions(+), 53 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/fix-29560-twentytwentyone-notices

diff --git a/plugins/woocommerce/changelog/fix-29560-twentytwentyone-notices b/plugins/woocommerce/changelog/fix-29560-twentytwentyone-notices
new file mode 100644
index 00000000000..f2c7ee77788
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-29560-twentytwentyone-notices
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Improve Twenty Twenty One notice styles
diff --git a/plugins/woocommerce/legacy/css/twenty-twenty-one.scss b/plugins/woocommerce/legacy/css/twenty-twenty-one.scss
index a59a9de2d01..4972c415632 100644
--- a/plugins/woocommerce/legacy/css/twenty-twenty-one.scss
+++ b/plugins/woocommerce/legacy/css/twenty-twenty-one.scss
@@ -213,30 +213,16 @@ a.button {
 .woocommerce-message,
 .woocommerce-error,
 .woocommerce-info {
+	color: #000;
+	border-top: 3px solid $highlights-color;
 	margin-bottom: 2rem;
+	padding: 0;
 	margin-left: 0;
-	background: var(--global--color-background);
+	background: #eee;
 	font-size: 0.88889em;
 	font-family: $headings;
 	list-style: none;
 	overflow: hidden;
-}
-
-.woocommerce-message,
-.woocommerce-error li,
-.woocommerce-info {
-	padding: 1.5rem 3rem;
-	justify-content: space-between;
-	align-items: center;
-
-	.button {
-		order: 2;
-	}
-}
-
-.woocommerce-error {
-	color: #fff;
-	background: #b22222;
 
 	a {
 		color: #fff;
@@ -247,39 +233,34 @@ a.button {
 
 		&.button {
 			background: #111;
+			color: #fff;
 		}
 	}
 
-	> li {
-		margin: 0;
-	}
-}
-
-#main {
-
-	.woocommerce-error,
-	.woocommerce-info {
-		font-family: $headings;
-	}
 }
 
 .woocommerce-message,
+.woocommerce-error li,
 .woocommerce-info {
-	background: #eee;
-	color: #000;
-	border-top: 2px solid $highlights-color;
+	padding: 1.5rem 3rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 
-	a {
-		color: #444;
+	.button {
+		order: 2;
+	}
+}
 
-		&:hover {
-			color: #000;
-		}
+.woocommerce-info {
+	border-top-color: var( --wc-blue );
+}
 
-		&.button {
-			background: $highlights-color;
-			color: #f5efe0;
-		}
+.woocommerce-error {
+	border-top-color: #b22222;
+
+	> li {
+		margin: 0;
 	}
 }
 
@@ -619,10 +600,6 @@ dl.variation,
 		}
 	}
 
-	.woocommerce-message {
-		flex-direction: row-reverse;
-	}
-
 	.woocommerce-Tabs-panel--additional_information,
 	.woocommerce-Tabs-panel--reviews {
 
@@ -2938,14 +2915,6 @@ a.reset_variations {
 
 .woocommerce {
 
-	.woocommerce-notices-wrapper {
-
-		& > * {
-			padding: 15px;
-			list-style: none;
-		}
-	}
-
 	.return-to-shop,
 	.wc-proceed-to-checkout {