Improve chat UI

resources/chatbox.scss

@@ -2,6 +2,7 @@
     margin: 0;
     padding-top: 0.1em;
     padding-bottom: 0.1em;
+    overflow-wrap: anywhere;
 }
 .chatbtn_remove_mess {
     float: right;
@@ -60,8 +61,7 @@
 
 #chat-input {
     width: 100%;
-    padding: 0.4em;
-    padding-bottom: 0.6em;
+    padding: 0.4em 4em 0.6em 1.2em;
     border: 0;
     color: black;
     border-top-left-radius: 0;
@@ -172,6 +172,20 @@
     cursor: pointer;
     margin-top: 0.5em;
 }
+.message-text {
+    padding: 0.4em 0.6em 0.5em;
+    border-radius: 15px;
+    max-width: 70%;
+    width: fit-content;
+}
+.message-text-other {
+    background: #eeeeee;
+    color: black;
+}
+.message-text-myself {
+    background: rgb(0, 132, 255);
+    color: white;
+}
 
 @media (max-width: 799px) {
     #chat-area {

templates/chat/chat.html

@@ -206,6 +206,7 @@ let META_HEADER = [
                     MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
                     register_time($('.time-with-rel'));
                     remove_unread_current_user();
+                    merge_authors();
                 },
                 error: function (data) {
                     console.log('Fail to check message');
@@ -230,6 +231,12 @@ let META_HEADER = [
             var time = moment($(this).find(".time-with-rel").attr('data-iso'));
             var $content = $(this).children('.content-message');
 
+            if (username == window.user.name) {
+                $(this).find('.message-text').each(function() {
+                    $(this).removeClass('message-text-other').addClass('message-text-myself');  
+                });
+            }
+
             if (username == last.username && time.diff(last.time, 'minutes') <= time_limit) {
                 last.$content.append($body);
                 $(this).parent().remove();

templates/chat/chat_css.html

@@ -92,10 +92,8 @@
     }
     .body-block {
         border-radius: 4px;
-        padding-left: 0.2em;
-    }
-    .body-block:hover {
-        background: #eee;
+        padding: 0.05em 0.6em;
+        width: 100%;
     }
     .active-span {
         margin-top: 1em;

templates/chat/message.html

@@ -20,8 +20,10 @@
                     {{_('Delete')}}
                 </a>
                 {% endif %}
+                <div class="message-text message-text-other">
                     {{message.body | markdown('comment', MATH_ENGINE)|reference|str|safe }}
                 </div>
+            </div>
         </span>
     </div>
     <div class="clear"></div>