Update theme to be more like coder/coder

Author: BrunoQuaresma

chat/src/app/globals.css

@@ -79,7 +79,7 @@
 }
 
 .dark {
-  --background: oklch(0.129 0.042 264.695);
+  --background: oklch(0.14 0 0);
   --foreground: oklch(0.984 0.003 247.858);
   --card: oklch(0.208 0.042 265.755);
   --card-foreground: oklch(0.984 0.003 247.858);
@@ -90,11 +90,11 @@
   --secondary: oklch(0.279 0.041 260.031);
   --secondary-foreground: oklch(0.984 0.003 247.858);
   --muted: oklch(0.279 0.041 260.031);
-  --muted-foreground: oklch(0.704 0.04 256.788);
+  --muted-foreground: oklch(0.7118 0.0129 286.07);
   --accent: oklch(0.279 0.041 260.031);
   --accent-foreground: oklch(0.984 0.003 247.858);
   --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
+  --border: oklch(0.27 0.01 0);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.551 0.027 264.364);
   --chart-1: oklch(0.488 0.243 264.376);

chat/src/app/page.tsx

@@ -1,6 +1,6 @@
 import { Chat } from "@/components/chat";
-import { ChatProvider, useChat } from "@/components/chat-provider";
-import { ModeToggle } from "@/components/mode-toggle";
+import { ChatProvider } from "@/components/chat-provider";
+import { Header } from "./header";
 
 export default function Home() {
   return (
@@ -12,30 +12,3 @@ export default function Home() {
     </ChatProvider>
   );
 }
-
-function Header() {
-  const { serverStatus } = useChat();
-
-  return (
-    <header className="p-4 flex items-center justify-between border-b">
-      <span className="font-bold">AgentAPI Chat</span>
-
-      <div className="flex items-center gap-4">
-        {serverStatus !== "unknown" && (
-          <div className="flex items-center gap-2 text-sm font-medium">
-            <span
-              className={`text-secondary w-2 h-2 rounded-full ${
-                ["offline", "unknown"].includes(serverStatus)
-                  ? "bg-red-500 ring-2 ring-red-500/35"
-                  : "bg-green-500 ring-2 ring-green-500/35"
-              }`}
-            />
-            <span className="sr-only">Status:</span>
-            <span className="first-letter:uppercase">{serverStatus}</span>
-          </div>
-        )}
-        <ModeToggle />
-      </div>
-    </header>
-  );
-}

chat/src/components/message-input.tsx

@@ -175,7 +175,7 @@ export default function MessageInput({
             </div>
 
             <div className="flex items-center justify-between p-4">
-              <TabsList>
+              <TabsList className="bg-transparent">
                 <TabsTrigger
                   value="text"
                   onClick={() => {