style(colors): changed colors

using slate and grey colors for the most part with violot bc why not

web-app/src/app/index.jsx

@@ -3,7 +3,7 @@ import ChatLayout from "src/components/layouts/chat-layout";
 
 function App() {
   return (
-    <div className="min-h-screen bg-slate-900 text-white flex items-center justify-center p-6">
+    <div className="dark min-h-screen bg-gray-950 text-white flex items-center justify-center p-6">
       <ChatLayout />
     </div>
   );

web-app/src/components/layouts/chat-layout.jsx

@@ -25,7 +25,7 @@ export default function ChatLayout() {
   }
 
   return (
-    <div className="flex flex-col h-[80vh] max-w-3xl mx-auto rounded-lg overflow-hidden shadow-lg">
+    <div className="flex flex-col">
       <ChatHeader />
       <ChatWindow messages={messages} />
       <MessageInput onSend={handleSend} />

web-app/src/components/ui/button/action-button.css

@@ -1,29 +0,0 @@
-.action-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  border: 2px solid var(--btn-color);
-  border-radius: 6px;
-  background-color: white;
-  color: var(--btn-color);
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.25s ease;
-}
-
-.action-btn:hover,
-.action-btn:focus {
-  background-color: var(--btn-color);
-  color: white;
-  border-color: var(--btn-color);
-}
-
-.action-btn svg {
-  fill: currentColor;
-  transition: fill 0.25s ease;
-}
-
-.action-btn:hover {
-  transform: translateY(-1px);
-}

web-app/src/components/ui/button/action-button.jsx

@@ -6,43 +6,6 @@ export default function ActionButton({
   type = "add", // 'add' or 'delete'
   ...props
 }) {
-  // Define color and icon based on type
-  const config = {
-    add: {
-      color: "#0F2862",
-      svg: (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          fill="currentColor"
-          viewBox="0 0 16 16"
-        >
-          <path
-            fillRule="evenodd"
-            d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"
-          />
-        </svg>
-      ),
-    },
-    delete: {
-      color: "#9E363A",
-      svg: (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          fill="currentColor"
-          viewBox="0 0 16 16"
-        >
-          <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5" />
-        </svg>
-      ),
-    },
-  };
-
-  const { color, svg } = config[type] || config.add;
-
   return (
     <button
       onClick={onClick}

web-app/src/components/ui/chat/chat-header.jsx

@@ -2,8 +2,10 @@ import React from "react";
 
 export default function ChatHeader({ title = "Title of Chat" }) {
   return (
-    <header className="flex justify-center bg-blue-600">
+    <header className="flex justify-center text-slate-100">
-      <h1 className="text-lg font-semibold">{title}</h1>
+      <h1 className="text-lg font-semibold shadow-xl bg-gray-900 px-4 py-2 rounded-4xl">
+        {title}
+      </h1>
     </header>
   );
 }

web-app/src/components/ui/chat/chat-window.jsx

@@ -7,7 +7,7 @@ function MessageBubble({ message }) {
       className={`flex ${isUser ? "justify-end" : "justify-start"} px-4 py-8`}
     >
       <div
-        className={`max-w-[70%] p-3 rounded-lg ${isUser ? "bg-indigo-600 text-white" : "bg-slate-700 text-slate-100"}`}
+        className={`max-w-[70%] p-3 rounded-lg ${isUser ? "bg-indigo-600 text-white" : "bg-gray-700 text-slate-100"}`}
       >
         <div className="text-sm">{message.content}</div>
       </div>
@@ -18,7 +18,7 @@ function MessageBubble({ message }) {
 export default function ChatWindow({ messages }) {
   return (
     <div className="flex-1 overflow-auto p-2">
-      <div className="space-y-2">
+      <div className="">
         {messages.map((m, i) => (
           <MessageBubble key={i} message={m} />
         ))}

web-app/src/components/ui/chat/message-input.jsx

@@ -11,13 +11,13 @@ export default function MessageInput({ onSend }) {
   }
 
   return (
-    <form onSubmit={handleSubmit} className="bg-black">
+    <form onSubmit={handleSubmit} className="bg-gray-900 rounded-2xl">
-      <div className="flex shadow-lg">
+      <div className="flex p-4 shadow-xl">
         <input
           value={text}
           onChange={(e) => setText(e.target.value)}
           placeholder="Type a message..."
-          className="flex-1 rounded-md shadow-2sx"
+          className="flex-1 rounded-md shadow-2sx border-none focus:border-none focus:outline-none"
         />
         <button type="submit" className="">
           Send

web-app/src/index.css

@@ -1,17 +1,16 @@
 @import "tailwindcss";
 
-:root {
+.dark {
-  --color-primary: 15 40 98;
+  --paragraph: 235, 236, 239;
-  --color-secondary: 79 95 118;
+  --background: 15, 16, 26;
-  --color-accent: 158 54 58;
+  --primary: 158, 166, 214;
-  --color-paragraph: 255 255 255;
+  --secondary: 35, 50, 133;
-  --color-background: 9 31 54;
+  --accent: 52, 75, 223;
+  background: rgba(var(--background));
 }
 
 body {
   margin: 0;
-  background-color: rgb(var(--color-background));
-  color: rgb(var(--color-paragraph));
   font-family:
     ui-sans-serif,
     system-ui,