From 10cc3bdd3f5a664fdba319747119d030ae84fce0 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Mon, 25 Mar 2024 15:53:52 +0100
Subject: [PATCH] Fix header on take control dialog (#20123)

---
 src/components/ha-dialog.ts                   |  6 +--
 .../card-editor/hui-dialog-edit-card.ts       |  3 +-
 .../lovelace/editor/hui-dialog-save-config.ts | 43 +++++++++++++++----
 3 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index 9cf199dbe5..19401d826d 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -139,12 +139,12 @@ export class HaDialog extends DialogBase {
       }
       .header_button {
         position: absolute;
-        right: -8px;
-        top: -8px;
+        right: -12px;
+        top: -12px;
         text-decoration: none;
         color: inherit;
         inset-inline-start: initial;
-        inset-inline-end: -8px;
+        inset-inline-end: -12px;
         direction: var(--direction);
       }
       .dialog-actions {
diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
index c27b7024a2..e437a81362 100644
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
@@ -220,7 +220,6 @@ export class HuiDialogEditCard
             ? html`
                 <a
                   slot="actionItems"
-                  class="header_button"
                   href=${this._documentationURL}
                   title=${this.hass!.localize("ui.panel.lovelace.menu.help")}
                   target="_blank"
@@ -518,7 +517,7 @@ export class HuiDialogEditCard
           align-items: center;
           justify-content: space-between;
         }
-        .header_button {
+        ha-dialog-header a {
           color: inherit;
           text-decoration: none;
         }
diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts
index 4fd9be7dbe..46c274e9cd 100644
--- a/src/panels/lovelace/editor/hui-dialog-save-config.ts
+++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts
@@ -1,10 +1,11 @@
 import "@material/mwc-button";
-import { mdiHelpCircle } from "@mdi/js";
-import { CSSResultGroup, html, LitElement, nothing } from "lit";
+import { mdiClose, mdiHelpCircle } from "@mdi/js";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-dialog";
+import "../../../components/ha-dialog-header";
 import "../../../components/ha-formfield";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-switch";
@@ -49,27 +50,39 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
     if (!this._params) {
       return nothing;
     }
+
+    const heading = this.hass!.localize(
+      "ui.panel.lovelace.editor.save_config.header"
+    );
     return html`
       <ha-dialog
         open
         scrimClickAction
         escapeKeyAction
         @closed=${this._close}
-        .heading=${html`${this.hass!.localize(
-            "ui.panel.lovelace.editor.save_config.header"
-          )}<a
-            class="header_button"
+        .heading=${heading}
+      >
+        <ha-dialog-header slot="heading">
+          <ha-icon-button
+            slot="navigationIcon"
+            dialogAction="cancel"
+            .label=${this.hass!.localize("ui.common.close")}
+            .path=${mdiClose}
+          ></ha-icon-button>
+          <span slot="title">${heading}</span>
+          <a
             href=${documentationUrl(this.hass!, "/lovelace/")}
             title=${this.hass!.localize("ui.panel.lovelace.menu.help")}
             target="_blank"
             rel="noreferrer"
+            slot="actionItems"
           >
             <ha-icon-button
               .path=${mdiHelpCircle}
               .label=${this.hass!.localize("ui.common.help")}
             ></ha-icon-button>
-          </a>`}
-      >
+          </a>
+        </ha-dialog-header>
         <div>
           <p>
             ${this.hass!.localize("ui.panel.lovelace.editor.save_config.para")}
@@ -183,7 +196,19 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
   }
 
   static get styles(): CSSResultGroup {
-    return [haStyleDialog];
+    return [
+      haStyleDialog,
+      css`
+        ha-dialog {
+          --dialog-content-padding: 0 24px 24px 24px;
+        }
+
+        ha-dialog-header a {
+          color: inherit;
+          text-decoration: none;
+        }
+      `,
+    ];
   }
 }