fix(Checkbox): improve typings and styles to follow mockups

Stremio · Feb 17, 2025 · f5ef7d6 · f5ef7d6
1 parent 72e7b70
commit f5ef7d6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/src/components/Checkbox/Checkbox.less b/src/components/Checkbox/Checkbox.less
@@ -1,5 +1,7 @@
 // Copyright (C) 2017-2025 Smart code 203358507
 
+@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+
 .checkbox {
     display: flex;
     align-items: center;
@@ -10,6 +12,7 @@
         flex-direction: row;
         align-items: center;
         padding: 0.5rem 0;
+        cursor: pointer;
 
         span {
             font-size: 0.9rem;
@@ -28,21 +31,23 @@
 
     .checkbox-container {
         position: relative;
-        width: 1.75rem;
-        height: 1.75rem;
-        border: 0.2rem solid var(--primary-accent-color);
-        border-radius: 0.5rem;
-        background-color: transparent;
+        width: 1.5rem;
+        height: 1.5rem;
+        border-radius: 0.3rem;
+        background-color: var(--overlay-color);
         padding: 0.1rem;
         display: flex;
         flex: none;
-        margin-right: 1rem;
+        margin: 0 1rem 0 0.3rem;
         align-items: center;
         justify-content: center;
         transition: all 0.2s ease-in-out;
         cursor: pointer;
         outline: none;
         user-select: none;
+        outline-width: var(--focus-outline-size);
+        outline-color: @color-surface-light5;
+        outline-offset: 2px;
 
         input[type='checkbox'] {
             opacity: 0;
@@ -54,7 +59,8 @@
 
         .checkbox-icon {
             width: 100%;   
-            height: 100%;   
+            height: 100%;
+            color: var(--primary-foreground-color);
         }
 
         &.disabled {
@@ -68,5 +74,9 @@
         &.checked {
             background-color: var(--primary-accent-color);
         }
+
+        &:hover, &:focus {
+            outline-style: solid;
+        }
     }
 }
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -15,7 +15,12 @@ type Props = {
     label?: string;
     link?: string;
     href?: string;
-    onChange?: (props: any) => void;
+    onChange?: (props: {
+        type: string;
+        checked: boolean;
+        reactEvent: KeyboardEvent<HTMLInputElement> | ChangeEvent<HTMLInputElement>;
+        nativeEvent: Event;
+    }) => void;
     error?: string;
 };
 
@@ -32,12 +37,12 @@ const Checkbox = React.forwardRef<HTMLInputElement, Props>(({ name, disabled, cl
         }
     }, [disabled, onChange]);
 
-    const onKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
+    const onKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) => {
         if ((event.key === 'Enter' || event.key === ' ') && !disabled) {
             onChange && onChange({
                 type: 'select',
-                checked: event.target.checked,
-                reactEvent: event,
+                checked: !checked,
+                reactEvent: event as KeyboardEvent<HTMLInputElement>,
                 nativeEvent: event.nativeEvent,
             });
         }