AI Optimize sparkles button doesn't have a border in Safari

[Jordi-PV]

Context: Why was this issue created?

AI Optimize sparkles button doesn't have a border in Safari, making the button look like it is disabled. The reason is that the browser doesn't accept the linear-gradient() color function that we pass to the background-image property.

What is the goal of this issue?

To make the sparkles button for AI Optimize look the same in Safari as in other browsers.

What needs to be done to achieve the goal?

To add CSS rule for Safari where we use different parameters for the background-color property.

Does the issue still need UX or research?

No. UX accepted the suggested solution.

If available: what are the tips for fixing the problem or possible solutions?

In packages/components/src/IconAIFixesButton.js or packages/components/src/AIFixesButton.js add an exception rule for Safari browser with the background-color: rgba( 204, 204, 204, 0.2 ); property and deactivate the current background-image: linear-gradient(to bottom right,#FAF3F7,#EEF2FF) !important; declaration.

See 👀 this thread 🧵 on slack for more context.

What is the expected result/behavior?

That the AI Optimize sparkles button looks the same for Safari as for the other browsers.

Should documentation be added or updated for this change? and if so, where?