refactor: replace hardcoded BiasMeter colors with theme variables

mahek2016 · mahek2016 · commit 3e198faa729c · 2026-03-10T21:12:28.000+05:30
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
@@ -3,6 +3,7 @@ import "./globals.css"
 import type { Metadata } from "next"
 import { Inter } from "next/font/google"
 import { ThemeProvider } from "@/components/theme-provider"
+import Header from "@/components/header"
 
 const inter = Inter({ subsets: ["latin"] })
 
@@ -26,10 +27,16 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange={false}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange={false}
+        >
+          <Header />
           {children}
         </ThemeProvider>
       </body>
     </html>
   )
-}
+}
diff --git a/frontend/components/header.tsx b/frontend/components/header.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import Link from "next/link"
+import { ThemeToggle } from "./theme-toggle"
+
+export default function Header() {
+  return (
+    <header className="border-b bg-background">
+      <div className="container mx-auto flex items-center justify-between h-16 px-4">
+        <Link href="/" className="font-bold text-lg">
+          Perspective
+        </Link>
+
+        <nav className="flex items-center gap-4">
+          <Link href="/analyze">Analyze</Link>
+          <ThemeToggle />
+        </nav>
+      </div>
+    </header>
+  )
+}
