From 553e5d50771e03d26fa35a812782ee4dd83ddd60 Mon Sep 17 00:00:00 2001
From: Quentin Ruhier <99256289+QRuhier@users.noreply.github.com>
Date: Tue, 12 Nov 2024 11:44:29 +0100
Subject: [PATCH] fix: display checkbox boolean (#269)

---
 .../components/orchestrator/lunaticStyle.tsx  | 35 ++++++++++++++-----
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/drama-queen/src/ui/components/orchestrator/lunaticStyle.tsx b/drama-queen/src/ui/components/orchestrator/lunaticStyle.tsx
index 8cc578b8..ac2fa036 100644
--- a/drama-queen/src/ui/components/orchestrator/lunaticStyle.tsx
+++ b/drama-queen/src/ui/components/orchestrator/lunaticStyle.tsx
@@ -80,15 +80,6 @@ export const useLunaticStyles = tss.create(({ theme }) => ({
 
     // to replace checkbox by svg
     '& .list-icon': { position: 'absolute', marginTop: '-0.2rem' },
-    '& .checkbox-boolean-lunatic': {
-      position: 'absolute',
-      opacity: 0,
-      marginBottom: 0,
-      marginTop: '0.15rem',
-      marginLeft: '0.2rem',
-      height: '18px',
-      width: '18px',
-    },
 
     // datepicker
     '.lunaticDatepickerFields': {
@@ -257,6 +248,32 @@ export const useLunaticStyles = tss.create(({ theme }) => ({
       },
     },
 
+    // checkbox boolean
+    '& .lunatic-checkbox-boolean': {
+      '& .lunatic-input-checkbox__icon': {
+        display: 'grid',
+        placeItems: 'center',
+        width: '18px',
+        height: '18px',
+        padding: '0.1em',
+        flex: 'none',
+        borderRadius: '5px',
+        color: '#FFF',
+        backgroundColor: `${modalityCodeBackgroundColor}`,
+        border: `2px solid ${borderColorCheckbox}`,
+
+        '& svg': {
+          transform: 'scale(0.7)',
+        },
+      },
+
+      "& .lunatic-input-checkbox[aria-checked='true'] .lunatic-input-checkbox__icon":
+        {
+          backgroundColor: theme.palette.background.button.main,
+          borderColor: `${modalityLabelColorChecked}`,
+        },
+    },
+
     // .lunatic-component lunatic label
     '& .lunatic-input , .lunatic-textarea, .lunatic-input-number, .lunatic-dropdown, .lunatic-combo-box-container, .field-container > .field .lunatic-input':
       {