🚀 Update styling

src/components/Badge.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 interface BadgeProps {
   children: React.ReactNode;
@@ -6,7 +6,7 @@ interface BadgeProps {
 
 const Badge = ({ children }: BadgeProps) => {
   return (
-    <div className="px-3 py-1 h-max text-sm font-semibold text-gray-100 bg-[#1E88E5] rounded-full">
+    <div className="text-md h-max rounded-full bg-[#1E88E5] px-5 py-2 font-semibold text-gray-100">
       {children}
     </div>
   );

src/components/Button.tsx

@@ -33,7 +33,7 @@ const Button = forwardRef(
         disabled={loading || props.disabled}
         className={
           // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-          "transition-all " + props.className
+          "shadow-2xl transition-all " + props.className
         }
         onClick={onClick}
       >

src/components/ChatWindow.tsx

@@ -1,27 +1,23 @@
 import cx from "classnames";
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 interface ChatWindowProps {
   children?: ReactNode;
 }
+
 const ChatWindow = ({ children }: ChatWindowProps) => {
   return (
-    <div className="border-translucent flex h-80 w-full max-w-screen-md flex-col rounded-3xl drop-shadow-lg bg-black text-white">
+    <div className="border-translucent flex h-80 w-full max-w-screen-md flex-col rounded-3xl bg-black/50 text-white drop-shadow-lg">
       <MacWindowHeader />
       {children}
     </div>
-  )
-}
+  );
+};
 
 const MacWindowHeader = () => {
   return (
     <div
-      className={cx(
-        "flex gap-1 rounded-t-3xl border-b-[1px] p-3",
-        "flex gap-1 rounded-t-3xl border-b-[1px] p-3",
-        "border-gray-200 bg-gray-100",
-        "border-white/25 bg-black"
-      )}
+      className={cx("flex gap-1 rounded-t-3xl p-3", "flex gap-1 rounded-t-3xl")}
     >
       <div className="h-3 w-3 rounded-full bg-red-500"></div>
       <div className="h-3 w-3 rounded-full bg-yellow-500"></div>

src/pages/index.tsx

@@ -37,10 +37,12 @@ const Home: NextPage = () => {
         <Drawer />
         <div
           id="content"
-          className="flex h-screen w-full flex-col items-center justify-center"
+          className="flex h-screen w-full flex-col items-center justify-center gap-10"
         >
           <div id="title" className="flex items-center gap-4">
-            <div className="text-4xl font-bold text-[#C0C0C0]">AgentGPT</div>
+            <div className="font-mono text-6xl font-bold text-[#C0C0C0]">
+              AgentGPT
+            </div>
             <Badge>Beta 🚀</Badge>
           </div>