Refine

Author: janfaracik

src/main/js/components/dialogs/index.js

@@ -39,11 +39,10 @@ Dialog.prototype.init = function () {
   this.dialog.style.minWidth = this.options.minWidth;
   document.body.appendChild(this.dialog);
 
-  if (this.options.title != null) {
-    const title = createElementFromHtml(`<div class='jenkins-dialog__title'/>`);
-    this.dialog.appendChild(title);
-    title.innerText = this.options.title;
-  }
+  // Append title element
+  const title = createElementFromHtml(`<div class='jenkins-dialog__title'><span></span></div>`);
+  this.dialog.appendChild(title);
+  title.querySelector("span").innerText = this.options.title;
 
   if (this.dialogType === "modal") {
     if (this.options.content != null) {
@@ -55,12 +54,12 @@ Dialog.prototype.init = function () {
     }
     if (this.options.hideCloseButton !== true) {
       const closeButton = createElementFromHtml(`
-          <button class="jenkins-dialog__close-button jenkins-button">
+          <button class="jenkins-dialog__title__button jenkins-dialog__title__close-button jenkins-dialog__close-button jenkins-button">
             <span class="jenkins-visually-hidden">Close</span>
             ${CLOSE}
           </button>
         `);
-      this.dialog.appendChild(closeButton);
+      title.append(closeButton);
       closeButton.addEventListener("click", () =>
         this.dialog.dispatchEvent(new Event("cancel")),
       );

src/main/scss/components/_app-bar.scss

@@ -162,7 +162,13 @@
   }
 
   &--stuck {
-    backdrop-filter: blur(20px);
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      backdrop-filter: blur(20px);
+    }
+
     background: linear-gradient(
       to right,
       var(--background),

src/main/scss/components/_dialogs.scss

@@ -11,10 +11,9 @@ $jenkins-dialog-padding: 1.25rem;
   box-shadow: var(--dialog-box-shadow);
   animation: jenkins-dialog-animate-in 0.25s cubic-bezier(0, 0.68, 0.5, 1.5);
   overflow: hidden;
-  padding: $jenkins-dialog-padding 0 0 0;
+  padding: 0;
   display: flex;
   flex-direction: column;
-  gap: $jenkins-dialog-padding;
   // Thin highlight for dark themes to differentiate the dialog from its backdrop
   outline: 1px solid rgb(255 255 255 / 0.05);
 
@@ -29,13 +28,26 @@ $jenkins-dialog-padding: 1.25rem;
   }
 
   &__title {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
     font-size: 1rem;
     font-weight: var(--font-bold-weight);
-    padding: 0 $jenkins-dialog-padding;
+    padding: $jenkins-dialog-padding;
     color: var(--text-color);
     overflow-wrap: anywhere;
     text-box: cap alphabetic;
-    margin-top: 0.625rem;
+
+    &__button {
+      padding: 0;
+      width: 2rem;
+      min-height: 2rem;
+      border-radius: 100%;
+    }
+
+    &__close-button {
+      margin-left: auto !important;
+    }
   }
 
   &__contents {
@@ -83,16 +95,6 @@ $jenkins-dialog-padding: 1.25rem;
     margin: 0 0 1rem;
   }
 
-  &__close-button {
-    position: absolute;
-    top: $jenkins-dialog-padding;
-    right: $jenkins-dialog-padding;
-    padding: 0;
-    width: 2rem;
-    min-height: 2rem;
-    border-radius: 100%;
-  }
-
   &[closing] {
     animation: jenkins-dialog-animate-out 0.1s linear;