diff --git a/src/panels/profile/ha-panel-profile.ts b/src/panels/profile/ha-panel-profile.ts index b755872cb2..ff60e43388 100644 --- a/src/panels/profile/ha-panel-profile.ts +++ b/src/panels/profile/ha-panel-profile.ts @@ -1,18 +1,22 @@ import { customElement, property } from "lit/decorators"; -import { HomeAssistant } from "../../types"; +import { mdiAccount, mdiLock } from "@mdi/js"; +import { PropertyValues } from "lit"; import { HassRouterPage, RouterOptions } from "../../layouts/hass-router-page"; import { PageNavigation } from "../../layouts/hass-tabs-subpage"; import { SubscribeMixin } from "../../mixins/subscribe-mixin"; +import { HomeAssistant } from "../../types"; export const profileSections: PageNavigation[] = [ { path: "/profile/general", translationKey: "ui.panel.profile.tabs.general", + iconPath: mdiAccount, }, { path: "/profile/security", translationKey: "ui.panel.profile.tabs.security", + iconPath: mdiLock, }, ]; @@ -41,6 +45,22 @@ class HaPanelProfile extends SubscribeMixin(HassRouterPage) { el.hass = this.hass; el.narrow = this.narrow; } + + protected firstUpdated(changedProps: PropertyValues) { + super.firstUpdated(changedProps); + 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)" + ); + } } declare global { interface HTMLElementTagNameMap { diff --git a/src/panels/profile/ha-profile-section-security.ts b/src/panels/profile/ha-profile-section-security.ts index 793cb497bd..1aec54bc97 100644 --- a/src/panels/profile/ha-profile-section-security.ts +++ b/src/panels/profile/ha-profile-section-security.ts @@ -34,6 +34,7 @@ class HaProfileSectionSecurity extends LitElement { protected render(): TemplateResult { return html`