style updates

src/components/buttons/ha-call-service-button.js

@@ -16,6 +16,7 @@ class HaCallServiceButton extends EventsMixin(PolymerElement) {
         progress="[[progress]]"
         on-click="buttonTapped"
         tabindex="0"
+        raised="[[raised]]"
         ><slot></slot
       ></ha-progress-button>
     `;
@@ -48,6 +49,11 @@ class HaCallServiceButton extends EventsMixin(PolymerElement) {
       confirmation: {
         type: String,
       },
+
+      raised: {
+        type: Boolean,
+        value: false,
+      },
     };
   }
 

src/components/buttons/ha-progress-button.js

@@ -10,6 +10,7 @@ class HaProgressButton extends PolymerElement {
       <style>
         :host {
           outline: none;
+          display: inline-block;
         }
         .container {
           position: relative;
@@ -20,18 +21,28 @@ class HaProgressButton extends PolymerElement {
           transition: all 1s;
         }
 
-        .success mwc-button {
+        .success:not(.raised) mwc-button {
           --mdc-theme-primary: white;
           background-color: var(--success-color);
           transition: none;
         }
 
-        .error mwc-button {
+        .success.raised mwc-button {
+          --mdc-theme-primary: var(--success-color);
+          transition: none;
+        }
+
+        .error:not(.raised) mwc-button {
           --mdc-theme-primary: white;
           background-color: var(--error-color);
           transition: none;
         }
 
+        .error.raised mwc-button {
+          --mdc-theme-primary: var(--error-color);
+          transition: none;
+        }
+
         .progress {
           @apply --layout;
           @apply --layout-center-center;
@@ -42,11 +53,12 @@ class HaProgressButton extends PolymerElement {
           bottom: 0;
         }
       </style>
-      <div class="container" id="container">
+      <div class$="container [[computeClasses(raised)]]" id="container">
         <mwc-button
           id="button"
           disabled="[[computeDisabled(disabled, progress)]]"
           on-click="buttonTapped"
+          raised="[[raised]]"
         >
           <slot></slot>
         </mwc-button>
@@ -74,6 +86,11 @@ class HaProgressButton extends PolymerElement {
         type: Boolean,
         value: false,
       },
+
+      raised: {
+        type: Boolean,
+        value: false,
+      },
     };
   }
 
@@ -105,6 +122,10 @@ class HaProgressButton extends PolymerElement {
   computeDisabled(disabled, progress) {
     return disabled || progress;
   }
+
+  computeClasses(raised) {
+    return raised ? "raised" : "";
+  }
 }
 
 customElements.define("ha-progress-button", HaProgressButton);

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

@@ -60,10 +60,32 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
         a {
           color: var(--primary-color);
         }
+
+        .integrations {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+        }
+
+        .integrations cloud-alexa-pref,
+        .integrations cloud-google-pref {
+          width: calc(50% - 12px);
+          margin-top: 24px;
+        }
+
+        .integrations cloud-webhooks {
+          margin-top: 24px;
+          width: 100%;
+        }
+
+        .integrations.narrow cloud-alexa-pref,
+        .integrations.narrow cloud-google-pref {
+          width: 100%;
+        }
       </style>
       <hass-subpage header="[[localize('ui.panel.config.cloud.caption')]]">
         <div class="content">
-          <ha-config-section is-wide="[[isWide]]">
+          <ha-config-section side-by-side is-wide="[[isWide]]">
             <span slot="header"
               >[[localize('ui.panel.config.cloud.caption')]]</span
             >
@@ -128,30 +150,31 @@ 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>
 
-            <cloud-remote-pref
+              <cloud-alexa-pref
-              hass="[[hass]]"
+                hass="[[hass]]"
-              cloud-status="[[cloudStatus]]"
+                cloud-status="[[cloudStatus]]"
-              dir="[[_rtlDirection]]"
+                dir="[[_rtlDirection]]"
-            ></cloud-remote-pref>
+              ></cloud-alexa-pref>
 
-            <cloud-alexa-pref
+              <cloud-google-pref
-              hass="[[hass]]"
+                hass="[[hass]]"
-              cloud-status="[[cloudStatus]]"
+                cloud-status="[[cloudStatus]]"
-              dir="[[_rtlDirection]]"
+                dir="[[_rtlDirection]]"
-            ></cloud-alexa-pref>
+              ></cloud-google-pref>
 
-            <cloud-google-pref
+              <cloud-webhooks
-              hass="[[hass]]"
+                hass="[[hass]]"
-              cloud-status="[[cloudStatus]]"
+                cloud-status="[[cloudStatus]]"
-              dir="[[_rtlDirection]]"
+                dir="[[_rtlDirection]]"
-            ></cloud-google-pref>
+              ></cloud-webhooks>
-
+            </div>
-            <cloud-webhooks
-              hass="[[hass]]"
-              cloud-status="[[cloudStatus]]"
-              dir="[[_rtlDirection]]"
-            ></cloud-webhooks>
           </ha-config-section>
         </div>
       </hass-subpage>
@@ -227,6 +250,10 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
   _computeRTLDirection(hass) {
     return computeRTLDirection(hass);
   }
+
+  _computeIsNarrow(isWide) {
+    return isWide ? "" : "narrow";
+  }
 }
 
 customElements.define("cloud-account", CloudAccount);

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

@@ -78,7 +78,7 @@ class CloudLogin extends LocalizeMixin(
       </style>
       <hass-subpage header="[[localize('ui.panel.config.cloud.caption')]]">
         <div class="content">
-          <ha-config-section is-wide="[[isWide]]">
+          <ha-config-section side-by-side is-wide="[[isWide]]">
             <span slot="header"
               >[[localize('ui.panel.config.cloud.caption')]]</span
             >

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

@@ -48,7 +48,7 @@ class CloudRegister extends LocalizeMixin(EventsMixin(PolymerElement)) {
     </style>
     <hass-subpage header="[[localize('ui.panel.config.cloud.register.title')]]">
       <div class="content">
-        <ha-config-section is-wide="[[isWide]]">
+        <ha-config-section side-by-side is-wide="[[isWide]]">
           <span slot="header">[[localize('ui.panel.config.cloud.register.headline')]]</span>
           <div slot="introduction">
             <p>

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

@@ -1,73 +1,66 @@
-import "@polymer/app-layout/app-header/app-header";
+import {
-import "@polymer/app-layout/app-toolbar/app-toolbar";
+  LitElement,
-import "../../../components/ha-icon-button";
+  CSSResult,
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+  css,
-/* eslint-plugin-disable lit */
+  TemplateResult,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  html,
-import "../../../layouts/hass-tabs-subpage";
+  property,
-import LocalizeMixin from "../../../mixins/localize-mixin";
+  customElement,
-import "../../../styles/polymer-ha-style";
+} from "lit-element";
+import type { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
+
+import "../../../layouts/hass-tabs-subpage";
 import "./ha-config-section-core";
 
-/*
+@customElement("ha-config-core")
- * @appliesMixin LocalizeMixin
+export class HaConfigCore extends LitElement {
- */
+  @property({ attribute: false }) public hass!: HomeAssistant;
-class HaConfigCore extends LocalizeMixin(PolymerElement) {
+
-  static get template() {
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @property({ type: Boolean }) public isWide!: boolean;
+
+  @property({ attribute: false }) public route!: Route;
+
+  @property({ type: Boolean }) public showAdvanced!: boolean;
+
+  protected render(): TemplateResult {
     return html`
-      <style include="iron-flex ha-style">
-        .content {
-          padding-bottom: 32px;
-        }
-
-        .border {
-          margin: 32px auto 0;
-          border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-          max-width: 1040px;
-        }
-
-        .narrow .border {
-          max-width: 640px;
-        }
-      </style>
-
       <hass-tabs-subpage
-        hass="[[hass]]"
+        .hass=${this.hass}
-        narrow="[[narrow]]"
+        .narrow=${this.narrow}
-        route="[[route]]"
+        .route=${this.route}
         back-path="/config"
-        tabs="[[_computeTabs()]]"
+        .tabs=${configSections.general}
-        show-advanced="[[showAdvanced]]"
+        show-advanced=${this.showAdvanced}
       >
-        <div class$="[[computeClasses(isWide)]]">
+        <ha-config-section-core
-          <ha-config-section-core
+          .isWide=${this.isWide}
-            is-wide="[[isWide]]"
+          .narrow=${this.narrow}
-            show-advanced="[[showAdvanced]]"
+          .showAdvanced=${this.showAdvanced}
-            hass="[[hass]]"
+          .hass=${this.hass}
-          ></ha-config-section-core>
+        ></ha-config-section-core>
-        </div>
       </hass-tabs-subpage>
     `;
   }
 
-  static get properties() {
-    return {
-      hass: Object,
-      isWide: Boolean,
-      narrow: Boolean,
-      showAdvanced: Boolean,
-      route: Object,
-    };
-  }
-
-  _computeTabs() {
-    return configSections.general;
-  }
-
   computeClasses(isWide) {
     return isWide ? "content" : "content narrow";
   }
+
+  static get styles(): CSSResult {
+    return css`
+      ha-config-section-core {
+        display: block;
+        padding-bottom: 32px;
+      }
+    `;
+  }
 }
 
-customElements.define("ha-config-core", HaConfigCore);
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-core": HaConfigCore;
+  }
+}

src/panels/config/core/ha-config-name-form.ts

@@ -10,6 +10,8 @@ import {
   property,
   internalProperty,
   TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "../../../components/ha-card";
 import { ConfigUpdateValues, saveCoreConfig } from "../../../data/core";
@@ -87,6 +89,21 @@ class ConfigNameForm extends LitElement {
       this._working = false;
     }
   }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: flex;
+      }
+
+      ha-card {
+        justify-content: space-between;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -1,126 +1,79 @@
-import "@material/mwc-button";
+import {
-import "@polymer/paper-input/paper-input";
+  LitElement,
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+  CSSResult,
-/* eslint-plugin-disable lit */
+  css,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  html,
-import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+  property,
-import "../../../components/buttons/ha-call-service-button";
+  TemplateResult,
-import "../../../components/ha-card";
+  customElement,
-import LocalizeMixin from "../../../mixins/localize-mixin";
+} from "lit-element";
-import "../../../styles/polymer-ha-style";
+
+import type { HomeAssistant } from "../../../types";
+
 import "../ha-config-section";
-import "./ha-config-core-form";
 import "./ha-config-name-form";
+import "./ha-config-core-form";
 import "./ha-config-url-form";
 
-/*
+@customElement("ha-config-section-core")
- * @appliesMixin LocalizeMixin
+export class HaConfigSectionCore extends LitElement {
- */
+  @property({ attribute: false }) public hass!: HomeAssistant;
-class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
+
-  static get template() {
+  @property({ type: Boolean }) public isWide!: boolean;
+
+  @property({ type: Boolean, attribute: "narrow", reflect: true })
+  public narrow!: boolean;
+
+  protected render(): TemplateResult {
     return html`
-      <style include="iron-flex ha-style">
+      <ha-config-section .isWide=${this.isWide}>
-        .validate-container {
-          @apply --layout-vertical;
-          @apply --layout-center-center;
-          height: 140px;
-        }
-
-        .validate-result {
-          color: var(--success-color);
-          font-weight: 500;
-          margin-bottom: 1em;
-        }
-
-        .config-invalid {
-          margin: 1em 0;
-        }
-
-        .config-invalid .text {
-          color: var(--error-color);
-          font-weight: 500;
-        }
-
-        .config-invalid mwc-button {
-          float: right;
-        }
-
-        .validate-log {
-          white-space: pre-wrap;
-          direction: ltr;
-        }
-      </style>
-      <ha-config-section is-wide="[[isWide]]">
         <span slot="header"
-          >[[localize('ui.panel.config.core.section.core.header')]]</span
+          >${this.hass.localize(
+            "ui.panel.config.core.section.core.header"
+          )}</span
         >
         <span slot="introduction"
-          >[[localize('ui.panel.config.core.section.core.introduction')]]</span
+          >${this.hass.localize(
+            "ui.panel.config.core.section.core.introduction"
+          )}</span
         >
-
+        <div class="content">
-        <ha-config-name-form hass="[[hass]]"></ha-config-name-form>
+          <ha-config-name-form .hass=${this.hass}></ha-config-name-form>
-        <ha-config-core-form hass="[[hass]]"></ha-config-core-form>
+          <ha-config-url-form .hass=${this.hass}></ha-config-url-form>
-        <ha-config-url-form hass="[[hass]]"></ha-config-url-form>
+          <ha-config-core-form .hass=${this.hass}></ha-config-core-form>
+        </div>
       </ha-config-section>
     `;
   }
 
-  static get properties() {
+  static get styles(): CSSResult {
-    return {
+    return css`
-      hass: {
+      .content {
-        type: Object,
+        display: flex;
-      },
+        flex-wrap: wrap;
-
+        justify-content: space-between;
-      isWide: {
-        type: Boolean,
-        value: false,
-      },
-
-      validating: {
-        type: Boolean,
-        value: false,
-      },
-
-      isValid: {
-        type: Boolean,
-        value: null,
-      },
-
-      validateLog: {
-        type: String,
-        value: "",
-      },
-
-      showAdvanced: Boolean,
-    };
-  }
-
-  groupLoaded(hass) {
-    return isComponentLoaded(hass, "group");
-  }
-
-  automationLoaded(hass) {
-    return isComponentLoaded(hass, "automation");
-  }
-
-  scriptLoaded(hass) {
-    return isComponentLoaded(hass, "script");
-  }
-
-  validateConfig() {
-    this.validating = true;
-    this.validateLog = "";
-    this.isValid = null;
-
-    this.hass.callApi("POST", "config/core/check_config").then((result) => {
-      this.validating = false;
-      this.isValid = result.result === "valid";
-
-      if (!this.isValid) {
-        this.validateLog = result.errors;
       }
-    });
+
+      ha-config-name-form,
+      ha-config-url-form {
+        width: calc(50% - 12px);
+      }
+
+      :host([narrow]) ha-config-url-form,
+      ha-config-core-form {
+        margin-top: 24px;
+        width: 100%;
+      }
+
+      :host([narrow]) ha-config-name-form {
+        width: 100%;
+      }
+    `;
   }
 }
 
-customElements.define("ha-config-section-core", HaConfigSectionCore);
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-section-core": HaConfigSectionCore;
+  }
+}

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

@@ -3,7 +3,7 @@ import { classMap } from "lit-html/directives/class-map";
 
 @customElement("ha-config-section")
 export class HaConfigSection extends LitElement {
-  @property() public isWide = false;
+  @property({ type: Boolean }) public isWide = false;
 
   protected render() {
     return html`
@@ -12,7 +12,10 @@ export class HaConfigSection extends LitElement {
           narrow: !this.isWide,
         })}"
       >
