From d417d548441a577ae3adfd08cb3a950dfbb6d574 Mon Sep 17 00:00:00 2001
From: paf <paf@titelfrei.de>
Date: Thu, 15 Apr 2021 09:07:43 +0200
Subject: [PATCH] redesigns the main-error using the alert-component.

No Changes in the behaviour.
---
 src/app/app.component.html | 22 ++++++++++++++--------
 src/app/app.component.ts   |  2 +-
 src/app/app.module.ts      |  4 +++-
 src/styles.css             | 35 +++++++++++++++++++++--------------
 4 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 890ec8cd..bbcf9e37 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,14 +3,20 @@
     <img src="assets/IQB-LogoA.png" matTooltip="Zur Startseite" alt="IQB-logo"/>
   </a>
 </div>
-<div class="error-msg" *ngIf="showError" [matTooltip]="errorData?.description" fxLayout="row" fxLayoutAlign="space-between center">
-  <mat-icon>error</mat-icon>
-  {{ errorData?.label }}
-  <div style="font-size: small">{{ errorData?.description }}</div>
-  <button mat-button (click)="closeErrorBox()" matTooltip="Fehlernachricht ausblenden" fxFlex="none">
-    <mat-icon>clear</mat-icon>
-  </button>
-</div>
+
+<div id="shield" *ngIf="showError"></div>
+
+<mat-card *ngIf="showError" class="main-alert" (click)="closeErrorBox()">
+  <mat-card-title>
+    <alert *ngIf="errorData?.category === 'FATAL'" text="Fehler: {{ errorData?.label }}" level="error"></alert>
+    <alert *ngIf="errorData?.category === 'PROBLEM'" text="Fehler: {{ errorData?.label }}" level="error"></alert>
+    <alert *ngIf="errorData?.category === 'WARNING'" text="Warnung: {{ errorData?.label }}" level="warning"></alert>
+  </mat-card-title>
+  <mat-card-content>
+    {{ errorData?.description }}
+  </mat-card-content>
+</mat-card>
+
 <div class="spinner" *ngIf="mds.isSpinnerOn$ | async">
   <mat-spinner></mat-spinner>
 </div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 5bfb25e0..0241cae4 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -129,7 +129,7 @@ export class AppComponent implements OnInit, OnDestroy {
             label: 'Server- und Client-Uhr stimmen nicht überein.',
             description: `Server-Zeit: ${AppComponent.localTime(serverTime)}, 
             Client-Zeit: ${AppComponent.localTime(clientTime)}`,
-            category: 'FATAL'
+            category: 'WARNING'
           });
         }
         this.mds.setTestConfig(sysConfig.testConfig);
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 7ded18c4..33454caa 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -37,6 +37,7 @@ import { StatusCardComponent } from './app-root/status-card/status-card.componen
 import { TestStarterComponent } from './app-root/test-starter/test-starter.component';
 import { MonitorStarterComponent } from './app-root/monitor-starter/monitor-starter.component';
 import { PrivacyComponent } from './app-root/privacy/privacy.component';
+import { AlertModule } from './shared/alert/alert.module';
 
 @NgModule({
   declarations: [
@@ -76,7 +77,8 @@ import { PrivacyComponent } from './app-root/privacy/privacy.component';
     HttpClientModule,
     RouterModule,
     AppRoutingModule,
-    IqbComponentsModule.forRoot()
+    IqbComponentsModule.forRoot(),
+    AlertModule
   ],
   providers: [
     BackendService,
diff --git a/src/styles.css b/src/styles.css
index 7ff1e088..40fb5340 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -123,21 +123,28 @@ div.logo img {
   color: white;
 }
 
-.error-msg {
-  position: absolute;
-  left: 40px;
-  top: 60px;
-  min-height: 60px;
-  width: calc(100% - 80px);
-  font-size: 1.1em;
-  border-width: 6px;
-  border-style: solid;
-  border-color: brown;
-  background-color: white;
-  color: brown;
+.main-alert {
+  position: fixed !important;
+  top: 20%;
+  right: 10%;
+  left: 10%;
+  padding: 3em;
   z-index: 999;
+  background: white;
+  cursor: pointer;
 }
 
-.error-msg mat-icon {
-  height: 32px;
+.main-alert mat-card-title {
+  font-size: 24px;
+  font-weight: 500;
+}
+
+#shield {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 998;
 }
-- 
GitLab