Move migration status styles to component (#97424)

The previous place was only applying the style on the site list and not on the overview list
Automattic · Dec 16, 2024 · 6790217 · 6790217
1 parent 602bf8d
commit 6790217
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/client/sites/components/sites-dataviews/sites-site-status.tsx b/client/sites/components/sites-dataviews/sites-site-status.tsx
@@ -31,6 +31,17 @@ const DeletedStatus = styled.div`
 	}
 `;
 
+const MigrationPendingStatus = styled.span`
+	display: inline-block;
+	padding: 0px 10px;
+	font-size: 12px;
+	border-radius: 4px;
+	background-color: var( --color-warning-20 );
+	line-height: 20px;
+	font-weight: 500;
+	color: var( --color-warning-80 );
+`;
+
 interface SiteStatusProps {
 	site: SiteExcerptData;
 }
@@ -51,7 +62,7 @@ export const SiteStatus = ( { site }: SiteStatusProps ) => {
 	}
 
 	const statusElement = isPending ? (
-		<span className="sites-dataviews__migration-pending-status">{ translatedStatus }</span>
+		<MigrationPendingStatus>{ translatedStatus }</MigrationPendingStatus>
 	) : (
 		translatedStatus
 	);

diff --git a/client/sites/components/sites-dataviews/style.scss b/client/sites/components/sites-dataviews/style.scss
@@ -97,15 +97,6 @@
 		gap: 6px;
 	}
 
-	.sites-dataviews__migration-pending-status {
-		display: inline-block;
-		padding: 0 10px;
-		font-size: rem(12px);
-		border-radius: 4px;
-		background-color: var(--color-warning-20);
-		line-height: 20px;
-		color: var(--color-warning-80);
-	}
 
 	.stats-sparkline {
 		padding-top: 0;
@@ -130,4 +121,4 @@
 			border-radius: 4px;
 		}
 	}
-}
+}