Fix ha-buttons (#26373)

* Fix ha-button supervisor network

* Fix button appearance for entity row

* Fix logs button menu mobile width

* Fix new logs indicator

Author: wendevlin

landing-page/src/components/landing-page-logs.ts

@@ -3,26 +3,26 @@ import { mdiArrowCollapseDown, mdiDownload } from "@mdi/js";
 // eslint-disable-next-line import/extensions
 import { IntersectionController } from "@lit-labs/observers/intersection-controller.js";
 import { LitElement, type PropertyValues, css, html, nothing } from "lit";
-import { classMap } from "lit/directives/class-map";
 import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { fireEvent } from "../../../src/common/dom/fire_event";
 import type {
   LandingPageKeys,
   LocalizeFunc,
 } from "../../../src/common/translations/localize";
+import { waitForSeconds } from "../../../src/common/util/wait";
+import "../../../src/components/ha-alert";
+import "../../../src/components/ha-ansi-to-html";
+import type { HaAnsiToHtml } from "../../../src/components/ha-ansi-to-html";
 import "../../../src/components/ha-button";
 import "../../../src/components/ha-icon-button";
 import "../../../src/components/ha-svg-icon";
-import "../../../src/components/ha-ansi-to-html";
-import "../../../src/components/ha-alert";
-import type { HaAnsiToHtml } from "../../../src/components/ha-ansi-to-html";
+import { fileDownload } from "../../../src/util/file_download";
 import {
   getObserverLogs,
   downloadUrl as observerLogsDownloadUrl,
 } from "../data/observer";
-import { fireEvent } from "../../../src/common/dom/fire_event";
-import { fileDownload } from "../../../src/util/file_download";
 import { getSupervisorLogs, getSupervisorLogsFollow } from "../data/supervisor";
-import { waitForSeconds } from "../../../src/common/util/wait";
 import { ASSUME_CORE_START_SECONDS } from "../ha-landing-page";
 
 const ERROR_CHECK = /^[\d\s-:]+(ERROR|CRITICAL)(.*)/gm;
@@ -108,6 +108,8 @@ class LandingPageLogs extends LitElement {
               !this._scrolledToBottomController.value) ||
             false,
         })}"
+        size="small"
+        appearance="filled"
         @click=${this._scrollToBottom}
       >
         <ha-svg-icon .path=${mdiArrowCollapseDown} slot="start"></ha-svg-icon>
@@ -309,21 +311,14 @@ class LandingPageLogs extends LitElement {
       }
 
       .new-logs-indicator {
-        --mdc-theme-primary: var(--text-primary-color);
-
         overflow: hidden;
         position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        bottom: 4px;
+        left: 4px;
         height: 0;
-        background-color: var(--primary-color);
-        border-radius: 8px;
 
         transition: height 0.4s ease-out;
         display: flex;
-        justify-content: space-between;
-        align-items: center;
       }
 
       .new-logs-indicator.visible {

src/panels/config/logs/error-log-card.ts

@@ -825,6 +825,7 @@ class ErrorLogCard extends LitElement {
       overflow: hidden;
       position: absolute;
       bottom: 4px;
+      left: 4px;
       height: 0;
       transition: height 0.4s ease-out;
     }

src/panels/config/logs/ha-config-logs.ts

@@ -250,6 +250,21 @@ export class HaConfigLogs extends LitElement {
         .content {
           direction: ltr;
         }
+        @media all and (max-width: 870px) {
+          ha-button-menu {
+            max-width: 50%;
+          }
+          ha-button {
+            max-width: 100%;
+          }
+          ha-button::part(label) {
+            overflow: hidden;
+            white-space: nowrap;
+          }
+        }
+        ha-list-item[selected] {
+          color: var(--primary-color);
+        }
       `,
     ];
   }

src/panels/config/network/supervisor-network.ts

@@ -260,16 +260,16 @@ export class HassioNetwork extends LitElement {
           : nothing}
       </div>
       <div class="card-actions">
-        <ha-button appearance="plain" @click=${this._clear}>
-          ${this.hass.localize("ui.panel.config.network.supervisor.reset")}
-        </ha-button>
         <ha-button
           .loading=${this._processing}
           @click=${this._updateNetwork}
           .disabled=${!this._dirty}
         >
           ${this.hass.localize("ui.common.save")}
         </ha-button>
+        <ha-button variant="danger" appearance="plain" @click=${this._clear}>
+          ${this.hass.localize("ui.panel.config.network.supervisor.reset")}
+        </ha-button>
       </div>`;
   }
 

src/panels/lovelace/entity-rows/hui-scene-entity-row.ts

@@ -47,7 +47,7 @@ class HuiSceneEntityRow extends LitElement implements LovelaceRow {
     return html`
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
         <ha-button
-          appearance="filled"
+          appearance="plain"
           size="small"
           @click=${this._callService}
           .disabled=${stateObj.state === UNAVAILABLE}

src/panels/lovelace/entity-rows/hui-script-entity-row.ts

@@ -49,8 +49,9 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow {
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
         ${stateObj.state === "on"
           ? html`<ha-button
-              appearance="filled"
+              appearance="plain"
               size="small"
+              variant="danger"
               @click=${this._cancelScript}
             >
               ${stateObj.attributes.mode !== "single" &&
@@ -61,10 +62,10 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow {
                   })
                 : this.hass.localize("ui.card.script.cancel")}
             </ha-button>`
-          : ""}
+          : nothing}
         ${stateObj.state === "off" || stateObj.attributes.max
           ? html`<ha-button
-              appearance="filled"
+              appearance="plain"
               size="small"
               @click=${this._runScript}
               .disabled=${isUnavailableState(stateObj.state) ||
@@ -73,7 +74,7 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow {
               ${this._config.action_name ||
               this.hass!.localize("ui.card.script.run")}
             </ha-button>`
-          : ""}
+          : nothing}
       </hui-generic-entity-row>
     `;
   }