From 9bfc645a32a60e2defe2acf1c4afd5d68918e0ea Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Fri, 22 Apr 2022 23:10:00 +0300
Subject: [PATCH] frontend: improve messages container padding

---
 frontend/public/global.css                            | 1 +
 frontend/src/components/pages/main/ChannelView.svelte | 2 +-
 frontend/src/components/pages/main/Messages.svelte    | 3 +--
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/public/global.css b/frontend/public/global.css
index 6b65d68..b01dc11 100644
--- a/frontend/public/global.css
+++ b/frontend/public/global.css
@@ -28,6 +28,7 @@
 	--space-xs: calc(0.5 * 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));
 	--space-md: calc(1.25 * var(--space-unit));
 	--space-lg: calc(2 * var(--space-unit));
 	--space-xl: calc(3.25 * var(--space-unit));
diff --git a/frontend/src/components/pages/main/ChannelView.svelte b/frontend/src/components/pages/main/ChannelView.svelte
index 89f5ed6..d74017d 100644
--- a/frontend/src/components/pages/main/ChannelView.svelte
+++ b/frontend/src/components/pages/main/ChannelView.svelte
@@ -91,6 +91,6 @@
     </div>
     <Messages channelId="{ channel.id }" />
     <div class="message-input-container">
-        <input type="text" class="message-input" on:keydown={ onKeydown } bind:value={ messageInput }>
+        <input placeholder={`Send something interesting to #${channel.name}`} type="text" class="message-input" on:keydown={ onKeydown } bind:value={ messageInput }>
     </div>
 </div>
diff --git a/frontend/src/components/pages/main/Messages.svelte b/frontend/src/components/pages/main/Messages.svelte
index 30a0b81..942a801 100644
--- a/frontend/src/components/pages/main/Messages.svelte
+++ b/frontend/src/components/pages/main/Messages.svelte
@@ -48,9 +48,8 @@
 
 <style>
     .messages-container {
-        padding: var(--space-norm);
+        padding: var(--space-normplus);
         padding-bottom: 0;
-        padding-top: 0;
         height: 100%;
         width: 100%;
         flex-grow: 0;