Colors

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

src/components/ha-sidebar.ts

@@ -8,7 +8,6 @@ import {
   mdiClose,
   mdiCog,
   mdiFormatListBulletedType,
-  mdiHammer,
   mdiLightningBolt,
   mdiMenu,
   mdiMenuOpen,
@@ -57,7 +56,7 @@ import "./ha-menu-button";
 import "./ha-svg-icon";
 import "./user/ha-user-badge";
 
-const SHOW_AFTER_SPACER = ["config", "developer-tools"];
+const SHOW_AFTER_SPACER = ["config"];
 
 const SUPPORT_SCROLL_IF_NEEDED = "scrollIntoViewIfNeeded" in document.body;
 
@@ -66,14 +65,12 @@ const SORT_VALUE_URL_PATHS = {
   map: 2,
   logbook: 3,
   history: 4,
-  "developer-tools": 9,
   config: 11,
 };
 
 const PANEL_ICONS = {
   calendar: mdiCalendar,
   config: mdiCog,
-  "developer-tools": mdiHammer,
   energy: mdiLightningBolt,
   history: mdiChartBox,
   logbook: mdiFormatListBulletedType,
@@ -1033,19 +1030,6 @@ class HaSidebar extends LitElement {
           white-space: nowrap;
         }
 
-        .dev-tools {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-          padding: 0 8px;
-          width: 256px;
-          box-sizing: border-box;
-        }
-
-        .dev-tools a {
-          color: var(--sidebar-icon-color);
-        }
-
         .tooltip {
           display: none;
           position: absolute;

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

@@ -4,6 +4,7 @@ import {
   mdiCellphoneCog,
   mdiCog,
   mdiDevices,
+  mdiHammer,
   mdiHomeAssistant,
   mdiInformation,
   mdiLightningBolt,
@@ -72,7 +73,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/hassio",
       translationKey: "supervisor",
       iconPath: mdiHomeAssistant,
-      iconColor: "#4084CD",
+      iconColor: "#F1C447",
       component: "hassio",
     },
     {
@@ -116,6 +117,12 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       iconColor: "#4A5963",
       core: true,
     },
+    {
+      path: "/developer-tools",
+      translationKey: "developer_tools",
+      iconPath: mdiHammer,
+      iconColor: "#4084CD",
+    },
   ],
   devices: [
     {

src/translations/en.json

@@ -987,6 +987,10 @@
           "settings": {
             "title": "Settings",
             "description": "Basic settings, server controls, logs and info"
+          },
+          "developer_tools": {
+            "title": "Developer Tools",
+            "description": "Tools to help create automations and scripts"
           }
         },
         "common": {