🚀 Fix formatting

src/components/Button.tsx

@@ -35,7 +35,7 @@ const Button = forwardRef(
           "text-gray/50 rounded-lg border-[2px] border-white/30 px-10 py-3 font-bold transition-all " +
           props.className +
           (props.disabled
-            ? " cursor-not-allowed border-white/10 bg-black/60 text-white/30"
+            ? " cursor-not-allowed border-white/10 bg-zinc-900 text-white/30"
             : " mou cursor-pointer bg-[#1E88E5]/70 text-white/80 hover:border-white/80 hover:bg-[#0084f7] hover:text-white hover:shadow-2xl")
         }
         onClick={onClick}

src/components/ChatWindow.tsx

@@ -12,7 +12,7 @@ const ChatWindow = ({ children, className }: ChatWindowProps) => {
   return (
     <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 " +
+        "border-translucent flex h-full w-full flex-col rounded-3xl border-2 border-white/20 bg-zinc-900 text-white shadow-2xl drop-shadow-lg " +
         className
       }
     >

src/components/Drawer.tsx

@@ -1,13 +1,17 @@
+import React from "react";
+import { AiFillRobot } from "react-icons/Ai";
+import { BiPlus } from "react-icons/bi";
+
 const Drawer = () => {
   return (
     <div
       id="drawer-example"
-      className="z-50 m-0 flex h-screen w-72 flex-col gap-2 border-b-[1px] border-b-white/10 bg-[#101010]/50 p-0 p-3 text-white backdrop-blur-sm"
+      className="z-50 m-0 flex h-screen w-72 flex-col gap-2 border-b-[1px] border-b-white/10 bg-[#101010]/50 p-0 p-3 font-mono text-white backdrop-blur-sm"
     >
       <NewAgent />
-      <DrawerItem text="HustleGPT" />
+      <DrawerItem icon={<AiFillRobot />} text="HustleGPT" />
-      <DrawerItem text="ChefGPT" />
+      <DrawerItem icon={<AiFillRobot />} text="ChefGPT" />
-      <DrawerItem text="WorldPeaceGPT" />
+      <DrawerItem icon={<AiFillRobot />} text="WorldPeaceGPT" />
       <hr className="my-5 border-white/20" />
     </div>
   );
@@ -16,15 +20,23 @@ const Drawer = () => {
 const NewAgent = () => {
   return (
     <div className="mb-5 flex flex-row items-center rounded-md border-[1px] border-white/20 p-2 hover:bg-white/5">
-      <span className="text-md font-thin">New Agent</span>
+      <BiPlus />
+      <span className="text-md ml-2">New Agent</span>
     </div>
   );
 };
 
-const DrawerItem = ({ text }: { text: string }) => {
+const DrawerItem = ({
+  icon,
+  text,
+}: {
+  icon: React.ReactNode;
+  text: string;
+}) => {
   return (
     <div className="flex flex-row items-center rounded-md p-2 hover:bg-white/5">
-      <span className="text-md font-thin">{text}</span>
+      {icon}
+      <span className="text-md ml-2">{text}</span>
     </div>
   );
 };

src/components/Input.tsx

@@ -9,9 +9,9 @@ interface InputProps {
 
 const Input = ({ placeholder, left, value, onChange }: InputProps) => {
   return (
-    <div className="flex w-[60%] items-center rounded-xl bg-[#3a3a3a] font-mono text-lg text-white/75 shadow-2xl">
+    <div className="flex w-full items-center rounded-xl bg-[#3a3a3a] font-mono text-lg text-white/75 shadow-2xl">
       {left != null ? (
-        <div className="center flex h-full items-center rounded-xl rounded-r-none border-[2px] border-r-0 border-white/10 px-5 text-lg font-semibold tracking-wider transition-all">
+        <div className="center flex items-center rounded-xl rounded-r-none border-[2px] border-r-0 border-white/10 px-5 py-3 text-lg font-semibold tracking-wider transition-all">
           {left}
         </div>
       ) : null}

src/pages/index.tsx

@@ -53,60 +53,68 @@ const Home: NextPage = () => {
         <Drawer />
         <div
           id="content"
-          className="flex h-screen w-full flex-col items-center justify-center gap-3"
+          className="flex h-screen w-full items-center justify-center"
         >
           <div
-            id="title"
+            id="layout"
-            className="flex flex-col items-center font-mono shadow-2xl"
+            className="flex h-full w-full max-w-screen-lg flex-col items-center justify-center gap-3 py-10"
           >
-            <div className="flex items-center">
+            <div
-              <span className="text-6xl font-bold text-[#C0C0C0]">Agent</span>
+              id="title"
-              <span className="mr-5 text-6xl font-bold text-white">GPT</span>
+              className="flex flex-col items-center font-mono shadow-2xl"
-              <Badge>Beta 🚀</Badge>
+            >
-            </div>
+              <div className="flex items-center">
-            <div className="font-mono text-[0.8em] font-bold text-white">
+                <span className="text-6xl font-bold text-[#C0C0C0]">Agent</span>
-              Autonomous AI Agents in your browser
+                <span className="mr-5 text-6xl font-bold text-white">GPT</span>
+                <Badge>Beta 🚀</Badge>
+              </div>
+              <div className="font-mono text-[0.8em] font-bold text-white">
+                Autonomous AI Agents in your browser
+              </div>
             </div>
+
+            <ChatWindow className="m-10">
+              {messages.map((message, index) => (
+                <ChatMessage
+                  key={`${index}-${message.type}`}
+                  message={message}
+                />
+              ))}
+              {loading ? <div>LOADING...</div> : null}
+            </ChatWindow>
+
+            <Input
+              left={
+                <>
+                  <AiFillRobot />
+                  <span className="ml-2">Name:</span>
+                </>
+              }
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="AgentGPT (Note: this field doesn't do anything right now)"
+            />
+
+            <Input
+              left={
+                <>
+                  <FaStar />
+                  <span className="ml-2">Goal:</span>
+                </>
+              }
+              value={goalInput}
+              onChange={(e) => setGoalInput(e.target.value)}
+              placeholder="Make the world a better place."
+            />
+
+            <Button
+              disabled={goalInput === ""}
+              onClick={() => void handleNewGoal()}
+              className="mt-10"
+            >
+              Deploy Agent
+            </Button>
           </div>
-
-          <ChatWindow className="m-10">
-            {messages.map((message, index) => (
-              <ChatMessage key={`${index}-${message.type}`} message={message} />
-            ))}
-            {loading ? <div>LOADING...</div> : null}
-          </ChatWindow>
-
-          <Input
-            left={
-              <>
-                <AiFillRobot />
-                <span className="ml-2">Name:</span>
-              </>
-            }
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            placeholder="AgentGPT (Note: this field doesn't do anything right now)"
-          />
-
-          <Input
-            left={
-              <>
-                <FaStar />
-                <span className="ml-2">Goal:</span>
-              </>
-            }
-            value={goalInput}
-            onChange={(e) => setGoalInput(e.target.value)}
-            placeholder="Make the world a better place."
-          />
-
-          <Button
-            disabled={goalInput === ""}
-            onClick={() => void handleNewGoal()}
-            className="mt-10"
-          >
-            Deploy Agent
-          </Button>
         </div>
       </main>
     </DefaultLayout>