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
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:
6
frontend/package-lock.json
generated
6
frontend/package-lock.json
generated
@ -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": {
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user