From ce59e4650280af7f09a6c141fcdbed3eea7234d6 Mon Sep 17 00:00:00 2001
From: Jordi Enric <jordi.err@gmail.com>
Date: Fri, 3 May 2024 02:34:41 +0200
Subject: [PATCH] improve checkbox

---
 apps/web/src/components/Editor/ZendoEditor.tsx | 8 +++++---
 apps/web/src/components/ui/checkbox.tsx        | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/Editor/ZendoEditor.tsx b/apps/web/src/components/Editor/ZendoEditor.tsx
index c1c2951..f1444c7 100644
--- a/apps/web/src/components/Editor/ZendoEditor.tsx
+++ b/apps/web/src/components/Editor/ZendoEditor.tsx
@@ -43,6 +43,7 @@ import { Database } from "@/types/supabase";
 import { useBlogTags } from "./Editor.queries";
 import { TagPicker } from "../Tags/TagPicker";
 import { cn } from "@/lib/utils";
+import { Checkbox } from "../ui/checkbox";
 
 const formSchema = z.object({
   title: z.string(),
@@ -364,16 +365,17 @@ export const ZendoEditor = (props: Props) => {
           )}
         </div>
         <div className="actions">
+          <Checkbox id="published" {...register("published")} />
           <Label
-            className="mr-2 flex items-center gap-2 text-sm font-semibold"
+            className="flex cursor-pointer items-center py-1.5 text-xs  font-medium text-zinc-600 transition-all hover:text-zinc-800"
             htmlFor="published"
           >
-            <input
+            {/* <input
               type="checkbox"
               id="published"
               {...register("published")}
               className="h-4 w-4 rounded-lg border-none border-zinc-200 bg-transparent p-2 text-zinc-800 outline-none transition-all hover:bg-zinc-50 focus-visible:bg-zinc-100"
-            />
+            /> */}
             Publish
           </Label>
           <Sheet>
diff --git a/apps/web/src/components/ui/checkbox.tsx b/apps/web/src/components/ui/checkbox.tsx
index a0a04f3..7b0779e 100644
--- a/apps/web/src/components/ui/checkbox.tsx
+++ b/apps/web/src/components/ui/checkbox.tsx
@@ -11,7 +11,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-5 w-5 shrink-0 rounded-md border border-slate-400 ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-orange-700 data-[state=checked]:bg-orange-500 data-[state=checked]:text-slate-50 dark:border-slate-800 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 dark:data-[state=checked]:bg-slate-50 dark:data-[state=checked]:text-slate-900",
+      "peer h-[18px] w-[18px] shrink-0 rounded-md border border-zinc-300 ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-orange-500 data-[state=checked]:bg-orange-500 data-[state=checked]:text-zinc-50 dark:border-zinc-800 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300 dark:data-[state=checked]:bg-zinc-50 dark:data-[state=checked]:text-zinc-900",
       className
     )}
     {...props}