yvg/pounce
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/package-lock.json generated
View File

@ -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": {

49
frontend/src/components/Header.tsx
View File

@ -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