From c9327b3ec3234d6404764e3233fb623b4ab69ca1 Mon Sep 17 00:00:00 2001
From: JK-le-dev <jkcondor13@gmail.com>
Date: Sat, 18 Oct 2025 20:31:35 -0500
Subject: [PATCH] feat(buttons): added flame and down button

---
 .../components/layouts/dashboard-layout.jsx   |  0
 .../components/ui/button/action-button.jsx    | 20 -----------
 .../components/ui/button/delete-button.jsx    |  9 +++++
 .../src/components/ui/button/down-button.jsx  | 10 ++++++
 .../src/components/ui/chat/message-input.jsx  | 35 ++++++++++++-------
 5 files changed, 42 insertions(+), 32 deletions(-)
 delete mode 100644 web-app/src/components/layouts/dashboard-layout.jsx
 delete mode 100644 web-app/src/components/ui/button/action-button.jsx
 create mode 100644 web-app/src/components/ui/button/delete-button.jsx
 create mode 100644 web-app/src/components/ui/button/down-button.jsx

diff --git a/web-app/src/components/layouts/dashboard-layout.jsx b/web-app/src/components/layouts/dashboard-layout.jsx
deleted file mode 100644
index e69de29..0000000
diff --git a/web-app/src/components/ui/button/action-button.jsx b/web-app/src/components/ui/button/action-button.jsx
deleted file mode 100644
index 9df9c6f..0000000
--- a/web-app/src/components/ui/button/action-button.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import "./action-button.css";
-
-export default function ActionButton({
-  onClick,
-  children,
-  type = "add", // 'add' or 'delete'
-  ...props
-}) {
-  return (
-    <button
-      onClick={onClick}
-      className="action-btn"
-      style={{ "--btn-color": color }}
-      {...props}
-    >
-      {type === "add" ? "New Chat" : "Delete Chat"}
-      {svg}
-    </button>
-  );
-}
diff --git a/web-app/src/components/ui/button/delete-button.jsx b/web-app/src/components/ui/button/delete-button.jsx
new file mode 100644
index 0000000..53a5367
--- /dev/null
+++ b/web-app/src/components/ui/button/delete-button.jsx
@@ -0,0 +1,9 @@
+import { Flame } from "lucide-react";
+
+export default function FlameButton({ onClick }) {
+  return (
+    <button onClick={onClick} className="bg-gray-700 p-2 rounded-2xl">
+      <Flame />
+    </button>
+  );
+}
diff --git a/web-app/src/components/ui/button/down-button.jsx b/web-app/src/components/ui/button/down-button.jsx
new file mode 100644
index 0000000..e402e8f
--- /dev/null
+++ b/web-app/src/components/ui/button/down-button.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { ArrowDown } from "lucide-react";
+
+export default function DownButton({ onClick }) {
+  return (
+    <button onClick={onClick} className="bg-gray-700 p-2 rounded-2xl">
+      <ArrowDown />
+    </button>
+  );
+}
diff --git a/web-app/src/components/ui/chat/message-input.jsx b/web-app/src/components/ui/chat/message-input.jsx
index 01e848c..16dbe1c 100644
--- a/web-app/src/components/ui/chat/message-input.jsx
+++ b/web-app/src/components/ui/chat/message-input.jsx
@@ -1,4 +1,6 @@
 import React, { useState } from "react";
+import DeleteButton from "src/components/ui/button/delete-button";
+import DownButton from "../button/down-button";
 
 export default function MessageInput({ onSend }) {
   const [text, setText] = useState("");
@@ -11,18 +13,27 @@ export default function MessageInput({ onSend }) {
   }
 
   return (
-    <form onSubmit={handleSubmit} className="bg-gray-900 rounded-2xl">
-      <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 border-none focus:border-none focus:outline-none"
-        />
-        <button type="submit" className="">
-          Send
-        </button>
+    <div className="flex flex-col gap-2">
+      <div className="flex justify-between">
+        <DeleteButton></DeleteButton>
+        <DownButton></DownButton>
       </div>
-    </form>
+      <form onSubmit={handleSubmit} className="bg-gray-900 rounded-2xl">
+        <div className="flex p-2 shadow-xl">
+          <input
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            placeholder="Type a message..."
+            className="flex-1 mx-2 rounded-md shadow-2sx border-none focus:border-none focus:outline-none"
+          />
+          <button
+            type="submit"
+            className="px-4 py-2 bg-gray-700 rounded-xl ml-4"
+          >
+            Send
+          </button>
+        </div>
+      </form>
+    </div>
   );
 }