Refactor info message

apps/client/src/app/app.component.html

@@ -1,22 +1,10 @@
 <header>
-  <gf-header
-    class="position-fixed w-100"
-    [currentRoute]="currentRoute"
-    [hasTabs]="hasTabs"
-    [info]="info"
-    [pageTitle]="pageTitle"
-    [user]="user"
-    (signOut)="onSignOut()"
-  ></gf-header>
-</header>
-
-<main role="main">
   <div
     *ngIf="canCreateAccount || (info?.systemMessage && user)"
-    class="container info-message-container"
+    class="info-message-container"
   >
-    <div class="row">
-      <div class="col-md-8 offset-md-2 text-center">
+    <div class="info-message-inner-container position-fixed w-100">
+      <div class="align-items-center d-flex h-100 justify-content-center">
         <a
           *ngIf="canCreateAccount"
           class="text-center"
@@ -26,8 +14,8 @@
             class="cursor-pointer d-inline-block info-message px-3 py-2"
             (click)="onCreateAccount()"
           >
-            <span>You are using the Live Demo.</span>
-            <span class="a ml-2">Create Account</span>
+            <span i18n>You are using the Live Demo.</span>
+            <span class="a ml-2" i18n>Create Account</span>
           </div></a
         >
         <div
@@ -41,6 +29,18 @@
     </div>
   </div>
 
+  <gf-header
+    class="position-fixed w-100"
+    [currentRoute]="currentRoute"
+    [hasTabs]="hasTabs"
+    [info]="info"
+    [pageTitle]="pageTitle"
+    [user]="user"
+    (signOut)="onSignOut()"
+  ></gf-header>
+</header>
+
+<main role="main">
   <router-outlet></router-outlet>
 </main>
 

apps/client/src/app/app.component.scss

@@ -4,6 +4,38 @@
   display: block;
   min-height: 100vh;
 
