From 1ae4d2fbbfeb95e5d3635be7e4bf81f96066f74c Mon Sep 17 00:00:00 2001
From: Boro Sitnikovski <buritomath@gmail.com>
Date: Wed, 11 Sep 2024 17:28:43 +0200
Subject: [PATCH] Apply correct colors to the tabs, as per design

---
 .../client/marketplace/components/tabs/tabs.scss     | 12 ++++++++++--
 .../client/marketplace/components/tabs/tabs.tsx      |  8 +++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.scss b/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.scss
index 354a1797917..3a8e7c152e6 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.scss
+++ b/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.scss
@@ -46,8 +46,16 @@
 		z-index: 26;
 	}
 
-	&__update-count {
-		background-color: #000;
+	&__update-count-extensions,
+	&__update-count-themes,
+	&__update-count-business-services {
+		background-color: $gutenberg-gray-300;
+		color: $gutenberg-gray-700;
+
+		&.is-active {
+			background-color: #000;
+			color: #fff;
+		}
 	}
 }
 
diff --git a/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx b/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx
index 1a4c151e380..91809d2b30b 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx
@@ -108,7 +108,13 @@ const renderTabs = (
 					{ tabs[ tabKey ]?.title }
 					{ tabs[ tabKey ]?.showUpdateCount && (
 						<span
-							className={ `woocommerce-marketplace__update-count woocommerce-marketplace__update-count-${ tabKey }` }
+							className={ clsx(
+								'woocommerce-marketplace__update-count',
+								`woocommerce-marketplace__update-count-${ tabKey }`,
+								{
+									'is-active': tabKey === selectedTab,
+								}
+							) }
 						>
 							<span> { tabs[ tabKey ]?.updateCount } </span>
 						</span>