Remove header

src/panels/config/backup/dialogs/dialog-upload-backup.ts

@@ -1,17 +1,19 @@
-import { mdiFolderUpload } from "@mdi/js";
+import { mdiClose, mdiFolderUpload } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import {
   fireEvent,
   type HASSDomEvent,
 } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-alert";
-import "../../../../components/ha-button";
-import "../../../../components/ha-dialog-footer";
+import "../../../../components/ha-dialog-header";
+import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-file-upload";
-import "../../../../components/ha-wa-dialog";
+import "../../../../components/ha-icon-button";
+import "../../../../components/ha-md-dialog";
+import type { HaMdDialog } from "../../../../components/ha-md-dialog";
 import {
   CORE_LOCAL_AGENT,
   HASSIO_LOCAL_AGENT,
@@ -41,12 +43,11 @@ export class DialogUploadBackup
 
   @state() private _formData?: BackupUploadFileFormData;
 
-  @state() private _open = false;
+  @query("ha-md-dialog") private _dialog?: HaMdDialog;
 
   public async showDialog(params: UploadBackupDialogParams): Promise<void> {
     this._params = params;
     this._formData = INITIAL_UPLOAD_FORM_DATA;
-    this._open = true;
   }
 
   private _dialogClosed() {
@@ -55,12 +56,11 @@ export class DialogUploadBackup
     }
     this._formData = undefined;
     this._params = undefined;
-    this._open = false;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   public closeDialog() {
-    this._open = false;
+    this._dialog?.close();
     return true;
   }
 
@@ -74,44 +74,52 @@ export class DialogUploadBackup
     }
 
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${this.hass.localize(
-          "ui.panel.config.backup.dialogs.upload.title"
-        )}
-        ?prevent-scrim-close=${this._uploading}
+      <ha-md-dialog
+        open
         @closed=${this._dialogClosed}
+        .disableCancelAction=${this._uploading}
       >
-        ${this._error
-          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-          : nothing}
-        <ha-file-upload
-          .hass=${this.hass}
-          .uploading=${this._uploading}
-          .icon=${mdiFolderUpload}
-          .accept=${SUPPORTED_UPLOAD_FORMAT}
-          .localize=${this.hass.localize}
-          .label=${this.hass.localize(
-            "ui.panel.config.backup.dialogs.upload.input_label"
-          )}
-          .supports=${this.hass.localize(
-            "ui.panel.config.backup.dialogs.upload.supports_tar"
-          )}
-          @file-picked=${this._filePicked}
-          @files-cleared=${this._filesCleared}
-        ></ha-file-upload>
-        <ha-dialog-footer slot="footer">
+        <ha-dialog-header slot="headline">
+          <ha-icon-button
+            slot="navigationIcon"
+            .label=${this.hass.localize("ui.common.close")}
+            .path=${mdiClose}
+            @click=${this.closeDialog}
+            .disabled=${this._uploading}
+          ></ha-icon-button>
+
+          <span slot="title">
+            ${this.hass.localize("ui.panel.config.backup.dialogs.upload.title")}
+          </span>
+        </ha-dialog-header>
+        <div slot="content">
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : nothing}
+          <ha-file-upload
+            .hass=${this.hass}
+            .uploading=${this._uploading}
+            .icon=${mdiFolderUpload}
+            .accept=${SUPPORTED_UPLOAD_FORMAT}
+            .localize=${this.hass.localize}
+            .label=${this.hass.localize(
+              "ui.panel.config.backup.dialogs.upload.input_label"
+            )}
+            .supports=${this.hass.localize(
+              "ui.panel.config.backup.dialogs.upload.supports_tar"
+            )}
+            @file-picked=${this._filePicked}
+            @files-cleared=${this._filesCleared}
+          ></ha-file-upload>
+        </div>
+        <div slot="actions">
           <ha-button
-            slot="secondaryAction"
             appearance="plain"
             @click=${this.closeDialog}
             .disabled=${this._uploading}
+            >${this.hass.localize("ui.common.cancel")}</ha-button
           >
-            ${this.hass.localize("ui.common.cancel")}
-          </ha-button>
           <ha-button
