style(chat): fixed chat layout + added shadows

web-app/src/app/index.jsx

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

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

@@ -25,7 +25,7 @@ export default function ChatLayout() {
   }
 
   return (
-    <div className="flex flex-col justify-between h-full w-full max-w-4xl gap-4 p-4">
+    <div className="w-full max-w-4xl gap-4 p-4">
       <ChatHeader />
       <ChatWindow messages={messages} />
       <MessageInput onSend={handleSend} />

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

@@ -1,9 +1,15 @@
 import { Flame } from "lucide-react";
+import { motion } from "motion/react";
 
 export default function FlameButton({ onClick }) {
   return (
-    <button onClick={onClick} className="bg-gray-700 p-2 rounded-2xl">
+    <motion.button
+      onClick={onClick}
+      className="bg-gray-700 p-2 rounded-2xl"
+      whileHover={{ scale: 1.1 }}
+      whileTap={{ scale: 0.9 }}
+    >
       <Flame />
-    </button>
+    </motion.button>
   );
 }

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

@@ -1,10 +1,16 @@
 import React from "react";
 import { ArrowDown } from "lucide-react";
+import { motion } from "motion/react";
 
 export default function DownButton({ onClick }) {
   return (
-    <button onClick={onClick} className="bg-gray-700 p-2 rounded-2xl">
+    <motion.button
+      onClick={onClick}
+      className="bg-gray-700 p-2 rounded-2xl"
+      whileHover={{ scale: 1.1 }}
+      whileTap={{ scale: 0.9 }}
+    >
       <ArrowDown />
-    </button>
+    </motion.button>
   );
 }

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

@@ -3,9 +3,9 @@ import React from "react";
 export default function ChatHeader({ title = "Title of Chat" }) {
   return (
     <div className="w-full flex justify-center">
-      <header className="text-slate-100 fixed top-2">
+      <header className="text-slate-100 fixed top-4 ">
         <div>
-          <h1 className="text-lg font-semibold shadow-xl bg-gray-900 px-6 py-2 rounded-4xl">
+          <h1 className="text-lg font-semibold shadow-lg shadow-indigo-600 bg-gray-900 px-6 py-2 rounded-4xl border-2 border-gray-800">
             {title}
           </h1>
         </div>

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

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

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

@@ -1,7 +1,8 @@
 import React, { useState } from "react";
 import DeleteButton from "src/components/ui/button/delete-button";
 import DownButton from "src/components/ui/button/down-button";
-import { MessageCirclePlus } from "lucide-react";
+import { motion } from "motion/react";
+import { BotMessageSquare } from "lucide-react";
 
 export default function MessageInput({ onSend }) {
   const [text, setText] = useState("");
@@ -15,13 +16,16 @@ export default function MessageInput({ onSend }) {
 
   return (
     <div className="w-full flex justify-center">
-      <footer className="fixed bottom-2 max-w-2xl w-full px-4">
+      <footer className="fixed bottom-6 max-w-2xl w-full px-4">
         <div className="flex flex-col gap-2">
           <div className="flex justify-between">
             <DeleteButton></DeleteButton>
             <DownButton></DownButton>
           </div>
-          <form onSubmit={handleSubmit} className="bg-gray-900 rounded-2xl">
+          <form
+            onSubmit={handleSubmit}
+            className="bg-gray-900 rounded-2xl border-2 border-gray-800 shadow-lg shadow-indigo-600"
+          >
             <div className="flex p-2 shadow-xl">
               <input
                 value={text}
@@ -29,12 +33,14 @@ export default function MessageInput({ onSend }) {
                 placeholder="Type a message..."
                 className="flex-1 mx-2 rounded-md shadow-2sx border-none focus:border-none focus:outline-none"
               />
-              <button
+              <motion.button
                 type="submit"
                 className="flex gap-2 px-4 py-2 bg-gray-700 rounded-xl ml-4"
+                whileHover={{ scale: 1.1 }}
+                whileTap={{ scale: 0.9 }}
               >
-                Send
-              </button>
+                <BotMessageSquare />
+              </motion.button>
             </div>
           </form>
         </div>