From 20b641bfe66d564c47bde1635bd040d4ed4d8c09 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charles@twenty.com>
Date: Thu, 10 Aug 2023 15:58:24 -0700
Subject: [PATCH] Fix checkbox indeterminate background

---
 .../ui/input/checkbox/components/Checkbox.tsx     | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/front/src/modules/ui/input/checkbox/components/Checkbox.tsx b/front/src/modules/ui/input/checkbox/components/Checkbox.tsx
index 82c2ed4b3..a4ec455d7 100644
--- a/front/src/modules/ui/input/checkbox/components/Checkbox.tsx
+++ b/front/src/modules/ui/input/checkbox/components/Checkbox.tsx
@@ -59,10 +59,10 @@ const StyledInput = styled.input<{
   & + label:before {
     --size: ${({ checkboxSize }) =>
       checkboxSize === CheckboxSize.Large ? '18px' : '12px'};
-    background: ${({ theme, indeterminate }) =>
-      indeterminate ? theme.color.blue : 'transparent'};
-    border-color: ${({ theme, indeterminate, variant }) =>
-      indeterminate
+    background: ${({ theme, indeterminate, isChecked }) =>
+      indeterminate || isChecked ? theme.color.blue : 'transparent'};
+    border-color: ${({ theme, indeterminate, isChecked, variant }) =>
+      indeterminate || isChecked
         ? theme.color.blue
         : variant === CheckboxVariant.Primary
         ? theme.border.color.inverted
@@ -80,13 +80,6 @@ const StyledInput = styled.input<{
     width: var(--size);
   }
 
-  & + label:before {
-    background: ${({ theme, isChecked }) =>
-      isChecked ? theme.color.blue : 'inherit'};
-    border-color: ${({ theme, isChecked }) =>
-      isChecked ? theme.color.blue : 'inherit'};
-  }
-
   & + label > svg {
     --padding: ${({ checkboxSize }) =>
       checkboxSize === CheckboxSize.Large ? '2px' : '1px'};