From 85fe2213c1347c16b60d793e34eb5c6f5665b27a Mon Sep 17 00:00:00 2001
From: Jan-Philipp Benecke <jan-philipp@bnck.me>
Date: Tue, 4 Feb 2025 13:25:59 +0100
Subject: [PATCH] Align view mount dialog with design guidelines (#24060)

Align view mount dialog with design requirements
---
 .../config/storage/dialog-mount-view.ts       | 61 +++++++++++--------
 1 file changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/panels/config/storage/dialog-mount-view.ts b/src/panels/config/storage/dialog-mount-view.ts
index eff766daae..38d579a26e 100644
--- a/src/panels/config/storage/dialog-mount-view.ts
+++ b/src/panels/config/storage/dialog-mount-view.ts
@@ -1,4 +1,4 @@
-import { mdiHelpCircle } from "@mdi/js";
+import { mdiClose, mdiHelpCircle } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -215,6 +215,12 @@ class ViewMountDialog extends LitElement {
         @closed=${this.closeDialog}
       >
         <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"
             >${this._existing
               ? this.hass.localize(
@@ -261,30 +267,34 @@ class ViewMountDialog extends LitElement {
           @value-changed=${this._valueChanged}
           dialogInitialFocus
         ></ha-form>
-        <div slot="secondaryAction">
-          <mwc-button @click=${this.closeDialog} dialogInitialFocus>
-            ${this.hass.localize("ui.common.cancel")}
-          </mwc-button>
-          ${this._existing
-            ? html`<mwc-button @click=${this._deleteMount} class="delete-btn">
-                ${this.hass.localize("ui.common.delete")}
-              </mwc-button>`
-            : nothing}
-        </div>
 
-        <ha-progress-button
-          .progress=${this._waiting}
-          slot="primaryAction"
-          @click=${this._connectMount}
-        >
-          ${this._existing
-            ? this.hass.localize(
-                "ui.panel.config.storage.network_mounts.update"
-              )
-            : this.hass.localize(
-                "ui.panel.config.storage.network_mounts.connect"
-              )}
-        </ha-progress-button>
+        ${this._existing
+          ? html`<ha-button
+              @click=${this._deleteMount}
+              destructive
+              slot="secondaryAction"
+            >
+              ${this.hass.localize("ui.common.delete")}
+            </ha-button>`
+          : nothing}
+
+        <div slot="primaryAction">
+          <ha-button @click=${this.closeDialog} dialogInitialFocus>
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-progress-button
+            .progress=${this._waiting}
+            @click=${this._connectMount}
+          >
+            ${this._existing
+              ? this.hass.localize(
+                  "ui.panel.config.storage.network_mounts.update"
+                )
+              : this.hass.localize(
+                  "ui.panel.config.storage.network_mounts.connect"
+                )}
+          </ha-progress-button>
+        </div>
       </ha-dialog>
     `;
   }
@@ -389,9 +399,6 @@ class ViewMountDialog extends LitElement {
         ha-icon-button {
           color: var(--primary-text-color);
         }
-        .delete-btn {
-          --mdc-theme-primary: var(--error-color);
-        }
       `,
     ];
   }