From 76e56faf8edbd0d5c9e4b27773617c5a3115cf47 Mon Sep 17 00:00:00 2001
From: hyperbel <hyperbel@users.noreply.github.com>
Date: Fri, 14 Jul 2023 07:23:27 +0200
Subject: [PATCH] chat styling

---
 party/static/css/session.css | 39 +++++++++++++++++++++++++++++++++++-
 party/static/js/session.js   | 10 +++++----
 2 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/party/static/css/session.css b/party/static/css/session.css
index f736f16..51306fa 100644
--- a/party/static/css/session.css
+++ b/party/static/css/session.css
@@ -424,6 +424,43 @@ margin-right: auto;
 }
 
 #chatBox {
-    background-color: green;
     max-height: 600px;
+    border: 1px solid white;
+}
+
+.chat-message {
+  margin-bottom: 10px;
+  display: flex;
+  align-items: flex-start;
+}
+
+.chat-message-content {
+  background-color: #333;
+  border-radius: 5px;
+  padding: 10px;
+  color: #fff;
+  flex-grow: 1;
+  text-align: left;
+}
+
+.chat-message-details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-right: 10px;
+  flex-shrink: 0;
+  border-right: 1px solid #888;
+  border-bottom: 1px solid #888;
+  width: 10%;
+}
+
+.chat-message-author {
+  font-weight: bold;
+  font-size: 12px;
+  margin-bottom: 5px;
+}
+
+.chat-message-timestamp {
+  font-size: 10px;
+  color: #888;
 }
diff --git a/party/static/js/session.js b/party/static/js/session.js
index 7013c07..987ff80 100644
--- a/party/static/js/session.js
+++ b/party/static/js/session.js
@@ -81,8 +81,6 @@ function handleSwitchDiv(index) {
 
                     chatBox.style.overflow = 'auto';
                     chatBox.scrollTop = chatBox.scrollHeight;
-
-                    // join websocket
                 });
             })
         break;
@@ -160,9 +158,13 @@ function chatMessage(content, author, timestap) {
     timestamp_field.textContent = timestap;
     messageTimestamp.appendChild(timestamp_field);
 
+    const messageDetails = document.createElement('div');
+    messageDetails.classList.add('chat-message-details');
+    messageDetails.appendChild(messageAuthor);
+    messageDetails.appendChild(messageTimestamp);
+
+    message.appendChild(messageDetails);
     message.appendChild(messageContent);
-    message.appendChild(messageAuthor);
-    message.appendChild(messageTimestamp);
 
     return message;
 }