Add iconColor to ha-config-navigation entries (#10658)

src/layouts/hass-tabs-subpage.ts

@@ -28,6 +28,8 @@ export interface PageNavigation {
   core?: boolean;
   advancedOnly?: boolean;
   iconPath?: string;
+  description?: string;
+  iconColor?: string;
   info?: any;
 }
 

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

@@ -59,6 +59,7 @@ class HaConfigDashboard extends LitElement {
                     name: "Home Assistant Cloud",
                     info: this.cloudStatus,
                     iconPath: mdiCloudLock,
+                    iconColor: "#174B62",
                   },
                 ]}
               ></ha-config-navigation>

src/panels/config/dashboard/ha-config-navigation.ts

@@ -24,10 +24,13 @@ class HaConfigNavigation extends LitElement {
           ? html`
               <a href=${page.path} aria-role="option" tabindex="-1">
                 <paper-icon-item>
-                  <ha-svg-icon
-                    .path=${page.iconPath}
+                  <div
+                    class=${page.iconColor ? "icon-background" : ""}
                     slot="item-icon"
-                  ></ha-svg-icon>
+                    .style="background-color: ${page.iconColor || "undefined"}"
+                  >
+                    <ha-svg-icon .path=${page.iconPath}></ha-svg-icon>
+                  </div>
                   <paper-item-body two-line>
                     ${page.name ||
                     this.hass.localize(
@@ -54,7 +57,8 @@ class HaConfigNavigation extends LitElement {
                           `
                       : html`
                           <div secondary>
-                            ${this.hass.localize(
+                            ${page.description ||
+                            this.hass.localize(
                               `ui.panel.config.${page.component}.description`
                             )}
                           </div>
@@ -81,6 +85,11 @@ class HaConfigNavigation extends LitElement {
       ha-svg-icon,
       ha-icon-next {
         color: var(--secondary-text-color);
+        height: 24px;
+        width: 24px;
+      }
+      ha-svg-icon {
+        padding: 8px;
       }
       .iron-selected paper-item::before,
       a:not(.iron-selected):focus::before {
@@ -102,6 +111,12 @@ class HaConfigNavigation extends LitElement {
       .iron-selected:focus paper-item::before {
         opacity: 0.2;
       }
+      .icon-background {
+        border-radius: 50%;
+      }
+      .icon-background ha-svg-icon {
+        color: var(--card-background-color);
+      }
     `;
   }
 }

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

@@ -46,6 +46,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/integrations",
       translationKey: "ui.panel.config.integrations.caption",
       iconPath: mdiPuzzle,
+      iconColor: "#004E98",
       core: true,
     },
     {
@@ -53,6 +54,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/devices",
       translationKey: "ui.panel.config.devices.caption",
       iconPath: mdiDevices,
+      iconColor: "#004E98",
       core: true,
     },
     {
@@ -60,6 +62,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/entities",
       translationKey: "ui.panel.config.entities.caption",
       iconPath: mdiShape,
+      iconColor: "#004E98",
       core: true,
     },
     {
@@ -67,6 +70,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/areas",
       translationKey: "ui.panel.config.areas.caption",
       iconPath: mdiSofa,
+      iconColor: "#004E98",
       core: true,
     },
   ],
@@ -76,24 +80,28 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/blueprint",
       translationKey: "ui.panel.config.blueprint.caption",
       iconPath: mdiPaletteSwatch,
+      iconColor: "#2A850E",
     },
     {
       component: "automation",
       path: "/config/automation",
       translationKey: "ui.panel.config.automation.caption",
       iconPath: mdiRobot,
+      iconColor: "#2A850E",
     },
     {
       component: "scene",
       path: "/config/scene",
       translationKey: "ui.panel.config.scene.caption",
       iconPath: mdiPalette,
+      iconColor: "#2A850E",
     },
     {
       component: "script",
       path: "/config/script",
       translationKey: "ui.panel.config.script.caption",
       iconPath: mdiScriptText,
+      iconColor: "#2A850E",
     },
   ],
   helpers: [
@@ -102,6 +110,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/helpers",
       translationKey: "ui.panel.config.helpers.caption",
       iconPath: mdiTools,
+      iconColor: "#7209EB",
       core: true,
     },
   ],
@@ -111,12 +120,14 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/tags",
       translationKey: "ui.panel.config.tag.caption",
       iconPath: mdiNfcVariant,
+      iconColor: "#DF8E44",
     },
     {
       component: "energy",
       path: "/config/energy",
       translationKey: "ui.panel.config.energy.caption",
       iconPath: mdiLightningBolt,
+      iconColor: "#578681",
     },
   ],
   lovelace: [
@@ -125,6 +136,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/lovelace/dashboards",
       translationKey: "ui.panel.config.lovelace.caption",
       iconPath: mdiViewDashboard,
+      iconColor: "#D81159",
     },
   ],
   persons: [
@@ -133,18 +145,21 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/person",
       translationKey: "ui.panel.config.person.caption",
       iconPath: mdiAccount,
+      iconColor: "#0A4BF0",
     },
     {
       component: "zone",
       path: "/config/zone",
       translationKey: "ui.panel.config.zone.caption",
       iconPath: mdiMapMarkerRadius,
+      iconColor: "#0A4BF0",
     },
     {
       component: "users",
       path: "/config/users",
       translationKey: "ui.panel.config.users.caption",
       iconPath: mdiBadgeAccountHorizontal,
+      iconColor: "#0A4BF0",
       core: true,
       advancedOnly: true,
     },
@@ -155,6 +170,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/core",
       translationKey: "ui.panel.config.core.caption",
       iconPath: mdiHomeAssistant,
+      iconColor: "#8F2D56",
       core: true,
     },
     {
@@ -162,6 +178,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/server_control",
       translationKey: "ui.panel.config.server_control.caption",
       iconPath: mdiServer,
+      iconColor: "#8F2D56",
       core: true,
     },
     {
@@ -169,6 +186,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/logs",
       translationKey: "ui.panel.config.logs.caption",
       iconPath: mdiMathLog,
+      iconColor: "#8F2D56",
       core: true,
     },
     {
@@ -176,6 +194,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/info",
       translationKey: "ui.panel.config.info.caption",
       iconPath: mdiInformation,
+      iconColor: "#8F2D56",
       core: true,
     },
   ],