Refine root UI around shadcn primitives

components/root/portfolio-subnav.tsx

@@ -5,13 +5,13 @@ import { CardContent } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
 
 type PortfolioSubnavProps = {
-  active: "overview" | "categories";
+  active: "projects" | "categories";
 };
 
 const items = [
   {
-    key: "overview",
-    label: "Uebersicht",
+    key: "projects",
+    label: "Projekte",
     href: "/root/portfolio",
   },
   {
@@ -30,10 +30,10 @@ export function PortfolioSubnav({ active }: PortfolioSubnavProps) {
             key={item.key}
             href={item.href}
             className={cn(
-              "rounded-pill border px-4 py-2 text-sm transition-colors",
+              "rounded-md border px-4 py-2 text-sm transition-colors",
               active === item.key
-                ? "border-border-strong bg-foreground text-background"
-                : "border-border bg-background text-foreground/75 hover:border-border-strong hover:text-foreground",
+                ? "border-input bg-primary text-primary-foreground"
+                : "border-input bg-background text-foreground/75 hover:bg-accent hover:text-accent-foreground",
             )}
           >
             {item.label}