From 1fe950f55b27e63392df9e05039cde617ac665d3 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 8 Feb 2024 08:44:56 -0600
Subject: [PATCH] a few style updates to better match figma (#9745)

---
 web/src/components/Chip.tsx      |  2 +-
 web/src/components/Header.tsx    | 29 +++-------------------
 web/src/components/Sidebar.tsx   | 42 +-------------------------------
 web/src/components/ui/button.tsx |  3 ++-
 web/src/pages/site-navigation.ts | 34 ++++++++++++++++++++++++++
 5 files changed, 41 insertions(+), 69 deletions(-)
 create mode 100644 web/src/pages/site-navigation.ts

diff --git a/web/src/components/Chip.tsx b/web/src/components/Chip.tsx
index 8333a8f78..ce7d0886e 100644
--- a/web/src/components/Chip.tsx
+++ b/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>
   );
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index c84e6afd6..608a5281c 100644
--- a/web/src/components/Header.tsx
+++ b/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"
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index cbe78fa8e..b12c76f06 100644
--- a/web/src/components/Sidebar.tsx
+++ b/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,
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index e51f78f89..e96ee22f3 100644
--- a/web/src/components/ui/button.tsx
+++ b/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: {
diff --git a/web/src/pages/site-navigation.ts b/web/src/pages/site-navigation.ts
new file mode 100644
index 000000000..ab94a9cd7
--- /dev/null
+++ b/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,
+    },
+  ];
\ No newline at end of file