Fix profile page (#20199)

* Add icon to profile page

* Fix notification dot color

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 {

src/panels/profile/ha-profile-section-security.ts

@@ -34,6 +34,7 @@ class HaProfileSectionSecurity extends LitElement {
   protected render(): TemplateResult {
     return html`
       <hass-tabs-subpage
+        main-page
         .hass=${this.hass}
         .narrow=${this.narrow}
         .tabs=${profileSections}