From 5ab1387165f5917468975d77551e6088c6a93443 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 23 Feb 2026 13:33:17 +0100
Subject: [PATCH] style: update Logo and Kit title styling in App Shell

---
 components/Logo.tsx              |  6 +++---
 components/layout/AppHeader.tsx  | 12 ++++++++----
 components/layout/AppSidebar.tsx |  4 ++--
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/components/Logo.tsx b/components/Logo.tsx
index 96d74d2..2f1aed0 100644
--- a/components/Logo.tsx
+++ b/components/Logo.tsx
@@ -7,7 +7,7 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
     <motion.svg
       width={size}
       height={size}
-      viewBox="0 0 200 200"
+      viewBox="0 0 64 64"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
@@ -17,7 +17,7 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
     >
       {/* Wrench (Lucide) - vertical */}
       <motion.g
-        transform="translate(100, 100) rotate(0) scale(5) translate(-12, -12)"
+        transform="translate(32, 32) rotate(0) scale(3.15) translate(-12.5, -11.5)"
         initial={{ pathLength: 0, opacity: 0 }}
         animate={{ pathLength: 1, opacity: 1 }}
         transition={{ duration: 1.2, ease: 'easeInOut' }}
@@ -35,7 +35,7 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
 
       {/* Brush (Lucide) - horizontal flipped */}
       <motion.g
-        transform="translate(100, 97) rotate(90) scale(5) translate(-12, -12)"
+        transform="translate(32, 30) rotate(90) scale(3.025) translate(-11.25, -11)"
         initial={{ pathLength: 0, opacity: 0 }}
         animate={{ pathLength: 1, opacity: 1 }}
         transition={{ duration: 1.2, delay: 0.3, ease: 'easeInOut' }}
diff --git a/components/layout/AppHeader.tsx b/components/layout/AppHeader.tsx
index b0c324a..41e535a 100644
--- a/components/layout/AppHeader.tsx
+++ b/components/layout/AppHeader.tsx
@@ -8,6 +8,7 @@ import { Button } from '@/components/ui/Button';
 import { useTheme } from '@/components/providers/ThemeProvider';
 import { cn } from '@/lib/utils/cn';
 import { useSidebar } from './SidebarProvider';
+import Logo from '@/components/Logo';
 
 export function AppHeader() {
   const pathname = usePathname();
@@ -28,9 +29,12 @@ export function AppHeader() {
           {isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
         </Button>
         
-        <nav className="hidden sm:flex items-center text-sm font-medium text-muted-foreground">
-          <Link href="/" className="hover:text-foreground transition-colors flex items-center gap-2">
-            <span>Kit</span>
+        <nav className="flex items-center text-sm font-medium">
+          <Link href="/" className="flex items-center gap-2 group">
+            <Logo size={20} />
+            <span className="font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400 group-hover:opacity-80 transition-opacity">
+              Kit
+            </span>
           </Link>
           {pathSegments.map((segment, index) => {
             const href = `/${pathSegments.slice(0, index + 1).join('/')}`;
@@ -43,7 +47,7 @@ export function AppHeader() {
                   href={href}
                   className={cn(
                     "capitalize transition-colors",
-                    isLast ? "text-foreground font-semibold" : "hover:text-foreground"
+                    isLast ? "text-foreground font-semibold" : "text-muted-foreground hover:text-foreground font-medium"
                   )}
                 >
                   {segment.replace(/-/g, ' ')}
diff --git a/components/layout/AppSidebar.tsx b/components/layout/AppSidebar.tsx
index 4aaf20e..907cdf9 100644
--- a/components/layout/AppSidebar.tsx
+++ b/components/layout/AppSidebar.tsx
@@ -111,10 +111,10 @@ export function AppSidebar() {
         <div className="flex h-16 items-center justify-between px-6 shrink-0 border-b border-border">
           <Link href="/" className="flex items-center gap-3 group overflow-hidden">
             <div className="shrink-0">
-              <Logo size={isCollapsed ? 32 : 32} />
+              <Logo size={isCollapsed ? 24 : 24} />
             </div>
             {!isCollapsed && (
-              <span className="font-bold text-xl bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-400 to-cyan-400 group-hover:opacity-80 transition-opacity whitespace-nowrap">
+              <span className="font-bold text-xl bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400 group-hover:opacity-80 transition-opacity whitespace-nowrap">
                 Kit
               </span>
             )}