-            slot="primaryAction"
             @click=${this._upload}
             .disabled=${!this._formValid() || this._uploading}
           >
@@ -119,8 +127,8 @@ export class DialogUploadBackup
               "ui.panel.config.backup.dialogs.upload.action"
             )}
           </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        </div>
+      </ha-md-dialog>
     `;
   }
 
@@ -175,9 +183,15 @@ export class DialogUploadBackup
       haStyle,
       haStyleDialog,
       css`
+        ha-md-dialog {
+          max-width: 500px;
+          width: 100%;
+          max-width: 500px;
+          max-height: 100%;
+        }
         ha-alert {
           display: block;
-          margin-bottom: var(--ha-space-4);
+          margin-bottom: 16px;
         }
       `,
     ];

src/panels/config/labs/dialog-labs-preview-feature-enable.ts

@@ -1,11 +1,11 @@
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { relativeTime } from "../../../common/datetime/relative_time";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-button";
-import type { HaMdDialog } from "../../../components/ha-md-dialog";
-import "../../../components/ha-md-dialog";
+import "../../../components/ha-dialog-footer";
+import "../../../components/ha-wa-dialog";
 import "../../../components/ha-md-list";
 import "../../../components/ha-md-list-item";
 import type { HaSwitch } from "../../../components/ha-switch";
@@ -30,13 +30,14 @@ export class DialogLabsPreviewFeatureEnable
 
   @state() private _createBackup = false;
 
-  @query("ha-md-dialog") private _dialog?: HaMdDialog;
+  @state() private _open = false;
 
   public async showDialog(
     params: LabsPreviewFeatureEnableDialogParams
   ): Promise<void> {
     this._params = params;
     this._createBackup = false;
+    this._open = true;
     this._fetchBackupConfig();
     if (isComponentLoaded(this.hass, "hassio")) {
       this._fetchUpdateBackupConfig();
@@ -44,7 +45,7 @@ export class DialogLabsPreviewFeatureEnable
   }
 
   public closeDialog(): boolean {
-    this._dialog?.close();
+    this._open = false;
     return true;
   }
 
@@ -143,72 +144,69 @@ export class DialogLabsPreviewFeatureEnable
     const createBackupTexts = this._computeCreateBackupTexts();
 
     return html`
