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>
-            <div class$="integrations [[_computeIsNarrow(isWide)]]">
             <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-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,10 +36,8 @@ 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>
@@ -111,7 +109,9 @@ class HaConfigDashboard extends LitElement {
         ${!this.showAdvanced
           ? html`
               <div class="promo-advanced">
-              ${this.hass.localize("ui.panel.config.advanced_mode.hint_enable")}
+                ${this.hass.localize(
+                  "ui.panel.config.advanced_mode.hint_enable"
+                )}
                 <a href="/profile"
                   >${this.hass.localize(
                     "ui.panel.config.advanced_mode.link_profile_page"
@@ -120,7 +120,8 @@ class HaConfigDashboard extends LitElement {
               </div>
             `
           : ""}
-    </ha-config-section>`;
+      </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,14 +80,17 @@ 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">
             ${this.showAdvanced
               ? html`
@@ -157,7 +160,9 @@ export class HaConfigServerControl extends LitElement {
               : ""}
 
             <ha-card
-            class="server-management-card"
+              class="server-management-card ${classMap({
+                "no-advanced": !this.showAdvanced,
+              })}"
               header=${this.hass.localize(
                 "ui.panel.config.server_control.section.server_management.heading"
               )}
@@ -200,7 +205,14 @@ export class HaConfigServerControl extends LitElement {
                 </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
@@ -246,6 +258,7 @@ export class HaConfigServerControl extends LitElement {
                 `
               : ""}
           </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);
         }
       `,
     ];