From 2b73f5e6afce0332854ee70e543d204260f48706 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Fri, 20 Dec 2024 13:36:42 +0300
Subject: [PATCH] M: Improve checkbox structure

---
 rsconcept/frontend/src/components/ui/Checkbox.tsx   |  9 +++------
 .../frontend/src/components/ui/CheckboxTristate.tsx | 13 +++----------
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/rsconcept/frontend/src/components/ui/Checkbox.tsx b/rsconcept/frontend/src/components/ui/Checkbox.tsx
index de74e8e7..5b221673 100644
--- a/rsconcept/frontend/src/components/ui/Checkbox.tsx
+++ b/rsconcept/frontend/src/components/ui/Checkbox.tsx
@@ -65,7 +65,8 @@ function Checkbox({
       <div
         className={clsx(
           'max-w-[1rem] min-w-[1rem] h-4', // prettier: split lines
-          'border rounded-sm ',
+          'pt-[0.1rem] pl-[0.1rem]',
+          'border rounded-sm',
           'cc-animate-color',
           {
             'bg-sec-600 text-sec-0': value !== false,
@@ -73,11 +74,7 @@ function Checkbox({
           }
         )}
       >
-        {value ? (
-          <div className='mt-[1px] ml-[1px]'>
-            <CheckboxChecked />
-          </div>
-        ) : null}
+        {value ? <CheckboxChecked /> : null}
       </div>
       {label ? <span className={clsx('text-start text-sm whitespace-nowrap select-text', cursor)}>{label}</span> : null}
     </button>
diff --git a/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx b/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
index 0416375d..b49ec701 100644
--- a/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
+++ b/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
@@ -66,6 +66,7 @@ function CheckboxTristate({
       <div
         className={clsx(
           'w-4 h-4', // prettier: split lines
+          'pt-[0.1rem] pl-[0.1rem]',
           'border rounded-sm',
           'cc-animate-color',
           {
@@ -74,16 +75,8 @@ function CheckboxTristate({
           }
         )}
       >
-        {value ? (
-          <div className='mt-[1px] ml-[1px]'>
-            <CheckboxChecked />
-          </div>
-        ) : null}
-        {value == null ? (
-          <div className='mt-[1px] ml-[1px]'>
-            <CheckboxNull />
-          </div>
-        ) : null}
+        {value ? <CheckboxChecked /> : null}
+        {value == null ? <CheckboxNull /> : null}
       </div>
       {label ? <span className={clsx('text-start text-sm whitespace-nowrap select-text', cursor)}>{label}</span> : null}
     </button>