From bd8d7848b9cfbd3a0edbaab7cc4fa5791358de77 Mon Sep 17 00:00:00 2001
From: anhkha2003 <lephuocanhkha2003@tamu.edu>
Date: Sun, 24 Sep 2023 23:31:38 -0500
Subject: [PATCH] Update Chat

---
 resources/chatbox.scss                 | 15 +++++++++++----
 templates/chat/chat.html               |  2 +-
 templates/chat/chat_css.html           | 18 ++++++++++++++----
 templates/chat/chat_js.html            | 18 ++++++++----------
 templates/chat/online_status.html      | 14 +++++++++-----
 templates/chat/user_online_status.html | 10 +++++++---
 6 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/resources/chatbox.scss b/resources/chatbox.scss
index a38bdc9..bfbfd0a 100644
--- a/resources/chatbox.scss
+++ b/resources/chatbox.scss
@@ -59,6 +59,9 @@
     color: black;
     border: 2px solid black;
 }
+#chat-input::placeholder {
+    color: grey;
+}
 #chat-online-content {
     padding: 0;
     width: 100%;
@@ -136,6 +139,7 @@
     position: relative;
     display: inline-flex;
     flex: 0 0 auto;
+    align-items: center;
 }
 .status-circle {
     position: absolute;
@@ -194,13 +198,16 @@
     }
 
     .unread-count {
-        float: right;
         color: white;
         background-color: darkcyan;
-        border-radius: 2px;
-        padding: 0 0.5em;
-        align-self: flex-end;
         border-radius: 50%;
+        align-self: center;
+        flex: 0 0 1.25rem;
+        height: 1.25rem;
+        font-size: smaller;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
     #setting-content {
         display: none;
diff --git a/templates/chat/chat.html b/templates/chat/chat.html
index 1991402..5a4ed07 100644
--- a/templates/chat/chat.html
+++ b/templates/chat/chat.html
@@ -98,7 +98,7 @@
           <div class="chat-input-icon" id="emoji-button" href="#" title="{{_('Emoji')}}"><i class="icofont-slightly-smile"></i>
           </div>
           <div class="chat-input-icon" id="submit-button">
-            <i class="fa fa-play"></i>
+            <i class="fa fa-arrow-right"></i>
           </div>
         </div>
         <div class="tooltip" role="tooltip">
diff --git a/templates/chat/chat_css.html b/templates/chat/chat_css.html
index dfebd2f..a8f30b8 100644
--- a/templates/chat/chat_css.html
+++ b/templates/chat/chat_css.html
@@ -106,6 +106,16 @@
     #setting {
       position: relative;
     }
+    #setting-button {
+      height: 2.3em;
+      width: 2.5em;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      padding-top: 2px;
+    }
     .status-user {
       display: flex;
       flex-direction: column;
@@ -128,7 +138,7 @@
     #chat-input {
       padding: 10px 20px;
       font-size: 16px;
-      border-radius: 20px;
+      border-radius: 100px;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
       transition: box-shadow 0.3s ease-in-out;
       width: 80%;
@@ -168,12 +178,12 @@
     }
     .info-pic {
       border-radius: 50%;
-      margin-left: 1em;
-      margin-top: 3px;
     }
     #chat-info {
       height: 3em;
-      padding-bottom: 0.25em;
+      padding-left: 0.75em;
+      display: flex;
+      align-items: center;
     }
 
     @media (min-width: 800px) {
diff --git a/templates/chat/chat_js.html b/templates/chat/chat_js.html
index 9e8c3ba..7643a79 100644
--- a/templates/chat/chat_js.html
+++ b/templates/chat/chat_js.html
@@ -559,16 +559,14 @@
     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%');
-        }
-      });
+    $('#chat-input').on('input', function() {
+      if (this.scrollHeight > this.clientHeight) {
+        this.style.height = (this.scrollHeight) + 'px';
+        $(this).css('border-radius', '30px');
+      } else {
+        $(this).css('height', '80%');
+      }
     });
+    $('#submit-button').on('click', submit_chat);
   });
 </script>
\ No newline at end of file
diff --git a/templates/chat/online_status.html b/templates/chat/online_status.html
index d82159d..73dea74 100644
--- a/templates/chat/online_status.html
+++ b/templates/chat/online_status.html
@@ -5,8 +5,10 @@
   <span style="padding-left:0.5em">
     <b>{{_('Lobby')}}</b>
   </span>
-  <span class="spacer">
-    <span class="unread-count" id="unread-count-lobby">{{unread_count_lobby if unread_count_lobby}}</span>
+  <span class="spacer" style="display:flex;justify-content: flex-end;">
+    {% if unread_count_lobby and unread_count_lobby > 0 %}
+      <span class="unread-count" id="unread-count-lobby">{{unread_count_lobby}}</span>
+    {% endif %}
   </span>
 </li>
 {% for section in status_sections %}
@@ -37,9 +39,11 @@
               </span>
             {% endif %}
           </div>
-          <span class="unread-count" id="unread-count-{{user.user.id}}">
-            {{user.unread_count if user.unread_count}}
-          </span>
+          {% if user.unread_count and user.unread_count > 0 %}
+            <span class="unread-count" id="unread-count-{{user.user.id}}">
+              {{user.unread_count}}
+            </span>
+          {% endif %}
         </li>
       {% endfor %}
     </ul>
diff --git a/templates/chat/user_online_status.html b/templates/chat/user_online_status.html
index 06c6a2e..b391c54 100644
--- a/templates/chat/user_online_status.html
+++ b/templates/chat/user_online_status.html
@@ -1,11 +1,15 @@
 {% if other_user %}
-  <div class="status-container" style="height: 100%">
+  <div class="status-container" style="height: 3em; width: 3em;">
     <img src="{{ gravatar(other_user, 135) }}" class="info-pic">
     <svg style="position:absolute; height:100%; width: 100%; transform: rotate(180deg);" >
       <circle class="info-circle"
         fill="{{'green' if other_online else 'red'}}"/>
     </svg>
   </div>
+{% else %}
+  <div class="status-container" style="height: 3em;">
+    <img src="{{ static('icons/logo.png') }}" class="info-pic" style="border-radius: 0px;">
+  </div>
 {% endif %}
 <span class="info-name username">
   {% if other_user %}
@@ -21,9 +25,9 @@
 
 {% if other_user %}
   <span style="margin-right: 0.3em" id="setting">
-    <button class="control-button small" style="height:100%; border-radius: 99px;" id="setting-button">
+    <div class="control-button small" style="" id="setting-button">
       <i class="fa fa-ellipsis-h"></i>
-    </button>
+    </div>
     <div id="setting-content">
       <li>
         <a href="{{url('toggle_ignore', other_user.id)}}" class=" {{'green' if is_ignored else 'red'}}">