From c358a8ffd3c1eb0f88950dc644d84a274749f170 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 14 May 2025 08:57:20 +0200
Subject: [PATCH] Make hover underline purple (#9985)

Uses a purple color for the hover underline. Also, sets it to be
transparent when not-hovered, so that you get a nice fade in effect.

Focus (top) and hover (bottom) now have the same visual style, but
different ways to get to that state (expansion vs fade-in):
<img width="979" alt="image"
src="https://github.com/user-attachments/assets/e342ea4e-4821-4e4c-bb5d-6b9d3a672e26"
/>
---
 .../FeatureStrategyConstraints/EditableConstraint.tsx        | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
index 2883cc57fc..0d3729d6c9 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
@@ -85,6 +85,11 @@ const StyledSelect = styled(GeneralSelect)(({ theme }) => ({
     },
     '&::before': {
         border: 'none',
+        // make it transparent so that it fades in
+        borderColor: `${theme.palette.primary.main}00`,
+    },
+    '&&:hover::before': {
+        borderColor: theme.palette.primary.main,
     },
 }));