diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts
index 8bdbe6e398..2899a2b807 100644
--- a/hassio/src/addon-store/hassio-addon-store.ts
+++ b/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"
>
-
+ >
Repositories
diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts
index a151b3f4c3..990086882c 100644
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/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 {
diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
index fe76c3d6fb..23a9a64098 100644
--- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
+++ b/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 {
${repo.maintainer}
${repo.url}
-
+ >
`;
})
diff --git a/hassio/src/hassio-main.ts b/hassio/src/hassio-main.ts
index 524e55af25..fae351fa06 100644
--- a/hassio/src/hassio-main.ts
+++ b/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