From f5438de2f2daf81a0581a7a16bb8c42ce9cdbe49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= <havar@fosstveit.net>
Date: Tue, 30 Oct 2018 11:48:16 +0100
Subject: [PATCH] Added an indication for when there are noe chat messages

---
 app/lib/components/Chat/MessageList.jsx |  5 ++++-
 app/stylus/components/Chat.styl         | 19 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/app/lib/components/Chat/MessageList.jsx b/app/lib/components/Chat/MessageList.jsx
index e80e17b..43a9671 100644
--- a/app/lib/components/Chat/MessageList.jsx
+++ b/app/lib/components/Chat/MessageList.jsx
@@ -30,7 +30,7 @@ class MessageList extends Component
 
 		return (
 			<div data-component='MessageList' id='messages'>
-				{
+				{ chatmessages.length > 0 ?
 					chatmessages.map((message, i) =>
 					{
 						const messageTime = new Date(message.time);
@@ -61,6 +61,9 @@ class MessageList extends Component
 							</div>
 						);
 					})
+					:<div className='empty'>
+						<p>No one has said anything yet...</p>
+					</div>
 				}
 			</div>
 		);
diff --git a/app/stylus/components/Chat.styl b/app/stylus/components/Chat.styl
index d94fe68..b6a480d 100644
--- a/app/stylus/components/Chat.styl
+++ b/app/stylus/components/Chat.styl
@@ -6,7 +6,7 @@
 }
 
 [data-component='MessageList'] {
-	overflow-y: scroll;
+	overflow-y: auto;
 	flex-grow: 1;
 
 	> .message {
@@ -49,6 +49,23 @@
 			}
 		}
 	}
+
+	> .empty {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		padding-top: 20vmin;
+
+		> p {
+			padding: 6px 12px;
+			border-radius: 6px;
+			user-select: none;
+			pointer-events: none;
+			font-size: 20px;
+			color: #000;
+		}
+	}
 }
 
 [data-component='Sender'] {