From ef7ebb0c99a2fd7c4e5d75595210a02c5741325f Mon Sep 17 00:00:00 2001
From: Webifi <john@webifi.com>
Date: Thu, 1 Jun 2023 12:44:18 -0500
Subject: [PATCH] Format prompt input buttons.

---
 src/app.scss        | 15 +++++++++++++++
 src/lib/Chat.svelte | 16 ++++++++--------
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 8117899..a8fb3c2 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -413,6 +413,21 @@ aside.menu.main-menu .menu-expanse {
     var(--chatInputPaddingRight)
     var(--chatInputPaddingBottom)
     var(--chatInputPaddingLeft);
+
+  .control.send .button {
+    width: 60px;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .prompt-input-container {
+    .control.send .button {
+      width: auto;
+    }
+    .control.settings {
+      display: none;
+    }
+  }
 }
 
 .content.running-total-container {
diff --git a/src/lib/Chat.svelte b/src/lib/Chat.svelte
index caef79e..987334a 100644
--- a/src/lib/Chat.svelte
+++ b/src/lib/Chat.svelte
@@ -536,19 +536,19 @@
         bind:this={input}
       />
     </p>
-    <p class="control" class:is-hidden={!recognition}>
+    <p class="control mic" class:is-hidden={!recognition}>
       <button class="button" class:is-pulse={recording} on:click|preventDefault={recordToggle}
-        ><span class="greyscale"><Fa icon={faMicrophone} /></span></button
+        ><span class="icon"><Fa icon={faMicrophone} /></span></button
       >
     </p>
-    <p class="control">
-      <button title="Chat/Profile Settings" class="button" on:click|preventDefault={showSettingsModal}><Fa icon={faGear} /></button>
+    <p class="control settings">
+      <button title="Chat/Profile Settings" class="button" on:click|preventDefault={showSettingsModal}><span class="icon"><Fa icon={faGear} /></span></button>
     </p>
-    <p class="control">
-      <button title="Add message, don't send yet" class="button is-ghost" on:click|preventDefault={addNewMessage}><Fa icon={faArrowUpFromBracket} /></button>
+    <p class="control queue">
+      <button title="Queue message, don't send yet" class="button is-ghost" on:click|preventDefault={addNewMessage}><span class="icon"><Fa icon={faArrowUpFromBracket} /></span></button>
     </p>
-    <p class="control">
-      <button title="Send" class="button is-info" type="submit"><Fa icon={faPaperPlane} /></button>
+    <p class="control send">
+      <button title="Send" class="button is-info" type="submit"><span class="icon"><Fa icon={faPaperPlane} /></span></button>
     </p>
   </form>
   <!-- a target to scroll to -->