added update message

src/app/app.component.html

@@ -1,4 +1,4 @@
-<div class="drag-and-drop" *ngIf="drag" (dragover)="dragover($event)"  (drop)="drop($event)"
+<div class="drag-and-drop" *ngIf="drag" (dragover)="dragover($event)" (drop)="drop($event)"
     [ngClass]="{'drag-and-drop__on-drag': drag2 === true }">
     <!-- (dragleave)="dragleave($event)"  -->
     <div class="drag-and-drop__card">
@@ -10,6 +10,12 @@
     </div>
 </div>
 
+<div class="auto-update">
+    <div class="auto-update__display">
+        <div class="auto-update__display--text">A new version is available!</div> <a href class="auto-update__display--reload">reload</a> <a href class="auto-update__display--close"><fa-icon [icon]="faTimes"></fa-icon></a>
+    </div>
+</div>
+
 <app-media-viewer id="media-viewer" *ngIf="openedMediaEvent" [openedMediaEvent]="openedMediaEvent"
     (closeSubject)="closeMedia()" (dragenter)="dragenter($event)"></app-media-viewer>
 

src/app/app.component.scss

@@ -97,4 +97,65 @@ app-streams-selection-footer {
     right: 0;
     bottom: 0;
     left: 50px;
+}
+
+.auto-update {
+    transition: all .2s;
+    position: absolute;
+    height: 70px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999999999;
+   
+
+    &__display {
+        position: relative;
+        // height: 30px;
+        width: 300px;        
+        // margin: 0 auto 30px auto;
+        margin: auto;
+        border-radius: 2px;
+        color: rgba(rgb(0, 4, 24), 1);
+        background: rgba(rgb(0, 140, 255), 1);
+
+        &--text {
+            display: inline-block;
+            padding: 5px 10px;
+        }
+
+        &--reload {
+            transition: all .2s;
+            position: absolute;
+            right: 31px;
+
+            padding: 5px 10px;
+            text-decoration: none;
+            color: rgba(rgb(0, 4, 24), 1);
+            background-color: red;
+
+            &:hover {
+                background-color: rgb(97, 0, 0);
+            }
+        }
+
+        &--close {
+            transition: all .2s;
+            position: absolute;
+            right: 0;
+
+            display: inline-block;
+            padding: 5px 10px;
+            text-decoration: none;
+            border-top-right-radius: 2px;
+            border-bottom-right-radius: 2px;
+
+            color: rgba(rgb(0, 4, 24), 1);
+
+            background-color: red;
+            &:hover {
+                background-color: rgb(97, 0, 0);
+            }
+        }
+    }
 }

src/app/app.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Subscription, Observable, Subject } from 'rxjs';
 import { debounceTime, map } from 'rxjs/operators';
 import { Select } from '@ngxs/store';
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
 // import { ElectronService } from 'ngx-electron';
 
 import { NavigationService, LeftPanelType, OpenLeftPanelEvent } from './services/navigation.service';
@@ -16,6 +17,7 @@ import { MediaService } from './services/media.service';
     styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit, OnDestroy {
+    faTimes = faTimes;
     title = 'Sengi';
     floatingColumnActive: boolean;
     tutorialActive: boolean;