From 7b58d76f9eb1819fd429e6e3aa220030ae644179 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Thu, 16 Nov 2023 17:17:16 +0300
Subject: [PATCH] packages/ui: fix checkbox alert color & remove checkbox label

---
 apps/web/components/Form/Elements.tsx |  3 +-
 packages/ui/checkbox.tsx              | 47 ++++++++++++---------------
 packages/ui/container.tsx             |  2 +-
 3 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/apps/web/components/Form/Elements.tsx b/apps/web/components/Form/Elements.tsx
index f2777cb..fe62728 100644
--- a/apps/web/components/Form/Elements.tsx
+++ b/apps/web/components/Form/Elements.tsx
@@ -28,14 +28,13 @@ export function Elements({ data, metaData }: Props) {
             message={validation[name]?.message}
             key={name}
             id={name}
-            title={fieldType === 'CHECKBOX' ? '' : label}
+            title={label}
           >
             <Element
               loading={!Object.keys(values).length}
               checked={fieldType === 'CHECKBOX' ? Boolean(values[name]) || false : false}
               id={name}
               value={values[name] || ''}
-              title={label}
               min={min}
               max={max}
               onChange={(e) => {
diff --git a/packages/ui/checkbox.tsx b/packages/ui/checkbox.tsx
index 2668513..c621750 100644
--- a/packages/ui/checkbox.tsx
+++ b/packages/ui/checkbox.tsx
@@ -3,27 +3,27 @@ import type { VariantProps } from 'class-variance-authority';
 import { cva } from 'class-variance-authority';
 import { forwardRef } from 'react';
 
-const labelVariants = cva('ml-2 text-sm font-medium text-gray-900', {
-  defaultVariants: {
-    intent: 'default',
-  },
-  variants: {
-    intent: {
-      default: '',
-      disabled: 'cursor-not-allowed',
-    },
-  },
-});
+// const labelVariants = cva('ml-2 text-sm font-medium text-gray-900', {
+//   defaultVariants: {
+//     intent: 'default',
+//   },
+//   variants: {
+//     intent: {
+//       default: '',
+//       disabled: 'cursor-not-allowed',
+//     },
+//   },
+// });
 
-type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & VariantProps<typeof labelVariants>;
+// type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & VariantProps<typeof labelVariants>;
 
-const Label = forwardRef<HTMLLabelElement, LabelProps>(
-  ({ className, intent, title, ...props }, ref) => (
-    <label className={cn(labelVariants({ className, intent }))} ref={ref} {...props}>
-      {title}
-    </label>
-  )
-);
+// const Label = forwardRef<HTMLLabelElement, LabelProps>(
+//   ({ className, intent, title, ...props }, ref) => (
+//     <label className={cn(labelVariants({ className, intent }))} ref={ref} {...props}>
+//       {title}
+//     </label>
+//   )
+// );
 
 const variants = cva(
   'w-4 h-4 focus:ring-transparent rounded-sm hover:border-primary-500 disabled:hover:border-gray-300 border-gray-300 text-sm text-primary outline-none transition-all ease-in-out disabled:cursor-not-allowed disabled:text-opacity-30'
@@ -33,19 +33,12 @@ export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> &
   VariantProps<typeof variants> & { readonly loading: boolean };
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ className, loading, title, ...props }, ref) => {
+  ({ className, loading, ...props }, ref) => {
     if (loading) return <div className="h-3 w-full animate-pulse rounded bg-gray-100" />;
 
     return (
       <div className="flex items-center">
         <input ref={ref} type="checkbox" className={cn(variants({ className }))} {...props} />
-        {title && (
-          <Label
-            intent={props.disabled ? 'disabled' : 'default'}
-            htmlFor={props.id}
-            title={title}
-          />
-        )}
       </div>
     );
   }
diff --git a/packages/ui/container.tsx b/packages/ui/container.tsx
index fa3acf9..d3ee7d5 100644
--- a/packages/ui/container.tsx
+++ b/packages/ui/container.tsx
@@ -11,7 +11,7 @@ const variants = cva('flex h-9 items-center', {
   },
   variants: {
     intent: {
-      danger: '[&>*]:border-red-500',
+      danger: '[&>*]:border-red-500 [&>*>*]:border-red-500',
       default: '',
     },
   },