Adds css to try to apply the gradient

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

@@ -11,9 +11,7 @@ import { Paper } from "yoastseo";
 
 /* Internal dependencies */
 import { ModalContent } from "./modal-content";
-// import { SparklesIcon } from "./sparkles-icon";
-import SparklesIcon from "./sparkles-icon.svg";
-//import IconWithConditionalStyle from './SparklesIcon';
+import { SparklesIcon } from "./sparkles-icon";
 
 /**
  * The AI Assessment Fixes button component.
@@ -95,13 +93,7 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => {
  className={ `ai-button ${buttonClass}` }
  pressed={ isButtonPressed }
  >
- {/* <SparklesIcon pressed={ isButtonPressed } /> */}
- {/* <SparklesIcon pressed={isButtonPressed} /> */}
- <div>
- <SparklesIcon pressed = { isButtonPressed }
- style={{ stroke: isButtonPressed ? "white": "url (#paint0_linear_1208_18" }}
- />
- </div>
+ <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.css

@@ -0,0 +1,8 @@
+/* sparkles-icon.css */
+svg path.stroke-gradient {
+ stroke: url(#paint0_linear_1208_188);
+}
+
+svg path.stroke-white {
+ stroke: white;
+}

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

@@ -1,18 +1,22 @@
 import propTypes from "prop-types";
+import "./sparkles-icon.css";
 
 /**
  * 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 } ) => {
+ const gradientStroke = `url( "#paint0_linear_1208_188" )`;
  return (
  <>
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http:https://www.w3.org/2000/svg">
+ <svg xmlns="http:https://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" >
  <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"
+ strokeLinecap="round"
  strokeLinejoin="round"
+ stroke={ pressed ? "white" : gradientStroke }
+ strokeWidth="1.33333"
  />
  <defs>
  <linearGradient