Refresh the status icons

The status icons are now the same as in pipeline graph view plugin.
Running is now a dedicated icon so it makes no difference if the last
build was ok, unstable, failed or aborted or if the project is disabled.

Author: mawinter69

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

@@ -35,27 +35,13 @@ THE SOFTWARE.
       ${%blue}
     </dd>
 
-    <dt>
-      <l:icon src="symbol-status-blue-anime" />
-    </dt>
-    <dd>
-      ${%blue_anime}
-    </dd>
-
     <dt>
       <l:icon src="symbol-status-yellow" />
     </dt>
     <dd>
       ${%yellow}
     </dd>
 
-    <dt>
-      <l:icon src="symbol-status-yellow-anime" />
-    </dt>
-    <dd>
-      ${%yellow_anime}
-    </dd>
-
     <dt>
       <l:icon src="symbol-status-red" />
     </dt>
@@ -64,10 +50,10 @@ THE SOFTWARE.
     </dd>
 
     <dt>
-      <l:icon src="symbol-status-red-anime" />
+      <l:icon src="symbol-status-disabled-anime" />
     </dt>
     <dd>
-      ${%red_anime}
+      ${%running}
     </dd>
 
     <dt>
@@ -77,40 +63,19 @@ THE SOFTWARE.
       ${%lightgrey}
     </dd>
 
-    <dt>
-      <l:icon src="symbol-status-nobuilt-anime" />
-    </dt>
-    <dd>
-      ${%lightgrey_anime}
-    </dd>
-
     <dt>
       <l:icon src="symbol-status-aborted" />
     </dt>
     <dd>
       ${%darkgrey}
     </dd>
 
-    <dt>
-      <l:icon src="symbol-status-aborted-anime" />
-    </dt>
-    <dd>
-      ${%darkgrey_anime}
-    </dd>
-
     <dt>
       <l:icon src="symbol-status-disabled" />
     </dt>
     <dd>
       ${%grey}
     </dd>
-
-    <dt>
-      <l:icon src="symbol-status-disabled-anime" />
-    </dt>
-    <dd>
-      ${%grey_anime}
-    </dd>
   </dl>
 
   <h2 class="jenkins-dialog__subtitle">${%Project Health}</h2>

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

@@ -38,3 +38,4 @@ 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
+running=A build is in progress.

src/main/scss/components/_index.scss

@@ -26,6 +26,7 @@
 @use "side-panel-widgets";
 @use "skip-link";
 @use "spinner";
+@use "status-icons";
 @use "table";
 @use "tabs";
 @use "tooltips";

src/main/scss/components/_status-icons.scss

@@ -0,0 +1,44 @@
+.status-icon {
+  --status-background-opacity: 0.125;
+  --status-border-opacity: 0.25;
+
+  * {
+    transition: var(--elastic-transition);
+    transform-origin: center;
+  }
+
+  &-success {
+    --color: var(--success-color);
+  }
+
+  &-failure {
+    --color: var(--error-color);
+  }
+
+  &-unstable {
+    --color: var(--warning-color);
+  }
+
+  &-nobuilt,
+  &-aborted,
+  &-disabled{
+    --color: var(--skipped-color);
+  }
+
+  &-anime,
+   {
+    --color: var(--accent-color);
+  }
+
+  &-running {
+    animation: pulseScale 2s both ease-in-out infinite;
+    opacity: .25;
+
+    @keyframes pulseScale {
+      50% {
+        scale: 2.25;
+        opacity: 1;
+      }
+    }
+  }
+}