From d8c8f18f0504480f782b19e7f42f3e2695b90786 Mon Sep 17 00:00:00 2001
From: Asim Shrestha <asim.shrestha@hotmail.com>
Date: Fri, 7 Apr 2023 13:36:41 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Use=20Button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/{button.tsx => Button.tsx} | 6 +++---
 src/pages/index.tsx                       | 7 ++++---
 2 files changed, 7 insertions(+), 6 deletions(-)
 rename src/components/{button.tsx => Button.tsx} (91%)

diff --git a/src/components/button.tsx b/src/components/Button.tsx
similarity index 91%
rename from src/components/button.tsx
rename to src/components/Button.tsx
index 27c6af5..5c836d5 100644
--- a/src/components/button.tsx
+++ b/src/components/Button.tsx
@@ -1,5 +1,5 @@
 import type { ForwardedRef } from "react";
-import { forwardRef, useState } from "react";
+import React, { forwardRef, useState } from "react";
 
 import Loader from "./loader";
 
@@ -31,11 +31,11 @@ const Button = forwardRef(
         ref={ref}
         type={props.type}
         disabled={loading || props.disabled}
-        onClick={onClick}
         className={
           // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-          "text-white transition hover:text-yellow-500 " + props.className
+          "transition-all " + props.className
         }
+        onClick={onClick}
       >
         <div className="flex items-center">
           {loading ? (
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index eb91425..ce8a2ca 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -6,6 +6,7 @@ import ChatWindow from "../components/ChatWindow";
 import axios from "axios";
 import Drawer from "../components/Drawer";
 import Input from "../components/Input";
+import Button from "../components/Button";
 
 const Home: NextPage = () => {
   const [loading, setLoading] = React.useState<boolean>(false);
@@ -55,12 +56,12 @@ const Home: NextPage = () => {
             onChange={(e) => setGoalInput(e.target.value)}
           />
           {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
-          <button
+          <Button
             onClick={() => void handleNewGoal()}
-            className="w-64 rounded-full bg-gray-300"
+            className="font-bolder text-gray/50 rounded-lg bg-[#1E88E5]/70 px-10 py-5 font-bold text-black/60 hover:bg-[#0084f7] hover:text-white"
           >
             Deploy Agent
-          </button>
+          </Button>
         </div>
       </main>
     </DefaultLayout>