Configuration Menu Cleanup items (#12413)

src/components/ha-navigation-list.ts

@@ -81,6 +81,7 @@ class HaNavigationList extends LitElement {
     ha-clickable-list-item {
       cursor: pointer;
       font-size: var(--navigation-list-item-title-font-size);
+      padding: var(--navigation-list-item-padding) 0;
     }
   `;
 }

src/panels/config/core/ha-config-section-analytics.ts

@@ -33,6 +33,11 @@ class HaConfigSectionAnalytics extends LitElement {
       max-width: 1040px;
       margin: 0 auto;
     }
+    ha-config-analytics {
+      display: block;
+      max-width: 600px;
+      margin: 0 auto;
+    }
   `;
 }
 

src/panels/config/core/ha-config-section-storage.ts

@@ -38,6 +38,7 @@ class HaConfigSectionStorage extends LitElement {
         back-path="/config/system"
         .hass=${this.hass}
         .narrow=${this.narrow}
+        .header=${this.hass.localize("ui.panel.config.storage.caption")}
       >
         <div class="content">
           ${this._error
@@ -110,9 +111,6 @@ class HaConfigSectionStorage extends LitElement {
       flex-direction: column;
       display: flex;
     }
-    .emmc {
-      --metric-bar-ok-color: #000;
-    }
   `;
 }
 

src/panels/config/core/ha-config-system-navigation.ts

@@ -43,7 +43,7 @@ class HaConfigSystemNavigation extends LitElement {
           .isWide=${this.isWide}
           full-width
         >
-          <ha-card>
+          <ha-card outlined>
             ${this.narrow
               ? html`<div class="title">
                   ${this.hass.localize("ui.panel.config.dashboard.system.main")}
@@ -103,6 +103,7 @@ class HaConfigSystemNavigation extends LitElement {
 
         ha-navigation-list {
           --navigation-list-item-title-font-size: 16px;
+          --navigation-list-item-padding: 4px;
         }
       `,
     ];

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

@@ -173,7 +173,7 @@ class HaConfigDashboard extends LitElement {
           full-width
         >
           ${canInstallUpdates.length
-            ? html`<ha-card>
+            ? html`<ha-card outlined>
                 <ha-config-updates
                   .hass=${this.hass}
                   .narrow=${this.narrow}
@@ -181,7 +181,7 @@ class HaConfigDashboard extends LitElement {
                 ></ha-config-updates>
               </ha-card>`
             : ""}
-          <ha-card>
+          <ha-card outlined>
             ${this.narrow && canInstallUpdates.length
               ? html`<div class="title">
                   ${this.hass.localize("panel.config")}

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

@@ -4,13 +4,14 @@ import {
   mdiBadgeAccountHorizontal,
   mdiCellphoneCog,
   mdiCog,
-  mdiCpu32Bit,
+  mdiDatabase,
   mdiDevices,
   mdiInformation,
   mdiInformationOutline,
   mdiLightningBolt,
   mdiMapMarkerRadius,
   mdiMathLog,
+  mdiMemory,
   mdiNetwork,
   mdiNfcVariant,
   mdiPalette,
@@ -99,7 +100,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/person",
       translationKey: "people",
       iconPath: mdiAccount,
-      iconColor: "#E48629",
+      iconColor: "#832EA6",
       components: ["person", "users"],
     },
     {
@@ -304,14 +305,14 @@ export const configSections: { [name: string]: PageNavigation[] } = {
     {
       path: "/config/storage",
       translationKey: "ui.panel.config.storage.caption",
-      iconPath: mdiServer,
+      iconPath: mdiDatabase,
       iconColor: "#518C43",
       component: "hassio",
     },
     {
       path: "/config/hardware",
       translationKey: "ui.panel.config.hardware.caption",
-      iconPath: mdiCpu32Bit,
+      iconPath: mdiMemory,
       iconColor: "#301A8E",
       component: "hassio",
     },

src/panels/config/logs/error-log-card.ts

@@ -69,7 +69,7 @@ class ErrorLogCard extends LitElement {
           : ""}
         ${this._logHTML
           ? html`
-              <ha-card>
+              <ha-card outlined>
                 <div class="header">
                   ${this.hass.userData?.showAdvanced &&
                   isComponentLoaded(this.hass, "hassio")

src/panels/config/logs/system-log-card.ts

@@ -75,7 +75,7 @@ export class SystemLogCard extends LitElement {
       : [];
     return html`
       <div class="system-log-intro">
-        <ha-card>
+        <ha-card outlined>
           ${this._items === undefined
             ? html`
                 <div class="loading-container">

src/panels/config/network/ha-config-section-network.ts

@@ -5,8 +5,8 @@ import "../../../layouts/hass-subpage";
 import type { HomeAssistant, Route } from "../../../types";
 import "./ha-config-network";
 import "./ha-config-url-form";
-import "./supervisor-network";
 import "./supervisor-hostname";
+import "./supervisor-network";
 
 @customElement("ha-config-section-network")
 class HaConfigSectionNetwork extends LitElement {
@@ -46,9 +46,12 @@ class HaConfigSectionNetwork extends LitElement {
     }
     supervisor-hostname,
     supervisor-network,
-    ha-config-url-form {
+    ha-config-url-form,
+    ha-config-network {
       display: block;
+      margin: 0 auto;
       margin-bottom: 24px;
+      max-width: 600px;
     }
   `;
 }

src/panels/config/server_control/ha-config-server-control.ts

@@ -60,6 +60,7 @@ export class HaConfigServerControl extends LitElement {
           ${this.showAdvanced
             ? html`
                 <ha-card
+                  outlined
                   header=${this.hass.localize(
                     "ui.panel.config.server_control.section.validation.heading"
                   )}
@@ -124,6 +125,7 @@ export class HaConfigServerControl extends LitElement {
             : ""}
 
           <ha-card
+            outlined
             header=${this.hass.localize(
               "ui.panel.config.server_control.section.server_management.heading"
             )}
@@ -152,6 +154,7 @@ export class HaConfigServerControl extends LitElement {
           ${this.showAdvanced
             ? html`
                 <ha-card
+                  outlined
                   header=${this.hass.localize(
                     "ui.panel.config.server_control.section.reloading.heading"
                   )}

src/panels/config/zone/dialog-core-zone-detail.ts

@@ -77,7 +77,10 @@ class DialogZoneDetail extends LitElement {
         @closed=${this.closeDialog}
         scrimClickAction
         escapeKeyAction
-        .heading=${createCloseHeading(this.hass, "Core Zone Configuration")}
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize("ui.panel.config.zone.core_location_dialog")
+        )}
       >
         ${!canEdit
           ? html`

src/translations/en.json

@@ -1435,7 +1435,7 @@
               "introduction": "Manage your location, network and analytics.",
               "core_config": {
                 "edit_requires_storage": "Editor disabled because config stored in configuration.yaml.",
-                "location_name": "Name of your Home Assistant installation",
+                "location_name": "Name",
                 "latitude": "Latitude",
                 "longitude": "Longitude",
                 "elevation": "Elevation",
@@ -2661,7 +2661,8 @@
             "delete": "Delete",
             "create": "Add",
             "update": "Update"
-          }
+          },
+          "core_location_dialog": "Home Assistant Location"
         },
         "integrations": {
           "caption": "Integrations",