Sites: Fix Jetpack logo misalignment in the DataViews Properties list (…

…#94772) * Fix JP logo misalignment in the DataViews Properties list. * Widen the gap.
Automattic · Sep 20, 2024 · e3468f8 · e3468f8
1 parent 38b40f4
commit e3468f8
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/client/components/dataviews/style.scss b/client/components/dataviews/style.scss
@@ -116,13 +116,6 @@
 			text-transform: uppercase;
 		}
 
-		svg {
-			&:not(:last-child) {
-				margin-right: 4px;
-				vertical-align: middle;
-			}
-		}
-
 		.dataviews-view-table-header-button {
 			color: inherit;
 		}

diff --git a/client/hosting/sites/components/sites-dataviews/index.tsx b/client/hosting/sites/components/sites-dataviews/index.tsx
@@ -161,10 +161,10 @@ const DotcomSitesDataViews = ( {
 				id: 'stats',
 				// @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements.
 				label: (
-					<>
+					<span className="sites-dataviews__stats-label">
 						<JetpackLogo size={ 16 } />
 						<span>{ __( 'Stats' ) }</span>
-					</>
+					</span>
 				),
 				render: ( { item }: { item: SiteExcerptData } ) => <SiteStats site={ item } />,
 				enableHiding: false,

diff --git a/client/hosting/sites/components/sites-dataviews/style.scss b/client/hosting/sites/components/sites-dataviews/style.scss
@@ -134,3 +134,10 @@
 .sites-overview__content .dataviews-wrapper .dataviews-filters__view-actions .components-h-stack button:nth-of-type(3) {
 	display: none;
 }
+
+// Style the Stats label that includes the Jetpack logo
+.sites-dataviews__stats-label {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}