Adds an ID to every icon and cleans up code

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

@@ -93,7 +93,7 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => {
  className={ `ai-button ${buttonClass}` }
  pressed={ isButtonPressed }
  >
- <SparklesIcon pressed={ isButtonPressed }/>
+ <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

@@ -1,31 +1,30 @@
 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 gradientId = `gradient-${Math.random().toString(36).substr(2, 9)}`;
+export const SparklesIcon = ( { pressed = false } ) => {
+ const gradientId = `gradient-${ Math.random().toString( 36 ).substr( 2, 9 ) }`;
 
  return (
  <>
- <svg xmlns="http:https://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" >
+ <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http:https://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"
+ d="M3.33284 2.96991V5.63658M1.99951 4.30324H4.66618M3.99951 12.3032V14.9699M2.66618 13.6366H5.33284M8.66618 2.96991L10.19 7.54134L13.9995 8.96991L10.19 10.3985L8.66618 14.9699L7.14237 10.3985L3.33284 8.96991L7.14237 7.54134L8.66618 2.96991Z"
  strokeLinecap="round"
  strokeLinejoin="round"
  stroke={ pressed ? "white" : `url(#${gradientId})` }
  strokeWidth="1.33333"
  />
  <defs>
  <linearGradient
- id={gradientId} x1="0" y1="0" x2="16" y2="16"
+ id="paint0_linear_1538_754" x1="1.99951" y1="2.96991" x2="15.3308" y2="4.69764"
  gradientUnits="userSpaceOnUse"
  >
  <stop offset="0%" stopColor="#A61E69" />
- <stop offset="100%" stopColor="#3B82F6" />
+ <stop offset="100%" stopColor="#6366F1" />
  </linearGradient>
  </defs>
  </svg>