New empty board display and more clear connection lost

client/components/Dashboard/dashboard.vue

@@ -2,11 +2,11 @@
     <div>
         <div class="dashboard" :class="theme">
             <div class="statuses__container">
-                <status v-if="isNotConnected" :status="noConnectionStatus" />
-                <status v-if="hasNoStatuses" :status="noStatusesStatus" />
                 <status v-for="status in statuses" :status="status" :key="status.key" :now="now" />
             </div>
+            <empty-board v-if="hasNoStatuses" />
             <video-overlay />
+            <no-connection v-if="isNotConnected" />
             <tool-bar :state="globalState" />
         </div>
         <settings-panel />
@@ -18,16 +18,15 @@ import ToolBar from '../ToolBar';
 import Status from '../Status';
 import VideoOverlay from '../VideoOverlay';
 import SettingsPanel from '../SettingsPanel';
-import { STATUS_CONNECTION_LOST, STATUS_NO_STATUSES } from '../Status/staticStatuses';
 import { STATUS_GET_GLOBAL_STATE, STATUS_GET_STATUSES_ORDERED } from '../../store/StaticGetters';
+import EmptyBoard from '../EmptyBoard';
+import NoConnection from '../NoConnection';
 
 export default {
-    components: { ToolBar, Status, VideoOverlay, SettingsPanel },
+    components: { ToolBar, Status, VideoOverlay, SettingsPanel, EmptyBoard, NoConnection },
     data() {
         return {
             now: this.getCurrentTimestamp(),
-            noConnectionStatus: STATUS_CONNECTION_LOST,
-            noStatusesStatus: STATUS_NO_STATUSES,
         };
     },
     created() {

client/components/EmptyBoard/empty-board.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="empty-board">
+        <div class="circle">
+            <img src="./logo.png" alt="logo" /> CIMonitor {{ version }} <span>no statuses to show</span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    computed: {
+        version() {
+            return window.CIMonitorVersion;
+        },
+    },
+};
+</script>
+
+<style lang="sass" rel="stylesheet/sass" scoped>
+.empty-board
+    width: 100%
+    height: 100vh
+    display: flex
+    align-items: center
+    justify-content: center
+
+.circle
+    width: 300px
+    height: 240px
+    background: $color-white
+    border-radius: 50%
+    text-align: center
+    box-shadow: 0 0 100px 70px rgba($color-success, 0.3)
+    padding-top: 60px
+    font-size: 26px
+    flex-shrink: 0
+
+    img
+        display: block
+        height: 120px
+        margin: auto
+
+    span
+        display: block
+        font-size: 16
+        color: $color-gray-dark
+</style>

client/components/EmptyBoard/index.js

@@ -0,0 +1,3 @@
+import EmptyBoard from './empty-board.vue';
+
+export default EmptyBoard;

client/components/NoConnection/index.js

@@ -0,0 +1,3 @@
+import NoConnection from './no-connection.vue';
+
+export default NoConnection;

client/components/NoConnection/no-connection.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="no-connection">no connection with the server</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="sass" rel="stylesheet/sass" scoped>
+.no-connection
+    position: fixed
+    top: 0
+    left: 0
+    width: calc(100% - 40px)
+    padding: 20px
+    color: $color-white
+    font-size: 50px
+    text-align: center
+    background: rgba(235, 0, 0, 0.8)
+</style>