From 1efc7fe28e9e80dbde72d59b8262048ba443ef3d Mon Sep 17 00:00:00 2001
From: "yves.gugger" <yves.gugger@gentwo.com>
Date: Mon, 8 Dec 2025 15:48:44 +0100
Subject: [PATCH] fix: TypeScript conflicts and improve navigation styling

TypeScript Fixes:
- Cleared TypeScript cache to resolve @types/node conflicts
- Reinstalled node_modules with fresh package-lock.json
- Removed duplicate type definitions from cache

Navigation Improvements:
- Logo uses Playfair Display font (same as titles)
- Consistent font-display class for 'pounce' wordmark
- Perfect vertical centering using flex + h-9 for all nav items
- Removed unused Image import
- Unified button/link heights (36px/h-9) for visual consistency
- Improved hover states with consistent sizing
---
 frontend/package-lock.json         |  6 ++--
 frontend/src/components/Header.tsx | 49 +++++++++++++-----------------
 2 files changed, 24 insertions(+), 31 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 526bc20..9d47cd2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1304,9 +1304,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.2.tgz",
-      "integrity": "sha512-PxSsosKQjI38iXkmb3d0Y32efqyA0uW4s41u4IVBsLlWLhCiYNpH/AfNOVWRqCQBlD8TFJTz6OUWNd4DFJCnmw==",
+      "version": "2.9.5",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.5.tgz",
+      "integrity": "sha512-D5vIoztZOq1XM54LUdttJVc96ggEsIfju2JBvht06pSzpckp3C7HReun67Bghzrtdsq9XdMGbSSB3v3GhMNmAA==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 7a44132..ad196ea 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,22 +1,10 @@
 'use client'
 
 import Link from 'next/link'
-import Image from 'next/image'
 import { useStore } from '@/lib/store'
 import { LogOut, LayoutDashboard, Menu, X, Settings } from 'lucide-react'
 import { useState } from 'react'
 
-// Logo Component - Text Wordmark
-function Logo() {
-  return (
-    <div className="relative flex items-center">
-      <span className="font-display text-[1.5rem] sm:text-[1.75rem] font-bold tracking-tight text-foreground">
-        pounce
-      </span>
-    </div>
-  )
-}
-
 export function Header() {
   const { isAuthenticated, user, logout } = useStore()
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
@@ -26,37 +14,42 @@ export function Header() {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 h-16 sm:h-20 flex items-center justify-between">
         {/* Left side: Logo + Nav Links */}
         <div className="flex items-center gap-6 sm:gap-8">
-          {/* Logo */}
-          <Link href="/" className="group hover:opacity-80 transition-opacity duration-300">
-            <Logo />
+          {/* Logo - Playfair Display (same as titles) */}
+          <Link 
+            href="/" 
+            className="flex items-center hover:opacity-80 transition-opacity duration-300"
+          >
+            <span className="font-display text-xl sm:text-2xl font-bold tracking-[-0.02em] text-foreground leading-none">
+              pounce
+            </span>
           </Link>
 
-          {/* Left Nav Links (Desktop) */}
+          {/* Left Nav Links (Desktop) - vertically centered */}
           <nav className="hidden sm:flex items-center gap-1">
             <Link
               href="/"
-              className="px-3 py-1.5 text-ui text-foreground-muted hover:text-foreground 
+              className="flex items-center h-9 px-3 text-ui text-foreground-muted hover:text-foreground 
                          hover:bg-background-secondary rounded-lg transition-all duration-300"
             >
               Domain
             </Link>
             <Link
               href="/tld-pricing"
-              className="px-3 py-1.5 text-ui text-foreground-muted hover:text-foreground 
+              className="flex items-center h-9 px-3 text-ui text-foreground-muted hover:text-foreground 
                          hover:bg-background-secondary rounded-lg transition-all duration-300"
             >
               TLD
             </Link>
             <Link
               href="/auctions"
-              className="px-3 py-1.5 text-ui text-foreground-muted hover:text-foreground 
+              className="flex items-center h-9 px-3 text-ui text-foreground-muted hover:text-foreground 
                          hover:bg-background-secondary rounded-lg transition-all duration-300"
             >
               Auctions
             </Link>
             <Link
               href="/pricing"
-              className="px-3 py-1.5 text-ui text-foreground-muted hover:text-foreground 
+              className="flex items-center h-9 px-3 text-ui text-foreground-muted hover:text-foreground 
                          hover:bg-background-secondary rounded-lg transition-all duration-300"
             >
               Plans
@@ -64,13 +57,13 @@ export function Header() {
           </nav>
         </div>
 
-        {/* Right side: Auth Links */}
+        {/* Right side: Auth Links - vertically centered */}
         <nav className="hidden sm:flex items-center gap-1">
           {isAuthenticated ? (
             <>
               <Link
                 href="/dashboard"
-                className="flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 text-ui-sm sm:text-ui text-foreground-muted 
+                className="flex items-center gap-2 h-9 px-4 text-ui text-foreground-muted 
                            hover:text-foreground hover:bg-background-secondary rounded-lg
                            transition-all duration-300"
               >
@@ -80,20 +73,20 @@ export function Header() {
               
               <Link
                 href="/settings"
-                className="p-2 text-foreground-subtle hover:text-foreground hover:bg-background-secondary rounded-lg transition-all duration-300"
+                className="flex items-center justify-center w-9 h-9 text-foreground-subtle hover:text-foreground hover:bg-background-secondary rounded-lg transition-all duration-300"
                 title="Settings"
               >
                 <Settings className="w-4 h-4" />
               </Link>
               
-              <div className="flex items-center gap-2 sm:gap-3 ml-2 pl-3 sm:pl-4 border-l border-border">
-                <span className="text-ui-sm sm:text-ui text-foreground-subtle hidden md:inline">
+              <div className="flex items-center gap-3 ml-2 pl-4 border-l border-border">
+                <span className="text-ui text-foreground-subtle hidden md:inline">
                   {user?.email}
                 </span>
                 
                 <button
                   onClick={logout}
-                  className="p-1.5 sm:p-2 text-foreground-subtle hover:text-foreground hover:bg-background-secondary 
+                  className="flex items-center justify-center w-9 h-9 text-foreground-subtle hover:text-foreground hover:bg-background-secondary 
                              rounded-lg transition-all duration-300"
                   title="Sign out"
                 >
@@ -105,14 +98,14 @@ export function Header() {
             <>
               <Link
                 href="/login"
-                className="px-3 sm:px-4 py-1.5 sm:py-2 text-ui-sm sm:text-ui text-foreground-muted hover:text-foreground 
+                className="flex items-center h-9 px-4 text-ui text-foreground-muted hover:text-foreground 
                            hover:bg-background-secondary rounded-lg transition-all duration-300"
               >
                 Sign In
               </Link>
               <Link
                 href="/register"
-                className="ml-1 sm:ml-2 text-ui-sm sm:text-ui px-4 sm:px-5 py-2 sm:py-2.5 bg-foreground text-background rounded-lg
+                className="flex items-center h-9 ml-2 px-5 text-ui bg-foreground text-background rounded-lg
                            font-medium hover:bg-foreground/90 transition-all duration-300"
               >
                 Get Started