wip

apps/web/src/components/ui/button.tsx

@@ -5,18 +5,17 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-orange-200 focus-visible focus-visible:border-orange-700  disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300 gap-1.5 [&>svg]:w-4 [&>svg]:opacity-60",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-semibold ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-orange-200 focus-visible focus-visible:border-orange-700  disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-zinc-950 ring-1 ring-transparent antialiased dark:focus-visible:ring-zinc-300 gap-1.5 [&>svg]:w-4 leading-none [&>svg]:opacity-60 active:scale-95",
   {
     variants: {
       variant: {
         default:
-          "bg-zinc-900 text-zinc-50 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/90 hover:bg-gradient-to-b hover:from-orange-400 hover:to-orange-600 dark:hover:from-orange-500 dark:hover:to-orange-600 text-white border border-zinc-700 hover:border-orange-500",
-        destructive:
-          "bg-red-500 text-zinc-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
+          "border border-slate-500/20 border-b-slate-800/70 border-t-slate-500/70 bg-gradient-to-b from-slate-700 to-slate-800 text-white shadow-md ring-slate-800 flex items-center hover:brightness-125",
+        destructive: "bg-red-500 text-zinc-50 hover:bg-red-500/90",
         outline:
-          "border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 text-zinc-600 dark:hover:text-zinc-50",
+          "border border-transparent ring-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900 text-zinc-600",
         secondary:
-          "bg-zinc-100 hover:bg-orange-100/70 hover:text-orange-600 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80 text-zinc-600",
+          "bg-zinc-100 hover:bg-orange-100/70 hover:text-orange-600 text-zinc-600",
         ghost:
           "hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 text-zinc-600",
         link: "text-zinc-800 underline-offset-4 hover:underline dark:text-zinc-50",

apps/web/src/pages/blogs/index.tsx

@@ -1,18 +1,18 @@
 import AppLayout from "@/layouts/AppLayout";
 import { useBlogsQuery } from "@/queries/blogs";
 import Link from "next/link";
-import { IoAdd } from "react-icons/io5";
 import { useRouter } from "next/router";
 import { Button } from "@/components/ui/button";
 import { PiPencilLine } from "react-icons/pi";
-import { Paintbrush, Plus, Settings } from "lucide-react";
+import { Paintbrush, Pencil, Plus, Settings } from "lucide-react";
 import { useUser } from "@/utils/supabase/browser";
-import { API } from "app/utils/api-client";
+import { useState } from "react";
 
 export default function Dashboard() {
   const user = useUser();
   const { data, error, isLoading } = useBlogsQuery({ enabled: !!user });
   const router = useRouter();
+  const [hovering, setHovering] = useState("");
 
   return (
     <AppLayout loading={isLoading}>
@@ -43,19 +43,21 @@ export default function Dashboard() {
               </Button>
             </div>
           )}
-          <ul className="mx-2 grid grid-cols-1 gap-2 sm:grid-cols-2">
+          <ul className="mx-2 grid grid-cols-1 gap-4 sm:grid-cols-2">
             {data?.map((blog) => {
               return (
                 <li
-                  className="group rounded-xl border border-zinc-200 bg-white shadow-sm transition-all hover:border-zinc-200"
+                  className="group rounded-xl border bg-white p-1 transition-all hover:border-zinc-200"
                   key={blog.id}
+                  onMouseEnter={() => setHovering(blog.id)}
+                  onMouseLeave={() => setHovering("")}
                 >
                   <Link
                     className="flex h-full w-full min-w-[320px] flex-col gap-3 rounded-xl p-3"
                     href={`/blogs/${blog.id}/posts`}
                   >
-                    <div className="flex items-center gap-4">
-                      <div>
+                    <div className="flex min-h-16 gap-4">
+                      <div className="">
                         <div className="flex h-12 w-12 items-center justify-center rounded-full border bg-zinc-50 text-3xl transition-all group-hover:scale-110">
                           {blog.emoji}
                         </div>
@@ -95,14 +97,13 @@ export default function Dashboard() {
                         <Settings size="24" />
                       </Button>
                       <Button
-                        variant={"outline"}
+                        variant={hovering === blog.id ? "default" : "outline"}
                         onClick={(e) => {
                           e.preventDefault();
                           e.stopPropagation();
                           router.push(`/blogs/${blog.id}/create`);
                         }}
                       >
-                        <IoAdd size="24" />
                         New post
                       </Button>
                     </div>