Cleanup

core/src/main/java/org/jenkins/ui/icon/IconSet.java

@@ -95,7 +95,7 @@ public static String getSymbol(String name, String title, String tooltip, String
             String symbol = symbolsForLookup.get(translatedName);
             symbol = symbol.replaceAll("(class=\")[^&]*?(\")", "$1$2");
             symbol = symbol.replaceAll("(tooltip=\")[^&]*?(\")", "");
-            symbol = symbol.replaceAll("(id=\")[^&]*?(\")", "");
+            symbol = symbol.replace("(id=\")[^&]*?(\")", "");
             if (!tooltip.isEmpty()) {
                 symbol = symbol.replaceAll("<svg", "<svg tooltip=\"" + Functions.htmlAttributeEscape(tooltip) + "\"");
             }
@@ -124,7 +124,7 @@ public static String getSymbol(String name, String title, String tooltip, String
         symbol = symbol.replaceAll("(<title>)[^&]*(</title>)", "$1$2");
         symbol = symbol.replaceAll("(class=\")[^&]*?(\")", "$1$2");
         symbol = symbol.replaceAll("(tooltip=\")[^&]*?(\")", "$1$2");
-        symbol = symbol.replaceAll("(id=\")[^&]*?(\")", "");
+        symbol = symbol.replace("(id=\")[^&]*?(\")", "");
         if (!tooltip.isEmpty()) {
             symbol = symbol.replaceAll("<svg", "<svg tooltip=\"" + Functions.htmlAttributeEscape(tooltip) + "\"");
         }

core/src/main/resources/jenkins/model/Jenkins/legend.jelly

@@ -36,84 +36,84 @@ THE SOFTWARE.
 
       <dl class="app-icon-legend">
         <dt>
-          <l:icon src="symbol-status-blue" />
+          <l:icon class="icon-blue icon-xlg"/>
         </dt>
         <dd>
           ${%blue}
         </dd>
 
         <dt>
-          <l:icon src="symbol-status-blue_anime" />
+          <l:icon class="icon-blue-anime icon-xlg"/>
         </dt>
         <dd>
           ${%blue_anime}
         </dd>
 
         <dt>
-          <l:icon src="symbol-status-yellow" />
+          <l:icon class="icon-yellow icon-xlg"/>
         </dt>
         <dd>
           ${%yellow}
         </dd>
 
         <dt>
-          <l:icon src="symbol-status-yellow_anime" />
+          <l:icon class="icon-yellow-anime icon-xlg"/>
         </dt>
         <dd>
           ${%yellow_anime}
         </dd>
 
         <dt>
-          <l:icon src="symbol-status-red" />
+          <l:icon class="icon-red icon-xlg"/>
         </dt>
         <dd>
           ${%red}
         </dd>
 
         <dt>
-          <l:icon src="symbol-status-red_anime" />
+          <l:icon class="icon-red-anime icon-xlg"/>
         </dt>
         <dd>
           ${%red_anime}
         </dd>
 
         <dt>
-          <l:icon src="symbol-status-notbuilt" />
+          <l:icon class="icon-nobuilt icon-xlg"/>
         </dt>
         <dd>
           ${%lightgrey}
         </dd>
 
         <dt>
-          <l:icon src="symbol-status-notbuilt_anime" />
+          <l:icon class="icon-nobuilt-anime icon-xlg"/>
         </dt>
         <dd>
           ${%lightgrey_anime}
         </dd>
 
         <dt>
-          <l:icon src="symbol-status-disabled" class="you-know" />
+          <l:icon class="icon-disabled icon-xlg"/>
         </dt>
         <dd>
           ${%grey}
         </dd>
 
         <dt>
-          <l:icon src="symbol-status-disabled_anime" />
+          <l:icon class="icon-disabled-anime icon-xlg"/>
         </dt>
         <dd>
           ${%grey_anime}
         </dd>
 
         <dt>
-          <l:icon src="symbol-status-aborted" />
+          <l:icon class="icon-aborted icon-xlg"/>
         </dt>
         <dd>
           ${%darkgrey}
         </dd>
 
         <dt>
-          <l:icon src="symbol-status-aborted_anime" />
+          <l:icon class="icon-aborted-anime icon-xlg"/>
         </dt>
         <dd>
           ${%darkgrey_anime}
@@ -122,6 +122,8 @@ THE SOFTWARE.
 
       <h2>${%Weather}</h2>
 
+      <p class="jenkins-description">${%iconDescription}</p>
+
       <dl class="app-icon-legend">
         <dt>
           <l:icon src="symbol-weather-icon-health-80plus" />

core/src/main/resources/jenkins/model/Jenkins/legend.properties

@@ -33,9 +33,9 @@ yellow=The last build was successful but unstable. \
 yellow_anime=The last build was successful but unstable. A new build is in progress.
 red=The last build failed.
 red_anime=The last build failed. A new build is in progress.
-health-81plus=Project health is over 80%. You can hover the mouse over the project\u2019s icon for a more detailed explanation.
-health-61to80=Project health is over 60% and up to 80%. You can hover the mouse over the project\u2019s icon for a more detailed explanation.
-health-41to60=Project health is over 40% and up to 60%. You can hover the mouse over the project\u2019s icon for a more detailed explanation.
-health-21to40=Project health is over 20% and up to 40%. You can hover the mouse over the project\u2019s icon for a more detailed explanation.
-health-00to20=Project health is 20% or less. You can hover the mouse over the project\u2019s icon for a more detailed explanation.
-
+health-81plus=Project health is over 80%
+health-61to80=Project health is over 60% and up to 80%
+health-41to60=Project health is over 40% and up to 60%
+health-21to40=Project health is over 20% and up to 40%
+health-00to20=Project health is 20% or less
+iconDescription=You can hover your mouse over a project\u2019s icon for a more detailed explanation

war/src/main/less/abstracts/theme.less

@@ -340,7 +340,7 @@
   purple: #af52de;
   red: #e6001f;
   yellow: #ffcc00;
-  gray: #747292;
+  gray: #a3a3c2;
 }
 
 @semantics: {

war/src/main/less/modules/table.less

@@ -58,7 +58,7 @@
         vertical-align: middle;
         padding: var(--table-padding) 0 var(--table-padding) var(--table-padding);
         font-weight: 500;
-        height: 50px;
+        height: 3rem;
 
         &:first-of-type {
           padding-left: calc(var(--table-padding) * 2);
@@ -141,8 +141,9 @@
 
   &__button, &__icon {
     svg, .build-status-icon__wrapper, img {
-      width: 24px !important;
-      height: 24px !important;
+      width: auto;
+      height: 1.5rem !important;
+      max-width: 1.7rem;
     }
   }
 
@@ -155,8 +156,8 @@
 
     .jenkins-table__button, .jenkins-table__link, .jenkins-table__icon {
       svg, .build-status-icon__wrapper, img {
-        width: 20px !important;
-        height: 20px !important;
+        height: 1.3rem !important;
+        max-width: 1.5rem !important;
       }
     }
   }
@@ -170,8 +171,8 @@
 
     .jenkins-table__button, .jenkins-table__link, .jenkins-table__icon {
       svg, .build-status-icon__wrapper, img {
-        width: 16px !important;
-        height: 16px !important;
+        height: 1rem !important;
+        max-width: 1.2rem !important;
       }
     }
   }

war/src/main/less/pages/icon-legend.less

@@ -1,7 +1,7 @@
 .app-icon-legend {
   display: grid;
   grid-template-columns: auto 1fr;
-  grid-gap: 1rem;
+  gap: calc(var(--section-padding) / 2);
   align-items: center;
   margin: 0;
   padding: 0;
@@ -24,5 +24,6 @@
   dd {
     margin: 0;
     padding: 0;
+    font-weight: 500;
   }
 }