style updates

2025-08-04 15:07:48 +00:00 · 2020-08-29 01:52:48 -05:00 · 2020-08-29 01:52:48 -05:00 · 3ff8211a81
commit 3ff8211a81
parent 3ebdd11f4b
10 changed files with 432 additions and 299 deletions
--- a/src/components/buttons/ha-call-service-button.js
+++ b/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,
+      },
    };
  }

--- a/src/components/buttons/ha-progress-button.js
+++ b/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);
--- a/src/panels/config/cloud/account/cloud-account.js
+++ b/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
-              hass="[[hass]]"
-              cloud-status="[[cloudStatus]]"
-              dir="[[_rtlDirection]]"
-            ></cloud-remote-pref>
+              <cloud-alexa-pref
+                hass="[[hass]]"
+                cloud-status="[[cloudStatus]]"
+                dir="[[_rtlDirection]]"
+              ></cloud-alexa-pref>

-            <cloud-alexa-pref
-              hass="[[hass]]"
-              cloud-status="[[cloudStatus]]"
-              dir="[[_rtlDirection]]"
-            ></cloud-alexa-pref>
+              <cloud-google-pref
+                hass="[[hass]]"
+                cloud-status="[[cloudStatus]]"
+                dir="[[_rtlDirection]]"
+              ></cloud-google-pref>

-            <cloud-google-pref
-              hass="[[hass]]"
-              cloud-status="[[cloudStatus]]"
-              dir="[[_rtlDirection]]"
-            ></cloud-google-pref>
-
-            <cloud-webhooks
-              hass="[[hass]]"
-              cloud-status="[[cloudStatus]]"
-              dir="[[_rtlDirection]]"
-            ></cloud-webhooks>
+              <cloud-webhooks
+                hass="[[hass]]"
+                cloud-status="[[cloudStatus]]"
+                dir="[[_rtlDirection]]"
+              ></cloud-webhooks>
+            </div>
          </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);
--- a/src/panels/config/cloud/login/cloud-login.js
+++ b/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
            >
--- a/src/panels/config/cloud/register/cloud-register.js
+++ b/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>
--- a/src/panels/config/core/ha-config-core.ts
+++ b/src/panels/config/core/ha-config-core.ts
@ -1,73 +1,66 @@
-import "@polymer/app-layout/app-header/app-header";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "../../../components/ha-icon-button";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../layouts/hass-tabs-subpage";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-import "../../../styles/polymer-ha-style";
+import {
+  LitElement,
+  CSSResult,
+  css,
+  TemplateResult,
+  html,
+  property,
+  customElement,
+} 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";

-/*
- * @appliesMixin LocalizeMixin
- */
-class HaConfigCore extends LocalizeMixin(PolymerElement) {
-  static get template() {
+@customElement("ha-config-core")
+export class HaConfigCore extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @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]]"
-        narrow="[[narrow]]"
-        route="[[route]]"
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .route=${this.route}
        back-path="/config"
-        tabs="[[_computeTabs()]]"
-        show-advanced="[[showAdvanced]]"
+        .tabs=${configSections.general}
+        show-advanced=${this.showAdvanced}
      >
-        <div class$="[[computeClasses(isWide)]]">
-          <ha-config-section-core
-            is-wide="[[isWide]]"
-            show-advanced="[[showAdvanced]]"
-            hass="[[hass]]"
-          ></ha-config-section-core>
-        </div>
+        <ha-config-section-core
+          .isWide=${this.isWide}
+          .narrow=${this.narrow}
+          .showAdvanced=${this.showAdvanced}
+          .hass=${this.hass}
+        ></ha-config-section-core>
      </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;
+  }
+}
--- a/src/panels/config/core/ha-config-name-form.ts
+++ b/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 {
--- a/src/panels/config/core/ha-config-section-core.ts
+++ b/src/panels/config/core/ha-config-section-core.ts
@ -1,126 +1,79 @@
-import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import "../../../components/buttons/ha-call-service-button";
-import "../../../components/ha-card";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-import "../../../styles/polymer-ha-style";
+import {
+  LitElement,
+  CSSResult,
+  css,
+  html,
+  property,
+  TemplateResult,
+  customElement,
+} from "lit-element";
+
+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";

-/*
- * @appliesMixin LocalizeMixin
- */
-class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
-  static get template() {
+@customElement("ha-config-section-core")
+export class HaConfigSectionCore extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @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">
-        .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]]">
+      <ha-config-section .isWide=${this.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
        >
-
-        <ha-config-name-form hass="[[hass]]"></ha-config-name-form>
-        <ha-config-core-form hass="[[hass]]"></ha-config-core-form>
-        <ha-config-url-form hass="[[hass]]"></ha-config-url-form>
+        <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>
+          <ha-config-core-form .hass=${this.hass}></ha-config-core-form>
+        </div>
      </ha-config-section>
    `;
  }

-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-      },
-
-      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;
+  static get styles(): CSSResult {
+    return css`
+      .content {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
      }
-    });
+
+      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;
+  }
+}
--- a/src/panels/config/ha-config-section.ts
+++ b/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;
+  }
+}
--- a/src/panels/config/server_control/ha-config-server-control.ts
+++ b/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}>
-          <span slot="header"
-            >${this.hass.localize(
-              "ui.panel.config.server_control.caption"
-            )}</span
-          >
-          <span slot="introduction"
-            >${this.hass.localize(
-              "ui.panel.config.server_control.description"
-            )}</span
-          >
-
+        <div class="heading">
+          <div class="header">
+            ${this.hass.localize("ui.panel.config.server_control.caption")}
+          </div>
+          <div class="description">
+            ${this.hass.localize("ui.panel.config.server_control.description")}
+          </div>
+        </div>
+        <div class="content">
          ${this.showAdvanced
-            ? html` <ha-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"
+            ? html`
+                <ha-card
+                  class="validate-card"
+                  header=${this.hass.localize(
+                    "ui.panel.config.server_control.section.validation.heading"
                  )}
-                  ${!this._validateLog
-                    ? html`
-                        <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>`
+                >
+                  <div class="card-content">
+                    ${this.hass.localize(
+                      "ui.panel.config.server_control.section.validation.introduction"
+                    )}
+                    ${!this._validateLog
+                      ? html`
+                          <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"
            )}
@ -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;
+  }
+}