Move refresh logs button to top (#15382)

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

@@ -36,6 +36,8 @@ class ErrorLogCard extends LitElement {
 
   @property() public filter = "";
 
+  @property() public header?: string;
+
   @property() public provider!: string;
 
   @property({ type: Boolean, attribute: true }) public show = false;
@@ -56,9 +58,10 @@ class ErrorLogCard extends LitElement {
           ? html`
               <ha-card outlined>
                 <div class="header">
-                  <h2>
+                  <h1 class="card-header">
-                    ${this.hass.localize("ui.panel.config.logs.show_full_logs")}
+                    ${this.header ||
-                  </h2>
+                    this.hass.localize("ui.panel.config.logs.show_full_logs")}
+                  </h1>
                   <div>
                     <ha-icon-button
                       .path=${mdiRefresh}
@@ -225,10 +228,26 @@ class ErrorLogCard extends LitElement {
       margin: 16px;
     }
 
+    ha-card {
+      padding-top: 16px;
+    }
+
     .header {
       display: flex;
       justify-content: space-between;
-      padding: 16px;
+      padding: 0 16px;
+    }
+
+    .card-header {
+      color: var(--ha-card-header-color, --primary-text-color);
+      font-family: var(--ha-card-header-font-family, inherit);
+      font-size: var(--ha-card-header-font-size, 24px);
+      letter-spacing: -0.012em;
+      line-height: 48px;
+      display: block;
+      margin-block-start: 0px;
+      margin-block-end: 0px;
+      font-weight: normal;
     }
 
     ha-select {

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

@@ -147,12 +147,18 @@ export class HaConfigLogs extends LitElement {
             ? html`
                 <system-log-card
                   .hass=${this.hass}
+                  .header=${this._logProviders.find(
+                    (p) => p.key === this._selectedLogProvider
+                  )!.name}
                   .filter=${this._filter}
                 ></system-log-card>
               `
             : ""}
           <error-log-card
             .hass=${this.hass}
+            .header=${this._logProviders.find(
+              (p) => p.key === this._selectedLogProvider
+            )!.name}
             .filter=${this._filter}
             .provider=${this._selectedLogProvider}
             .show=${this._selectedLogProvider !== "core"}

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

@@ -1,3 +1,4 @@
+import { mdiRefresh } from "@mdi/js";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@@ -25,6 +26,8 @@ export class SystemLogCard extends LitElement {
 
   @property() public filter = "";
 
+  @property() public header?: string;
+
   public loaded = false;
 
   @state() private _items?: LoggedError[];
@@ -83,6 +86,14 @@ export class SystemLogCard extends LitElement {
                 </div>
               `
             : html`
+                <div class="header">
+                  <h1 class="card-header">${this.header || "Logs"}</h1>
+                  <ha-icon-button
+                    .path=${mdiRefresh}
+                    @click=${this.fetchData}
+                    .label=${this.hass.localize("ui.common.refresh")}
+                  ></ha-icon-button>
+                </div>
                 ${this._items.length === 0
                   ? html`
                       <div class="card-content empty-content">
@@ -139,11 +150,6 @@ export class SystemLogCard extends LitElement {
                       "ui.panel.config.logs.clear"
                     )}</ha-call-service-button
                   >
-                  <ha-progress-button @click=${this.fetchData}
-                    >${this.hass.localize(
-                      "ui.panel.config.logs.refresh"
-                    )}</ha-progress-button
-                  >
                 </div>
               `}
         </ha-card>
@@ -181,6 +187,24 @@ export class SystemLogCard extends LitElement {
         padding-top: 16px;
       }
 
+      .header {
+        display: flex;
+        justify-content: space-between;
+        padding: 0 16px;
+      }
+
+      .card-header {
+        color: var(--ha-card-header-color, --primary-text-color);
+        font-family: var(--ha-card-header-font-family, inherit);
+        font-size: var(--ha-card-header-font-size, 24px);
+        letter-spacing: -0.012em;
+        line-height: 48px;
+        display: block;
+        margin-block-start: 0px;
+        margin-block-end: 0px;
+        font-weight: normal;
+      }
+
       paper-item {
         cursor: pointer;
       }