From ee1cea6d01bbf38c88f645aabc50ddd337048269 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 8 Mar 2026 19:16:04 +0100
Subject: [PATCH] style: match logout button hover to other icon buttons,
 destructive color on hover

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/frontend/src/lib/components/header/header.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/lib/components/header/header.svelte b/packages/frontend/src/lib/components/header/header.svelte
index 4bd1921..43a1514 100644
--- a/packages/frontend/src/lib/components/header/header.svelte
+++ b/packages/frontend/src/lib/components/header/header.svelte
@@ -144,13 +144,14 @@
             </a>
 
             <Button
-              variant="ghost"
+              variant="link"
               size="icon"
-              class="h-8 w-8 rounded-full text-foreground hover:text-destructive hover:bg-destructive/10"
+              class="h-9 w-9 rounded-full p-0 relative text-foreground/80 group hover:text-destructive"
               onclick={handleLogout}
               title={$_("header.logout")}
             >
               <span class="icon-[ri--logout-circle-r-line] h-4 w-4"></span>
+              <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-destructive transition-all duration-300 group-hover:w-full"></span>
             </Button>
           </div>
         </div>