Merge pull request #21978 from votdev/improve_error_panel_mimic

mimic: mgr/dashboard: Improve error panel

Reviewed-by: Ricardo Marques <rimarques@suse.com>
Reviewed-by: Stephan Müller <smueller@suse.com>

src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.html

@@ -1,9 +1,20 @@
 <alert type="danger">
-  <strong>
-    <i class="fa fa-exclamation-triangle fa-fw alert-danger"
-       aria-hidden="true"></i> {{ title }}
-  </strong>
-  <ng-content></ng-content>
+  <table>
+    <tr>
+      <td rowspan="2" class="error-panel-alert-icon">
+        <i class="fa fa-3x fa-exclamation-triangle alert-danger"
+           aria-hidden="true"></i>
+      </td>
+      <td class="error-panel-alert-title">
+        {{ title }}
+      </td>
+    </tr>
+    <tr>
+      <td class="error-panel-alert-text">
+        <ng-content></ng-content>
+      </td>
+    </tr>
+  </table>
 </alert>
 
 <div class="button-group text-right"

src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.scss

@@ -0,0 +1,9 @@
+.error-panel-alert-icon {
+  vertical-align: top;
+  padding-right: 15px; // See @alert-padding in bootstrap/less/variables.less
+}
+.error-panel-alert-title {
+  font-weight: bold;
+}
+.error-panel-alert-text {
+}

src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.ts

@@ -6,12 +6,11 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   styleUrls: ['./error-panel.component.scss']
 })
 export class ErrorPanelComponent {
-
   /**
-   * The title to be displayed. Defaults to 'Error!'.
+   * The title to be displayed. Defaults to 'Error'.
    * @type {string}
    */
-  @Input() title = 'Error!';
+  @Input() title = 'Error';
 
   /**
    * The event that is triggered when the 'Back' button is pressed.