OAuth 2 (#158)

src-web/components/core/Checkbox.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { trackEvent } from '../../lib/analytics';
 import { Icon } from './Icon';
 import { HStack } from './Stacks';
@@ -26,17 +26,15 @@ export function Checkbox({
   event,
 }: CheckboxProps) {
   return (
-    <HStack
-      as="label"
-      space={2}
-      className={classNames(className, 'text-text mr-auto', disabled && 'opacity-disabled')}
-    >
+    <HStack as="label" space={2} className={classNames(className, 'text-text mr-auto')}>
       <div className={classNames(inputWrapperClassName, 'x-theme-input', 'relative flex')}>
         <input
           aria-hidden
           className={classNames(
             'appearance-none w-4 h-4 flex-shrink-0 border border-border',
-            'rounded hocus:border-border-focus hocus:bg-focus/[5%] outline-none ring-0',
+            'rounded outline-none ring-0',
+            !disabled && 'hocus:border-border-focus hocus:bg-focus/[5%] ',
+            disabled && 'border-dotted',
           )}
           type="checkbox"
           disabled={disabled}
@@ -54,7 +52,7 @@ export function Checkbox({
           />
         </div>
       </div>
-      {!hideLabel && title}
+      <span className={classNames(disabled && 'opacity-disabled')}>{!hideLabel && title}</span>
     </HStack>
   );
 }