Update style

src/panels/config/cloud/account/cloud-account.js

@@ -4,13 +4,13 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { formatDateTime } from "../../../../common/datetime/format_date_time";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/buttons/ha-call-api-button";
 import "../../../../components/ha-card";
 import { fetchCloudSubscriptionInfo } from "../../../../data/cloud";
 import "../../../../layouts/hass-subpage";
 import { EventsMixin } from "../../../../mixins/events-mixin";
 import LocalizeMixin from "../../../../mixins/localize-mixin";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../styles/polymer-ha-style";
 import "../../ha-config-section";
 import "./cloud-alexa-pref";
@@ -131,7 +131,7 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
             </ha-card>
           </ha-config-section>
 
-          <ha-config-section is-wide="[[isWide]]">
+          <ha-config-section side-by-side is-wide="[[isWide]]">
             <span slot="header"
               >[[localize('ui.panel.config.cloud.account.integrations')]]</span
             >
@@ -150,13 +150,14 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
                 >.
               </p>
             </div>
+            <cloud-remote-pref
+              hass="[[hass]]"
+              cloud-status="[[cloudStatus]]"
+              dir="[[_rtlDirection]]"
+            ></cloud-remote-pref>
+          </ha-config-section>
+          <ha-config-section no-header is-wide="[[isWide]]">
             <div class$="integrations [[_computeIsNarrow(isWide)]]">
-              <cloud-remote-pref
-                hass="[[hass]]"
-                cloud-status="[[cloudStatus]]"
-                dir="[[_rtlDirection]]"
-              ></cloud-remote-pref>
-
               <cloud-alexa-pref
                 hass="[[hass]]"
                 cloud-status="[[cloudStatus]]"

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

@@ -1,18 +1,16 @@
 import {
-  LitElement,
-  CSSResult,
   css,
+  CSSResult,
+  customElement,
   html,
+  LitElement,
   property,
   TemplateResult,
-  customElement,
 } from "lit-element";
-
 import type { HomeAssistant } from "../../../types";
-
 import "../ha-config-section";
-import "./ha-config-name-form";
 import "./ha-config-core-form";
+import "./ha-config-name-form";
 import "./ha-config-url-form";
 
 @customElement("ha-config-section-core")
@@ -27,16 +25,14 @@ export class HaConfigSectionCore extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-config-section .isWide=${this.isWide}>
-        <span slot="header"
+        <div slot="header">
-          >${this.hass.localize(
+          ${this.hass.localize("ui.panel.config.core.section.core.header")}
-            "ui.panel.config.core.section.core.header"
+        </div>
-          )}</span
+        <div slot="introduction">
-        >
+          ${this.hass.localize(
-        <span slot="introduction"
-          >${this.hass.localize(
             "ui.panel.config.core.section.core.introduction"
-          )}</span
+          )}
-        >
+        </div>
         <div class="content">
           <ha-config-name-form .hass=${this.hass}></ha-config-name-form>
           <ha-config-url-form .hass=${this.hass}></ha-config-url-form>

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

