AI Featured Image: update designs to follow i3 guidance (#36868)

* Move carousel navigation to above the images * Update margin on top to match designs * Change usage counter to show cost and request balance * changelog * Update button gaps * Add image cost tooltip to the generate new image button * Update generate new image button copy to match designs
Automattic · Apr 12, 2024 · 750bb6a · 750bb6a
1 parent 115b3d0
commit 750bb6a
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 58 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-ai-featured-image-update-designs-to-i3 b/projects/plugins/jetpack/changelog/update-ai-featured-image-update-designs-to-i3
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+AI Featured Image: incorporate i3  updates on style and UI
diff --git a/...s/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/carrousel.scss b/...s/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/carrousel.scss
@@ -85,7 +85,7 @@
 
 		&-counter {
 			display: flex;
-			justify-content: flex-start;
+			justify-content: flex-end;
 			align-items: center;
 			font-size: 13px;
 			padding: 8px 0;

diff --git a/...ns/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/carrousel.tsx b/...ns/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/carrousel.tsx
@@ -80,6 +80,11 @@ export default function Carrousel( {
 
 	return (
 		<div className="ai-assistant-featured-image__carrousel">
+			<div className="ai-assistant-featured-image__carrousel-counter">
+				{ prevButton }
+				{ current + 1 } / { images.length }
+				{ nextButton }
+			</div>
 			<div className="ai-assistant-featured-image__carrousel-images">
 				{ images.length > 1 && prevButton }
 				{ images.map( ( { image, generating, error }, index ) => (
@@ -128,11 +133,6 @@ export default function Carrousel( {
 				) ) }
 				{ images.length > 1 && nextButton }
 			</div>
-			<div className="ai-assistant-featured-image__carrousel-counter">
-				{ images.length > 1 && prevButton }
-				{ current + 1 } / { images.length }
-				{ images.length > 1 && nextButton }
-			</div>
 		</div>
 	);
 }
diff --git a/...lugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/index.tsx b/...lugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/index.tsx
@@ -3,7 +3,7 @@
  */
 import { useImageGenerator } from '@automattic/jetpack-ai-client';
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
-import { Button } from '@wordpress/components';
+import { Button, Tooltip } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback, useRef, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
@@ -232,6 +232,11 @@ export default function FeaturedImage( { busy, disabled }: { busy: boolean; disa
 	] );
 
 	const modalTitle = __( 'Generate a featured image with AI', 'jetpack' );
+	const costTooltipText = sprintf(
+		// Translators: %d is the cost of generating one image.
+		__( '%d requests per image', 'jetpack' ),
+		featuredImageCost
+	);
 
 	return (
 		<div>
@@ -288,14 +293,16 @@ export default function FeaturedImage( { busy, disabled }: { busy: boolean; disa
 											{ __( 'Try again', 'jetpack' ) }
 										</Button>
 									) : (
-										<Button
-											onClick={ handleRegenerate }
-											variant="secondary"
-											isBusy={ currentPointer?.generating }
-											disabled={ notEnoughRequests || currentPointer?.generating }
-										>
-											{ __( 'Generate new image', 'jetpack' ) }
-										</Button>
+										<Tooltip text={ costTooltipText } placement="bottom">
+											<Button
+												onClick={ handleRegenerate }
+												variant="secondary"
+												isBusy={ currentPointer?.generating }
+												disabled={ notEnoughRequests || currentPointer?.generating }
+											>
+												{ __( 'Generate again', 'jetpack' ) }
+											</Button>
+										</Tooltip>
 									) }
 									<Button
 										onClick={ handleAccept }

diff --git a/...ugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/style.scss b/...ugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/style.scss
@@ -1,7 +1,7 @@
 .ai-assistant-featured-image {
 	&__content {
 		display: flex;
-		margin-top: 32px;
+		margin-top: 16px;
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
@@ -29,7 +29,7 @@
 	&__action-buttons {
 		display: flex;
 		justify-content: center;
-		gap: 8px;
+		gap: 12px;
 	}
 
 	&__image-canvas {

diff --git a/...tpack/extensions/plugins/ai-assistant-plugin/components/featured-image/usage-counter.scss b/...tpack/extensions/plugins/ai-assistant-plugin/components/featured-image/usage-counter.scss
@@ -3,17 +3,5 @@
 .ai-assistant-featured-image__usage-counter {
 	color: var(--studio-gray-50, #646970);
 	font-size: 1em;
-	line-height: 36px;
 	display: flex;
-
-	& .usage-counter__icon {
-		height: 20px;
-		width: 20px;
-        outline: none;
-		margin: 8px 0;
-
-		path {
-			fill: var(--studio-gray-20, #a7aaad);
-		}
-	}
 }
diff --git a/...etpack/extensions/plugins/ai-assistant-plugin/components/featured-image/usage-counter.tsx b/...etpack/extensions/plugins/ai-assistant-plugin/components/featured-image/usage-counter.tsx
@@ -1,9 +1,7 @@
 /**
  * External dependencies
  */
-import { Tooltip } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { Icon, info } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
@@ -17,39 +15,20 @@ type UsageCounterProps = {
 
 export default function UsageCounter( { currentLimit, currentUsage, cost }: UsageCounterProps ) {
 	const requestsBalance = currentLimit - currentUsage;
-	const notEnoughRequests = requestsBalance < cost;
 
-	const requestsCountLabel = sprintf(
-		// Translators: %1$d is the number of requests used, %d is the limit of requests.
-		__( 'Usage: %1$d / %2$d requests', 'jetpack' ),
-		currentUsage,
-		currentLimit
-	);
-
-	const pricingLabel = sprintf(
-		// Translators: %d is the cost of generating a featured image.
-		__( '%d requests per image', 'jetpack' ),
-		cost
-	);
+	const requestsBalanceLabel = __( 'Requests needed / available:', 'jetpack' );
 
-	const pricingLabelNotEnoughRequests = sprintf(
-		// Translators: %d is the cost of generating a featured image.
-		__(
-			"%d requests per image. You don't have enough requests to generate another image",
-			'jetpack'
-		),
-		cost
+	const requestsBalanceValues = sprintf(
+		// Translators: %1$d is the cost of one image, %2$d is the current requests balance.
+		__( '%1$d / %2$d', 'jetpack' ),
+		cost,
+		requestsBalance
 	);
 
 	return (
 		<div className="ai-assistant-featured-image__usage-counter">
-			{ requestsCountLabel }
-			<Tooltip
-				text={ notEnoughRequests ? pricingLabelNotEnoughRequests : pricingLabel }
-				placement="bottom"
-			>
-				<Icon className="usage-counter__icon" icon={ info } />
-			</Tooltip>
+			{ requestsBalanceLabel } <br />
+			{ requestsBalanceValues }
 		</div>
 	);
 }