SEO: migrate dashboard styles to CSS Modules

projects/packages/seo/_inc/components/dashboard-load-error.module.scss

@@ -0,0 +1,10 @@
+.root {
+	padding-block: 64px;
+	padding-inline: 24px;
+	text-align: center;
+}
+
+.body {
+	margin-block-end: var(--wpds-dimension-gap-sm);
+	color: var(--wpds-color-foreground-content-neutral-weak);
+}

projects/packages/seo/_inc/components/dashboard-load-error.tsx

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/ui';
-import './dashboard-load-error.scss';
+import { Button, Stack, Text } from '@wordpress/ui';
+import styles from './dashboard-load-error.module.scss';
 import type { FC } from 'react';
 
 interface Props {
@@ -18,15 +18,15 @@ interface Props {
  * @return The load-error state.
  */
 const DashboardLoadError: FC< Props > = ( { onRetry } ) => (
-	<div className="jetpack-seo-load-error">
-		<h2 className="jetpack-seo-load-error__title">
+	<Stack direction="column" align="center" justify="center" gap="sm" className={ styles.root }>
+		<Text variant="heading-xl" render={ <h2 /> }>
 			{ __( 'We couldn’t load this page', 'jetpack-seo' ) }
-		</h2>
-		<p className="jetpack-seo-load-error__body">
+		</Text>
+		<Text variant="body-md" render={ <p /> } className={ styles.body }>
 			{ __( 'This is usually temporary. Give it another try.', 'jetpack-seo' ) }
-		</p>
+		</Text>
 		<Button onClick={ onRetry }>{ __( 'Try again', 'jetpack-seo' ) }</Button>
-	</div>
+	</Stack>
 );
 
 export default DashboardLoadError;

projects/packages/seo/_inc/components/dashboard-skeleton.module.scss

@@ -0,0 +1,34 @@
+.line {
+	block-size: var(--wpds-dimension-size-3xs);
+	border-radius: var(--wpds-border-radius-md);
+	background: var(--wpds-color-background-track-neutral);
+	animation: dashboard-skeleton-pulse var(--wpds-motion-duration-xl) var(--wpds-motion-easing-balanced) infinite;
+}
+
+.title {
+	inline-size: 40%;
+	block-size: var(--wpds-dimension-size-2xs);
+}
+
+.short {
+	inline-size: 60%;
+}
+
+@keyframes dashboard-skeleton-pulse {
+
+	0%,
+	100% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.4;
+	}
+}
+
+@media ( prefers-reduced-motion: reduce ) {
+
+	.line {
+		animation: none;
+	}
+}

projects/packages/seo/_inc/components/dashboard-skeleton.tsx

@@ -1,5 +1,6 @@
 import { __ } from '@wordpress/i18n';
-import './dashboard-skeleton.scss';
+import { Card, Stack, VisuallyHidden } from '@wordpress/ui';
+import styles from './dashboard-skeleton.module.scss';
 import type { FC } from 'react';
 
 /**
@@ -11,16 +12,20 @@ import type { FC } from 'react';
  * @return The skeleton placeholder.
  */
 const DashboardSkeleton: FC = () => (
-	<div className="jetpack-seo-skeleton" role="status" aria-busy="true">
-		<span className="jetpack-seo-skeleton__label">{ __( 'Loading…', 'jetpack-seo' ) }</span>
+	<Stack direction="column" gap="lg" role="status" aria-busy="true">
+		<VisuallyHidden>{ __( 'Loading…', 'jetpack-seo' ) }</VisuallyHidden>
 		{ [ 0, 1, 2 ].map( index => (
-			<div key={ index } className="jetpack-seo-skeleton__card" aria-hidden="true">
-				<div className="jetpack-seo-skeleton__line jetpack-seo-skeleton__line--title" />
-				<div className="jetpack-seo-skeleton__line" />
-				<div className="jetpack-seo-skeleton__line jetpack-seo-skeleton__line--short" />
-			</div>
+			<Card.Root key={ index } aria-hidden="true">
+				<Card.Content>
+					<Stack direction="column" gap="md">
+						<div className={ `${ styles.line } ${ styles.title }` } />
+						<div className={ styles.line } />
+						<div className={ `${ styles.line } ${ styles.short }` } />
+					</Stack>
+				</Card.Content>
+			</Card.Root>
 		) ) }
-	</div>
+	</Stack>
 );
 
 export default DashboardSkeleton;

projects/packages/seo/_inc/components/enable-seo-card.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-no-bind */
 
 import { __ } from '@wordpress/i18n';
-import { Button, Card, Stack } from '@wordpress/ui';
+import { Button, Card, Stack, Text } from '@wordpress/ui';
 import useSeoToolsToggle from '../data/use-seo-tools-toggle';
 import type { FC } from 'react';
 
@@ -22,12 +22,12 @@ const EnableSeoCard: FC = () => {
 			</Card.Header>
 			<Card.Content>
 				<Stack direction="column" gap="md">
-					<p>
+					<Text variant="body-md" render={ <p /> }>
 						{ __(
 							'SEO tools help your content get found: customize titles and meta descriptions, generate a sitemap, verify your site with search engines, and control how pages look when shared. Turn it on to manage all of it from here.',
 							'jetpack-seo'
 						) }
-					</p>
+					</Text>
 					<div>
 						<Button
 							onClick={ () => setActive( true ) }

projects/packages/seo/_inc/dashboard/dashboard-page.tsx

@@ -1,5 +1,6 @@
 import { AdminPage, ThemeProvider } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
 import DashboardNav from './dashboard-nav';
 import '../admin-page-layout.scss';
 import type { SeoTab } from './dashboard-nav';
@@ -49,9 +50,9 @@ const DashboardPage = ( { active, showFooter = true, flush = false, children }:
 		>
 			<DashboardNav active={ active }>
 				<div
-					className={ `jetpack-seo-page-content${
-						flush ? ' jetpack-seo-page-content--flush' : ''
-					}` }
+					className={ clsx( 'jetpack-seo-page-content', {
+						'jetpack-seo-page-content--flush': flush,
+					} ) }
 				>
 					{ children }
 				</div>

projects/packages/seo/_inc/screens/ai/index.tsx

@@ -48,7 +48,7 @@ const AiScreen: FC< Props > = ( { form } ) => {
 	}
 
 	return (
-		<div className="jetpack-seo-ai">
+		<div>
 			<CollapsibleCard.Root defaultOpen>
 				<CollapsibleCard.Header>
 					<Card.Title>{ __( 'AI SEO Enhancer', 'jetpack-seo' ) }</Card.Title>

projects/packages/seo/_inc/screens/content/index.tsx

@@ -5,7 +5,7 @@ import { pencil } from '@wordpress/icons';
 import { useNavigate } from '@wordpress/route';
 import { Badge, IconButton, Link } from '@wordpress/ui';
 import useSeoPosts from '../../data/use-seo-posts';
-import './style.scss';
+import styles from './style.module.scss';
 import type { ContentRow } from '../../data/content-types';
 import type { Field, Operator, View } from '@wordpress/dataviews';
 import type { FC } from 'react';
@@ -253,7 +253,7 @@ const ContentScreen: FC = () => {
 	const getItemId = useCallback( ( item: ContentRow ) => String( item.id ), [] );
 
 	return (
-		<div className="jetpack-seo-content">
+		<div className={ styles.root }>
 			<DataViews
 				data={ data }
 				fields={ fields as Field< unknown >[] }

projects/packages/seo/_inc/screens/content/seo-inspector.tsx

@@ -9,9 +9,10 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 import { close } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
-import { Button, IconButton } from '@wordpress/ui';
+import { Button, IconButton, Stack, Text } from '@wordpress/ui';
 import { coverageStore } from '../../data/coverage-store';
 import SerpPreview from './serp-preview';
+import styles from './style.module.scss';
 import type { ContentPostType, SchemaType, SeoPostMeta } from '../../data/content-types';
 import type { FC } from 'react';
 
@@ -225,11 +226,16 @@ const SeoInspector: FC< Props > = ( { postId, postType, onClose } ) => {
 	const permalink = ( editedRecord as { link?: string } | undefined )?.link ?? '';
 
 	return (
-		<div className="jetpack-seo-content__inspector" aria-label={ __( 'Edit SEO', 'jetpack-seo' ) }>
-			<div className="jetpack-seo-content__inspector-header">
-				<h2 className="jetpack-seo-content__inspector-title">
+		<Stack
+			direction="column"
+			gap="lg"
+			className={ styles.inspector }
+			aria-label={ __( 'Edit SEO', 'jetpack-seo' ) }
+		>
+			<Stack direction="row" align="center" justify="space-between" gap="sm">
+				<Text variant="heading-lg" render={ <h2 /> }>
 					{ __( 'Edit SEO', 'jetpack-seo' ) }
-				</h2>
+				</Text>
 				<IconButton
 					icon={ close }
 					label={ __( 'Close', 'jetpack-seo' ) }
@@ -239,8 +245,8 @@ const SeoInspector: FC< Props > = ( { postId, postType, onClose } ) => {
 					variant="minimal"
 					tone="neutral"
 				/>
-			</div>
-			<div className="jetpack-seo-content__inspector-body">
+			</Stack>
+			<Stack direction="column" gap="lg">
 				<TextControl
 					label={ __( 'SEO title', 'jetpack-seo' ) }
 					help={ __(
@@ -288,8 +294,8 @@ const SeoInspector: FC< Props > = ( { postId, postType, onClose } ) => {
 					customTitle={ local.jetpack_seo_html_title }
 					description={ local.advanced_seo_description }
 				/>
-			</div>
-			<div className="jetpack-seo-content__inspector-actions">
+			</Stack>
+			<Stack direction="row" justify="flex-end" gap="sm">
 				<Button variant="minimal" tone="neutral" onClick={ onClose } disabled={ isSaving }>
 					{ __( 'Cancel', 'jetpack-seo' ) }
 				</Button>
@@ -304,8 +310,8 @@ const SeoInspector: FC< Props > = ( { postId, postType, onClose } ) => {
 				>
 					{ __( 'Save', 'jetpack-seo' ) }
 				</Button>
-			</div>
-		</div>
+			</Stack>
+		</Stack>
 	);
 };
 

projects/packages/seo/_inc/screens/content/serp-preview.tsx

@@ -1,4 +1,6 @@
 import { __ } from '@wordpress/i18n';
+import { Stack, Text } from '@wordpress/ui';
+import styles from './style.module.scss';
 import type { FC } from 'react';
 
 interface Props {
@@ -46,20 +48,22 @@ const SerpPreview: FC< Props > = ( { link, postTitle, customTitle, description }
 	const title = customTitle || postTitle;
 
 	return (
-		<div className="jetpack-seo-serp-preview">
-			<div className="jetpack-seo-serp-preview__label">
+		<Stack direction="column" gap="sm" className={ styles.preview }>
+			<Text variant="heading-sm" className={ styles.muted }>
 				{ __( 'Search engine preview', 'jetpack-seo' ) }
-			</div>
-			<div className="jetpack-seo-serp-preview__snippet">
-				<div className="jetpack-seo-serp-preview__url">{ toBreadcrumb( link ) }</div>
-				<div className="jetpack-seo-serp-preview__title">
-					{ title || __( '(no title)', 'jetpack-seo' ) }
-				</div>
+			</Text>
+			<Stack direction="column" gap="xs">
+				<Text variant="body-sm" className={ styles.muted }>
+					{ toBreadcrumb( link ) }
+				</Text>
+				<div className={ styles.title }>{ title || __( '(no title)', 'jetpack-seo' ) }</div>
 				{ description && (
-					<div className="jetpack-seo-serp-preview__description">{ description }</div>
+					<Text variant="body-md" className={ styles.muted }>
+						{ description }
+					</Text>
 				) }
-			</div>
-		</div>
+			</Stack>
+		</Stack>
 	);
 };