Added icon and text style for empty pages

src/components/EmptyMessage.vue

@@ -0,0 +1,52 @@
+<template>
+  <v-flex xs12 md6 class="empty-message"   style="margin:auto"   :color="(darkMode) ? `grey darken-2` : `grey lighten-4`">
+    <v-layout row fill-height>
+      <v-flex xs12>
+        <v-icon :size="iconSize"  :color="(darkMode) ? `grey darken-2` : `grey lighten-4`">{{ icon }}</v-icon>
+      </v-flex>
+    </v-layout>
+    <v-layout row fill-height>
+      <v-flex xs12>
+        <span class="text-xs-center" :class="fontSize">{{ message }}</span>
+      </v-flex>
+    </v-layout>
+  </v-flex>
+</template>
+
+<script>
+export default {
+  name: "EmptyMessage",
+  props: {
+    icon: {
+      type: String,
+      required: true
+    },
+    iconSize: {
+      type: String,
+      required: true
+    },
+    fontSize: {
+      type: String,
+      required: true
+    },
+    message: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    darkMode() {
+      return this.$store.state.settings.darkMode;
+    }
+  }
+};
+</script>
+<style lang="css" scoped>
+.empty-message{
+  margin: auto;
+  text-align: center;
+  border: 3px solid;
+  border-style: dashed;
+  padding: 5%;
+}
+</style>

src/views/Issues.vue

@@ -7,21 +7,26 @@
       </template>
     </v-list>
     <v-layout v-else ma-4>
-      <v-flex>
-        <span>Looks like you do not have created any issue...</span>
-      </v-flex>
+      <empty-message
+        message="Looks like you do not have created any issue..."
+        icon="bug_report"
+        icon-size="100"
+        font-size="display-1"
+      ></empty-message>
     </v-layout>
   </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
 import Issue from "@/components/Issue.vue";
+import EmptyMessage from "@/components/EmptyMessage.vue";
 
 export default {
   name: "issues",
   components: {
-    Issue
+    Issue,
+    EmptyMessage
   },
   computed: {
     ...mapGetters({

src/views/Projects.vue

@@ -7,21 +7,26 @@
       </template>
     </v-list>
     <v-layout v-else ma-4>
-      <v-flex>
-        <span>No projects to show...</span>
-      </v-flex>
+      <empty-message
+        message="No projects to show..."
+        icon="lightbulb"
+        icon-size="100"
+        font-size="display-1"
+      ></empty-message>
     </v-layout>
   </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
 import Project from "@/components/Project.vue";
+import EmptyMessage from "@/components/EmptyMessage.vue";
 
 export default {
   name: "projects",
   components: {
-    Project
+    Project,
+    EmptyMessage
   },
   computed: {
     ...mapGetters({

src/views/Runners.vue

@@ -7,21 +7,26 @@
       </template>
     </v-list>
     <v-layout v-else ma-4>
-      <v-flex>
-        <span>Looks like you do not have enough rights to access the runners Gitlab API.</span>
-      </v-flex>
+      <empty-message
+        message="Looks like you do not have enough rights to access the runners Gitlab API."
+        icon="directions_run"
+        iconSize="100"
+        fontSize="display-1"
+      ></empty-message>
     </v-layout>
   </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
 import Runner from "@/components/Runner.vue";
+import EmptyMessage from "@/components/EmptyMessage.vue";
 
 export default {
   name: "runners",
   components: {
-    Runner
+    Runner,
+    EmptyMessage
   },
   computed: {
     ...mapGetters({

src/views/Todos.vue

@@ -13,21 +13,26 @@
       </template>
     </v-list>
     <v-layout v-else ma-4>
-      <v-flex>
-        <span>Looks like you do not have anything to do...</span>
-      </v-flex>
+      <empty-message
+        message="Looks like you do not have anything to do..."
+        icon="list"
+        icon-size="100"
+        font-size="display-1"
+      ></empty-message>
     </v-layout>
   </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
 import Todo from "@/components/Todo.vue";
+import EmptyMessage from "@/components/EmptyMessage.vue";
 
 export default {
   name: "todos",
   components: {
-    Todo
+    Todo,
+    EmptyMessage
   },
   computed: {
     ...mapGetters({