Redesign about page (#18383)

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

@@ -7,8 +7,15 @@ import {
   mdiNewspaperVariant,
   mdiTshirtCrew,
 } from "@mdi/js";
-import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
+import {
-import { property, state } from "lit/decorators";
+  CSSResultGroup,
+  LitElement,
+  TemplateResult,
+  css,
+  html,
+  nothing,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-card";
 import "../../../components/ha-clickable-list-item";
@@ -77,6 +84,7 @@ const PAGES = [
   iconColor: string;
 }[];
 
+@customElement("ha-config-info")
 class HaConfigInfo extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -105,41 +113,56 @@ class HaConfigInfo extends LitElement {
         .header=${this.hass.localize("ui.panel.config.info.caption")}
       >
         <div class="content">
-          <ha-card outlined>
+          <ha-card outlined class="header">
-            <div class="logo-versions">
+            <a
-              <a
+              href=${documentationUrl(this.hass, "")}
-                href=${documentationUrl(this.hass, "")}
+              target="_blank"
-                target="_blank"
+              rel="noreferrer"
-                rel="noreferrer"
+            >
+              <ha-logo-svg
+                title=${this.hass.localize(
+                  "ui.panel.config.info.home_assistant_logo"
+                )}
               >
-                <ha-logo-svg
+              </ha-logo-svg>
-                  title=${this.hass.localize(
+            </a>
-                    "ui.panel.config.info.home_assistant_logo"
+            <p>Home Assistant</p>
-                  )}
+            <ul class="versions">
-                >
+              <li>
-                </ha-logo-svg>
+                <span class="version-label">Core</span>
-              </a>
+                <span class="version">${hass.connection.haVersion}</span>
-              <div class="versions">
+              </li>
-                <span class="ha-version"
+              ${this._hassioInfo
-                  >Home Assistant ${hass.connection.haVersion}</span
+                ? html`
-                >
+                    <li>
-                ${this._hassioInfo
+                      <span class="version-label">Supervisor</span>
-                  ? html`<span>Supervisor ${this._hassioInfo.supervisor}</span>`
+                      <span class="version"
-                  : ""}
+                        >${this._hassioInfo.supervisor}</span
-                ${this._osInfo?.version
+                      >
-                  ? html`<span>Operating System ${this._osInfo.version}</span>`
+                    </li>
-                  : ""}
+                  `
-                <span>
+                : nothing}
+              ${this._osInfo
+                ? html`
+                    <li>
+                      <span class="version-label">Operating System</span>
+                      <span class="version">${this._osInfo.version}</span>
+                    </li>
+                  `
+                : nothing}
+              <li>
+                <span class="version-label">
                   ${this.hass.localize(
-                    "ui.panel.config.info.frontend_version",
+                    "ui.panel.config.info.frontend_version_label"
-                    "version",
-                    JS_VERSION,
-                    "type",
-                    JS_TYPE
                   )}
                 </span>
-              </div>
+                <span class="version">
-            </div>
+                  ${JS_VERSION}${JS_TYPE !== "latest" ? ` ⸱ ${JS_TYPE}` : ""}
+                </span>
+              </li>
+            </ul>
+          </ha-card>
+          <ha-card outlined class="pages">
             <mwc-list>
               ${PAGES.map(
                 (page) => html`
@@ -164,9 +187,8 @@ class HaConfigInfo extends LitElement {
                 `
               )}
             </mwc-list>
-            ${!customUiList.length
+            ${customUiList.length
-              ? ""
+              ? html`
-              : html`
                   <div class="custom-ui">
                     ${this.hass.localize("ui.panel.config.info.custom_uis")}
                     ${customUiList.map(
@@ -178,7 +200,8 @@ class HaConfigInfo extends LitElement {
                       `
                     )}
                   </div>
-                `}
+                `
+              : nothing}
           </ha-card>
         </div>
       </hass-subpage>
@@ -222,32 +245,58 @@ class HaConfigInfo extends LitElement {
         }
 
         ha-logo-svg {
-          padding: 12px;
+          height: 56px;
-          height: 150px;
+          width: 56px;
-          width: 150px;
         }
 
         ha-card {
-          padding: 16px;
           max-width: 600px;
           margin: 0 auto;
-          margin-bottom: 24px;
+          margin-bottom: 16px;
-          margin-bottom: max(24px, env(safe-area-inset-bottom));
+          padding: 16px;
         }
 
-        .logo-versions {
+        .header {
           display: flex;
-          justify-content: flex-start;
+          flex-direction: column;
+          justify-content: center;
           align-items: center;
+          padding: 32px 8px 16px 8px;
+        }
+
+        .header p {
+          font-size: 22px;
+          font-weight: 400;
+          line-height: 28px;
+          text-align: center;
+          margin: 24px;
         }
 
         .versions {
           display: flex;
           flex-direction: column;
           color: var(--secondary-text-color);
-          padding: 12px 0;
           align-self: stretch;
           justify-content: flex-start;
+          padding: 0 12px;
+          margin: 0;
+        }
+
+        .versions li {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          font-size: 14px;
+          font-weight: 400;
+          padding: 4px 0;
+        }
+
+        .version-label {
+          color: var(--primary-text-color);
+        }
+
+        .version {
+          color: var(--secondary-text-color);
         }
 
         .ha-version {
@@ -256,8 +305,18 @@ class HaConfigInfo extends LitElement {
           font-size: 16px;
         }
 
+        .pages {
+          margin-bottom: max(24px, env(safe-area-inset-bottom));
+          padding: 4px 0;
+        }
+
         mwc-list {
-          --mdc-list-side-padding: 4px;
+          --mdc-list-side-padding: 16px;
+          --mdc-list-vertical-padding: 0;
+        }
+
+        ha-clickable-list-item {
+          height: 64px;
         }
 
         ha-svg-icon {
@@ -272,13 +331,6 @@ class HaConfigInfo extends LitElement {
           border-radius: 50%;
         }
 
-        @media all and (max-width: 500px), all and (max-height: 500px) {
-          ha-logo-svg {
-            height: 100px;
-            width: 100px;
-          }
-        }
-
         .custom-ui {
           color: var(--secondary-text-color);
           text-align: center;
@@ -293,5 +345,3 @@ declare global {
     "ha-config-info": HaConfigInfo;
   }
 }
-
-customElements.define("ha-config-info", HaConfigInfo);

src/translations/en.json

@@ -2025,7 +2025,7 @@
           "frontend": "frontend-ui",
           "built_using": "Built using",
           "icons_by": "Icons by",
-          "frontend_version": "Frontend {version} - {type}",
+          "frontend_version_label": "Frontend",
           "custom_uis": "Custom UIs:",
           "system_health_error": "System Health component is not loaded. Add 'system_health:' to configuration.yaml",
           "documentation": "Documentation",