Update chat

resources/chatbox.scss

@@ -52,11 +52,12 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     flex-grow: 1;
+    padding-left: 0.5em;
 }
 
 #chat-input {
     color: black;
-    border: 2px solid #e4a81c;
+    border: 2px solid black;
 }
 #chat-online-content {
     padding: 0;
@@ -81,7 +82,7 @@
     }
     #chat-online {
         margin: 0;
-        width: 35%;
+        width: 30%;
     }
     #chat-area {
         flex-grow: 1;
@@ -91,12 +92,12 @@
     font-family: "Noto Sans", Arial, "Lucida Grande", sans-serif;
 }
 .info-pic {
-    height: 100%;
+    height: 95%;
 }
 
 .info-name {
     margin-left: 10px;
-    font-size: 2em;
+    font-size: 1.8em;
     font-weight: bold !important;
     display: flex;
     align-items: center;
@@ -166,11 +167,11 @@
 }
 .message-text {
     padding: 0.4em 0.6em 0.5em;
-    border-radius: 15px;
+    border-radius: 20px;
     max-width: 70%;
     width: fit-content;
-    font-size: 1.05rem;
+    font-size: 1rem;
-    line-height: 1.3;
+    line-height: 1.2;
 }
 .message-text-other {
     background: #eeeeee;
@@ -199,6 +200,7 @@
         border-radius: 2px;
         padding: 0 0.5em;
         align-self: flex-end;
+        border-radius: 50%;
     }
     #setting-content {
         display: none;

templates/chat/chat_css.html

@@ -57,7 +57,7 @@
     .profile-pic {
       height: 2.6em;
       width: 2.6em;
-      border-radius: 0.3em;
+      border-radius: 50%;
       margin-top: 0.1em;
       float: left;
     }
@@ -122,6 +122,9 @@
       align-items: center;
       gap: 1em;
     }
+    ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+      text-align: left;
+    }
     #chat-input {
       padding: 10px 20px;
       font-size: 16px;
@@ -130,7 +133,9 @@
       transition: box-shadow 0.3s ease-in-out;
       width: 80%;
       resize: none;
-      height: 100%;
+      height: 80%;
+      max-height: 200px;
+      overflow-y: auto;
     }
     #chat-input:focus {
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
@@ -162,11 +167,13 @@
       stroke-width: 1;
     }
     .info-pic {
-      border-radius: 5px;
+      border-radius: 50%;
       margin-left: 1em;
+      margin-top: 3px;
     }
     #chat-info {
       height: 3em;
+      padding-bottom: 0.25em;
     }
 
     @media (min-width: 800px) {
@@ -175,7 +182,7 @@
         overflow:hidden;
       }
       #chat-input-container {
-        padding-left: 5%;
+        padding-left: 3%;
       }
       #chat-area {
         padding-bottom: 1.5em;

templates/chat/chat_js.html

@@ -558,5 +558,17 @@
     }
     register_setting();
     color_selected_room();
+
+    // Adjust textarea height to fit the content
+    $(document).ready(function() {
+      $('#chat-input').on('input', function() {
+        if (this.scrollHeight > this.clientHeight) {
+          this.style.height = 'auto';
+          this.style.height = (this.scrollHeight) + 'px';
+        } else {
+          $(this).css('height', '80%');
+        }
+      });
+    });
   });
 </script>

templates/chat/user_online_status.html

@@ -21,7 +21,7 @@
 
 {% if other_user %}
   <span style="margin-right: 0.3em" id="setting">
-    <button class="control-button small" style="height:100%;" id="setting-button">
+    <button class="control-button small" style="height:100%; border-radius: 99px;" id="setting-button">
       <i class="fa fa-ellipsis-h"></i>
     </button>
     <div id="setting-content">