From c239b8f07a6951a3b5a0203b94e5c43d8707c769 Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Fri, 14 Mar 2025 10:28:16 +0100
Subject: [PATCH] fix(editor): Increase contrast on hover for AI button
 (#13920)

---
 .../ParameterInputOverrides/FromAiOverrideButton.vue       | 7 ++++++-
 .../ParameterInputOverrides/FromAiOverrideField.vue        | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue b/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue
index 388941569e..5867ff0d7b 100644
--- a/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue
+++ b/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue
@@ -20,7 +20,7 @@ const emit = defineEmits<{
 			data-test-id="from-ai-override-button"
 			@click="emit('click')"
 		>
-			<AiStarsIcon size="large" :class="$style.aiStarsIcon" />
+			<AiStarsIcon size="large" />
 		</N8nButton>
 	</N8nTooltip>
 </template>
@@ -38,6 +38,11 @@ const emit = defineEmits<{
 	&:hover {
 		color: var(--color-foreground-xdark);
 		background-color: var(--color-secondary);
+
+		svg {
+			// ensure enough contrast in both light and dark mode
+			color: var(--prim-gray-200);
+		}
 	}
 }
 </style>
diff --git a/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue b/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
index b5ae6130ca..ea52a0f4e3 100644
--- a/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
+++ b/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
@@ -13,7 +13,7 @@ const emit = defineEmits<{
 <template>
 	<div :class="$style.contentOverrideContainer" data-test-id="fromAI-override-field">
 		<div :class="[$style.iconStars, 'el-input-group__prepend', $style.noCornersRight]">
-			<AiStarsIcon :class="$style.aiStarsIcon" />
+			<AiStarsIcon />
 		</div>
 		<div :class="$style.overrideInput">
 			<N8nText