From 6cf7da50895ba8c65084aab1f03efc41c6a2817e Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Sat, 20 Aug 2022 03:32:31 +0300
Subject: [PATCH] improve message bar appearance on small viewports

---
 frontend/public/global.css                  |  1 +
 frontend/src/components/MessageInput.svelte | 21 ++++++++++++++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/public/global.css b/frontend/public/global.css
index 13f72a7..2e8c5d4 100644
--- a/frontend/public/global.css
+++ b/frontend/public/global.css
@@ -36,6 +36,7 @@
 	--space-unit: 1em;
 	--space-xxs: calc(0.25 * var(--space-unit));
 	--space-xs: calc(0.5 * var(--space-unit));
+	--space-xsplus: calc(0.65 * var(--space-unit));
 	--space-sm: calc(0.75 * var(--space-unit));
 	--space-norm: var(--space-unit);
 	--space-normplus: calc(var(--space-unit) + var(--space-sm));
diff --git a/frontend/src/components/MessageInput.svelte b/frontend/src/components/MessageInput.svelte
index 313eb85..ac79a2a 100644
--- a/frontend/src/components/MessageInput.svelte
+++ b/frontend/src/components/MessageInput.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { SendIcon } from "svelte-feather-icons";
+    import { ArrowUpIcon, SendIcon } from "svelte-feather-icons";
     import request from "../request";
     import { apiRoute } from "../storage";
     import { messagesStoreProvider, overlayStore, smallViewport, typingStore, userInfoStore } from "../stores";
@@ -101,6 +101,16 @@
         padding: var(--space-norm);
         padding-bottom: 0;
     }
+    
+    .message-input-container.small {
+        padding-top: var(--space-sm);
+    }
+    
+    .message-input.small {
+        padding: var(--space-xsplus);
+        padding-left: var(--space-sm);
+        border-radius: 1.4em;
+    }
 
     .message-input {
         width: 100%;
@@ -120,6 +130,10 @@
 
     .send-button {
         margin-left: var(--space-sm);
+        border-radius: 50%;
+        background-color: var(--purple-1);
+        aspect-ratio: 1 / 1;
+        flex-shrink: 0;
     }
 
     .invisible {
@@ -148,7 +162,7 @@
     }
 </style>
 
-<div class="message-input-container">
+<div class="message-input-container" class:small={ $smallViewport }>
     <div class="inner-input-container">
         <textarea
             placeholder={$smallViewport ? `Message #${channel.name}` : `Send something interesting to #${channel.name}`}
@@ -159,10 +173,11 @@
             on:input={ onInput }
             bind:value={ messageInput }
             bind:this={ messageTextarea }
+            class:small={ $smallViewport }
         />
         {#if $smallViewport}
             <button class="icon-button send-button" on:click="{ sendMessage }">
-                <SendIcon />
+                <ArrowUpIcon />
             </button>
         {/if}
     </div>