fix: TypeScript conflicts and improve navigation styling
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
CI / Frontend Build (push) Has been cancelled
CI / Backend Lint (push) Has been cancelled
CI / Backend Tests (push) Has been cancelled
CI / Docker Build (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
Deploy / Build & Push Images (push) Has been cancelled
Deploy / Deploy to Server (push) Has been cancelled
Deploy / Notify (push) Has been cancelled

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
This commit is contained in:
yves.gugger
2025-12-08 15:48:44 +01:00
parent 225d720e8a
commit 1efc7fe28e
2 changed files with 24 additions and 31 deletions

View File

@ -1304,9 +1304,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/baseline-browser-mapping": { "node_modules/baseline-browser-mapping": {
"version": "2.9.2", "version": "2.9.5",
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.2.tgz", "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.5.tgz",
"integrity": "sha512-PxSsosKQjI38iXkmb3d0Y32efqyA0uW4s41u4IVBsLlWLhCiYNpH/AfNOVWRqCQBlD8TFJTz6OUWNd4DFJCnmw==", "integrity": "sha512-D5vIoztZOq1XM54LUdttJVc96ggEsIfju2JBvht06pSzpckp3C7HReun67Bghzrtdsq9XdMGbSSB3v3GhMNmAA==",
"dev": true, "dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"bin": { "bin": {

View File

@ -1,22 +1,10 @@
'use client' 'use client'
import Link from 'next/link' import Link from 'next/link'
import Image from 'next/image'
import { useStore } from '@/lib/store' import { useStore } from '@/lib/store'
import { LogOut, LayoutDashboard, Menu, X, Settings } from 'lucide-react' import { LogOut, LayoutDashboard, Menu, X, Settings } from 'lucide-react'
import { useState } from '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() { export function Header() {
const { isAuthenticated, user, logout } = useStore() const { isAuthenticated, user, logout } = useStore()
const [mobileMenuOpen, setMobileMenuOpen] = useState(false) 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"> <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 */} {/* Left side: Logo + Nav Links */}
<div className="flex items-center gap-6 sm:gap-8"> <div className="flex items-center gap-6 sm:gap-8">
{/* Logo */} {/* Logo - Playfair Display (same as titles) */}
<Link href="/" className="group hover:opacity-80 transition-opacity duration-300"> <Link
<Logo /> 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> </Link>
{/* Left Nav Links (Desktop) */} {/* Left Nav Links (Desktop) - vertically centered */}
<nav className="hidden sm:flex items-center gap-1"> <nav className="hidden sm:flex items-center gap-1">
<Link <Link
href="/" 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" hover:bg-background-secondary rounded-lg transition-all duration-300"
> >
Domain Domain
</Link> </Link>
<Link <Link
href="/tld-pricing" 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" hover:bg-background-secondary rounded-lg transition-all duration-300"
> >
TLD TLD
</Link> </Link>
<Link <Link
href="/auctions" 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" hover:bg-background-secondary rounded-lg transition-all duration-300"
> >
Auctions Auctions
</Link> </Link>
<Link <Link
href="/pricing" 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" hover:bg-background-secondary rounded-lg transition-all duration-300"
> >
Plans Plans
@ -64,13 +57,13 @@ export function Header() {
</nav> </nav>
</div> </div>
{/* Right side: Auth Links */} {/* Right side: Auth Links - vertically centered */}
<nav className="hidden sm:flex items-center gap-1"> <nav className="hidden sm:flex items-center gap-1">
{isAuthenticated ? ( {isAuthenticated ? (
<> <>
<Link <Link
href="/dashboard" 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 hover:text-foreground hover:bg-background-secondary rounded-lg
transition-all duration-300" transition-all duration-300"
> >
@ -80,20 +73,20 @@ export function Header() {
<Link <Link
href="/settings" 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" title="Settings"
> >
<Settings className="w-4 h-4" /> <Settings className="w-4 h-4" />
</Link> </Link>
<div className="flex items-center gap-2 sm:gap-3 ml-2 pl-3 sm:pl-4 border-l border-border"> <div className="flex items-center gap-3 ml-2 pl-4 border-l border-border">
<span className="text-ui-sm sm:text-ui text-foreground-subtle hidden md:inline"> <span className="text-ui text-foreground-subtle hidden md:inline">
{user?.email} {user?.email}
</span> </span>
<button <button
onClick={logout} 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" rounded-lg transition-all duration-300"
title="Sign out" title="Sign out"
> >
@ -105,14 +98,14 @@ export function Header() {
<> <>
<Link <Link
href="/login" 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" hover:bg-background-secondary rounded-lg transition-all duration-300"
> >
Sign In Sign In
</Link> </Link>
<Link <Link
href="/register" 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" font-medium hover:bg-foreground/90 transition-all duration-300"
> >
Get Started Get Started