Add 'new' badge to featured image video on Jetpack AI product page

Automattic · May 2, 2024 · 3c879e0 · 3c879e0
1 parent 0a8a39f
commit 3c879e0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/...ects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx b/...ects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx
@@ -148,6 +148,12 @@ export default function () {
 		setShowNotice( showRenewalNotice || showUpgradeNotice );
 	}, [ showRenewalNotice, showUpgradeNotice ] );
 
+	const newBadge = (
+		<span className={ styles[ 'product-interstitial__new-badge' ] }>
+			{ __( 'New', 'jetpack-my-jetpack' ) }{ ' ' }
+		</span>
+	);
+
 	return (
 		<AdminPage showHeader={ false } showBackground={ true }>
 			<Container fluid horizontalSpacing={ 3 } horizontalGap={ 2 }>
@@ -312,6 +318,7 @@ export default function () {
 								<div className={ styles[ 'product-interstitial__usage-videos-content' ] }>
 									<div className={ styles[ 'product-interstitial__usage-videos-heading' ] }>
 										{ videoTitleFeaturedImages }
+										{ newBadge }
 									</div>
 									<div className={ styles[ 'product-interstitial__usage-videos-text' ] }>
 										{ __(

diff --git a/...cts/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/style.module.scss b/...cts/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/style.module.scss
@@ -247,3 +247,17 @@
 .product-interstitial__ai-notice {
 	margin-bottom: calc( var( --spacing-base ) * 8 );
 }
+
+.product-interstitial__new-badge {
+	color: var( --jp-green-40 );
+	border: 1px solid var( --jp-green-40 );
+	border-radius: 4px;
+	text-transform: uppercase;
+	padding: 2px 8px 2px 8px;
+	font-size: 12px;
+	font-weight: 500;
+	margin-left: 5px;
+	height: 22px;
+	position: relative;
+	top: -2px;
+}