Improve styling of ZHA manage device dialog (#27556)

src/components/buttons/ha-call-service-button.ts

@@ -6,6 +6,7 @@ import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
 import "./ha-progress-button";
 import type { HomeAssistant } from "../../types";
 import { fireEvent } from "../../common/dom/fire_event";
+import type { Appearance } from "../ha-button";
 
 @customElement("ha-call-service-button")
 class HaCallServiceButton extends LitElement {
@@ -25,12 +26,14 @@ class HaCallServiceButton extends LitElement {
 
   @property() public confirmation?;
 
+  @property() public appearance: Appearance = "plain";
+
   public render(): TemplateResult {
     return html`
       <ha-progress-button
         .progress=${this.progress}
         .disabled=${this.disabled}
-        appearance="plain"
+        .appearance=${this.appearance}
         @click=${this._buttonTapped}
         tabindex="0"
       >

src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts

@@ -220,6 +220,9 @@ class DialogZHAManageZigbeeDevice extends LitElement {
 
         .content {
           outline: none;
+          display: flex;
+          flex-direction: column;
+          gap: var(--ha-space-2);
         }
 
         @media all and (min-width: 600px) and (min-height: 501px) {

src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts

@@ -117,15 +117,6 @@ export class ZHAClusterAttributes extends LitElement {
         ></ha-textfield>
       </div>
       <div class="card-actions">
-        <ha-progress-button
-          @click=${this._onGetZigbeeAttributeClick}
-          .progress=${this._readingAttribute}
-          .disabled=${this._readingAttribute}
-        >
-          ${this.hass!.localize(
-            "ui.panel.config.zha.cluster_attributes.read_zigbee_attribute"
-          )}
-        </ha-progress-button>
         <ha-call-service-button
           .hass=${this.hass}
           domain="zha"
@@ -136,6 +127,15 @@ export class ZHAClusterAttributes extends LitElement {
             "ui.panel.config.zha.cluster_attributes.write_zigbee_attribute"
           )}
         </ha-call-service-button>
+        <ha-progress-button
+          @click=${this._onGetZigbeeAttributeClick}
+          .progress=${this._readingAttribute}
+          .disabled=${this._readingAttribute}
+        >
+          ${this.hass!.localize(
+            "ui.panel.config.zha.cluster_attributes.read_zigbee_attribute"
+          )}
+        </ha-progress-button>
       </div>
     `;
   }
@@ -230,6 +230,10 @@ export class ZHAClusterAttributes extends LitElement {
     return [
       haStyle,
       css`
+        ha-card {
+          border: none;
+        }
+
         ha-select {
           margin-top: 16px;
         }
@@ -263,6 +267,12 @@ export class ZHAClusterAttributes extends LitElement {
         .header {
           flex-grow: 1;
         }
+
+        .card-actions {
+          display: flex;
+          justify-content: flex-end;
+          gap: var(--ha-space-1);
+        }
       `,
     ];
   }

src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts

@@ -108,6 +108,7 @@ export class ZHAClusterCommands extends LitElement {
                   service="issue_zigbee_cluster_command"
                   .data=${this._issueClusterCommandServiceData}
                   .disabled=${!this._canIssueCommand}
+                  appearance="accent"
                 >
                   ${this.hass!.localize(
                     "ui.panel.config.zha.cluster_commands.issue_zigbee_command"
@@ -187,6 +188,10 @@ export class ZHAClusterCommands extends LitElement {
     return [
       haStyle,
       css`
+        ha-card {
+          border: none;
+        }
+
         ha-select {
           margin-top: 16px;
         }
@@ -239,6 +244,11 @@ export class ZHAClusterCommands extends LitElement {
           padding-inline-start: initial;
           color: var(--primary-color);
         }
+
+        .card-actions {
+          display: flex;
+          justify-content: flex-end;
+        }
       `,
     ];
   }

src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts

@@ -60,6 +60,15 @@ export class ZHADeviceBindingControl extends LitElement {
           </ha-select>
         </div>
         <div class="card-actions">
+          <ha-progress-button
+            @click=${this._onUnbindDevicesClick}
+            .disabled=${!(this._deviceToBind && this.device) ||
+            this._bindingOperationInProgress}
+            variant="danger"
+            appearance="plain"
+          >
+            ${this.hass!.localize("ui.panel.config.zha.device_binding.unbind")}
+          </ha-progress-button>
           <ha-progress-button
             @click=${this._onBindDevicesClick}
             .disabled=${!(this._deviceToBind && this.device) ||
@@ -67,13 +76,6 @@ export class ZHADeviceBindingControl extends LitElement {
           >
             ${this.hass!.localize("ui.panel.config.zha.device_binding.bind")}
           </ha-progress-button>
-          <ha-progress-button
-            @click=${this._onUnbindDevicesClick}
-            .disabled=${!(this._deviceToBind && this.device) ||
-            this._bindingOperationInProgress}
-          >
-            ${this.hass!.localize("ui.panel.config.zha.device_binding.unbind")}
-          </ha-progress-button>
         </div>
       </ha-card>
     `;
@@ -133,6 +135,10 @@ export class ZHADeviceBindingControl extends LitElement {
           width: 100%;
         }
 
+        .content {
+          padding-top: var(--ha-space-2);
+        }
+
         .command-picker {
           align-items: center;
           padding-left: 28px;
@@ -145,6 +151,11 @@ export class ZHADeviceBindingControl extends LitElement {
         .header {
           flex-grow: 1;
         }
+        .card-actions {
+          display: flex;
+          justify-content: flex-end;
+          gap: var(--ha-space-1);
+        }
       `,
     ];
   }

src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts

@@ -85,23 +85,24 @@ export class ZHAGroupBindingControl extends LitElement {
             ></zha-clusters-data-table>
           </div>
           <div class="card-actions">
-          <ha-progress-button
-            @click=${this._onBindGroupClick}
-            .disabled=${!this._canBind || this._bindingOperationInProgress}
-          >
-            ${this.hass!.localize(
-              "ui.panel.config.zha.group_binding.bind_button_label"
-            )}
-          </ha-progress-button>
-
           <ha-progress-button
             @click=${this._onUnbindGroupClick}
             .disabled=${!this._canBind || this._bindingOperationInProgress}
+            variant="danger"
+            appearance="plain"
           >
             ${this.hass!.localize(
               "ui.panel.config.zha.group_binding.unbind_button_label"
             )}
           </ha-progress-button>
+              <ha-progress-button
+                      @click=${this._onBindGroupClick}
+                      .disabled=${!this._canBind || this._bindingOperationInProgress}
+              >
+                  ${this.hass!.localize(
+                    "ui.panel.config.zha.group_binding.bind_button_label"
+                  )}
+              </ha-progress-button>
           </div>
         </ha-card>
       </ha-config-section>
@@ -205,6 +206,10 @@ export class ZHAGroupBindingControl extends LitElement {
           width: 100%;
         }
 
+        .content {
+          padding-top: var(--ha-space-2);
+        }
+
         .command-picker {
           align-items: center;
           padding-left: 28px;
@@ -225,6 +230,12 @@ export class ZHAGroupBindingControl extends LitElement {
         .sectionHeader {
           flex-grow: 1;
         }
+
+        .card-actions {
+          display: flex;
+          justify-content: flex-end;
+          gap: var(--ha-space-1);
+        }
       `,
     ];
   }