Updates the styling of the AI buttons

packages/analysis-report/tests/__snapshots__/SiteSEOReportTest.js.snap

@@ -10,78 +10,78 @@ exports[`The SiteSEOReport testing suite The SiteSEOReport should match the snap
     Test assessment
   </p>
   <div
-    className="kThJwP progress"
+    className="bjXoTs progress"
   >
     <span
-      className="fIIVYx progress__part"
+      className="zSbSj progress__part"
     />
     <span
-      className="gMjZuI progress__part"
+      className="jFdQTa progress__part"
     />
     <span
-      className="irAecT progress__part"
+      className="jnzOIl progress__part"
     />
   </div>
   <ul
-    className="bXcblh assessments"
+    className="cVQvbD assessments"
     role="list"
   >
     <li
-      className="gAfvxM assessments__item"
+      className="eYuGur assessments__item"
     >
       <span
-        className="kNLErC guETdU assessments__item-bullet"
+        className="hNYQft jLZaQs assessments__item-bullet"
       />
       <span
-        className="kNLErC hgcwtA assessments__item-text"
+        className="hNYQft kXgChN assessments__item-text"
         dangerouslySetInnerHTML={
           Object {
             "__html": "<div></div>",
           }
         }
       />
       <span
-        className="kNLErC eMMOOP assessments__item-score"
+        className="hNYQft cFTcQJ assessments__item-score"
       >
         10
       </span>
     </li>
     <li
-      className="gAfvxM assessments__item"
+      className="eYuGur assessments__item"
     >
       <span
-        className="kNLErC eRZNUV assessments__item-bullet"
+        className="hNYQft eEkVPZ assessments__item-bullet"
       />
       <span
-        className="kNLErC hgcwtA assessments__item-text"
+        className="hNYQft kXgChN assessments__item-text"
         dangerouslySetInnerHTML={
           Object {
             "__html": "<div></div>",
           }
         }
       />
       <span
-        className="kNLErC eMMOOP assessments__item-score"
+        className="hNYQft cFTcQJ assessments__item-score"
       >
         15
       </span>
     </li>
     <li
-      className="gAfvxM assessments__item"
+      className="eYuGur assessments__item"
     >
       <span
-        className="kNLErC kNkJFK assessments__item-bullet"
+        className="hNYQft kWkurS assessments__item-bullet"
       />
       <span
-        className="kNLErC hgcwtA assessments__item-text"
+        className="hNYQft kXgChN assessments__item-text"
         dangerouslySetInnerHTML={
           Object {
             "__html": "<div></div>",
           }
         }
       />
       <span
-        className="kNLErC eMMOOP assessments__item-score"
+        className="hNYQft cFTcQJ assessments__item-score"
       >
         20
       </span>

packages/components/src/AIFixesButton.js

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import { rgba } from "@yoast/style-guide";
+import IconButtonBase from "./IconButtonBase";
+
+const yoastPrimary50 = "#FAF3F7";
+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 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})`,
+};
+
+const AIFixesButtonBase = styled( IconButtonBase )`
+	overflow: hidden;
+	border: ${ props => props.pressed ? "none" : "1px solid transparent" };
+	border-image: ${ props => props.pressed ? "none" : gradientEffect.defaultStateBorder };
+	clip-path: inset(0 round 3px);
+	background-image: ${ props => props.pressed
+		? gradientEffect.pressedStateBackground
+		: gradientEffect.defaultStateBackground } !important;
+	box-shadow: ${ props => props.pressed
+		? `inset 0 -2px 0 ${ yoastPrimary400 }`
+		: `0 1px 0 ${ rgba( props.unpressedBoxShadowColor, 0.7 ) }` };
+	&:hover {
+		background-image:  ${ props => props.pressed
+		? gradientEffect.pressedStateBackground
+		: gradientEffect.hoverStateBackground } !important;
+	}
+`;
+
+export default AIFixesButtonBase;

packages/components/src/IconAIFixesButton.js

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import { colors } from "@yoast/style-guide";
 
 /* Internal dependencies */
