From 199675d6c77e4e41b73a0aaa83713fa2e918ae02 Mon Sep 17 00:00:00 2001
From: Joe McGill <joe.mcgill@10up.com>
Date: Mon, 21 Oct 2024 18:33:49 -0500
Subject: [PATCH 1/3] Fix notice styling

---
 .../index.js}                                       |  4 +++-
 .../create-campaign-notice/index.scss               | 13 +++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)
 rename js/src/product-feed/product-statistics/{create-campaign-notice.js => create-campaign-notice/index.js} (91%)
 create mode 100644 js/src/product-feed/product-statistics/create-campaign-notice/index.scss

diff --git a/js/src/product-feed/product-statistics/create-campaign-notice.js b/js/src/product-feed/product-statistics/create-campaign-notice/index.js
similarity index 91%
rename from js/src/product-feed/product-statistics/create-campaign-notice.js
rename to js/src/product-feed/product-statistics/create-campaign-notice/index.js
index 64345c06f7..ec0ca21663 100644
--- a/js/src/product-feed/product-statistics/create-campaign-notice.js
+++ b/js/src/product-feed/product-statistics/create-campaign-notice/index.js
@@ -10,6 +10,7 @@ import { Notice } from '@wordpress/components';
 import AddPaidCampaignButton from '.~/components/paid-ads/add-paid-campaign-button';
 import useMCProductStatistics from '.~/hooks/useMCProductStatistics';
 import useAdsCampaigns from '.~/hooks/useAdsCampaigns';
+import './index.scss';
 
 const CreateCampaignNotice = () => {
 	const { hasFinishedResolution, data: products } = useMCProductStatistics();
@@ -29,7 +30,7 @@ const CreateCampaignNotice = () => {
 	}
 
 	return (
-		<Notice isDismissible={ false }>
+		<Notice isDismissible={ false } className="gla-ads-inline-notice">
 			<section>
 				<p>
 					{ __(
@@ -38,6 +39,7 @@ const CreateCampaignNotice = () => {
 					) }
 				</p>
 				<AddPaidCampaignButton
+					isSmall={ false }
 					eventProps={ {
 						context: 'product-feed-overview-promotion',
 					} }
diff --git a/js/src/product-feed/product-statistics/create-campaign-notice/index.scss b/js/src/product-feed/product-statistics/create-campaign-notice/index.scss
new file mode 100644
index 0000000000..cc658ae06b
--- /dev/null
+++ b/js/src/product-feed/product-statistics/create-campaign-notice/index.scss
@@ -0,0 +1,13 @@
+.gla-ads-inline-notice{
+	margin: $grid-unit-20;
+	border-left: none;
+	padding: .75rem 1rem;
+
+	&.is-info {
+		background-color: #f0f6fc;
+	}
+
+	.components-notice__content p:first-child {
+		margin-top: 2px;
+	}
+}

From 71a823c6235be65afef3812cb10d9a9dbb85ca23 Mon Sep 17 00:00:00 2001
From: Joe McGill <joe.mcgill@10up.com>
Date: Mon, 21 Oct 2024 18:48:02 -0500
Subject: [PATCH 2/3] Fix CSS lint issues

---
 .../product-statistics/create-campaign-notice/index.scss      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/src/product-feed/product-statistics/create-campaign-notice/index.scss b/js/src/product-feed/product-statistics/create-campaign-notice/index.scss
index cc658ae06b..e96e3b4585 100644
--- a/js/src/product-feed/product-statistics/create-campaign-notice/index.scss
+++ b/js/src/product-feed/product-statistics/create-campaign-notice/index.scss
@@ -1,7 +1,7 @@
-.gla-ads-inline-notice{
+.gla-ads-inline-notice {
 	margin: $grid-unit-20;
 	border-left: none;
-	padding: .75rem 1rem;
+	padding: 0.75rem 1rem;
 
 	&.is-info {
 		background-color: #f0f6fc;

From 80016a257809565976253596774e98a5e7e3906d Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Tue, 22 Oct 2024 12:14:05 +0400
Subject: [PATCH 3/3] Review styles.

---
 .../product-statistics/create-campaign-notice/index.scss      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/src/product-feed/product-statistics/create-campaign-notice/index.scss b/js/src/product-feed/product-statistics/create-campaign-notice/index.scss
index e96e3b4585..db63c2e539 100644
--- a/js/src/product-feed/product-statistics/create-campaign-notice/index.scss
+++ b/js/src/product-feed/product-statistics/create-campaign-notice/index.scss
@@ -7,7 +7,7 @@
 		background-color: #f0f6fc;
 	}
 
-	.components-notice__content p:first-child {
-		margin-top: 2px;
+	.components-notice__content p {
+		margin-top: 0;
 	}
 }