Some little hassio tweaks (#5793)

hassio/src/addon-store/hassio-addon-store.ts

@@ -12,7 +12,7 @@ import {
   HassioAddonRepository,
   reloadHassioAddons,
 } from "../../../src/data/hassio/addon";
-import "../../../src/components/ha-icon";
+import "../../../src/components/ha-icon-button";
 import "../../../src/layouts/loading-screen";
 import "../../../src/layouts/hass-tabs-subpage";
 import { HomeAssistant, Route } from "../../../src/types";
@@ -101,11 +101,11 @@ class HassioAddonStore extends LitElement {
           horizontal-offset="-5"
           slot="toolbar-icon"
         >
-          <ha-icon
+          <ha-icon-button
             icon="hassio:dots-vertical"
             slot="dropdown-trigger"
             alt="menu"
-          ></ha-icon>
+          ></ha-icon-button>
           <paper-listbox slot="dropdown-content" role="listbox">
             <paper-item @tap=${this._manageRepositories}>
               Repositories

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -546,6 +546,7 @@ class HassioAddonInfo extends LitElement {
           color: var(--secondary-text-color);
         }
         .addon-header {
+          padding-left: 8px;
           font-size: 24px;
           color: var(--paper-card-header-color, --primary-text-color);
         }
@@ -630,7 +631,6 @@ class HassioAddonInfo extends LitElement {
         .security ha-label-badge {
           cursor: pointer;
           margin-right: 4px;
-          --mdc-icon-size: 45px;
           --ha-label-badge-padding: 8px 0 0 0;
         }
         .changelog {

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -16,7 +16,7 @@ import {
 } from "lit-element";
 import memoizeOne from "memoize-one";
 import "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-icon";
+import "../../../../src/components/ha-icon-button";
 
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
@@ -84,12 +84,12 @@ class HassioRepositoriesDialog extends LitElement {
                       <div secondary>${repo.maintainer}</div>
                       <div secondary>${repo.url}</div>
                     </paper-item-body>
-                    <ha-icon
+                    <ha-icon-button
                       .slug=${repo.slug}
                       title="Remove"
                       @click=${this._removeRepository}
                       icon="hassio:delete"
-                    ></ha-icon>
+                    ></ha-icon-button>
                   </paper-item>
                 `;
               })

hassio/src/hassio-main.ts

@@ -94,6 +94,20 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
       this.hass.themes,
       this.hass.selectedTheme || this.hass.themes.default_theme
     );
+
+    this.style.setProperty(
+      "--app-header-background-color",
+      "var(--sidebar-background-color)"
+    );
+    this.style.setProperty(
+      "--app-header-text-color",
+      "var(--sidebar-text-color)"
+    );
+    this.style.setProperty(
+      "--app-header-border-bottom",
+      "1px solid var(--divider-color)"
+    );
+
     this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
     // Paulus - March 17, 2019
     // We went to a single hass-toggle-menu event in HA 0.90. However, the