Small edits on config menu (#12440)

src/components/ha-navigation-list.ts

@@ -56,6 +56,9 @@ class HaNavigationList extends LitElement {
   }
 
   static styles: CSSResultGroup = css`
+    :host {
+      --mdc-list-vertical-padding: 0;
+    }
     a {
       text-decoration: none;
       color: var(--primary-text-color);

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

@@ -262,7 +262,7 @@ class HaConfigSectionUpdates extends LitElement {
       margin: 0 auto;
     }
     ha-card {
-      max-width: 500px;
+      max-width: 600px;
       margin: 0 auto;
       height: 100%;
       justify-content: space-between;
@@ -272,7 +272,6 @@ class HaConfigSectionUpdates extends LitElement {
     }
     .card-actions {
       height: 48px;
-      border-top: none;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -282,7 +281,7 @@ class HaConfigSectionUpdates extends LitElement {
       display: flex;
       justify-content: space-between;
       flex-direction: column;
-      padding: 16px 16px 0 16px;
+      padding: 16px;
     }
   `;
 }

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

@@ -64,9 +64,6 @@ class HaConfigSystemNavigation extends LitElement {
     return [
       haStyle,
       css`
-        ha-card {
-          margin-bottom: env(safe-area-inset-bottom);
-        }
         :host(:not([narrow])) ha-card {
           margin-bottom: max(24px, env(safe-area-inset-bottom));
         }
@@ -79,6 +76,8 @@ class HaConfigSystemNavigation extends LitElement {
 
         ha-card {
           overflow: hidden;
+          margin-bottom: 24px;
+          margin-bottom: max(24px, env(safe-area-inset-bottom));
         }
 
         ha-card a {

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

@@ -1,6 +1,6 @@
 import "@material/mwc-button/mwc-button";
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-item/paper-item-body";
+import "@material/mwc-list/mwc-list";
+import "@material/mwc-list/mwc-list-item";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -8,7 +8,7 @@ import "../../../components/entity/state-badge";
 import "../../../components/ha-alert";
 import "../../../components/ha-icon-next";
 import type { UpdateEntity } from "../../../data/update";
-import { HomeAssistant } from "../../../types";
+import type { HomeAssistant } from "../../../types";
 
 @customElement("ha-config-updates")
 class HaConfigUpdates extends LitElement {
@@ -35,39 +35,44 @@ class HaConfigUpdates extends LitElement {
           count: this.total || this.updateEntities.length,
         })}
       </div>
-      ${updates.map(
-        (entity) => html`
-          <paper-icon-item
-            @click=${this._openMoreInfo}
-            .entity_id=${entity.entity_id}
-            class=${entity.attributes.skipped_version ? "skipped" : ""}
-          >
-            <span slot="item-icon" class="icon">
+      <mwc-list>
+        ${updates.map(
+          (entity) => html`
+            <mwc-list-item
+              twoline
+              graphic="avatar"
+              class=${entity.attributes.skipped_version ? "skipped" : ""}
+              .entity_id=${entity.entity_id}
+              .hasMeta=${!this.narrow}
+              @click=${this._openMoreInfo}
+            >
               <state-badge
+                slot="graphic"
                 .title=${entity.attributes.title ||
                 entity.attributes.friendly_name}
                 .stateObj=${entity}
-                slot="item-icon"
               ></state-badge>
-            </span>
-            <paper-item-body two-line>
-              ${entity.attributes.title || entity.attributes.friendly_name}
-              <div secondary>
+              <span
+                >${entity.attributes.title ||
+                entity.attributes.friendly_name}</span
+              >
+              <span slot="secondary">
                 ${this.hass.localize(
                   "ui.panel.config.updates.version_available",
                   {
                     version_available: entity.attributes.latest_version,
                   }
-                )}
-                ${entity.attributes.skipped_version
+                )}${entity.attributes.skipped_version
                   ? `(${this.hass.localize("ui.panel.config.updates.skipped")})`
                   : ""}
-              </div>
-            </paper-item-body>
-            ${!this.narrow ? html`<ha-icon-next></ha-icon-next>` : ""}
-          </paper-icon-item>
-        `
-      )}
+              </span>
+              ${!this.narrow
+                ? html`<ha-icon-next slot="meta"></ha-icon-next>`
+                : ""}
+            </mwc-list-item>
+          `
+        )}
+      </mwc-list>
     `;
   }
 
@@ -80,6 +85,9 @@ class HaConfigUpdates extends LitElement {
   static get styles(): CSSResultGroup[] {
     return [
       css`
+        :host {
+          --mdc-list-vertical-padding: 0;
+        }
         .title {
           font-size: 16px;
           padding: 16px;
@@ -88,11 +96,6 @@ class HaConfigUpdates extends LitElement {
         .skipped {
           background: var(--secondary-background-color);
         }
-        .icon {
-          display: inline-flex;
-          height: 100%;
-          align-items: center;
-        }
         ha-icon-next {
           color: var(--secondary-text-color);
           height: 24px;
@@ -114,8 +117,9 @@ class HaConfigUpdates extends LitElement {
           outline: none;
           text-decoration: underline;
         }
-        paper-icon-item {
+        mwc-list-item {
           cursor: pointer;
+          font-size: 16px;
         }
       `,
     ];

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

@@ -218,7 +218,7 @@ class HaConfigHardware extends LitElement {
         margin: 0 auto;
       }
       ha-card {
-        max-width: 500px;
+        max-width: 600px;
         margin: 0 auto;
         height: 100%;
         justify-content: space-between;
@@ -237,7 +237,6 @@ class HaConfigHardware extends LitElement {
       }
       .card-actions {
         height: 48px;
-        border-top: none;
         display: flex;
         justify-content: space-between;
         align-items: center;

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

@@ -28,6 +28,7 @@ class HaConfigSectionNetwork extends LitElement {
           ${isComponentLoaded(this.hass, "hassio")
             ? html`<supervisor-hostname
                   .hass=${this.hass}
+                  .narrow=${this.narrow}
                 ></supervisor-hostname>
                 <supervisor-network .hass=${this.hass}></supervisor-network>`
             : ""}

src/panels/config/network/supervisor-hostname.ts

@@ -14,6 +14,7 @@ import "../../../components/ha-header-bar";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-radio";
 import "../../../components/ha-related-items";
+import "../../../components/ha-settings-row";
 import "../../../components/ha-textfield";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import {
@@ -22,12 +23,13 @@ import {
 } from "../../../data/hassio/host";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../types";
-import "../../../components/ha-settings-row";
 
 @customElement("supervisor-hostname")
 export class HassioHostname extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ type: Boolean }) narrow!: boolean;
+
   @state() private _processing = false;
 
   @state() private _hostname?: string;
@@ -48,11 +50,12 @@ export class HassioHostname extends LitElement {
 
     return html`
       <ha-card
+        class="no-padding"
         outlined
         .header=${this.hass.localize("ui.panel.config.network.hostname.title")}
       >
-        <div class="card-content">
-          <ha-settings-row>
+        <div>
+          <ha-settings-row .narrow=${this.narrow}>
             <span slot="heading">Hostname</span>
             <span slot="description"
               >The name your instance will have on your network</span
@@ -98,21 +101,17 @@ export class HassioHostname extends LitElement {
     }
   }
 
-  static get styles(): CSSResultGroup {
-    return [
-      css`
-        ha-textfield {
-          width: 100%;
-        }
-        .card-actions {
-          display: flex;
-          flex-direction: row-reverse;
-          justify-content: space-between;
-          align-items: center;
-        }
-      `,
-    ];
-  }
+  static styles: CSSResultGroup = css`
+    ha-textfield {
+      width: 100%;
+    }
+    .card-actions {
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: space-between;
+      align-items: center;
+    }
+  `;
 }
 
 declare global {

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

@@ -1,3 +1,4 @@
+import { mdiDotsVertical } from "@mdi/js";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
@@ -40,6 +41,22 @@ class HaConfigSectionStorage extends LitElement {
         .narrow=${this.narrow}
         .header=${this.hass.localize("ui.panel.config.storage.caption")}
       >
+        ${this._hostInfo
+          ? html`
+              <ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
+                <ha-icon-button
+                  slot="trigger"
+                  .label=${this.hass.localize("ui.common.overflow")}
+                  .path=${mdiDotsVertical}
+                ></ha-icon-button>
+                <mwc-list-item @click=${this._moveDatadisk}>
+                  ${this.hass.localize(
+                    "ui.panel.config.storage.datadisk.title"
+                  )}
+                </mwc-list-item>
+              </ha-button-menu>
+            `
+          : ""}
         <div class="content">
           ${this._error
             ? html`
@@ -79,13 +96,6 @@ class HaConfigSectionStorage extends LitElement {
                         `
                       : ""}
                   </div>
-                  <div class="card-actions">
-                    <mwc-button @click=${this._moveDatadisk}>
-                      ${this.hass.localize(
-                        "ui.panel.config.storage.datadisk.title"
-                      )}
-                    </mwc-button>
-                  </div>
                 </ha-card>
               `
             : ""}
@@ -118,26 +128,16 @@ class HaConfigSectionStorage extends LitElement {
       margin: 0 auto;
     }
     ha-card {
-      max-width: 500px;
+      max-width: 600px;
       margin: 0 auto;
-      height: 100%;
       justify-content: space-between;
       flex-direction: column;
       display: flex;
     }
-    .card-actions {
-      height: 48px;
-      border-top: none;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
     .card-content {
       display: flex;
       justify-content: space-between;
       flex-direction: column;
-      padding: 16px 16px 0 16px;
     }
   `;
 }

src/panels/config/system-health/ha-config-system-health.ts

@@ -452,7 +452,7 @@ class HaConfigSystemHealth extends SubscribeMixin(LitElement) {
     }
     ha-card {
       display: block;
-      max-width: 500px;
+      max-width: 600px;
       margin: 0 auto;
       padding-bottom: 16px;
       margin-bottom: max(24px, env(safe-area-inset-bottom));

src/translations/en.json

@@ -3212,8 +3212,8 @@
         },
         "system_health": {
           "caption": "System Health",
-          "cpu_usage": "CPU Usage",
-          "ram_usage": "RAM Usage",
+          "cpu_usage": "Process Usage",
+          "ram_usage": "Memory Usage",
           "core_stats": "Core Stats",
           "supervisor_stats": "Supervisor Stats"
         }