Improve color scheme and responsiveness of status message banner (#395)

Author: omkar-ethz

src/app/shared/modules/status-message/status-banner/status-banner.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar [color]="bannerColor" class="toolbar">
+<mat-toolbar [color]="bannerColor" [class]='["toolbar", "toolbar-" + appConfig.statusCode]'>
   <span [innerHTML]="appConfig.statusMessage" class="status-message"></span>
   <span class="spacer"></span>
   <button mat-icon-button aria-label="Dismiss" (click)="onDismiss()">

src/app/shared/modules/status-message/status-banner/status-banner.component.scss

@@ -3,15 +3,32 @@
 }
 
 .toolbar {
-  height: 32px;
+  min-height: 32px;
+  height: fit-content;
 }
 
+.status-message {
+  text-wrap: wrap;
+}
+
+.toolbar-WARN {
+  background-color: #FEEFB3;
+  color: #9F6000;
+}
+
+.toolbar-INFO {
+  color: #4F8A10;
+  background-color: #DFF2BF;
+}
+
+
 @media (max-width: 800px) {
-  .toolbar {
-    height: 64px;
-  }
   .status-message {
-    text-wrap: wrap;
     font-size: 16px;
   }
 }
+
+:host ::ng-deep a {
+  text-decoration: underline;
+  color: inherit;
+}