My Jetpack: Add "new" badge to featured image video on Jetpack AI pro…

…duct page (#37197)

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

* changelog

projects/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' ] }>
 										{ __(

projects/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;
+}

projects/packages/my-jetpack/changelog/update-jetpack-ai-add-new-badge-to-featured-image-produc-page-video

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Jetpack AI: add new badge to Featured Image video on the product page.