feat(sign-in): add icons, use ghost variant and sm size for header buttons

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
-				<Button onClick={handleSignOut} variant="ghost" size="default">
+				onClick={handleSignOut}
-					Sign Out
+				variant="ghost"
-				</Button>
+				size="sm"
-			</div>
+				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"
+			variant="ghost"
-			size="default"
+			size="sm"
+			className="h-8 text-xs"
 		>
+			<LogIn className="h-3.5 w-3.5 mr-1.5" />
 			Sign In
 		</Button>
 	);