From 6da441953bc6f492d672b1a6c953531460fc189d Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 19 Dec 2023 14:49:25 +0000
Subject: [PATCH] Tidy up

---
 .../src/main/resources/lib/hudson/queue.jelly | 14 +--
 .../scss/components/_side-panel-widgets.scss  | 88 ++++++++++---------
 2 files changed, 52 insertions(+), 50 deletions(-)

diff --git a/core/src/main/resources/lib/hudson/queue.jelly b/core/src/main/resources/lib/hudson/queue.jelly
index 454bec64f466..3d04f54786dd 100644
--- a/core/src/main/resources/lib/hudson/queue.jelly
+++ b/core/src/main/resources/lib/hudson/queue.jelly
@@ -49,7 +49,7 @@ THE SOFTWARE.
   <l:pane title="${title}" id="buildQueue">
     <st:adjunct includes="lib.form.link.link"/>
     <j:if test="${app.quietingDown}">
-      <div class="banana">
+      <div class="app-build-queue__shutting-down-message">
         ${%Jenkins is going to shut down. No further builds will be performed.}
         <j:if test="${h.hasPermission(app.MANAGE)}">
           <f:link href="${rootURL}/cancelQuietDown" post="true">(${%cancel})</f:link>
@@ -59,16 +59,16 @@ THE SOFTWARE.
     <j:choose>
       <j:when test="${empty(items)}">
         <j:if test="${!app.quietingDown}">
-          <div class="swag">${%No builds in the queue.}</div>
+          <div class="jenkins-pane__notice">${%No builds in the queue.}</div>
         </j:if>
       </j:when>
       <j:otherwise>
         <j:forEach var="item" items="${items}">
-          <div class="mandelson">
+          <div class="app-build-queue__item">
             <j:set var="stuck" value="${item.isStuck()}"/>
             <j:set var="hasPermission" value="${h.hasPermission(item.task,item.task.READ)}" />
 
-            <div class="mandelson__text">
+            <div class="app-build-queue__item__text">
               <j:choose>
                 <j:when test="${hasPermission}">
                   <a href="${rootURL}/${item.task.url}" class="model-link rollsroyce" tooltip="${item.causesDescription} ${item.why} ${item.params} \n ${%WaitingFor(item.inQueueForString)}">
@@ -81,16 +81,16 @@ THE SOFTWARE.
               </j:choose>
             </div>
 
-            <div class="mandelson__controls">
+            <div class="app-build-queue__item__controls">
               <!-- TODO include estimated number as in BuildHistoryWidget/entries.jelly if possible -->
               <j:if test="${stuck and hasPermission}">
                 <j:set var="tooltip">
-                  <div class="tooltippy">
+                  <div class="app-build-queue__stuck-tooltip">
                     <div>${%stuck}</div>
                     <div>${%stuck.description} <l:icon src="symbol-external" /></div>
                   </div>
                 </j:set>
-                <a class="brown" data-html-tooltip="${tooltip}" href="https://www.jenkins.io/redirect/troubleshooting/executor-starvation" target="_blank">
+                <a class="app-build-queue__stuck-icon" data-html-tooltip="${tooltip}" href="https://www.jenkins.io/redirect/troubleshooting/executor-starvation" target="_blank">
                   <l:icon src="symbol-hourglass" class="icon-sm"/>
                 </a>
               </j:if>
diff --git a/war/src/main/scss/components/_side-panel-widgets.scss b/war/src/main/scss/components/_side-panel-widgets.scss
index 196967838d59..cc63cdde3e56 100644
--- a/war/src/main/scss/components/_side-panel-widgets.scss
+++ b/war/src/main/scss/components/_side-panel-widgets.scss
@@ -16,64 +16,66 @@ $padding-y: 0.65rem;
   }
 }
 
-.tooltippy {
-  display: flex;
-  flex-direction: column;
+.app-build-queue {
+  &__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    margin: 0 $padding-x $padding-y $padding-x;
+    font-size: var(--font-size-sm);
 
-  div {
-    &:last-of-type {
-      display: flex;
-      align-items: center;
+    &__text {
       color: var(--text-color-secondary);
-      gap: 0.3rem;
 
-      svg {
-        width: 0.75rem;
-        height: 0.75rem;
+      a {
+        color: var(--link-color) !important;
       }
     }
-  }
-}
 
-.mandelson {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  margin: 0 $padding-x $padding-y $padding-x;
-  font-size: var(--font-size-sm);
-
-  &__text {
-    color: var(--text-color-secondary);
-
-    a {
-      color: var(--link-color) !important;
+    &__controls {
+      display: flex;
+      align-items: center;
+      gap: 10px;
     }
   }
 
-  &__controls {
+  &__stuck-tooltip {
     display: flex;
-    align-items: center;
-    gap: 10px;
+    flex-direction: column;
+
+    div {
+      &:last-of-type {
+        display: flex;
+        align-items: center;
+        color: var(--text-color-secondary);
+        gap: 0.3rem;
+
+        svg {
+          width: 0.75rem;
+          height: 0.75rem;
+        }
+      }
+    }
   }
-}
 
-.brown {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
+  &__stuck-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-.banana {
-  position: relative;
-  margin: 0 $padding-x $padding-y $padding-x;
-  z-index: 0;
-  font-size: var(--font-size-sm);
-  padding-bottom: $padding-y;
-  border-bottom: 2px solid var(--card-border-color);
+  &__shutting-down-message {
+    position: relative;
+    margin: 0 $padding-x $padding-y $padding-x;
+    z-index: 0;
+    font-size: var(--font-size-sm);
+    padding-bottom: $padding-y;
+    border-bottom: 2px solid var(--card-border-color);
+  }
 }
 
-.swag {
+.jenkins-pane__notice {
   color: var(--text-color-secondary);
   margin: 0 $padding-x $padding-y $padding-x;
   font-size: var(--font-size-sm);