IR-2532: Update Checkbox UI (#10322)

* Update Checkbox UI * use relative sizes & fix label position * remove container classname in booleaninput --------- Co-authored-by: aditya-mitra <[email protected]>
EtherealEngine · Jun 6, 2024 · 5384341 · 5384341
1 parent 9e5c01f
commit 5384341
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 31 deletions.
diff --git a/packages/ui/src/components/editor/input/Boolean/index.tsx b/packages/ui/src/components/editor/input/Boolean/index.tsx
@@ -42,11 +42,9 @@ export const BooleanInput = (props: BooleanInputProp) => {
 
   return (
     <Checkbox
-      label=" "
-      containerClassName="w-[200px]"
       className={twMerge(
         'rounded-sm border border-none bg-black px-1 py-1 dark:bg-[#1A1A1A]',
-        'hover:border-blue-800 hover:bg-zinc-900',
+        'hover:border-blue-800 hover:bg-theme-highlight',
         props.disabled ? 'cursor-[initial] opacity-80 grayscale-[0.8]' : 'cursor-pointer',
         props.className
       )}

diff --git a/packages/ui/src/primitives/tailwind/Checkbox/index.tsx b/packages/ui/src/primitives/tailwind/Checkbox/index.tsx
@@ -24,6 +24,8 @@ Ethereal Engine. All Rights Reserved.
 */
 
 import React from 'react'
+import { HiCheck } from 'react-icons/hi'
+
 import { twMerge } from 'tailwind-merge'
 
 import Label from '../Label'
@@ -37,36 +39,27 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
   disabled?: boolean
 }
 
-const Checkbox = ({ className, containerClassName, label, value, onChange, disabled, ...rest }: CheckboxProps) => {
-  const twClassName = twMerge(
-    'disabled:border-steel-400 disabled:bg-steel-400 peer',
-    'relative h-4 w-4 shrink-0 appearance-none rounded-sm',
-    'border-2 border-blue-500 bg-white',
-    'checked:border-0 checked:bg-blue-800 focus:outline-none focus:ring-2',
-    'focus:ring-blue-500 focus:ring-offset-0 dark:focus:ring-blue-600',
-    className
-  )
-
+const Checkbox = ({ className, containerClassName, label, value, onChange, disabled }: CheckboxProps) => {
   return (
-    <div className={twMerge('flex w-full items-center gap-4', containerClassName)}>
-      <input type="checkbox" onChange={(e) => onChange(e.target.value as any)} className={twClassName} {...rest} />
-      {label && (
-        <Label onClick={() => onChange(!value)} className="cursor-pointer self-stretch">
-          {label}
-        </Label>
-      )}
-      <svg
-        className="pointer-events-none absolute hidden h-4 w-4 scale-75 text-white peer-checked:block"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth={4}
-        strokeLinecap="round"
-        strokeLinejoin="round"
+    <div
+      onClick={() => {
+        if (!disabled) {
+          onChange(!value)
+        }
+      }}
+      className={twMerge('flex cursor-pointer items-end space-x-2', containerClassName)}
+    >
+      <div
+        className={twMerge(
+          'grid h-4 w-4 place-items-center rounded border border-theme-primary',
+          value ? 'bg-blue-primary' : 'bg-theme-surfaceInput',
+          disabled ? 'cursor-not-allowed opacity-50' : ''
+        )}
       >
-        <polyline points="20 6 9 17 4 12" />
-      </svg>
+        {value && <HiCheck className="h-3 w-3 text-white" />}
+      </div>
+
+      {label && <Label className="cursor-pointer self-stretch leading-[1.15]">{label}</Label>}
     </div>
   )
 }