- reduced custom styles, use mostly tailwind classes

- updated markdown css for extrausercontent

webroot/js/chat/chat-input.js

@@ -236,11 +236,11 @@ export default class ChatInput extends Component {
     const placeholderText = generatePlaceholderText(inputEnabled, hasSentFirstChatMessage);
     return (
       html`
-        <div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid">
+        <div id="message-input-container" class="w-full shadow-md bg-gray-900 border-t border-gray-700 border-solid p-4">
 
           <${ContentEditable}
             id="message-input"
-            class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white"
+            class="appearance-none block w-full bg-gray-200 text-sm	text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white h-20 overflow-auto"
 
             placeholderText=${placeholderText}
             innerRef=${this.formMessageInput}
@@ -254,13 +254,14 @@ export default class ChatInput extends Component {
             onPaste=${this.handlePaste}
           />
 
-          <div id="message-form-actions" class="flex">
+          <div id="message-form-actions" class="flex flex-row justify-between items-center w-full">
             <span id="message-form-warning" class="text-red-600 text-xs">${inputWarning}</span>
 
-            <div id="message-form-actions-buttons" class="flex">
+            <div id="message-form-actions-buttons" class="flex flex-row justify-end items-center">
               <button
                 ref=${this.emojiPickerButton}
                 id="emoji-button"
+                class="mr-2 text-2xl cursor-pointer"
                 type="button"
                 style=${emojiButtonStyle}
                 onclick=${this.handleEmojiButtonClick}

webroot/js/chat/chat.js

@@ -95,12 +95,6 @@ export default class Chat extends Component {
 
   receivedWebsocketMessage(message) {
     this.addMessage(message);
-    // if (model.type === SOCKET_MESSAGE_TYPES.CHAT) {
-    //   const message = new Message(model);
-    //   this.addMessage(message);
-    // } else if (model.type === SOCKET_MESSAGE_TYPES.NAME_CHANGE) {
-    //   this.addMessage(model);
-    // }
   }
 
   // if incoming message has same id as existing message, don't add it
@@ -181,7 +175,7 @@ export default class Chat extends Component {
     if (messagesOnly) {
       return (
         html`
-          <div id="messages-container">
+          <div id="messages-container" class="py-1 overflow-auto">
             ${messageList}
           </div>
       `);
@@ -189,9 +183,9 @@ export default class Chat extends Component {
 
     return (
       html`
-        <section id="chat-container-wrap" class="flex">
-          <div id="chat-container" class="bg-gray-800">
-            <div id="messages-container">
+        <section id="chat-container-wrap" class="flex flex-col">
+          <div id="chat-container" class="bg-gray-800 flex flex-col justify-end overflow-auto">
+            <div id="messages-container" class="py-1 overflow-auto">
               ${messageList}
             </div>
             <${ChatInput}

webroot/js/chat/message.js

@@ -20,15 +20,17 @@ export default class Message extends Component {
       const authorTextColor = { color: authorColor };
       return (
         html`
-          <div class="message flex">
+          <div class="message flex flex-row align-start p-3">
             <div
-              class="message-avatar rounded-full flex items-center justify-center"
+              class="message-avatar rounded-full flex items-center justify-center mr-3"
               style=${avatarBgColor}
             >
-              <img src=${avatar} />
+              <img src=${avatar} class="p-1" />
             </div>
-            <div class="message-content text-sm">
-              <p class="message-author text-white font-bold" style=${authorTextColor}>${author}</p>
+            <div class="message-content text-sm break-words">
+              <div class="message-author text-white font-bold" style=${authorTextColor}>
+                ${author}
+              </div>
               <div
                 class="message-text text-gray-300 font-normal"
                 dangerouslySetInnerHTML=${
@@ -42,7 +44,7 @@ export default class Message extends Component {
       const { oldName, newName, image } = message;
       return (
         html`
-          <div class="message flex">
+          <div class="message flex align-start p3">
             <div class="message-content text-sm">
               <img class="mr-2" src=${image} />
               <div class="text-white text-center">
@@ -50,7 +52,8 @@ export default class Message extends Component {
               </div>
             </div>
           </div>
-        `);
+        `
+      );
     }
   }
 }

webroot/js/chat/username.js

@@ -77,29 +77,29 @@ export default class UsernameForm extends Component {
     return (
       html`
         <div id="user-info">
-          <div id="user-info-display" style=${styles.info} title="Click to update user name" class="flex" onClick=${this.handleDisplayForm}>
+          <div id="user-info-display" style=${styles.info} title="Click to update user name" class="flex flex-row justify-end items-center cursor-pointer py-2 px-4 overflow-hidden w-full opacity-1 transition-opacity duration-200 hover:opacity-75" onClick=${this.handleDisplayForm}>
             <img
               src=${userAvatarImage}
               alt=""
               id="username-avatar"
-              class="rounded-full bg-black bg-opacity-50 border border-solid border-gray-700"
+              class="rounded-full bg-black bg-opacity-50 border border-solid border-gray-700 mr-2 h-8 w-8"
             />
-            <span id="username-display" class="text-indigo-600">${username}</span>
+            <span id="username-display" class="text-indigo-600 text-xs font-semibold truncate overflow-hidden whitespace-no-wrap">${username}</span>
           </div>
 
-          <div id="user-info-change" style=${styles.form}>
+          <div id="user-info-change" class="flex p-1 items-center justify-end" style=${styles.form}>
             <input type="text"
               id="username-change-input"
-              class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight focus:bg-white"
+              class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight text-xs focus:bg-white"
               maxlength="100"
               placeholder="Update username"
               value=${username}
               onKeydown=${this.handleKeydown}
               ref=${this.textInput}
             />
-            <button id="button-update-username" onClick=${this.handleUpdateUsername} class="bg-blue-500 hover:bg-blue-700 text-white py-1 px-1 rounded user-btn">Update</button>
+            <button id="button-update-username" onClick=${this.handleUpdateUsername}  type="button" class="bg-blue-500 hover:bg-blue-700 text-white text-xs uppercase p-1 mx-1 rounded cursor-pointer user-btn">Update</button>
 
-            <button id="button-cancel-change" onClick=${this.handleHideForm} class="bg-gray-900 hover:bg-gray-800 py-1 px-2 rounded user-btn text-white text-opacity-50" title="cancel">X</button>
+            <button id="button-cancel-change" onClick=${this.handleHideForm} type="button" class="bg-gray-900 hover:bg-gray-800 py-1 px-2 mx-1 rounded cursor-pointer user-btn text-white text-xs uppercase text-opacity-50" title="cancel">X</button>
           </div>
         </div>
     `);