-        <div class="header"><slot name="header"></slot></div>
+        <div class="heading">
+          <div class="header"><slot name="header"></slot></div>
+          <div class="intro"><slot name="introduction"></slot></div>
+        </div>
         <div
           class="together layout ${classMap({
             narrow: !this.isWide,
@@ -20,7 +23,6 @@ export class HaConfigSection extends LitElement {
             horizontal: this.isWide,
           })}"
         >
-          <div class="intro"><slot name="introduction"></slot></div>
           <div class="panel flex-auto"><slot></slot></div>
         </div>
       </div>
@@ -38,10 +40,18 @@ export class HaConfigSection extends LitElement {
         margin: 0 auto;
       }
 
+      :host([side-by-side]) .content:not(.narrow) {
+        display: flex;
+      }
+
       .layout {
         display: flex;
       }
 
+      :host([side-by-side]) .content:not(.narrow) .layout {
+        width: 100%;
+      }
+
       .horizontal {
         flex-direction: row;
       }
@@ -54,6 +64,11 @@ export class HaConfigSection extends LitElement {
         flex: 1 1 auto;
       }
 
+      :host([side-by-side]) .content:not(.narrow) .heading {
+        max-width: 400px;
+        margin-right: 40px;
+      }
+
       .header {
         font-family: var(--paper-font-headline_-_font-family);
         -webkit-font-smoothing: var(
@@ -64,6 +79,7 @@ export class HaConfigSection extends LitElement {
         letter-spacing: var(--paper-font-headline_-_letter-spacing);
         line-height: var(--paper-font-headline_-_line-height);
         opacity: var(--dark-primary-opacity);
+        padding-bottom: 8px;
       }
 
       .together {
@@ -78,7 +94,6 @@ export class HaConfigSection extends LitElement {
         font-weight: var(--paper-font-subhead_-_font-weight);
         line-height: var(--paper-font-subhead_-_line-height);
         width: 100%;
-        max-width: 400px;
         margin-right: 40px;
         opacity: var(--dark-primary-opacity);
         font-size: 14px;
@@ -86,7 +101,7 @@ export class HaConfigSection extends LitElement {
       }
 
       .panel {
-        margin-top: -24px;
+        margin-top: -48px;
       }
 
       .panel ::slotted(*) {
@@ -108,3 +123,9 @@ export class HaConfigSection extends LitElement {
     `;
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-section": HaConfigSection;
+  }
+}

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

@@ -43,13 +43,14 @@ const reloadableDomains = [
 export class HaConfigServerControl extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide!: boolean;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean, attribute: "narrow", reflect: true })
+  public narrow!: boolean;
 
-  @property() public route!: Route;
+  @property({ attribute: false }) public route!: Route;
 
-  @property() public showAdvanced!: boolean;
+  @property({ type: Boolean }) public showAdvanced!: boolean;
 
   @internalProperty() private _validating = false;
 
@@ -60,90 +61,91 @@ export class HaConfigServerControl extends LitElement {
   protected render(): TemplateResult {
     return html`
       <hass-tabs-subpage
+        back-path="/config"
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
-        back-path="/config"
         .tabs=${configSections.general}
         .showAdvanced=${this.showAdvanced}
       >
-        <ha-config-section .isWide=${this.isWide}>
+        <div class="heading">
-          <span slot="header"
+          <div class="header">
-            >${this.hass.localize(
+            ${this.hass.localize("ui.panel.config.server_control.caption")}
-              "ui.panel.config.server_control.caption"
+          </div>
-            )}</span
+          <div class="description">
-          >
+            ${this.hass.localize("ui.panel.config.server_control.description")}
-          <span slot="introduction"
+          </div>
-            >${this.hass.localize(
+        </div>
-              "ui.panel.config.server_control.description"
+        <div class="content">
-            )}</span
-          >
-
           ${this.showAdvanced
-            ? html` <ha-card
+            ? html`
-                header=${this.hass.localize(
+                <ha-card
-                  "ui.panel.config.server_control.section.validation.heading"
+                  class="validate-card"
-                )}
+                  header=${this.hass.localize(
-              >
+                    "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
+                    ${this.hass.localize(
-                          class="validate-container layout vertical center-center"
+                      "ui.panel.config.server_control.section.validation.introduction"
-                        >
+                    )}
-                          ${!this._validating
+                    ${!this._validateLog
-                            ? html`
+                      ? html`
-                                ${this._isValid
+                          <div
-                                  ? html` <div
+                            class="validate-container layout vertical center-center"
-                                      class="validate-result"
+                          >
-                                      id="result"
+                            ${!this._validating
-                                    >
+                              ? html`
-                                      ${this.hass.localize(
+                                  ${this._isValid
-                                        "ui.panel.config.server_control.section.validation.valid"
+                                    ? html` <div
-                                      )}
+                                        class="validate-result"
-                                    </div>`
+                                        id="result"
-                                  : ""}
+                                      >
-                                <mwc-button
+                                        ${this.hass.localize(
-                                  raised
+                                          "ui.panel.config.server_control.section.validation.valid"
-                                  @click=${this._validateConfig}
+                                        )}
-                                >
+                                      </div>`
-                                  ${this.hass.localize(
+                                    : ""}
-                                    "ui.panel.config.server_control.section.validation.check_config"
+                                  <mwc-button
-                                  )}
+                                    raised
-                                </mwc-button>
+                                    @click=${this._validateConfig}
-                              `
+                                  >
-                            : html`
+                                    ${this.hass.localize(
-                                <ha-circular-progress
+                                      "ui.panel.config.server_control.section.validation.check_config"
-                                  active
+                                    )}
-                                ></ha-circular-progress>
+                                  </mwc-button>
-                              `}
+                                `
-                        </div>
+                              : html`
-                      `
+                                  <ha-circular-progress
-                    : html`
+                                    active
-                        <div class="config-invalid">
+                                  ></ha-circular-progress>
-                          <span class="text">
+                                `}
-                            ${this.hass.localize(
+                          </div>
-                              "ui.panel.config.server_control.section.validation.invalid"
+                        `
-                            )}
+                      : html`
-                          </span>
+                          <div class="config-invalid">
-                          <mwc-button raised @click=${this._validateConfig}>
+                            <span class="text">
-                            ${this.hass.localize(
+                              ${this.hass.localize(
-                              "ui.panel.config.server_control.section.validation.check_config"
+                                "ui.panel.config.server_control.section.validation.invalid"
-                            )}
+                              )}
-                          </mwc-button>
+                            </span>
-                        </div>
+                            <mwc-button raised @click=${this._validateConfig}>
-                        <div id="configLog" class="validate-log">
+                              ${this.hass.localize(
-                          ${this._validateLog}
+                                "ui.panel.config.server_control.section.validation.check_config"
-                        </div>
+                              )}
-                      `}
+                            </mwc-button>
-                </div>
+                          </div>
-              </ha-card>`
+                          <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"
             )}
@@ -153,20 +155,25 @@ export class HaConfigServerControl extends LitElement {
                 "ui.panel.config.server_control.section.server_management.introduction"
               )}
             </div>
-            <div class="card-actions warning">
+            <div
+              class="server-management-container layout horizontal center-center warning"
+            >
               <ha-call-service-button
+                raised
                 class="warning"
-                .hass=${this.hass}
-                domain="homeassistant"
                 service="restart"
+                domain="homeassistant"
+                .hass=${this.hass}
                 .confirmation=${this.hass.localize(
                   "ui.panel.config.server_control.section.server_management.confirm_restart"
                 )}
-                >${this.hass.localize(
+              >
+                ${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"
@@ -174,7 +181,8 @@ export class HaConfigServerControl extends LitElement {
                 confirmation=${this.hass.localize(
                   "ui.panel.config.server_control.section.server_management.confirm_stop"
                 )}
-                >${this.hass.localize(
+              >
+                ${this.hass.localize(
                   "ui.panel.config.server_control.section.server_management.stop"
                 )}
               </ha-call-service-button>
@@ -184,6 +192,7 @@ export class HaConfigServerControl extends LitElement {
           ${this.showAdvanced
             ? html`
                 <ha-card
+                  class="reload"
                   header=${this.hass.localize(
                     "ui.panel.config.server_control.section.reloading.heading"
                   )}
@@ -193,34 +202,36 @@ export class HaConfigServerControl extends LitElement {
                       "ui.panel.config.server_control.section.reloading.introduction"
                     )}
                   </div>
-                  <div class="card-actions">
+                  <div class="actions">
                     <ha-call-service-button
-                      .hass=${this.hass}
                       domain="homeassistant"
                       service="reload_core_config"
-                      >${this.hass.localize(
+                      .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
+                              service="reload"
+                              .hass=${this.hass}
+                              .domain=${domain}
+                            >
+                              ${this.hass.localize(
+                                `ui.panel.config.server_control.section.reloading.${domain}`
+                              )}
+                            </ha-call-service-button>
+                          `
+                        : ""
+                    )}
                   </div>
-                  ${reloadableDomains.map((domain) =>
-                    isServiceLoaded(this.hass, domain, "reload")
-                      ? html`<div class="card-actions">
-                          <ha-call-service-button
-                            .hass=${this.hass}
-                            .domain=${domain}
-                            service="reload"
-                            >${this.hass.localize(
-                              `ui.panel.config.server_control.section.reloading.${domain}`
-                            )}
-                          </ha-call-service-button>
-                        </div>`
-                      : ""
-                  )}
                 </ha-card>
               `
             : ""}
-        </ha-config-section>
+        </div>
       </hass-tabs-subpage>
     `;
   }
@@ -243,10 +254,50 @@ export class HaConfigServerControl extends LitElement {
     return [
       haStyle,
       css`
-        .validate-container {
+        .heading,
+        .content {
+          max-width: 1040px;
+          margin: 0px auto;
+        }
+
+        .heading {
+          padding: 28px 20px 0px;
+        }
+
+        .content {
+          padding: 16px 20px 16px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+        }
+
+        .validate-card,
+        .server-management-card {
+          width: calc(50% - 12px);
+        }
+
+        .header {
+          font-size: 24px;
+          line-height: 32px;
+          padding-bottom: 8px;
+          opacity: var(--dark-primary-opacity);
+        }
+
+        .description {
+          opacity: var(--dark-primary-opacity);
+          font-size: 14px;
+          padding-bottom: 8px;
+        }
+
+        .validate-container,
+        .server-management-container {
           height: 140px;
         }
 
+        .server-management-container ha-call-service-button {
+          padding-right: 16px;
+        }
+
         .validate-result {
           color: var(--success-color);
           font-weight: 500;
@@ -270,7 +321,51 @@ export class HaConfigServerControl extends LitElement {
           white-space: pre-wrap;
           direction: ltr;
         }
+
+        .warning {
+          --mdc-theme-primary: var(--error-color);
+        }
+
+        .reload {
+          margin-top: 24px;
+        }
+
+        .reload .actions {
+          width: 100%;
+          display: flex;
+          flex-wrap: wrap;
+        }
+
+        .reload ha-call-service-button {
+          padding: 8px;
+          display: inline-block;
+          border: 1px solid var(--divider-color, #e8e8e8);
+          width: calc(33% - 24px);
+          margin: 4px;
+        }
+
+        :host([narrow]) .validate-card,
+        :host([narrow]) .server-management-card {
+          width: 100%;
+        }
+
+        :host([narrow]) .server-management-card {
+          margin-top: 24px;
+        }
+
+        :host([narrow]) .reload ha-call-service-button {
+          width: 100%;
+          margin: 0;
+          border: none;
+          border-top: 1px solid var(--divider-color, #e8e8e8);
+        }
       `,
     ];
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-server-control": HaConfigServerControl;
+  }
+}