style(header): proto2 chrome and spacing

This commit is contained in:
zetaloop
2026-02-25 03:27:32 +08:00
parent ee926ac393
commit b944847fbd
+13 -13
View File
@@ -91,9 +91,9 @@ export function Header() {
: "/settings"
return (
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<div className="container mx-auto grid h-14 grid-cols-[1fr_auto_1fr] items-center gap-4 px-4">
<div className="flex items-center gap-4">
<header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/80 backdrop-blur-md supports-[backdrop-filter]:bg-background/60">
<div className="container mx-auto flex h-16 items-center justify-between px-4 md:px-6">
<div className="flex items-center gap-6">
<Link href="/" className="flex items-center gap-2 font-bold text-lg shrink-0">
<Gamepad2 className="h-5 w-5" />
@@ -105,9 +105,9 @@ export function Header() {
key={link.href}
href={link.href}
className={cn(
"px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
"px-3 py-1.5 rounded-full text-sm font-medium transition-colors",
pathname === link.href || (link.href !== "/" && pathname.startsWith(link.href))
? "bg-accent text-accent-foreground"
? "bg-primary/10 text-primary"
: "text-muted-foreground hover:text-foreground hover:bg-accent/50",
)}
>
@@ -121,7 +121,7 @@ export function Header() {
<>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="sm" className="hidden md:flex text-xs h-8">
<Button variant="ghost" size="sm" className="hidden md:flex text-xs h-8 text-muted-foreground hover:text-foreground">
{roleLabels[currentRole]}
</Button>
</DropdownMenuTrigger>
@@ -140,7 +140,7 @@ export function Header() {
</DropdownMenuContent>
</DropdownMenu>
<Button variant="ghost" size="icon" className="relative h-9 w-9" asChild>
<Button variant="ghost" size="icon" className="relative h-9 w-9 text-muted-foreground hover:text-foreground" asChild>
<Link href="/notifications">
<Bell className="h-4 w-4" />
{unreadCount > 0 && (
@@ -153,7 +153,7 @@ export function Header() {
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="rounded-full h-9 w-9">
<Button variant="ghost" size="icon" className="rounded-full h-9 w-9 text-muted-foreground hover:text-foreground">
<Avatar className="h-7 w-7">
<AvatarImage src={user?.avatar} />
<AvatarFallback>{user?.nickname?.[0] ?? "?"}</AvatarFallback>
@@ -224,7 +224,7 @@ export function Header() {
<Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
<SheetTrigger asChild>
<Button variant="ghost" size="icon" className="md:hidden h-9 w-9">
<Button variant="ghost" size="icon" className="md:hidden h-9 w-9 text-muted-foreground hover:text-foreground">
<Menu className="h-5 w-5" />
</Button>
</SheetTrigger>
@@ -256,10 +256,10 @@ export function Header() {
href={link.href}
onClick={() => setMobileOpen(false)}
className={cn(
"px-3 py-2 rounded-md text-sm font-medium transition-colors",
"px-3 py-2 rounded-full text-sm font-medium transition-colors",
pathname === link.href ||
(link.href !== "/" && pathname.startsWith(link.href))
? "bg-accent text-accent-foreground"
? "bg-primary/10 text-primary"
: "text-muted-foreground hover:text-foreground hover:bg-accent/50",
)}
>
@@ -271,14 +271,14 @@ export function Header() {
<Link
href="/wallet"
onClick={() => setMobileOpen(false)}
className="px-3 py-2 rounded-md text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent/50"
className="px-3 py-2 rounded-full text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent/50"
>
</Link>
<Link
href="/settings"
onClick={() => setMobileOpen(false)}
className="px-3 py-2 rounded-md text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent/50"
className="px-3 py-2 rounded-full text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent/50"
>
</Link>