Add first emptycontent illustration

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

css/style.css

@@ -0,0 +1,12 @@
+.app-social #emptycontent,
+.app-social .emptycontent {
+    margin-top: 5vh;
+}
+
+.app-social #emptycontent .icon-illustration,
+.app-social .emptycontent .icon-illustration {
+    height: 256px;
+    width: 256px;
+    margin: 0;
+    opacity: 1;
+}

src/components/Composer.vue

@@ -33,7 +33,7 @@
 			<vue-tribute :options="tributeOptions">
 				<!-- eslint-disable-next-line vue/valid-v-model -->
 				<div v-contenteditable:post.dangerousHTML="canType" ref="composerInput" class="message"
-					placeholder="Share a thought…" @keyup.enter="keyup" />
+					placeholder="What would you like to share?" @keyup.enter="keyup" />
 			</vue-tribute>
 			<emoji-picker ref="emojiPicker" :search="search" class="emoji-picker-wrapper"
 				@emoji="insert">

src/views/Timeline.vue

@@ -18,8 +18,9 @@
 				<div slot="no-more"><div class="list-end" /></div>
 				<div slot="no-results">
 					<div id="emptycontent">
-						<div class="icon-social" />
-						<h2>{{ t('social', 'No posts found.') }}</h2>
+						<img class="icon-illustration" src="../../img/undraw/posts.svg" alt="" />
+						<h2>{{ t('social', 'No posts found') }}</h2>
+						<p>{{ t('social', 'Posts from people you follow will show up here') }}</p>
 					</div>
 				</div>
 			</infinite-loading>