From 803e13001ade185fce4077d94466c366f2b8db27 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Mon, 1 Sep 2025 17:44:16 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Refactor=20header=20com?=
 =?UTF-8?q?ponent;=20streamline=20button=20classes=20and=20improve=20layou?=
 =?UTF-8?q?t=20consistency?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/header.svelte | 30 +++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/layout/header.svelte b/src/components/layout/header.svelte
index a786aea..08260ed 100644
--- a/src/components/layout/header.svelte
+++ b/src/components/layout/header.svelte
@@ -18,11 +18,6 @@
   }
 
   let { githubStars }: HeaderProps = $props();
-
-  const headerItemsClasses = cn(
-    buttonVariants({ variant: "ghost" }),
-    "hover:bg-neutral-200 dark:hover:bg-neutral-800",
-  );
 </script>
 
 <header
@@ -39,24 +34,35 @@
       </a>
       <SvglVersion />
     </div>
-    <div class="flex h-8 items-center">
-      <div class="flex items-center space-x-0.5">
+    <div class="flex h-5 items-center space-x-2.5">
+      <div class="flex items-center space-x-1.5">
         <a
           target="_blank"
           title="X/Twitter"
           href={globals.twitterUrl}
-          class={cn(headerItemsClasses, "h-9 w-9")}
+          class={cn(
+            buttonVariants({ variant: "ghost", size: "icon" }),
+            "hover:bg-neutral-200 dark:hover:bg-neutral-800",
+          )}
         >
           <Twitter size={18} />
         </a>
-        <ModeToggle className={cn(headerItemsClasses, "h-9 w-9")} />
+        <ModeToggle
+          className={cn(
+            buttonVariants({ variant: "ghost", size: "icon" }),
+            "hover:bg-neutral-200 dark:hover:bg-neutral-800",
+          )}
+        />
       </div>
-      <Separator orientation="vertical" class="mx-2 h-8" />
+      <Separator orientation="vertical" />
       <a
         target="_blank"
         title="GitHub Repository"
         href={globals.githubUrl}
-        class={cn(headerItemsClasses, "h-9 w-fit")}
+        class={cn(
+          buttonVariants({ variant: "ghost" }),
+          "w-fit hover:bg-neutral-200 dark:hover:bg-neutral-800",
+        )}
       >
         <Github size={20} />
         <span class="text-neutral-600 dark:text-neutral-400">
@@ -65,7 +71,7 @@
             : githubStars.toLocaleString()}
         </span>
       </a>
-      <Separator orientation="vertical" class="mr-3 ml-2" />
+      <Separator orientation="vertical" />
       <a
         target="_blank"
         href={globals.submitUrl}