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" : "/settings"
return ( return (
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"> <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 grid h-14 grid-cols-[1fr_auto_1fr] items-center gap-4 px-4"> <div className="container mx-auto flex h-16 items-center justify-between px-4 md:px-6">
<div className="flex items-center gap-4"> <div className="flex items-center gap-6">
<Link href="/" className="flex items-center gap-2 font-bold text-lg shrink-0"> <Link href="/" className="flex items-center gap-2 font-bold text-lg shrink-0">
<Gamepad2 className="h-5 w-5" /> <Gamepad2 className="h-5 w-5" />
@@ -105,9 +105,9 @@ export function Header() {
key={link.href} key={link.href}
href={link.href} href={link.href}
className={cn( 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)) 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", : "text-muted-foreground hover:text-foreground hover:bg-accent/50",
)} )}
> >
@@ -121,7 +121,7 @@ export function Header() {
<> <>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <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]} {roleLabels[currentRole]}
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
@@ -140,7 +140,7 @@ export function Header() {
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </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"> <Link href="/notifications">
<Bell className="h-4 w-4" /> <Bell className="h-4 w-4" />
{unreadCount > 0 && ( {unreadCount > 0 && (
@@ -153,7 +153,7 @@ export function Header() {
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <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"> <Avatar className="h-7 w-7">
<AvatarImage src={user?.avatar} /> <AvatarImage src={user?.avatar} />
<AvatarFallback>{user?.nickname?.[0] ?? "?"}</AvatarFallback> <AvatarFallback>{user?.nickname?.[0] ?? "?"}</AvatarFallback>
@@ -224,7 +224,7 @@ export function Header() {
<Sheet open={mobileOpen} onOpenChange={setMobileOpen}> <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
<SheetTrigger asChild> <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" /> <Menu className="h-5 w-5" />
</Button> </Button>
</SheetTrigger> </SheetTrigger>
@@ -256,10 +256,10 @@ export function Header() {
href={link.href} href={link.href}
onClick={() => setMobileOpen(false)} onClick={() => setMobileOpen(false)}
className={cn( 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 || pathname === link.href ||
(link.href !== "/" && pathname.startsWith(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", : "text-muted-foreground hover:text-foreground hover:bg-accent/50",
)} )}
> >
@@ -271,14 +271,14 @@ export function Header() {
<Link <Link
href="/wallet" href="/wallet"
onClick={() => setMobileOpen(false)} 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>
<Link <Link
href="/settings" href="/settings"
onClick={() => setMobileOpen(false)} 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>