@@ -1,4 +1,4 @@
-import "../../../layouts/ha-app-layout";
+import { mdiCloudLock } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import {
@@ -15,12 +15,12 @@ import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-menu-button";
 import { CloudStatus } from "../../../data/cloud";
+import "../../../layouts/ha-app-layout";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 import "./ha-config-navigation";
-import { mdiCloudLock } from "@mdi/js";
 
 @customElement("ha-config-dashboard")
 class HaConfigDashboard extends LitElement {
@@ -36,91 +36,92 @@ class HaConfigDashboard extends LitElement {
   @property() public showAdvanced!: boolean;
 
   protected render(): TemplateResult {
-    const content = html` <ha-config-section
+    const content = html`
-      .narrow=${this.narrow}
+      <ha-config-section .narrow=${this.narrow}>
-      .isWide=${this.isWide}
+        <div slot="header">
-    >
+          ${this.hass.localize("ui.panel.config.header")}
-      <div slot="header">
+        </div>
-        ${this.hass.localize("ui.panel.config.header")}
-      </div>
 
-      <div slot="introduction">
+        <div slot="introduction">
-        ${this.hass.localize("ui.panel.config.introduction")}
+          ${this.hass.localize("ui.panel.config.introduction")}
-      </div>
+        </div>
 
-      ${this.cloudStatus && isComponentLoaded(this.hass, "cloud")
+        ${this.cloudStatus && isComponentLoaded(this.hass, "cloud")
-        ? html`
+          ? html`
+              <ha-card>
+                <ha-config-navigation
+                  .hass=${this.hass}
+                  .showAdvanced=${this.showAdvanced}
+                  .pages=${[
+                    {
+                      component: "cloud",
+                      path: "/config/cloud",
+                      translationKey: "ui.panel.config.cloud.caption",
+                      info: this.cloudStatus,
+                      iconPath: mdiCloudLock,
+                    },
+                  ]}
+                ></ha-config-navigation>
+              </ha-card>
+            `
+          : ""}
+        ${Object.values(configSections).map(
+          (section) => html`
             <ha-card>
               <ha-config-navigation
                 .hass=${this.hass}
                 .showAdvanced=${this.showAdvanced}
-                .pages=${[
+                .pages=${section}
-                  {
-                    component: "cloud",
-                    path: "/config/cloud",
-                    translationKey: "ui.panel.config.cloud.caption",
-                    info: this.cloudStatus,
-                    iconPath: mdiCloudLock,
-                  },
-                ]}
               ></ha-config-navigation>
             </ha-card>
           `
-        : ""}
+        )}
-      ${Object.values(configSections).map(
+        ${isComponentLoaded(this.hass, "zha")
-        (section) => html`
+          ? html`
-          <ha-card>
+              <div class="promo-advanced">
-            <ha-config-navigation
+                ${this.hass.localize(
-              .hass=${this.hass}
+                  "ui.panel.config.integration_panel_move.missing_zha",
-              .showAdvanced=${this.showAdvanced}
+                  "integrations_page",
-              .pages=${section}
+                  html`<a href="/config/integrations">
-            ></ha-config-navigation>
+                    ${this.hass.localize(
-          </ha-card>
+                      "ui.panel.config.integration_panel_move.link_integration_page"
-        `
+                    )}
-      )}
+                  </a>`
-      ${isComponentLoaded(this.hass, "zha")
+                )}
-        ? html`
+              </div>
-            <div class="promo-advanced">
+            `
-              ${this.hass.localize(
+          : ""}
-                "ui.panel.config.integration_panel_move.missing_zha",
+        ${isComponentLoaded(this.hass, "zwave")
-                "integrations_page",
+          ? html`
-                html`<a href="/config/integrations">
+              <div class="promo-advanced">
-                  ${this.hass.localize(
+                ${this.hass.localize(
-                    "ui.panel.config.integration_panel_move.link_integration_page"
+                  "ui.panel.config.integration_panel_move.missing_zwave",
-                  )}
+                  "integrations_page",
-                </a>`
+                  html`<a href="/config/integrations">
-              )}
+                    ${this.hass.localize(
-            </div>
+                      "ui.panel.config.integration_panel_move.link_integration_page"
-          `
+                    )}
-        : ""}
+                  </a>`
-      ${isComponentLoaded(this.hass, "zwave")
+                )}
-        ? html`
+              </div>
-            <div class="promo-advanced">
+            `
-              ${this.hass.localize(
+          : ""}
-                "ui.panel.config.integration_panel_move.missing_zwave",
+        ${!this.showAdvanced
-                "integrations_page",
+          ? html`
-                html`<a href="/config/integrations">
+              <div class="promo-advanced">
-                  ${this.hass.localize(
+                ${this.hass.localize(
-                    "ui.panel.config.integration_panel_move.link_integration_page"
+                  "ui.panel.config.advanced_mode.hint_enable"
-                  )}
+                )}
-                </a>`
+                <a href="/profile"
-              )}
+                  >${this.hass.localize(
-            </div>
+                    "ui.panel.config.advanced_mode.link_profile_page"
-          `
+                  )}</a
-        : ""}
+                >.
-      ${!this.showAdvanced
+              </div>
-        ? html`
+            `
-            <div class="promo-advanced">
+          : ""}
-              ${this.hass.localize("ui.panel.config.advanced_mode.hint_enable")}
+      </ha-config-section>
-              <a href="/profile"
+    `;
-                >${this.hass.localize(
-                  "ui.panel.config.advanced_mode.link_profile_page"
-                )}</a
-              >.
-            </div>
-          `
-        : ""}
-    </ha-config-section>`;
 
     if (!this.narrow && this.hass.dockedSidebar !== "always_hidden") {
       return content;

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

@@ -5,11 +5,16 @@ import { classMap } from "lit-html/directives/class-map";
 export class HaConfigSection extends LitElement {
   @property({ type: Boolean }) public isWide = false;
 
+  @property({ type: Boolean }) public narrow?: boolean;
+
+  @property({ type: Boolean, attribute: "no-header" }) public noHeader = false;
+
   protected render() {
     return html`
       <div
         class="content ${classMap({
-          narrow: !this.isWide,
+          narrow: this.narrow !== undefined ? this.narrow : !this.isWide,
+          "no-header": this.noHeader,
         })}"
       >
         <div class="heading">
@@ -65,11 +70,12 @@ export class HaConfigSection extends LitElement {
       }
 
       :host([side-by-side]) .content:not(.narrow) .heading {
+        min-width: 400px;
         max-width: 400px;
         margin-right: 40px;
       }
 
-      .header {
+      slot[name="header"]::slotted(*) {
         font-family: var(--paper-font-headline_-_font-family);
         -webkit-font-smoothing: var(
           --paper-font-headline_-_-webkit-font-smoothing
@@ -86,7 +92,7 @@ export class HaConfigSection extends LitElement {
         margin-top: 32px;
       }
 
-      .intro {
+      slot[name="introduction"]::slotted(*) {
         font-family: var(--paper-font-subhead_-_font-family);
         -webkit-font-smoothing: var(
           --paper-font-subhead_-_-webkit-font-smoothing
@@ -115,11 +121,15 @@ export class HaConfigSection extends LitElement {
       .narrow .together {
         margin-top: 20px;
       }
-      .narrow .intro {
+      .narrow slot[name="introduction"]::slotted(*) {
         padding-bottom: 20px;
         margin-right: 0;
         max-width: 500px;
       }
+
+      .no-header.content {
+        padding-top: 0;
+      }
     `;
   }
 }

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

@@ -1,27 +1,27 @@
+import "@material/mwc-button";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "../../../layouts/hass-tabs-subpage";
+import "@polymer/paper-input/paper-input";
-import { configSections } from "../ha-panel-config";
 import {
-  LitElement,
-  property,
-  internalProperty,
-  customElement,
-  html,
   css,
   CSSResult,
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
   TemplateResult,
 } from "lit-element";
-import { HomeAssistant, Route } from "../../../types";
+import { classMap } from "lit-html/directives/class-map";
-
-import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
 import { isServiceLoaded } from "../../../common/config/is_service_loaded";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-card";
-import "../ha-config-section";
-import { haStyle } from "../../../resources/styles";
 import { checkCoreConfig } from "../../../data/core";
+import "../../../layouts/hass-tabs-subpage";
+import { haStyle } from "../../../resources/styles";
+import { HomeAssistant, Route } from "../../../types";
+import "../ha-config-section";
+import { configSections } from "../ha-panel-config";
 
 const reloadableDomains = [
   "group",
@@ -80,172 +80,185 @@ export class HaConfigServerControl extends LitElement {
         .tabs=${configSections.general}
         .showAdvanced=${this.showAdvanced}
       >
-        <div class="heading">
+        <ha-config-section
-          <div class="header">
+          ?side-by-side=${!this.showAdvanced}
+          .narrow=${this.narrow}
+          .isWide=${this.isWide}
+        >
+          <div slot="header">
             ${this.hass.localize("ui.panel.config.server_control.caption")}
           </div>
-          <div class="description">
+          <div slot="introduction">
             ${this.hass.localize("ui.panel.config.server_control.description")}
           </div>
-        </div>
+          <div class="content">
-        <div class="content">
+            ${this.showAdvanced
-          ${this.showAdvanced
+              ? html`
-            ? html`
+                  <ha-card
-                <ha-card
+                    class="validate-card"
-                  class="validate-card"
+                    header=${this.hass.localize(
-                  header=${this.hass.localize(
+                      "ui.panel.config.server_control.section.validation.heading"
-                    "ui.panel.config.server_control.section.validation.heading"
-                  )}
-                >
-                  <div class="card-content">
-                    ${this.hass.localize(
-                      "ui.panel.config.server_control.section.validation.introduction"
                     )}
-                    ${!this._validateLog
+                  >
-                      ? html`
+                    <div class="card-content">
-                          <div
-                            class="validate-container layout vertical center-center"
-                          >
-                            ${!this._validating
-                              ? html`
-                                  ${this._isValid
-                                    ? html` <div
-                                        class="validate-result"
-                                        id="result"
-                                      >
-                                        ${this.hass.localize(
-                                          "ui.panel.config.server_control.section.validation.valid"
-                                        )}
-                                      </div>`
-                                    : ""}
-                                  <mwc-button
-                                    raised
-                                    @click=${this._validateConfig}
-                                  >
-                                    ${this.hass.localize(
-                                      "ui.panel.config.server_control.section.validation.check_config"
-                                    )}
-                                  </mwc-button>
-                                `
-                              : html`
-                                  <ha-circular-progress
-                                    active
-                                  ></ha-circular-progress>
-                                `}
-                          </div>
-                        `
-                      : html`
-                          <div class="config-invalid">
-                            <span class="text">
-                              ${this.hass.localize(
-                                "ui.panel.config.server_control.section.validation.invalid"
-                              )}
-                            </span>
-                            <mwc-button raised @click=${this._validateConfig}>
-                              ${this.hass.localize(
-                                "ui.panel.config.server_control.section.validation.check_config"
-                              )}
-                            </mwc-button>
-                          </div>
-                          <div id="configLog" class="validate-log">
-                            ${this._validateLog}
-                          </div>
-                        `}
-                  </div>
-                </ha-card>
-              `
-            : ""}
-
-          <ha-card
-            class="server-management-card"
-            header=${this.hass.localize(
-              "ui.panel.config.server_control.section.server_management.heading"
-            )}
-          >
-            <div class="card-content">
-              ${this.hass.localize(
-                "ui.panel.config.server_control.section.server_management.introduction"
-              )}
-            </div>
-            <div
-              class="server-management-container layout horizontal center-center warning"
-            >
-              <ha-call-service-button
-                raised
-                class="warning"
-                service="restart"
-                domain="homeassistant"
-                .hass=${this.hass}
-                .confirmation=${this.hass.localize(
-                  "ui.panel.config.server_control.section.server_management.confirm_restart"
-                )}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.server_control.section.server_management.restart"
-                )}
-              </ha-call-service-button>
-              <ha-call-service-button
-                raised
-                class="warning"
-                .hass=${this.hass}
-                domain="homeassistant"
-                service="stop"
-                confirmation=${this.hass.localize(
-                  "ui.panel.config.server_control.section.server_management.confirm_stop"
-                )}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.server_control.section.server_management.stop"
-                )}
-              </ha-call-service-button>
-            </div>
-          </ha-card>
-
-          ${this.showAdvanced
-            ? html`
-                <ha-card
-                  class="reload"
-                  header=${this.hass.localize(
-                    "ui.panel.config.server_control.section.reloading.heading"
-                  )}
-                >
-                  <div class="card-content">
-                    ${this.hass.localize(
-                      "ui.panel.config.server_control.section.reloading.introduction"
-                    )}
-                  </div>
-                  <div class="actions">
-                    <ha-call-service-button
-                      outlined
-                      domain="homeassistant"
-                      service="reload_core_config"
-                      .hass=${this.hass}
-                    >
                       ${this.hass.localize(
-                        "ui.panel.config.server_control.section.reloading.core"
+                        "ui.panel.config.server_control.section.validation.introduction"
                       )}
-                    </ha-call-service-button>
+                      ${!this._validateLog
-                    ${reloadableDomains.map((domain) =>
-                      isServiceLoaded(this.hass, domain, "reload")
                         ? html`
-                            <ha-call-service-button
+                            <div
-                              outlined
+                              class="validate-container layout vertical center-center"
-                              service="reload"
-                              .hass=${this.hass}
-                              .domain=${domain}
                             >
-                              ${this.hass.localize(
+                              ${!this._validating
-                                `ui.panel.config.server_control.section.reloading.${domain}`
+                                ? html`
-                              )}
+                                    ${this._isValid
-                            </ha-call-service-button>
+                                      ? html` <div
+                                          class="validate-result"
+                                          id="result"
+                                        >
+                                          ${this.hass.localize(
+                                            "ui.panel.config.server_control.section.validation.valid"
+                                          )}
+                                        </div>`
+                                      : ""}
+                                    <mwc-button
+                                      raised
+                                      @click=${this._validateConfig}
+                                    >
+                                      ${this.hass.localize(
+                                        "ui.panel.config.server_control.section.validation.check_config"
+                                      )}
+                                    </mwc-button>
+                                  `
+                                : html`
+                                    <ha-circular-progress
+                                      active
+                                    ></ha-circular-progress>
+                                  `}
+                            </div>
                           `
-                        : ""
+                        : html`
+                            <div class="config-invalid">
+                              <span class="text">
+                                ${this.hass.localize(
+                                  "ui.panel.config.server_control.section.validation.invalid"
+                                )}
+                              </span>
+                              <mwc-button raised @click=${this._validateConfig}>
+                                ${this.hass.localize(
+                                  "ui.panel.config.server_control.section.validation.check_config"
+                                )}
+                              </mwc-button>
+                            </div>
+                            <div id="configLog" class="validate-log">
+                              ${this._validateLog}
+                            </div>
+                          `}
+                    </div>
+                  </ha-card>
+                `
+              : ""}
+
+            <ha-card
+              class="server-management-card ${classMap({
+                "no-advanced": !this.showAdvanced,
+              })}"
+              header=${this.hass.localize(
+                "ui.panel.config.server_control.section.server_management.heading"
+              )}
+            >
+              <div class="card-content">
+                ${this.hass.localize(
+                  "ui.panel.config.server_control.section.server_management.introduction"
+                )}
+              </div>
+              <div
+                class="server-management-container layout horizontal center-center warning"
+              >
+                <ha-call-service-button
+                  raised
+                  class="warning"
+                  service="restart"
+                  domain="homeassistant"
+                  .hass=${this.hass}
+                  .confirmation=${this.hass.localize(
+                    "ui.panel.config.server_control.section.server_management.confirm_restart"
+                  )}
+                >
+                  ${this.hass.localize(
+                    "ui.panel.config.server_control.section.server_management.restart"
+                  )}
+                </ha-call-service-button>
+                <ha-call-service-button
+                  raised
+                  class="warning"
+                  .hass=${this.hass}
+                  domain="homeassistant"
+                  service="stop"
+                  confirmation=${this.hass.localize(
+                    "ui.panel.config.server_control.section.server_management.confirm_stop"
+                  )}
+                >
+                  ${this.hass.localize(
+                    "ui.panel.config.server_control.section.server_management.stop"
+                  )}
+                </ha-call-service-button>
+              </div>
+            </ha-card>
+          </div>
+        </ha-config-section>
+        <ha-config-section
+          no-header
+          .narrow=${this.narrow}
+          .isWide=${this.isWide}
+        >
+          <div class="content">
+            ${this.showAdvanced
+              ? html`
+                  <ha-card
+                    class="reload"
+                    header=${this.hass.localize(
+                      "ui.panel.config.server_control.section.reloading.heading"
                     )}
-                  </div>
+                  >
-                </ha-card>
+                    <div class="card-content">
-              `
+                      ${this.hass.localize(
-            : ""}
+                        "ui.panel.config.server_control.section.reloading.introduction"
-        </div>
+                      )}
+                    </div>
+                    <div class="actions">
+                      <ha-call-service-button
+                        outlined
+                        domain="homeassistant"
+                        service="reload_core_config"
+                        .hass=${this.hass}
+                      >
+                        ${this.hass.localize(
+                          "ui.panel.config.server_control.section.reloading.core"
+                        )}
+                      </ha-call-service-button>
+                      ${reloadableDomains.map((domain) =>
+                        isServiceLoaded(this.hass, domain, "reload")
+                          ? html`
+                              <ha-call-service-button
+                                outlined
+                                service="reload"
+                                .hass=${this.hass}
+                                .domain=${domain}
+                              >
+                                ${this.hass.localize(
+                                  `ui.panel.config.server_control.section.reloading.${domain}`
+                                )}
+                              </ha-call-service-button>
+                            `
+                          : ""
+                      )}
+                    </div>
+                  </ha-card>
+                `
+              : ""}
+          </div>
+        </ha-config-section>
       </hass-tabs-subpage>
     `;
   }
@@ -268,8 +281,7 @@ export class HaConfigServerControl extends LitElement {
     return [
       haStyle,
       css`
-        .heading,
+        .heading {
-        .content {
           max-width: 1040px;
           margin: 0px auto;
         }
@@ -279,7 +291,6 @@ export class HaConfigServerControl extends LitElement {
         }
 
         .content {
-          padding: 16px 20px 16px;
           display: flex;
           flex-wrap: wrap;
           justify-content: space-between;
@@ -359,7 +370,8 @@ export class HaConfigServerControl extends LitElement {
         }
 
         :host([narrow]) .validate-card,
-        :host([narrow]) .server-management-card {
+        :host([narrow]) .server-management-card,
+        .server-management-card.no-advanced {
           width: 100%;
         }
 
@@ -369,9 +381,8 @@ export class HaConfigServerControl extends LitElement {
 
         :host([narrow]) .reload ha-call-service-button {
           width: 100%;
-          margin: 0;
+          margin: 8px 0;
           border: none;
-          border-top: 1px solid var(--divider-color, #e8e8e8);
         }
       `,
     ];