adds styling for conversation

Author: johnlcos

client/app/(protected)/(main)/messages/page.tsx

@@ -29,23 +29,20 @@ const MessagesPage = () => {
   }, []);
 
   return (
-    <div>
-      <h1>Messages</h1>
-      <div>
-        {chatrooms.map((chatroom) => {
-          console.log("chatroom: ", chatroom);
-          return (
-            <Conversation
-              key={chatroom.chatroomId}
-              chatroomId={chatroom.chatroomId}
-              username={chatroom.username}
-              display_name={chatroom.display_name}
-              profile_avatar={chatroom.profile_avatar}
-              lastMessageSentAt={chatroom.lastMessageSentAt}
-            />
-          );
-        })}
-      </div>
+    <div className="m-4 flex flex-col gap-4">
+      {chatrooms.map((chatroom) => {
+        console.log("chatroom: ", chatroom);
+        return (
+          <Conversation
+            key={chatroom.chatroomId}
+            chatroomId={chatroom.chatroomId}
+            username={chatroom.username}
+            display_name={chatroom.display_name}
+            profile_avatar={chatroom.profile_avatar}
+            lastMessageSentAt={chatroom.lastMessageSentAt}
+          />
+        );
+      })}
     </div>
   );
 };

client/components/Conversation.tsx

@@ -48,12 +48,16 @@ export const Conversation = ({
   };
 
   return (
-    <Link href={`/${username}/${chatroomId}`} onClick={handleStartMessage}>
-      <Avatar url={profile_avatar} type="conversation" />
-      <div>
+    <Link
+      href={`/${username}/${chatroomId}`}
+      onClick={handleStartMessage}
+      className="flex text-center text-text-white font-semibold border-b border-surface shadow-md justify-between gap-2 hover:border-primary-500 transition duration-300 p-4"
+    >
+      <div className="flex items-center gap-4">
+        <Avatar url={profile_avatar} type="conversation" />
         <p>{display_name}</p>
-        <p>{formatTime(lastMessageSentAt)}</p>
       </div>
+      <p>{formatTime(lastMessageSentAt)}</p>
     </Link>
   );
 };