a few style updates to better match figma (#9745)

web/src/components/Chip.tsx

@@ -6,7 +6,7 @@ type ChipProps = {
 };
 export default function Chip({ className, children }: ChipProps) {
   return (
-    <div className={`flex p-1 rounded-lg items-center ${className}`}>
+    <div className={`flex px-2 py-1.5 rounded-2xl items-center ${className}`}>
       {children}
     </div>
   );

web/src/components/Header.tsx

@@ -57,36 +57,13 @@ import ActivityIndicator from "./ui/activity-indicator";
 import { useRestart } from "@/api/ws";
 import { ENV } from "@/env";
 import { NavLink } from "react-router-dom";
+import { navbarLinks } from "@/pages/site-navigation";
 
 type HeaderProps = {
   onToggleNavbar: () => void;
 };
 
 function HeaderNavigation() {
-  const navbarLinks = [
-    {
-      id: 1,
-      title: "Live",
-      url: "/",
-    },
-    {
-      id: 2,
-      title: "History",
-      url: "/history",
-    },
-    {
-      id: 3,
-      title: "Export",
-      url: "/export",
-    },
-    {
-      id: 4,
-      title: "UI Playground",
-      url: "/playground",
-      dev: true,
-    },
-  ];
-
   return (
     <div className="hidden md:flex">
       {navbarLinks.map((item) => {
@@ -97,7 +74,7 @@ function HeaderNavigation() {
               key={item.id}
               to={item.url}
               className={({ isActive }) =>
-                `py-4 px-2 flex flex-row items-center text-center rounded-lg gap-2 hover:bg-border ${
+                `my-2 py-3 px-4 text-muted-foreground flex flex-row items-center text-center rounded-lg gap-2 hover:bg-border ${
                   isActive ? "font-bold bg-popover text-popover-foreground" : ""
                 }`
               }
@@ -145,7 +122,7 @@ function Header({ onToggleNavbar }: HeaderProps) {
 
   return (
     <div className="flex gap-10 lg:gap-20 justify-between pt-2 mb-2 border-b-[1px] px-4 items-center">
-      <div className="flex gap-4 items-center flex-shrink-0 m-5">
+      <div className="flex gap-4 items-center flex-shrink-0 m-1">
         <Button
           variant="ghost"
           size="icon"

web/src/components/Sidebar.tsx

@@ -1,49 +1,9 @@
 import { IconType } from "react-icons";
-import {
-  LuConstruction,
-  LuFileUp,
-  LuFilm,
-  LuLayoutDashboard,
-  LuVideo,
-} from "react-icons/lu";
 import { NavLink } from "react-router-dom";
 import { Sheet, SheetContent } from "@/components/ui/sheet";
 import Logo from "./Logo";
 import { ENV } from "@/env";
-
-const navbarLinks = [
-  {
-    id: 1,
-    icon: LuLayoutDashboard,
-    title: "Dashboard",
-    url: "/",
-  },
-  {
-    id: 2,
-    icon: LuVideo,
-    title: "Live",
-    url: "/live",
-  },
-  {
-    id: 3,
-    icon: LuFilm,
-    title: "History",
-    url: "/history",
-  },
-  {
-    id: 4,
-    icon: LuFileUp,
-    title: "Export",
-    url: "/export",
-  },
-  {
-    id: 5,
-    icon: LuConstruction,
-    title: "UI Playground",
-    url: "/playground",
-    dev: true,
-  },
-];
+import { navbarLinks } from "@/pages/site-navigation";
 
 function Sidebar({
   sheetOpen,

web/src/components/ui/button.tsx

@@ -16,7 +16,8 @@ const buttonVariants = cva(
           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        ghost:
+          "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {

web/src/pages/site-navigation.ts

@@ -0,0 +1,34 @@
+import {
+    LuConstruction,
+    LuFileUp,
+    LuFilm,
+    LuVideo,
+  } from "react-icons/lu";
+
+export const navbarLinks = [
+    {
+      id: 1,
+      icon: LuVideo,
+      title: "Live",
+      url: "/",
+    },
+    {
+      id: 2,
+      icon: LuFilm,
+      title: "History",
+      url: "/history",
+    },
+    {
+      id: 3,
+      icon: LuFileUp,
+      title: "Export",
+      url: "/export",
+    },
+    {
+      id: 4,
+      icon: LuConstruction,
+      title: "UI Playground",
+      url: "/playground",
+      dev: true,
+    },
+  ];