From 8ee56881687873b481834c2fcb79b6ea045660cb Mon Sep 17 00:00:00 2001
From: Dmytro Stanchiev <git@dmytros.dev>
Date: Wed, 8 Apr 2026 00:56:13 -0400
Subject: [PATCH] feat(sign-in): add icons, use ghost variant and sm size for
 header buttons

---
 src/components/sign-in.tsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/sign-in.tsx b/src/components/sign-in.tsx
index 314382c..48225ea 100644
--- a/src/components/sign-in.tsx
+++ b/src/components/sign-in.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { LogIn, LogOut } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
@@ -19,25 +20,31 @@ export default function SignIn() {
 	};
 
 	if (isPending) {
-		return <div className="h-8 w-16 bg-muted animate-pulse rounded"></div>;
+		return <div className="h-8 w-16 bg-muted animate-pulse rounded-md" />;
 	}
 
 	if (session?.user) {
 		return (
-			<div className="flex items-center gap-4">
-				<Button onClick={handleSignOut} variant="ghost" size="default">
-					Sign Out
-				</Button>
-			</div>
+			<Button
+				onClick={handleSignOut}
+				variant="ghost"
+				size="sm"
+				className="h-8 text-xs text-muted-foreground"
+			>
+				<LogOut className="h-3.5 w-3.5 mr-1.5" />
+				Sign Out
+			</Button>
 		);
 	}
 
 	return (
 		<Button
 			onClick={() => router.push("/auth/signin")}
-			variant="outline"
-			size="default"
+			variant="ghost"
+			size="sm"
+			className="h-8 text-xs"
 		>
+			<LogIn className="h-3.5 w-3.5 mr-1.5" />
 			Sign In
 		</Button>
 	);