From 71bd470d31d2645ffb5a5d6dbcb3273846b503c9 Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Mon, 17 Feb 2025 14:02:15 +0200
Subject: [PATCH] fix(Checkbox): use checkmark icon instead of styles and make
 bg color the primary accent one

---
 src/components/Checkbox/Checkbox.less | 35 +++++----------------------
 src/components/Checkbox/Checkbox.tsx  |  7 +++++-
 2 files changed, 12 insertions(+), 30 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.less b/src/components/Checkbox/Checkbox.less
index 7d43947ed..5890ce52e 100644
--- a/src/components/Checkbox/Checkbox.less
+++ b/src/components/Checkbox/Checkbox.less
@@ -30,9 +30,10 @@
         position: relative;
         width: 1.75rem;
         height: 1.75rem;
-        border: 0.2rem solid var(--color-placeholder);
+        border: 0.2rem solid var(--primary-accent-color);
         border-radius: 0.5rem;
         background-color: transparent;
+        padding: 0.1rem;
         display: flex;
         flex: none;
         margin-right: 1rem;
@@ -51,29 +52,9 @@
             cursor: pointer;
         }
 
-        .checkmark {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 1.5rem;
-            height: 1.5rem;
-            transition: opacity 0.2s ease-in-out;
-            background-color: transparent;
-            opacity: 0;
-
-            &:after {
-                content: "";
-                position: absolute;
-                left: 0.45rem;
-                top: 0.2rem;
-                width: 0.2rem;
-                height: 0.5rem;
-                border: solid var(--primary-foreground-color);
-                border-width: 0 0.2rem 0.2rem 0;
-                -webkit-transform: rotate(45deg);
-                -ms-transform: rotate(45deg);
-                transform: rotate(45deg);
-            }
+        .checkbox-icon {
+            width: 100%;   
+            height: 100%;   
         }
 
         &.disabled {
@@ -85,11 +66,7 @@
         }
 
         &.checked {
-            border: 3px solid var(--secondary-accent-color);
-            background-color: var(--secondary-accent-color);
-            .checkmark {
-                opacity: 1;
-            }
+            background-color: var(--primary-accent-color);
         }
     }
 }
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index b5c0b0e7c..8180ddd84 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -4,6 +4,7 @@ import React, { useCallback, ChangeEvent, KeyboardEvent, RefCallback } from 'rea
 import classNames from 'classnames';
 import styles from './Checkbox.less';
 import Button from '../Button';
+import Icon from '@stremio/stremio-icons/react';
 
 type Props = {
     ref?: RefCallback<HTMLInputElement>;
@@ -66,7 +67,11 @@ const Checkbox = React.forwardRef<HTMLInputElement, Props>(({ name, disabled, cl
                         onChange={handleSelect}
                         className={styles['input']}
                     />
-                    <span className={styles['checkmark']} />
+                    {
+                        checked ?
+                            <Icon name={'checkmark'} className={styles['checkbox-icon']} />
+                            : null
+                    }
                 </div>
                 <div>
                     <span>{label}</span>