-import IconButtonBase from "./IconButtonBase";
+import AIFixesButton from "./AIFixesButton";
 
 /**
  * Returns the IconAIFixesButton component.
@@ -16,7 +16,7 @@ import IconButtonBase from "./IconButtonBase";
  */
 const IconAIFixesButton = function( props ) {
 	return (
-		<IconButtonBase
+		<AIFixesButton
 			disabled={ props.disabled }
 			type="button"
 			onClick={ props.onClick }
@@ -28,13 +28,13 @@ const IconAIFixesButton = function( props ) {
 			id={ props.id }
 			aria-label={ props.ariaLabel }
 			aria-pressed={ props.pressed }
-			unpressedIconColor={ props.unpressedIconColor }
 			pressedIconColor={ props.pressedIconColor }
-			hoverBorderColor={ props.hoverBorderColor }
+			hoverBackgroundColor={ props.hoverBackgroundColor }
+			unpressedBorderColor={ props.unpressedBorderColor }
 			className={ props.className }
 		>
 			{ props.children }
-		</IconButtonBase>
+		</AIFixesButton>
 	);
 };
 
@@ -49,21 +49,21 @@ IconAIFixesButton.propTypes = {
 	pressedBackground: PropTypes.string,
 	unpressedBackground: PropTypes.string,
 	pressedIconColor: PropTypes.string,
-	unpressedIconColor: PropTypes.string,
 	pressed: PropTypes.bool.isRequired,
-	hoverBorderColor: PropTypes.string,
+	unpressedBorderColor: PropTypes.string,
+	hoverBackgroundColor: PropTypes.string,
 	className: PropTypes.string,
 };
 
 IconAIFixesButton.defaultProps = {
 	disabled: false,
 	unpressedBoxShadowColor: colors.$color_button_border,
 	pressedBoxShadowColor: colors.$color_purple,
-	pressedBackground: colors.$color_pink_dark,
-	unpressedBackground: colors.$color_button,
+	pressedBackground: "linear- gradient(to bottom right, #A61E69, #3B82F6)",
+	unpressedBackground: "linear-gradient(to bottom right, #FAF3F7, #EFF6FF)",
 	pressedIconColor: colors.$color_white,
-	unpressedIconColor: colors.$color_button_text,
-	hoverBorderColor: colors.$color_white,
+	unpressedBorderColor: "linear-gradient(to bottom right, #CD82AB, #93C5FD)",
+	hoverBackgroundColor: "linear-gradient(to bottom right, #F3E5ED, #DBEAFE)",
 };
 
 export default IconAIFixesButton;

packages/components/src/index.js

@@ -20,6 +20,7 @@ export * from "./new-badge";
 export * from "./premium-badge";
 export * from "./beta-badge";
 
+
 // Referenced index.js explicitly due to case-sensitive path conflicts.
 export * from "./toggle/index.js";
 
@@ -62,6 +63,7 @@ export { default as ErrorBoundary } from "./ErrorBoundary";
 export { default as Heading } from "./Heading";
 export { default as HelpText } from "./HelpText";
 export { default as Icon } from "./Icon";
+export { default as AIFixesButton } from "./AIFixesButton";
 export { default as IconButtonBase } from "./IconButtonBase";
 export { default as IconButtonToggle } from "./IconButtonToggle.js";
 export { default as IconCTAEditButton } from "./IconCTAEditButton.js";

packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap

@@ -17,29 +17,39 @@ exports[`the pressed IconAIFixesButton matches the snapshot 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   border: 1px solid #ccc;
-  background-color: #a4286a;
+  background-color: linear- gradient(to bottom right,#A61E69,#3B82F6);
   box-shadow: inset 0 2px 0 rgba( 93,35,122,0.7 );
   border-radius: 3px;
   cursor: pointer;
   padding: 0;
   height: 24px;
 }
 
-.c0:hover {
-  border-color: #fff;
-}
-
 .c0:disabled {
-  background-color: #f7f7f7;
+  background-color: linear-gradient(to bottom right,#FAF3F7,#EFF6FF);
   box-shadow: none;
   border: none;
   cursor: default;
 }
 
+.c1 {
+  overflow: hidden;
+  border: none;
+  border-image: none;
+  -webkit-clip-path: inset(0 round 3px);
+  clip-path: inset(0 round 3px);
+  background-image: linear-gradient(to bottom right,#A61E69,#3B82F6) !important;
+  box-shadow: inset 0 -2px 0 #B94986;
+}
+
+.c1:hover {
+  background-image: linear-gradient(to bottom right,#A61E69,#3B82F6) !important;
+}
+
 <button
   aria-label="Fix with AI"
   aria-pressed={true}
-  className="c0 yoast-tooltip yoast-tooltip-w"
+  className="c0 c1 yoast-tooltip yoast-tooltip-w"
   disabled={false}
   id="keyphraseInIntroductionAIFixes"
   onClick={[Function]}
@@ -64,29 +74,39 @@ exports[`the unpressed IconAIFixesButton matches the snapshot 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   border: 1px solid #ccc;
-  background-color: #f7f7f7;
+  background-color: linear-gradient(to bottom right,#FAF3F7,#EFF6FF);
   box-shadow: 0 1px 0 rgba( 204,204,204,0.7 );
   border-radius: 3px;
   cursor: pointer;
   padding: 0;
   height: 24px;
 }
 
-.c0:hover {
-  border-color: #fff;
-}
-
 .c0:disabled {
-  background-color: #f7f7f7;
+  background-color: linear-gradient(to bottom right,#FAF3F7,#EFF6FF);
   box-shadow: none;
   border: none;
   cursor: default;
 }
 
+.c1 {
+  overflow: hidden;
+  border: 1px solid transparent;
+  border-image: linear-gradient(to bottom right,#CD82AB,#93C5FD) 1;
+  -webkit-clip-path: inset(0 round 3px);
+  clip-path: inset(0 round 3px);
+  background-image: linear-gradient(to bottom right,#FAF3F7,#EFF6FF) !important;
+  box-shadow: 0 1px 0 rgba( 204,204,204,0.7 );
+}
+
+.c1:hover {
+  background-image: linear-gradient(to bottom right,#F3E5ED,#DBEAFE) !important;
+}
+
 <button
   aria-label="Fix with AI"
   aria-pressed={false}
-  className="c0 yoast-tooltip yoast-tooltip-w"
+  className="c0 c1 yoast-tooltip yoast-tooltip-w"
   disabled={true}
   id="keyphraseDensityAIFixes"
   onClick={[Function]}

packages/js/src/ai-assessment-fixes/components/AIAssessmentFixesButton.js → packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js

@@ -1,17 +1,17 @@
-import { SparklesIcon } from "@heroicons/react/outline";
 import PropTypes from "prop-types";
 import { __ } from "@wordpress/i18n";
 import { useCallback, useRef } from "@wordpress/element";
 import { doAction } from "@wordpress/hooks";
 import { useSelect, useDispatch } from "@wordpress/data";
+
 /* Yoast dependencies */
-import { colors } from "@yoast/style-guide";
 import { IconAIFixesButton } from "@yoast/components";
 import { Modal, useToggleState } from "@yoast/ui-library";
 import { Paper } from "yoastseo";
 
 /* Internal dependencies */
 import { ModalContent } from "./modal-content";
+import { SparklesIcon } from "./sparkles-icon";
 
 /**
  * The AI Assessment Fixes button component.
@@ -66,11 +66,7 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => {
 
 	// The button is pressed when the active AI button id is the same as the current button id.
 	const isButtonPressed = activeAIButtonId === aiFixesId;
-	const isButtonDisabled = activeAIButtonId !== null && ! isButtonPressed;
-	/* This color selection when the button is pressed/unpressed is in line with the design of the highlighting button.
-	In Premium: when the button is pressed, the icon color is white. When the button is unpressed, the color is grey.
-	In Free: the icon color is always grey. */
-	const iconColor = isButtonPressed ? colors.$color_white : colors.$color_button_text;
+
 	// Don't show the tooltip when the button is pressed.
 	const className = isButtonPressed ? "" : "yoast-tooltip yoast-tooltip-w";
 
@@ -82,9 +78,8 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => {
 				id={ aiFixesId }
 				className={ className }
 				pressed={ isButtonPressed }
-				disabled={ isButtonDisabled }
 			>
-				<SparklesIcon style={ { width: "70%", height: "70%", color: iconColor } } />
+				<SparklesIcon pressed={ isButtonPressed } />
 				{
 					// We put the logic for the Upsell component in place.
 					// The Modal below is only a placeholder/mock. When we have the design for the real upsell, the modal should be replaced.

packages/js/src/ai-assessment-fixes/components/sparkles-icon.js

@@ -0,0 +1,33 @@
+import propTypes from "prop-types";
+
+/**
+ * The AI Assessment Fixes button icon.
+ * @param {boolean} pressed Whether the button is pressed.
+ * @returns {JSX.Element} The AI Assessment Fixes button icon.
+ */
+export const SparklesIcon = ( { pressed = false } ) => {
+	return (
+		<>
+			<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"
+					strokeLinejoin="round"
+				/>
+				<defs>
+					<linearGradient
+						id="paint0_linear_1208_188" x1="0" y1="0" x2="16" y2="16"
+						gradientUnits="userSpaceOnUse"
+					>
+						<stop stopColor="#A61E69" />
+						<stop offset="1" stopColor="#3B82F6" />
+					</linearGradient>
+				</defs>
+			</svg>
+		</>
+	);
+};
+
+SparklesIcon.propTypes = {
+	pressed: propTypes.bool,
+};

packages/js/src/components/contentAnalysis/SeoAnalysis.js

@@ -21,7 +21,7 @@ import SidebarCollapsible from "../SidebarCollapsible";
 import SynonymSlot from "../slots/SynonymSlot";
 import { getIconForScore } from "./mapResults";
 import isBlockEditor from "../../helpers/isBlockEditor";
-import AIAssessmentFixesButton from "../../ai-assessment-fixes/components/AIAssessmentFixesButton";
+import AIAssessmentFixesButton from "../../ai-assessment-fixes/components/ai-assessment-fixes-button";
 
 const AnalysisHeader = styled.span`
 	font-size: 1em;