Fixes after review

src/app/components/notification-box/notification-box.component.html

@@ -5,6 +5,7 @@
         <div class="content">
             <app-adbutler theme="dark"></app-adbutler>
             <mat-icon (click)="closeNotification()" class="close-button">close</mat-icon>
+            <!-- <button class="check-button" mat-button>CHECK IT OUT</button> -->
         </div>
         <div class="edgeline"></div>
     </div>

src/app/components/notification-box/notification-box.component.scss

@@ -1,7 +1,7 @@
 .notification-box {
     posiTion: fixed;
-    bottom: 10px;
-    right: 5px;
+    bottom: 20px;
+    right: 20px;
     width: 412px;
     height: 88px;
 }
@@ -13,8 +13,8 @@
 
 .close-button {
     position: fixed;
-    bottom: 65px;
-    right: 15px;
+    bottom: 70px;
+    right: 30px;
     cursor: pointer;
 }
 
@@ -23,7 +23,7 @@
 }
 
 .edgeline {
-    height: 82px;
+    height: 80px;
     width: 2px;
     background-color: #0097a7;
 }
@@ -33,3 +33,8 @@
     height: 2px;
     background-color: #0097a7;
 }
+
+.check-button {
+    background-color: #0097a7;
+    margin-top: -10px;
+}

src/app/components/notification-box/notification-box.component.ts

@@ -13,8 +13,9 @@ export class NotificationBoxComponent implements OnInit {
     notificationSettings: NotificationSettings;
     timer: Observable<number>;
     timerSubscription: Subscription;
+    intervalSubscription: Subscription;
     viewsCounter = 0;
-    ticks: number = 0;
+    ticks: number = 1000;
     progress: number = 0;
     isVisible = false;
     interval = 10;
@@ -33,7 +34,7 @@ export class NotificationBoxComponent implements OnInit {
 
         this.timerSubscription = this.timer.subscribe(() => {
             this.ticks++;
-            if (this.ticks > this.notificationSettings.breakTime) {
+            if (this.ticks > this.notificationSettings.breakTime && navigator.onLine) {
                 this.ticks = 0;
                 this.showNotification();
                 this.viewsCounter++;
@@ -50,10 +51,11 @@ export class NotificationBoxComponent implements OnInit {
         this.isVisible = true;
         this.progress = 0;
 
-        interval(this.interval).pipe(take(this.notificationSettings.viewTime)).subscribe(() => {
+        this.intervalSubscription = interval(this.interval).pipe(take(this.notificationSettings.viewTime)).subscribe(() => {
             this.progress += (1/this.interval);
             if (this.progress > ((this.notificationSettings.viewTime/this.interval)-(1/this.interval))) {
                 this.isVisible = false;
+                this.intervalSubscription.unsubscribe();
             }
         });
     }

src/app/services/notification-settings.service.ts

@@ -8,7 +8,7 @@ export class NotificationSettingsService {
 
   getConfiguration(): NotificationSettings {
     let configuration: NotificationSettings = {
-        delayTime: 1000,
+        delayTime: 0,
         viewTime: 1000,
         breakTime: 1000,
         isEndless: true,