-      <ha-md-dialog open @closed=${this._dialogClosed}>
-        <span slot="headline">
-          ${this.hass.localize("ui.panel.config.labs.enable_title")}
-        </span>
-        <div slot="content">
-          <p>
-            ${this.hass.localize(
-              `component.${this._params.preview_feature.domain}.preview_features.${this._params.preview_feature.preview_feature}.enable_confirmation`
-            ) || this.hass.localize("ui.panel.config.labs.enable_confirmation")}
-          </p>
-        </div>
-        <div slot="actions">
-          ${createBackupTexts
-            ? html`
-                <ha-md-list>
-                  <ha-md-list-item>
-                    <span slot="headline">${createBackupTexts.title}</span>
-                    ${createBackupTexts.description
-                      ? html`
-                          <span slot="supporting-text">
-                            ${createBackupTexts.description}
-                          </span>
-                        `
-                      : nothing}
-                    <ha-switch
-                      slot="end"
-                      .checked=${this._createBackup}
-                      @change=${this._createBackupChanged}
-                    ></ha-switch>
-                  </ha-md-list-item>
-                </ha-md-list>
-              `
-            : nothing}
-          <div>
-            <ha-button appearance="plain" @click=${this._handleCancel}>
-              ${this.hass.localize("ui.common.cancel")}
-            </ha-button>
-            <ha-button
-              appearance="filled"
-              variant="brand"
-              @click=${this._handleConfirm}
-            >
-              ${this.hass.localize("ui.panel.config.labs.enable")}
-            </ha-button>
-          </div>
-        </div>
-      </ha-md-dialog>
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize("ui.panel.config.labs.enable_title")}
+        @closed=${this._dialogClosed}
+      >
+        <p>
+          ${this.hass.localize(
+            `component.${this._params.preview_feature.domain}.preview_features.${this._params.preview_feature.preview_feature}.enable_confirmation`
+          ) || this.hass.localize("ui.panel.config.labs.enable_confirmation")}
+        </p>
+        ${createBackupTexts
+          ? html`
+              <ha-md-list>
+                <ha-md-list-item>
+                  <span slot="headline">${createBackupTexts.title}</span>
+                  ${createBackupTexts.description
+                    ? html`
+                        <span slot="supporting-text">
+                          ${createBackupTexts.description}
+                        </span>
+                      `
+                    : nothing}
+                  <ha-switch
+                    slot="end"
+                    .checked=${this._createBackup}
+                    @change=${this._createBackupChanged}
+                  ></ha-switch>
+                </ha-md-list-item>
+              </ha-md-list>
+            `
+          : nothing}
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="secondaryAction"
+            appearance="plain"
+            @click=${this._handleCancel}
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button
+            slot="primaryAction"
+            appearance="filled"
+            variant="brand"
+            @click=${this._handleConfirm}
+          >
+            ${this.hass.localize("ui.panel.config.labs.enable")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
   static readonly styles = css`
-    ha-md-dialog {
-      --dialog-content-padding: var(--ha-space-6);
+    ha-wa-dialog {
+      --dialog-content-padding: var(--ha-space-0);
     }
 
     p {
-      margin: 0;
+      margin: 0 var(--ha-space-6) var(--ha-space-6);
       color: var(--secondary-text-color);
     }
 
-    div[slot="actions"] {
-      display: flex;
-      flex-direction: column;
-      padding: 0;
-    }
-
     ha-md-list {
       background: none;
       --md-list-item-leading-space: var(--ha-space-6);
@@ -217,13 +215,6 @@ export class DialogLabsPreviewFeatureEnable
       padding: 0;
       border-top: var(--ha-border-width-sm) solid var(--divider-color);
     }
-
-    div[slot="actions"] > div {
-      display: flex;
-      justify-content: flex-end;
-      gap: var(--ha-space-2);
-      padding: var(--ha-space-4) var(--ha-space-6);
-    }
   `;
 }
 

src/panels/config/labs/dialog-labs-progress.ts

@@ -1,7 +1,7 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/ha-md-dialog";
+import "../../../components/ha-wa-dialog";
 import "../../../components/ha-spinner";
 import type { HassDialog } from "../../../dialogs/make-dialog-manager";
 import type { HomeAssistant } from "../../../types";
@@ -39,36 +39,36 @@ export class DialogLabsProgress
     }
 
     return html`
-      <ha-md-dialog
+      <ha-wa-dialog
+        .hass=${this.hass}
         .open=${this._open}
-        disable-cancel-action
+        prevent-scrim-close
         @closed=${this._handleClosed}
       >
-        <div slot="content">
-          <div class="summary">
-            <ha-spinner></ha-spinner>
-            <div class="content">
-              <p class="heading">
-                ${this.hass.localize(
-                  "ui.panel.config.labs.progress.creating_backup"
-                )}
-              </p>
-              <p class="description">
-                ${this.hass.localize(
-                  this._params.enabled
-                    ? "ui.panel.config.labs.progress.backing_up_before_enabling"
-                    : "ui.panel.config.labs.progress.backing_up_before_disabling"
-                )}
-              </p>
-            </div>
+        <div slot="header"></div>
+        <div class="summary">
+          <ha-spinner></ha-spinner>
+          <div class="content">
+            <p class="heading">
+              ${this.hass.localize(
+                "ui.panel.config.labs.progress.creating_backup"
+              )}
+            </p>
+            <p class="description">
+              ${this.hass.localize(
+                this._params.enabled
+                  ? "ui.panel.config.labs.progress.backing_up_before_enabling"
+                  : "ui.panel.config.labs.progress.backing_up_before_disabling"
+              )}
+            </p>
           </div>
         </div>
-      </ha-md-dialog>
+      </ha-wa-dialog>
     `;
   }
 
   static readonly styles = css`
-    ha-md-dialog {
+    ha-wa-dialog {
       --dialog-content-padding: var(--ha-space-6);
     }