Merge pull request #67 from jenkinsci/errors

Improve errors dialog

Author: uhafner

src/main/resources/io/jenkins/plugins/bootstrap5/MessagesViewModel/index.jelly

@@ -1,26 +1,31 @@
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:bs="/bootstrap5">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:bs="/bootstrap5" xmlns:fa="/font-awesome">
 
   <st:header name="Content-Type" value="text/html;charset=UTF-8"/>
 
   <bs:page it="${it}">
 
-    <j:if test="${size(errors) > 0}">
+    <j:if test="${size(it.errorMessages) > 0}">
       <div class="row py-3">
         <div class="col">
-          <bs:card title="${%Error Messages}" fontAwesomeIcon="exclamation-triangle">
-
-            <pre>
-              <samp id="errors" class="log-output">
-                <j:forEach var="message" items="${it.errorMessages}">
-                  <div>
-                    ${message}
-                  </div>
-                </j:forEach>
-              </samp>
-            </pre>
-
-          </bs:card>
+
+          <div class="card">
+            <div class="card-body">
+              <div class="card-title">
+                ${%Error Messages}
+                <fa:svg-icon name="exclamation-triangle" class="icon-right fa-image-button-warning"/>
+              </div>
+              <pre>
+                <samp id="errors" class="log-output">
+                  <j:forEach var="message" items="${it.errorMessages}">
+                    <div>
+                      ${message}
+                    </div>
+                  </j:forEach>
+                </samp>
+              </pre>
+            </div>
+          </div>
         </div>
       </div>
     </j:if>

src/main/webapp/css/jenkins-style.css

@@ -30,14 +30,6 @@ pre {
     font-size: var(--font-size-sm);
 }
 
-.info-page-decorator {
-    fill: #b4b4b4;
-    height: 16px;
-    width: 16px;
-    vertical-align: text-bottom;
-    margin-left: 0.2em;
-}
-
 /* ------------------------------------------------------------------------------------------------------------------- */
 /* Bootstrap Carousel                                                                                                  */
 /* ------------------------------------------------------------------------------------------------------------------- */
@@ -59,7 +51,6 @@ pre {
     font-size: inherit;
 }
 
-
 .card-title {
     font-size: 1.2rem;
     font-weight: 500;
@@ -68,7 +59,7 @@ pre {
 
 .icon-right {
     float: right;
-    fill: #b4b4b4;
+    fill: var(--fa-image-color);
     height: 48px;
     width: 48px;
     position: absolute;