+  &.has-info-message {
+    header {
+      height: calc(2 * var(--mat-toolbar-standard-height));
+
+      .info-message-container {
+        height: var(--mat-toolbar-standard-height);
+
+        .info-message-inner-container {
+          background-color: var(--light-background);
+          height: var(--mat-toolbar-standard-height);
+          z-index: 999;
+
+          .info-message {
+            background-color: rgba(var(--palette-foreground-text), 0.05);
+            border-radius: 2rem;
+            font-size: 80%;
+            max-width: 100%;
+
+            .a {
+              color: rgba(var(--palette-primary-500), 1);
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+
+    main {
+      min-height: calc(100vh - 2 * var(--mat-toolbar-standard-height));
+    }
+  }
+
   footer {
     background-color: rgba(var(--palette-foreground-text), 0.05);
     font-size: 90%;
@@ -15,35 +47,25 @@
 
   main {
     min-height: calc(100vh - var(--mat-toolbar-standard-height));
+  }
+}
 
-    .info-message-container {
-      height: 3.5rem;
-
-      .info-message {
-        background-color: rgba(var(--palette-foreground-text), 0.05);
-        border-radius: 2rem;
-        font-size: 80%;
-        max-width: 100%;
+:host-context(.is-dark-theme) {
+  &.has-info-message {
+    header {
+      .info-message-container {
+        .info-message-inner-container {
+          background-color: var(--dark-background);
 
-        .a {
-          color: rgba(var(--palette-primary-500), 1);
-          font-weight: 500;
+          .info-message {
+            background-color: rgba(var(--palette-foreground-text-dark), 0.05);
+          }
         }
       }
     }
   }
-}
 
-:host-context(.is-dark-theme) {
   footer {
     background-color: rgba(var(--palette-foreground-text-dark), 0.05);
   }
-
-  main {
-    .info-message-container {
-      .info-message {
-        background-color: rgba(var(--palette-foreground-text-dark), 0.05);
-      }
-    }
-  }
 }

apps/client/src/app/app.component.ts

@@ -3,6 +3,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  HostBinding,
   Inject,
   OnDestroy,
   OnInit
@@ -28,10 +29,15 @@ import { UserService } from './services/user/user.service';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnDestroy, OnInit {
+  @HostBinding('class.has-info-message') get getHasMessage() {
+    return this.hasInfoMessage;
+  }
+
   public canCreateAccount: boolean;
   public currentRoute: string;
   public currentYear = new Date().getFullYear();
   public deviceType: string;
+  public hasInfoMessage: boolean;
   public hasPermissionForBlog: boolean;
   public hasPermissionForStatistics: boolean;
   public hasPermissionForSubscription: boolean;
@@ -149,6 +155,12 @@ export class AppComponent implements OnDestroy, OnInit {
           permissions.createUserAccount
         );
 
+        this.hasInfoMessage =
+          hasPermission(
+            this.user?.permissions,
+            permissions.createUserAccount
+          ) || !!this.info.systemMessage;
+
         this.initializeTheme(this.user?.settings.colorScheme);
 
         this.changeDetectorRef.markForCheck();

apps/client/src/app/pages/about/about-page.component.ts

@@ -1,10 +1,4 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  HostBinding,
-  OnDestroy,
-  OnInit
-} from '@angular/core';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { TabConfiguration, User } from '@ghostfolio/common/interfaces';
@@ -20,12 +14,7 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './about-page.html'
 })
 export class AboutPageComponent implements OnDestroy, OnInit {
-  @HostBinding('class.with-info-message') get getHasMessage() {
-    return this.hasMessage;
-  }
-
   public deviceType: string;
-  public hasMessage: boolean;
   public hasPermissionForSubscription: boolean;
   public tabs: TabConfiguration[] = [];
   public user: User;
@@ -38,7 +27,7 @@ export class AboutPageComponent implements OnDestroy, OnInit {
     private deviceService: DeviceDetectorService,
     private userService: UserService
   ) {
-    const { globalPermissions, systemMessage } = this.dataService.fetchInfo();
+    const { globalPermissions } = this.dataService.fetchInfo();
 
     this.hasPermissionForSubscription = hasPermission(
       globalPermissions,
@@ -75,12 +64,6 @@ export class AboutPageComponent implements OnDestroy, OnInit {
           });
           this.user = state.user;
 
-          this.hasMessage =
-            hasPermission(
-              this.user?.permissions,
-              permissions.createUserAccount
-            ) || !!systemMessage;
-
           this.changeDetectorRef.markForCheck();
         }
 

apps/client/src/app/pages/admin/admin-page.component.ts

@@ -1,5 +1,4 @@
-import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
-import { DataService } from '@ghostfolio/client/services/data.service';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { TabConfiguration } from '@ghostfolio/common/interfaces';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
@@ -11,24 +10,12 @@ import { Subject } from 'rxjs';
   templateUrl: './admin-page.html'
 })
 export class AdminPageComponent implements OnDestroy, OnInit {
-  @HostBinding('class.with-info-message') get getHasMessage() {
-    return this.hasMessage;
-  }
-
   public deviceType: string;
-  public hasMessage: boolean;
   public tabs: TabConfiguration[] = [];
 
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor(
-    private dataService: DataService,
-    private deviceService: DeviceDetectorService
-  ) {
-    const { systemMessage } = this.dataService.fetchInfo();
-
-    this.hasMessage = !!systemMessage;
-  }
+  public constructor(private deviceService: DeviceDetectorService) {}
 
   public ngOnInit() {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;

apps/client/src/app/pages/home/home-page.component.ts

@@ -1,10 +1,4 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  HostBinding,
-  OnDestroy,
-  OnInit
-} from '@angular/core';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { TabConfiguration, User } from '@ghostfolio/common/interfaces';
@@ -20,12 +14,7 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './home-page.html'
 })
 export class HomePageComponent implements OnDestroy, OnInit {
-  @HostBinding('class.with-info-message') get getHasMessage() {
-    return this.hasMessage;
-  }
-
   public deviceType: string;
-  public hasMessage: boolean;
   public hasPermissionToAccessFearAndGreedIndex: boolean;
   public tabs: TabConfiguration[] = [];
   public user: User;
@@ -38,7 +27,7 @@ export class HomePageComponent implements OnDestroy, OnInit {
     private deviceService: DeviceDetectorService,
     private userService: UserService
   ) {
-    const { globalPermissions, systemMessage } = this.dataService.fetchInfo();
+    const { globalPermissions } = this.dataService.fetchInfo();
 
     this.hasPermissionToAccessFearAndGreedIndex = hasPermission(
       globalPermissions,
@@ -74,12 +63,6 @@ export class HomePageComponent implements OnDestroy, OnInit {
           ];
           this.user = state.user;
 
-          this.hasMessage =
-            hasPermission(
-              this.user?.permissions,
-              permissions.createUserAccount
-            ) || !!systemMessage;
-
           this.changeDetectorRef.markForCheck();
         }
       });

apps/client/src/app/pages/portfolio/portfolio-page.component.ts

@@ -1,18 +1,6 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  HostBinding,
-  OnDestroy,
-  OnInit
-} from '@angular/core';
-import { DataService } from '@ghostfolio/client/services/data.service';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
-import {
-  InfoItem,
-  TabConfiguration,
-  User
-} from '@ghostfolio/common/interfaces';
-import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { TabConfiguration, User } from '@ghostfolio/common/interfaces';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -24,13 +12,7 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './portfolio-page.html'
 })
 export class PortfolioPageComponent implements OnDestroy, OnInit {
-  @HostBinding('class.with-info-message') get getHasMessage() {
-    return this.hasMessage;
-  }
-
   public deviceType: string;
-  public hasMessage: boolean;
-  public info: InfoItem;
   public tabs: TabConfiguration[] = [];
   public user: User;
 
@@ -38,12 +20,9 @@ export class PortfolioPageComponent implements OnDestroy, OnInit {
 
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
-    private dataService: DataService,
     private deviceService: DeviceDetectorService,
     private userService: UserService
   ) {
-    this.info = this.dataService.fetchInfo();
-
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((state) => {
@@ -77,12 +56,6 @@ export class PortfolioPageComponent implements OnDestroy, OnInit {
           ];
           this.user = state.user;
 
-          this.hasMessage =
-            hasPermission(
-              this.user?.permissions,
-              permissions.createUserAccount
-            ) || !!this.info.systemMessage;
-
           this.changeDetectorRef.markForCheck();
         }
       });

apps/client/src/styles.scss

@@ -373,6 +373,12 @@ ngx-skeleton-loader {
   @include gf-table;
 }
 
+.has-info-message {
+  .page.has-tabs {
+    height: calc(100vh - 2 * var(--mat-toolbar-standard-height));
+  }
+}
+
 .hidden {
   visibility: hidden;
 }
@@ -533,10 +539,6 @@ ngx-skeleton-loader {
   text-decoration: underline !important;
 }
 
-.with-info-message {
-  height: calc(100vh - var(--mat-toolbar-standard-height) - 3.5rem) !important;
-}
-
 .with-placeholder-as-option {
   .mat-mdc-select-placeholder {
     color: rgba(var(--dark-primary-text));