add a send button on chat for touch screen devices (#1127)

* add a send button on chat for touch screen devices

* cleanup

webroot/js/components/chat/chat-input.js

@@ -232,7 +232,7 @@ export default class ChatInput extends Component {
     });
   }
 
-  handleMessageInputBlur(event) {
+  handleMessageInputBlur() {
     this.prepNewLine = false;
     this.modifierKeyPressed = false;
   }
@@ -282,7 +282,7 @@ export default class ChatInput extends Component {
 
   render(props, state) {
     const { hasSentFirstChatMessage, inputCharsLeft, inputHTML } = state;
-    const { inputEnabled, chatDisabled } = props;
+    const { inputEnabled } = props;
     const emojiButtonStyle = {
       display: this.emojiPicker && inputCharsLeft > 0 ? 'block' : 'none',
     };
@@ -300,7 +300,7 @@ export default class ChatInput extends Component {
       >
         <div
           id="message-input-wrap"
-          class="flex flex-row justify-end appearance-none w-full bg-gray-200 border border-black-500 rounded py-2 px-2 pr-12 my-2 overflow-auto"
+          class="flex flex-row justify-end appearance-none w-full bg-gray-200 border border-black-500 rounded py-2 px-2 pr-20 my-2 overflow-auto"
         >
           <${ContentEditable}
             id="message-input"
@@ -318,19 +318,33 @@ export default class ChatInput extends Component {
         </div>
         <div
           id="message-form-actions"
-          class="absolute flex flex-col w-10 justify-end items-center"
+          class="absolute flex flex-col justify-end items-end mr-4"
         >
-          <button
+          <span class="flex flex-row justify-center">
-            ref=${this.emojiPickerButton}
+            <button
-            id="emoji-button"
+              ref=${this.emojiPickerButton}
-            class="text-3xl leading-3 cursor-pointer text-purple-600"
+              id="emoji-button"
-            type="button"
+              class="text-3xl leading-3 cursor-pointer text-purple-600"
-            style=${emojiButtonStyle}
+              type="button"
-            onclick=${this.handleEmojiButtonClick}
+              style=${emojiButtonStyle}
-            disabled=${!inputEnabled}
+              onclick=${this.handleEmojiButtonClick}
-          >
+              aria-label="Select an emoji"
-            <img src="../../../img/smiley.png" />
+              disabled=${!inputEnabled}
-          </button>
+            >
+              <img src="../../../img/smiley.png" />
+            </button>
+
+            <button
+              id="send-message-button"
+              class="text-sm text-white rounded bg-gray-600 hidden p-1 ml-1 -mr-2"
+              type="button"
+              onclick=${this.handleSubmitChatButton}
+              disabled=${inputHTML === '' || inputCharsLeft < 0}
+              aria-label="Send message"
+            >
+              Send
+            </button>
+          </span>
 
           <span id="message-form-warning" class="text-red-600 text-xs"
             >${inputCharsLeft}/${CHAT_MAX_MESSAGE_LENGTH}</span

webroot/styles/app.css

@@ -175,6 +175,11 @@ header {
   min-height: auto;
 }
 
+/* display `send` button on mobile */
+.touch-screen #send-message-button{
+  display: inline-block;
+}
+
 
 /* *********** single col layout ***************************** */
 

webroot/styles/chat.css

@@ -31,7 +31,7 @@
   max-height: 5rem;
 }
 #message-form-actions {
-  right: 2rem;
+  right: 1rem;
   bottom: 1.88rem;
 }
 #emoji-button {