refactor: use jenkins cards over bootstrap cards

Signed-off-by: Lewis Birks <[email protected]>

Author: lewisbirks

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

@@ -1,48 +1,34 @@
 <?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:l="/lib/layout">
 
   <st:header name="Content-Type" value="text/html;charset=UTF-8"/>
 
   <bs:page it="${it}">
-
     <j:if test="${size(it.errorMessages) > 0}">
-      <div class="row py-3">
-        <div class="col">
-
-          <bs:card title="${%Error Messages}" fontAwesomeIcon="triangle-exclamation">
-            <pre>
-              <samp id="errors" class="log-output">
-                <j:forEach var="message" items="${it.errorMessages}">
-                  <div>
-                    ${message}
-                  </div>
-                </j:forEach>
-              </samp>
-            </pre>
-          </bs:card>
+      <l:card title="${%Error Messages}">
+        <div class="bs5-console-output">
+          <pre id="errors">
+            <j:forEach var="message" items="${it.errorMessages}">
+              <div>
+                ${message}
+              </div>
+            </j:forEach>
+          </pre>
         </div>
-      </div>
+      </l:card>
     </j:if>
 
-    <div class="row py-3">
-      <div class="col">
-
-        <bs:card title="${%Information Messages}" fontAwesomeIcon="circle-info">
-
-          <pre>
-            <samp id="info" class="log-output">
-              <j:forEach var="message" items="${it.infoMessages}">
-                <div>
-                  ${message}
-                </div>
-              </j:forEach>
-            </samp>
-          </pre>
-        </bs:card>
-
+    <l:card title="${%Information Messages}">
+      <div class="bs5-console-output">
+        <pre id="info">
+          <j:forEach var="message" items="${it.infoMessages}">
+            <div>
+              ${message}
+            </div>
+          </j:forEach>
+        </pre>
       </div>
-    </div>
-
+    </l:card>
   </bs:page>
 
 </j:jelly>

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

@@ -155,3 +155,27 @@ pre {
     backdrop-filter: contrast(0.6) brightness(2.4) saturate(2) blur(15px);
     box-shadow: 0 0 8px 2px rgba(0,0,30,.05), 0 0 1px 1px rgba(0,0,20,.025), 0 10px 20px rgba(0,0,20,.15);
 }
+
+/* ------------------------------------------------------------------------------------------------------------------- */
+/* Console output                                                                                                      */
+/* ------------------------------------------------------------------------------------------------------------------- */
+
+.bs5-console-output {
+    margin: 0 -1rem -1rem;
+    padding: 0 1rem 1rem;
+    overflow-y: auto;
+
+    pre {
+        background: transparent;
+        border: none;
+        margin: 0;
+        padding: 0;
+        line-height: 1.75;
+        font-size: var(--font-size-sm);
+        overflow-wrap: break-word;
+
+        a {
+            overflow-wrap: break-word;
+        }
+    }
+}