From 1384091663fcd4ba5d584f152dd20c7ea95b5c9b Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Wed, 13 Dec 2023 22:28:54 +0000
Subject: [PATCH] Init

---
 .../resources/lib/layout/stopButton.jelly     |  8 ++---
 war/src/main/scss/components/_buttons.scss    | 30 +++++++++++++++++++
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/core/src/main/resources/lib/layout/stopButton.jelly b/core/src/main/resources/lib/layout/stopButton.jelly
index 29f4ebcb6815..e3ec35a06f03 100644
--- a/core/src/main/resources/lib/layout/stopButton.jelly
+++ b/core/src/main/resources/lib/layout/stopButton.jelly
@@ -39,13 +39,13 @@ THE SOFTWARE.
     </st:documentation>
     <j:choose>
       <j:when test="${confirm == null}">
-        <a class="stop-button-link" href="${href}">
-          <l:icon class="icon-stop icon-sm" alt="${alt}"/>
+        <a class="stop-button-link" href="${href}" tooltip="${alt}">
+            <l:icon src="symbol-close" />
         </a>
       </j:when>
       <j:otherwise>
-        <a class="stop-button-link" href="${href}" data-confirm="${confirm}">
-          <l:icon class="icon-stop icon-sm" alt="${alt}"/>
+        <a class="stop-button-link" href="${href}" data-confirm="${confirm}" tooltip="${alt}">
+            <l:icon src="symbol-close" />
         </a>
       </j:otherwise>
     </j:choose>
diff --git a/war/src/main/scss/components/_buttons.scss b/war/src/main/scss/components/_buttons.scss
index 0368549deb7d..c36c0193cb9b 100644
--- a/war/src/main/scss/components/_buttons.scss
+++ b/war/src/main/scss/components/_buttons.scss
@@ -299,3 +299,33 @@ $jenkins-split-button-border-radius: 0.2rem;
     }
   }
 }
+
+.stop-button-link {
+  --item-background--hover: color-mix(in srgb, var(--red) 20%, transparent);
+  --item-background--active: color-mix(in srgb, var(--red) 25%, transparent);
+  --item-box-shadow--focus: transparent;
+
+  @include mixins.item;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+
+  &::before {
+    background: color-mix(in srgb, var(--red) 15%, transparent);
+  }
+
+  svg {
+    width: 87.5%;
+    height: 87.5%;
+    color: var(--red);
+
+    * {
+      stroke-width: 40px;
+    }
+  }
+}