fix dialog header style

nielsfaber · Jun 24, 2023 · 3dff694 · 3dff694
1 parent dd4d27b
commit 3dff694
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 28 deletions.
diff --git a/custom_components/alarmo/frontend/src/dialogs/confirm-delete-dialog.ts b/custom_components/alarmo/frontend/src/dialogs/confirm-delete-dialog.ts
@@ -24,13 +24,11 @@ export class ConfirmDeleteDialog extends LitElement {
     if (!this._params) return html``;
     return html`
       <ha-dialog open .heading=${true} @closed=${this.closeDialog} @close-dialog=${this.closeDialog}>
-        <div slot="heading">
-          <ha-header-bar>
-            <ha-icon-button slot="navigationIcon" dialogAction="cancel" .path=${mdiClose}>
-            </ha-icon-button>
-            <span slot="title">${this._params.title}</span>
-          </ha-header-bar>
-        </div>
+        <ha-dialog-header slot="heading">
+          <ha-icon-button slot="navigationIcon" dialogAction="cancel" .path=${mdiClose}>
+          </ha-icon-button>
+          <span slot="title">${this._params.title}</span>
+        </ha-dialog-header>
         <div class="wrapper">
           ${this._params.description}
         </div>

diff --git a/custom_components/alarmo/frontend/src/dialogs/create-area-dialog.ts b/custom_components/alarmo/frontend/src/dialogs/create-area-dialog.ts
@@ -57,9 +57,9 @@ export class CreateAreaDialog extends SubscribeMixin(LitElement) {
     if (!this._params) return html``;
     return html`
       <ha-dialog open .heading=${true} @closed=${this.closeDialog} @close-dialog=${this.closeDialog}>
-        <div slot="heading">
-          <ha-header-bar>
-            <ha-icon-button slot="navigationIcon" dialogAction="cancel" .path=${mdiClose}></ha-icon-button>
+        <ha-dialog-header slot="heading">
+          <ha-icon-button slot="navigationIcon" dialogAction="cancel" .path=${mdiClose}>
+          </ha-icon-button>
             <span slot="title">
               ${this.area_id
                 ? localize(
@@ -70,8 +70,7 @@ export class CreateAreaDialog extends SubscribeMixin(LitElement) {
                   )
                 : localize('panels.general.dialogs.create_area.title', this.hass.language)}
             </span>
-          </ha-header-bar>
-        </div>
+        </ha-dialog-header>
         <div class="wrapper">
           <ha-textfield
             label=${this.hass.localize('ui.components.area-picker.add_dialog.name')}

diff --git a/custom_components/alarmo/frontend/src/dialogs/edit-master-dialog.ts b/custom_components/alarmo/frontend/src/dialogs/edit-master-dialog.ts
@@ -27,12 +27,11 @@ export class EditMasterDialog extends LitElement {
     if (!this._params) return html``;
     return html`
       <ha-dialog open .heading=${true} @closed=${this.closeDialog} @close-dialog=${this.closeDialog}>
-        <div slot="heading">
-          <ha-header-bar>
-            <ha-icon-button slot="navigationIcon" dialogAction="cancel" .path=${mdiClose}></ha-icon-button>
+        <ha-dialog-header slot="heading">
+          <ha-icon-button slot="navigationIcon" dialogAction="cancel" .path=${mdiClose}>
+          </ha-icon-button>
             <span slot="title">${localize('panels.general.dialogs.edit_master.title', this.hass.language)}</span>
-          </ha-header-bar>
-        </div>
+        </ha-dialog-header>
         <div class="wrapper">
           <ha-textfield
             label=${this.hass.localize('ui.components.area-picker.add_dialog.name')}

diff --git a/custom_components/alarmo/frontend/src/dialogs/error-dialog.ts b/custom_components/alarmo/frontend/src/dialogs/error-dialog.ts
@@ -22,15 +22,13 @@ export class ErrorDialog extends LitElement {
     if (!this._params) return html``;
     return html`
       <ha-dialog open .heading=${true} @closed=${this.closeDialog} @close-dialog=${this.closeDialog}>
-        <div slot="heading">
-          <ha-header-bar>
-            <ha-icon-button slot="navigationIcon" dialogAction="cancel" .path=${mdiClose}>
-            </ha-icon-button>
+        <ha-dialog-header slot="heading">
+          <ha-icon-button slot="navigationIcon" dialogAction="cancel" .path=${mdiClose}>
+          </ha-icon-button>
             <span slot="title">
               ${this.hass.localize('state_badge.default.error')}
             </span>
-          </ha-header-bar>
-        </div>
+        </ha-dialog-header>
         <div class="wrapper">
           ${this._params.error || ''}
         </div>

diff --git a/custom_components/alarmo/frontend/src/styles.ts b/custom_components/alarmo/frontend/src/styles.ts
@@ -39,7 +39,7 @@ export const commonStyle = css`
     right: 0px;
   }
 
-  mwc-button.active {
+  mwc-button.active:not([disabled]) {
     background: var(--primary-color);
     --mdc-theme-primary: var(--text-primary-color);
     border-radius: 4px;
@@ -51,10 +51,6 @@ export const commonStyle = css`
     --mdc-theme-primary: var(--success-color);
   }
 
-  mwc-button.disabled.active {
-    opacity: 0.5;
-  }
-
   div.entity-row {
     display: flex;
     align-items: center;