Merge branch '21429-update-copy-in-the-introduction-and-consent-modal…

…s' of github.com:Yoast/wordpress-seo into 21429-update-copy-in-the-introduction-and-consent-modals
Yoast · Jun 19, 2024 · 7aabf51 · 7aabf51
2 parents 7852365 + 098bc7f
commit 7aabf51
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 19 deletions.
diff --git a/packages/components/src/AIFixesButton.js b/packages/components/src/AIFixesButton.js
@@ -7,23 +7,23 @@ const yoastPrimary100 = "#F3E5ED";
 const yoastPrimary300 = "#CD82AB";
 const yoastPrimary400 = "#B94986";
 const yoastPrimary500 = "#A61E69";
-const blue50 = "#EFF6FF";
-const blue100 = "#DBEAFE";
-const blue300 = "#93C5FD";
-const blue500 = "#3B82F6";
+const yoastIndigo50 = "#EEF2FF";
+const yoastIndigo100 = "#E0E7FF";
+const yoastIndigo300 = "#A5B4FC";
+const yoastIndigo500 = "#6366F1";
 
 const direction = "to bottom right";
 
 const gradientEffect = {
-	defaultStateBackground: `linear-gradient(${direction}, ${yoastPrimary50}, ${blue50})`,
-	defaultStateBorder: `linear-gradient(${direction}, ${yoastPrimary300}, ${blue300}) 1`,
-	hoverStateBackground: `linear-gradient(${direction}, ${yoastPrimary100}, ${blue100})`,
-	pressedStateBackground: `linear-gradient(${direction}, ${yoastPrimary500}, ${blue500})`,
+	defaultStateBackground: `linear-gradient(${direction}, ${yoastPrimary50}, ${yoastIndigo50})`,
+	defaultStateBorder: `linear-gradient(${direction}, ${yoastPrimary300}, ${yoastIndigo300}) 1`,
+	hoverStateBackground: `linear-gradient(${direction}, ${yoastPrimary100}, ${yoastIndigo100})`,
+	pressedStateBackground: `linear-gradient(${direction}, ${yoastPrimary500}, ${yoastIndigo500})`,
 };
 
 const AIFixesButtonBase = styled( IconButtonBase )`
 	overflow: hidden;
-	border: ${ props => props.pressed ? "none" : "1px solid #A5B4FC" }; /*indigo-300*/
+	border: ${ props => props.pressed ? "none" : `1px solid ${yoastIndigo300}` }; /*indigo-300*/
 	background-image: ${ props => props.pressed
 		? gradientEffect.pressedStateBackground
 		: gradientEffect.defaultStateBackground } !important;

diff --git a/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap b/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap
@@ -35,12 +35,12 @@ exports[`the pressed IconAIFixesButton matches the snapshot 1`] = `
 .c1 {
   overflow: hidden;
   border: none;
-  background-image: linear-gradient(to bottom right,#A61E69,#3B82F6) !important;
+  background-image: linear-gradient(to bottom right,#A61E69,#6366F1) !important;
   box-shadow: inset 0 -2px 0 #B94986;
 }
 
 .c1:hover {
-  background-image: linear-gradient(to bottom right,#A61E69,#3B82F6) !important;
+  background-image: linear-gradient(to bottom right,#A61E69,#6366F1) !important;
 }
 
 <button
@@ -91,12 +91,12 @@ exports[`the unpressed IconAIFixesButton matches the snapshot 1`] = `
 .c1 {
   overflow: hidden;
   border: 1px solid #A5B4FC;
-  background-image: linear-gradient(to bottom right,#FAF3F7,#EFF6FF) !important;
+  background-image: linear-gradient(to bottom right,#FAF3F7,#EEF2FF) !important;
   box-shadow: 0 1px 0 rgba( 204,204,204,0.7 );
 }
 
 .c1:hover {
-  background-image: linear-gradient(to bottom right,#F3E5ED,#DBEAFE) !important;
+  background-image: linear-gradient(to bottom right,#F3E5ED,#E0E7FF) !important;
 }
 
 <button

diff --git a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js
@@ -11,7 +11,8 @@ export const SparklesIcon = ( { pressed = false } ) => {
 			<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 				<path
 					d="M3.33284 2V4.66667M1.99951 3.33333H4.66618M3.99951 11.3333V14M2.66618 12.6667H5.33284M8.66618 2L10.19 6.57143L13.9995 8L10.19 9.42857L8.66618 14L7.14237 9.42857L3.33284 8L7.14237 6.57143L8.66618 2Z"
-					stroke={ pressed ? "white" : "url(#paint0_linear_1208_188)" } strokeWidth="1.33333" strokeLinecap="round"
+					stroke={ pressed ? "white" : "url(#paint0_linear_1208_188)" } strokeWidth="1.33333"
+					strokeLinecap="round"
 					strokeLinejoin="round"
 				/>
 				<defs>
@@ -20,7 +21,7 @@ export const SparklesIcon = ( { pressed = false } ) => {
 						gradientUnits="userSpaceOnUse"
 					>
 						<stop stopColor="#A61E69" />
-						<stop offset="1" stopColor="#3B82F6" />
+						<stop offset="1" stopColor="#6366F1" />
 					</linearGradient>
 				</defs>
 			</svg>

diff --git a/packages/js/src/shared-admin/components/ai-fix-assessments-upsell.js b/packages/js/src/shared-admin/components/ai-fix-assessments-upsell.js
@@ -43,7 +43,7 @@ export const AiFixAssessmentsUpsell = ( {
 						wistiaEmbedPermission={ wistiaEmbedPermission }
 					/>
 					<Badge className="yst-absolute yst-right-0 yst-mr-4 yst-text-center yst-justify-center" variant="info" style={ { top: "-8px" } }>
-						{ __( "Trial", "wordpress-seo-premium" ) }
+						{ __( "Beta", "wordpress-seo-premium" ) }
 					</Badge>
 				</div>
 				<div className="yst-mt-6 yst-text-xs yst-font-medium yst-flex yst-flex-col yst-items-center">
@@ -56,7 +56,13 @@ export const AiFixAssessmentsUpsell = ( {
 			<div className="yst-px-10 yst-pb-10 yst-flex yst-flex-col yst-items-center">
 				<div className="yst-mt-4 yst-mx-1.5 yst-text-center">
 					<h3 className="yst-text-slate-900 yst-text-lg yst-font-medium">
-						{ __( "Optimize your SEO content with Yoast AI", "wordpress-seo" ) }
+						{ 
+						/* translators: %s: Yoast AI */
+						sprintf(
+							__( "Optimize your SEO content with %s", "wordpress-seo" ),
+							"Yoast AI"
+						)
+						}
 					</h3>
 					<div className="yst-mt-2 yst-text-slate-600 yst-text-sm">
 						{ createInterpolateElement(

diff --git a/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap b/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap
@@ -30,7 +30,7 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is f
         />
         <stop
           offset="1"
-          stop-color="#3B82F6"
+          stop-color="#6366F1"
         />
       </lineargradient>
     </defs>
@@ -68,7 +68,7 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is t
         />
         <stop
           offset="1"
-          stop-color="#3B82F6"
+          stop-color="#6366F1"
         />
       </lineargradient>
     </defs>