From b26e0469be61165f6541a82b3e7806968e3308dd Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 2 Jun 2025 10:36:59 +0200
Subject: [PATCH] fix: case sensitive icon has wrong fill color in dark mode
 (#10068)

The case sensitive buttons looked off in dark mode because we'd
forgotten to properly target the path element. We didn't notice, because
they looked right in light mode.

## Before:
Dark:
<img width="267" alt="image"
src="https://github.com/user-attachments/assets/2c91953c-9dbd-4dff-943e-ef35105d3863"
/>
<img width="291" alt="image"
src="https://github.com/user-attachments/assets/02ba40d2-92ca-4237-abd6-a1c1dda301d4"
/>


Light:
<img width="275" alt="image"
src="https://github.com/user-attachments/assets/028b4980-463b-4e42-833d-edba26364f62"
/>
<img width="318" alt="image"
src="https://github.com/user-attachments/assets/f1a38dc1-5e4c-4309-801e-3b5b6635a96c"
/>


## After:

Dark:
<img width="421" alt="image"
src="https://github.com/user-attachments/assets/0bc38579-319b-472a-8877-7320a99403ab"
/>
<img width="366" alt="image"
src="https://github.com/user-attachments/assets/836cba98-7998-403f-b8f3-e989845086a2"
/>


Light:
<img width="429" alt="image"
src="https://github.com/user-attachments/assets/85abd5f4-d6b9-4b62-930f-b17f1085172c"
/>
<img width="313" alt="image"
src="https://github.com/user-attachments/assets/661eab6f-7717-4b0c-9a35-0a075de1a10e"
/>
---
 .../ConstraintItemHeader/ConstraintItemHeader.tsx             | 3 +++
 .../EditableConstraint/EditableConstraint.tsx                 | 4 +++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/component/common/ConstraintsList/ConstraintItemHeader/ConstraintItemHeader.tsx b/frontend/src/component/common/ConstraintsList/ConstraintItemHeader/ConstraintItemHeader.tsx
index 8a0512cb55..2605f895c9 100644
--- a/frontend/src/component/common/ConstraintsList/ConstraintItemHeader/ConstraintItemHeader.tsx
+++ b/frontend/src/component/common/ConstraintsList/ConstraintItemHeader/ConstraintItemHeader.tsx
@@ -33,6 +33,9 @@ const StrategyEvalChipLessInlinePadding = styled(StrategyEvaluationChip)(
             paddingInline: theme.spacing(0),
         },
         svg: {
+            path: {
+                fill: 'currentColor',
+            },
             '--size': theme.spacing(2.5),
             width: 'var(--size)',
             height: 'var(--size)',
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/EditableConstraint.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/EditableConstraint.tsx
index f70a2cf7f4..e3fa09fc82 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/EditableConstraint.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/EditableConstraint.tsx
@@ -145,7 +145,9 @@ const StyledCaseInsensitiveIcon = styled(CaseInsensitiveIcon)(({ theme }) => ({
     },
 }));
 const StyledCaseSensitiveIcon = styled(CaseSensitiveIcon)(({ theme }) => ({
-    fill: 'currentcolor',
+    path: {
+        fill: 'currentColor',
+    },
 }));
 
 const TopRowInput: FC<{