Migrate onboarding dialog(s) to wa

src/onboarding/dialogs/app-dialog.ts

@@ -1,18 +1,32 @@
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import type { LocalizeFunc } from "../../common/translations/localize";
 import { fireEvent } from "../../common/dom/fire_event";
-import { createCloseHeading } from "../../components/ha-dialog";
+import type { HomeAssistant } from "../../types";
+import "../../components/ha-wa-dialog";
 
 @customElement("app-dialog")
 class DialogApp extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ attribute: false }) public localize?: LocalizeFunc;
 
-  public async showDialog(params): Promise<void> {
+  @state() private _open = false;
+
+  public async showDialog(params: {
+    localize: LocalizeFunc;
+    hass: HomeAssistant;
+  }): Promise<void> {
+    this.hass = params.hass;
     this.localize = params.localize;
+    this._open = true;
   }
 
-  public async closeDialog(): Promise<void> {
+  public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this.localize = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -21,15 +35,14 @@ class DialogApp extends LitElement {
     if (!this.localize) {
       return nothing;
     }
-    return html`<ha-dialog
-      open
-      hideActions
-      @closed=${this.closeDialog}
-      .heading=${createCloseHeading(
-        undefined,
-        this.localize("ui.panel.page-onboarding.welcome.download_app") ||
-          "Click here to download the app"
-      )}
+    return html`<ha-wa-dialog
+      .hass=${this.hass}
+      .open=${this._open}
+      width="medium"
+      header-title=${this.localize(
+        "ui.panel.page-onboarding.welcome.download_app"
+      ) || "Click here to download the app"}
+      @closed=${this._dialogClosed}
     >
       <div>
         <div class="app-qr">
@@ -69,13 +82,10 @@ class DialogApp extends LitElement {
           </a>
         </div>
       </div>
-    </ha-dialog>`;
+    </ha-wa-dialog>`;
   }
 
   static styles = css`
-    ha-dialog {
-      --mdc-dialog-min-width: min(500px, 90vw);
-    }
     .app-qr {
       display: flex;
       justify-content: space-between;

src/onboarding/dialogs/community-dialog.ts

@@ -1,9 +1,9 @@
 import { mdiOpenInNew } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../common/translations/localize";
-import { createCloseHeading } from "../../components/ha-dialog";
+import "../../components/ha-wa-dialog";
 import "../../components/ha-list";
 import "../../components/ha-list-item";
 
@@ -11,11 +11,18 @@ import "../../components/ha-list-item";
 class DialogCommunity extends LitElement {
   @property({ attribute: false }) public localize?: LocalizeFunc;
 
+  @state() private _open = false;
+
   public async showDialog(params): Promise<void> {
     this.localize = params.localize;
+    this._open = true;
   }
 
-  public async closeDialog(): Promise<void> {
+  public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this.localize = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -24,14 +31,13 @@ class DialogCommunity extends LitElement {
     if (!this.localize) {
       return nothing;
     }
-    return html`<ha-dialog
-      open
-      hideActions
-      @closed=${this.closeDialog}
-      .heading=${createCloseHeading(
-        undefined,
-        this.localize("ui.panel.page-onboarding.welcome.community")
+    return html`<ha-wa-dialog
+      .open=${this._open}
+      width="small"
+      header-title=${this.localize(
+        "ui.panel.page-onboarding.welcome.community"
       )}
+      @closed=${this._dialogClosed}
     >
       <ha-list>
         <a
@@ -97,12 +103,11 @@ class DialogCommunity extends LitElement {
           </ha-list-item>
         </a>
       </ha-list>
-    </ha-dialog>`;
+    </ha-wa-dialog>`;
   }
 
   static styles = css`
-    ha-dialog {
-      --mdc-dialog-min-width: min(400px, 90vw);
+    ha-wa-dialog {
       --dialog-content-padding: 0;
     }
     ha-list-item {

src/onboarding/dialogs/show-app-dialog.ts

@@ -1,11 +1,12 @@
 import { fireEvent } from "../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../common/translations/localize";
+import type { HomeAssistant } from "../../types";
 
 export const loadAppDialog = () => import("./app-dialog");
 
 export const showAppDialog = (
   element: HTMLElement,
-  params: { localize: LocalizeFunc }
+  params: { localize: LocalizeFunc; hass: HomeAssistant }
 ): void => {
   fireEvent(element, "show-dialog", {
     dialogTag: "app-dialog",

src/onboarding/onboarding-welcome-links.ts

@@ -60,7 +60,7 @@ class OnboardingWelcomeLinks extends LitElement {
   }
 
   private _openApp(): void {
-    showAppDialog(this, { localize: this.localize });
+    showAppDialog(this, { localize: this.localize, hass: this.hass });
   }
 
   static styles = css`