From 74aa9527cc68ebcb62c6c7ef10e43f0dbed765fe Mon Sep 17 00:00:00 2001
From: Noah Petherbridge <root@kirsle.net>
Date: Wed, 16 Aug 2023 22:26:02 -0700
Subject: [PATCH] UX improvement for send message button

---
 web/templates/chat.html | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/web/templates/chat.html b/web/templates/chat.html
index f87ce79..3677cdb 100644
--- a/web/templates/chat.html
+++ b/web/templates/chat.html
@@ -1117,20 +1117,27 @@
                 <div class="card-content p-2">
 
                     <div class="columns is-mobile">
-                        <div class="column"
-                            :class="{'pr-1': canUploadFile}">
+                        <div class="column pr-1 is-narrow" v-if="canUploadFile">
+                            <button type="button" class="button"
+                                @click="uploadFile()">
+                                <i class="fa fa-image"></i>
+                            </button>
+                        </div>
+                        <div class="column pr-1"
+                            :class="{'pl-1': canUploadFile}">
                             <form @submit.prevent="sendMessage()">
                                 <input type="text" class="input"
                                     v-model="message"
-                                    placeholder="Message"
+                                    placeholder="Write a message"
                                     @keydown="sendTypingNotification()"
                                     :disabled="!ws.connected">
                             </form>
                         </div>
-                        <div class="column pl-1 is-narrow" v-if="canUploadFile">
+                        <div class="column pl-1 is-narrow">
                             <button type="button" class="button"
-                                @click="uploadFile()">
-                                <i class="fa fa-image"></i>
+                                :disabled="message.length === 0"
+                                @click="sendMessage()">
+                                <i class="fa fa-paper-plane"></i>
                             </button>
                         </div>
                     </div>