🚀 Use Button

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 ? (

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>