Add media management dialog (#11787)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/dialogs/generic/dialog-box.ts

@@ -1,9 +1,10 @@
 import "@material/mwc-button/mwc-button";
+import { mdiAlertOutline } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-dialog";
+import "../../components/ha-svg-icon";
 import "../../components/ha-switch";
 import "../../components/ha-textfield";
 import { haStyleDialog } from "../../resources/styles";
@@ -50,20 +51,22 @@ class DialogBox extends LitElement {
         ?escapeKeyAction=${confirmPrompt}
         @closed=${this._dialogClosed}
         defaultAction="ignore"
-        .heading=${this._params.title
+        .heading=${html`${this._params.warning
+          ? html`<ha-svg-icon
+              .path=${mdiAlertOutline}
+              style="color: var(--warning-color)"
+            ></ha-svg-icon> `
+          : ""}${this._params.title
           ? this._params.title
           : this._params.confirmation &&
-            this.hass.localize("ui.dialogs.generic.default_confirmation_title")}
+            this.hass.localize(
+              "ui.dialogs.generic.default_confirmation_title"
+            )}`}
       >
         <div>
           ${this._params.text
             ? html`
-                <p
-                  class=${classMap({
-                    "no-bottom-padding": Boolean(this._params.prompt),
-                    warning: Boolean(this._params.warning),
-                  })}
-                >
+                <p class=${this._params.prompt ? "no-bottom-padding" : ""}>
                   ${this._params.text}
                 </p>
               `
@@ -172,9 +175,6 @@ class DialogBox extends LitElement {
           /* Place above other dialogs */
           --dialog-z-index: 104;
         }
-        .warning {
-          color: var(--warning-color);
-        }
       `,
     ];
   }