Feat: dark mode for logs and annotations (#11575)

web/app/components/base/checkbox/assets/check.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 3L4.5 8.5L2 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

web/app/components/base/checkbox/index.module.css

@@ -1,14 +0,0 @@
-.wrapper {
-  border-color: #d0d5dd;
-}
-
-.checked {
-  background: #155eef url(./assets/check.svg) center center no-repeat;
-  background-size: 12px 12px;
-  border-color: #155eef;
-}
-
-.checked.disabled {
-  background-color: #d0d5dd;
-  border-color: #d0d5dd;
-}

web/app/components/base/checkbox/index.tsx

@@ -1,4 +1,4 @@
-import s from './index.module.css'
+import { RiCheckLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
 
 type CheckboxProps = {
@@ -9,13 +9,27 @@ type CheckboxProps = {
 }
 
 const Checkbox = ({ checked, onCheck, className, disabled }: CheckboxProps) => {
+  if (!checked) {
+    return (
+      <div
+        className={cn(
+          'w-4 h-4 rounded-[4px] bg-components-checkbox-bg-unchecked border border-components-checkbox-border hover:bg-components-checkbox-bg-unchecked-hover hover:border-components-checkbox-border-hover shadow-xs cursor-pointer',
+          disabled && 'border-components-checkbox-border-disabled bg-components-checkbox-bg-disabled hover:border-components-checkbox-border-disabled hover:bg-components-checkbox-bg-disabled cursor-not-allowed',
+          className,
+        )}
+        onClick={() => {
+          if (disabled)
+            return
+          onCheck?.()
+        }}
+      ></div>
+    )
+  }
   return (
     <div
       className={cn(
-        s.wrapper,
-        checked && s.checked,
-        disabled && s.disabled,
-        'w-4 h-4 border rounded border-gray-300',
+        'w-4 h-4 flex items-center justify-center rounded-[4px] bg-components-checkbox-bg hover:bg-components-checkbox-bg-hover text-components-checkbox-icon shadow-xs cursor-pointer',
+        disabled && 'bg-components-checkbox-bg-disabled-checked hover:bg-components-checkbox-bg-disabled-checked text-components-checkbox-icon-disabled cursor-not-allowed',
         className,
       )}
       onClick={() => {
@@ -24,7 +38,9 @@ const Checkbox = ({ checked, onCheck, className, disabled }: CheckboxProps) => {
 
         onCheck?.()
       }}
-    />
+    >
+      <RiCheckLine className={cn('w-3 h-3')} />
+    </div>
   )
 }