Make chatbox spacious (#15)

* Make chatbox spacious

* Fix overflow and simplify

* styling

Co-authored-by: Ed Mazurek <[email protected]>
Co-authored-by: wildmolasses <[email protected]>

Author: garyghayrat

src/components/ChatBox.tsx

@@ -1,6 +1,5 @@
 import { InputMessage } from "@/components/InputMessage";
 import { MessageList } from "@/components/MessageList";
-import { Title } from "@/components/Title";
 import { useState } from "react";
 
 export const ChatBox = ({
@@ -20,21 +19,20 @@ export const ChatBox = ({
     }, 400);
   };
   return (
-    <div className="float-left flex-shrink flex-grow ">
-      <Title owner={owner} />
-      <div className="rounded-lg bg-white">
+    <div className="flex flex-col rounded-md w-full max-h-full bg-white justify-between mb-10">
+      <div className="rounded-lg w-full overflow-auto">
         <MessageList owner={owner} messages={messages} />
-        <div className="p-4">
-          <InputMessage
-            isLoading={isLoading}
-            owner={owner}
-            ownerAvatar={ownerAvatar}
-            sendMessage={sendMessage}
-            sendMessageLoading={sendMessageLoading}
-            typing={typing}
-            resetTyping={resetTyping}
-          />
-        </div>
+      </div>
+      <div className="p-4">
+        <InputMessage
+          isLoading={isLoading}
+          owner={owner}
+          ownerAvatar={ownerAvatar}
+          sendMessage={sendMessage}
+          sendMessageLoading={sendMessageLoading}
+          typing={typing}
+          resetTyping={resetTyping}
+        />
       </div>
     </div>
   );

src/components/MessageList.tsx

@@ -2,7 +2,7 @@ import { MessageItem } from "@/components/MessageItem";
 
 export const MessageList = ({ messages, owner }) => {
   return (
-    <div className="flex h-96 flex-col-reverse gap-4 overflow-y-auto rounded-md p-4">
+    <div className="flex flex-col-reverse gap-4 overflow-y-auto w-full max-h-full rounded-md p-4">
       {messages
         .slice(0)
         .reverse()

src/pages/ChatRoom.tsx

@@ -69,7 +69,7 @@ export const ChatRoom = () => {
   let bot = { name: "Bot", avatar: "https://i.pravatar.cc/150?img=32" };
 
   return (
-    <div className="flex content-start justify-center px-80">
+    <div className="flex justify-center h-full">
       <ChatBox
         owner={user.name}
         ownerAvatar={user.avatar}

src/pages/index.tsx

@@ -1,29 +1,16 @@
-import { TransferButton } from "@/components/TransferButton";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { ChatRoom } from "src/pages/ChatRoom";
 
 export const Home = () => {
   return (
     <>
-      <div className="h-screen bg-gray-900 ">
-        <div className="flex justify-end pt-2 pr-2">
+      <div className="flex flex-col h-screen bg-gray-900 px-8">
+        <div className="flex justify-end my-4">
           <ConnectButton />
         </div>
-        <div className="pt-32">
+        <div className="h-full">
           <ChatRoom />
         </div>
-        <div className="mt-10 flex items-center justify-center gap-4">
-          <TransferButton
-            token="0x187C0F98FEF80E87880Db50241D40551eDd027Bf"
-            amount="1000000000000000000"
-            receiver="0x637C1Ec1d205a4E7a79c9CE4Bd100CD1d19E6080"
-          />
-
-          <TransferButton
-            amount="1000000000000000000"
-            receiver="0x637C1Ec1d205a4E7a79c9CE4Bd100CD1d19E6080"
-          />
-        </div>
       </div>
     </>
   );