Refactors the sparkles icon

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ReactComponent as SparklesIcon } from './sparkles-icon.svg';
+
+const IconWithConditionalStyle = ({ pressed }) => {
+ return (
+ <div>
+ <SparklesIcon pressed={pressed} />
+ </div>
+ );
+};
+
+export default IconWithConditionalStyle;

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

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

@@ -19,8 +19,8 @@ export const SparklesIcon = ( { pressed = false } ) => {
  id="paint0_linear_1208_188" x1="0" y1="0" x2="16" y2="16"
  gradientUnits="userSpaceOnUse"
  >
- <stop stopColor="#A61E69" />
- <stop offset="1" stopColor="#3B82F6" />
+ <stop offset="0%" stopColor="#A61E69" />
+ <stop offset="100%" stopColor="#3B82F6" />
  </linearGradient>
  </defs>
  </svg>