style(ui): adjust primitives, card shadow and header nav

app/globals.css

@@ -49,7 +49,7 @@
 }
 
 :root {
-  --radius: 0.5rem;
+  --radius: 0.625rem;
   --background: oklch(0.99 0 0);
   --foreground: oklch(0.14 0 0);
   --card: oklch(1 0 0);

components/header.tsx

@@ -100,20 +100,20 @@ export function Header() {
           </Link>
 
           <nav className="hidden md:flex items-center gap-1">
-            {navLinks.map((link) => (
+            {navLinks.map((link) => {
-              <Link
+              const isActive =
-                key={link.href}
-                href={link.href}
-                className={cn(
-                  "rounded-lg px-4 py-2 text-sm font-medium transition-colors",
                 pathname === link.href || (link.href !== "/" && pathname.startsWith(link.href))
-                    ? "bg-secondary text-foreground"
+              return (
-                    : "text-muted-foreground hover:bg-secondary/60 hover:text-foreground",
+                <Button
-                )}
+                  key={link.href}
+                  variant={isActive ? "secondary" : "ghost"}
+                  className={!isActive ? "text-muted-foreground" : undefined}
+                  asChild
                 >
-                {link.label}
+                  <Link href={link.href}>{link.label}</Link>
-              </Link>
+                </Button>
-            ))}
+              )
+            })}
           </nav>
         </div>
         <div className="flex items-center justify-end gap-1">
@@ -227,11 +227,11 @@ export function Header() {
               </DropdownMenu>
             </>
           ) : (
-            <div className="hidden md:flex items-center gap-2">
+            <div className="hidden md:flex items-center gap-1">
-              <Button variant="ghost" size="sm" asChild>
+              <Button variant="ghost" className="text-muted-foreground" asChild>
                 <Link href="/login">登录</Link>
               </Button>
-              <Button size="sm" asChild>
+              <Button variant="ghost" className="text-muted-foreground" asChild>
                 <Link href="/register">注册</Link>
               </Button>
             </div>

components/ui/button.tsx

@@ -20,13 +20,13 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-sm px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",
-        "icon-xs": "size-6 rounded-sm [&_svg:not([class*='size-'])]:size-3",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8 rounded-md",
+        "icon-sm": "size-8",
-        "icon-lg": "size-10 rounded-md",
+        "icon-lg": "size-10",
       },
     },
     defaultVariants: {

components/ui/card.tsx

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-lg border py-6 shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-card-hover)] transition-shadow duration-200 ease-in-out",
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
         className,
       )}
       {...props}

components/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className,