Comments

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

@@ -11,12 +11,18 @@ import "./ha-progress-button";
 class HaCallServiceButton extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
+      <style>
+        ha-progress-button {
+          width: 100%;
+        }
+      </style>
       <ha-progress-button
         id="progress"
         progress="[[progress]]"
         on-click="buttonTapped"
         tabindex="0"
         raised="[[raised]]"
+        outlined="[[outlined]]"
         ><slot></slot
       ></ha-progress-button>
     `;
@@ -54,6 +60,11 @@ class HaCallServiceButton extends EventsMixin(PolymerElement) {
         type: Boolean,
         value: false,
       },
+
+      outlined: {
+        type: Boolean,
+        value: false,
+      },
     };
   }
 

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

@@ -21,12 +21,15 @@ class HaProgressButton extends LitElement {
 
   @property({ type: Boolean }) public raised = false;
 
+  @property({ type: Boolean }) public outlined = false;
+
   @query("mwc-button") private _button?: Button;
 
   public render(): TemplateResult {
     return html`
       <mwc-button
         ?raised=${this.raised}
+        ?outlined=${this.outlined}
         .disabled=${this.disabled || this.progress}
         @click=${this._buttonTapped}
       >
@@ -71,6 +74,7 @@ class HaProgressButton extends LitElement {
 
       mwc-button {
         transition: all 1s;
+        width: 100%;
       }
 
       mwc-button.success {

src/panels/config/cloud/account/cloud-alexa-pref.ts

@@ -32,17 +32,17 @@ export class CloudAlexaPref extends LitElement {
 
     return html`
       <ha-card
-        header=${this.hass!.localize(
+        .header=${this.hass!.localize(
           "ui.panel.config.cloud.account.alexa.title"
         )}
       >
-        <div class="switch">
-          <ha-switch
-            .checked=${alexa_enabled}
-            @change=${this._enabledToggleChanged}
-          ></ha-switch>
-        </div>
         <div class="card-content">
+          <div class="switch">
+            <ha-switch
+              .checked=${alexa_enabled}
+              @change=${this._enabledToggleChanged}
+            ></ha-switch>
+          </div>
           ${this.hass!.localize("ui.panel.config.cloud.account.alexa.info")}
           <ul>
             <li>
@@ -197,6 +197,15 @@ export class CloudAlexaPref extends LitElement {
         margin-right: 7px;
         margin-left: 0.5em;
       }
+      ha-card {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 100%;
+      }
+      .card-content {
+        flex: 1;
+      }
     `;
   }
 }

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

@@ -51,46 +51,31 @@ class ConfigUrlForm extends LitElement {
               `
             : ""}
           ${this._error ? html`<div class="error">${this._error}</div>` : ""}
-          <div class="row">
-            <div class="flex">
-              ${this.hass.localize(
-                "ui.panel.config.core.section.core.core_config.external_url"
-              )}
-            </div>
 
-            <paper-input
+          <paper-input
-              class="flex"
+            class="flex"
-              .label=${this.hass.localize(
+            .label=${this.hass.localize(
-                "ui.panel.config.core.section.core.core_config.external_url"
+              "ui.panel.config.core.section.core.core_config.external_url"
-              )}
+            )}
-              name="external_url"
+            name="external_url"
-              type="url"
+            type="url"
-              .disabled=${disabled}
+            .disabled=${disabled}
-              .value=${this._externalUrlValue}
+            .value=${this._externalUrlValue}
-              @value-changed=${this._handleChange}
+            @value-changed=${this._handleChange}
-            >
+          >
-            </paper-input>
+          </paper-input>
-          </div>
+          <paper-input
-
+            class="flex"
-          <div class="row">
+            .label=${this.hass.localize(
-            <div class="flex">
+              "ui.panel.config.core.section.core.core_config.internal_url"
-              ${this.hass.localize(
+            )}
-                "ui.panel.config.core.section.core.core_config.internal_url"
+            name="internal_url"
-              )}
+            type="url"
-            </div>
+            .disabled=${disabled}
-            <paper-input
+            .value=${this._internalUrlValue}
-              class="flex"
+            @value-changed=${this._handleChange}
-              .label=${this.hass.localize(
+          >
-                "ui.panel.config.core.section.core.core_config.internal_url"
+          </paper-input>
-              )}
-              name="internal_url"
-              type="url"
-              .disabled=${disabled}
-              .value=${this._internalUrlValue}
-              @value-changed=${this._handleChange}
-            >
-            </paper-input>
-          </div>
         </div>
         <div class="card-actions">
           <mwc-button @click=${this._save} .disabled=${disabled}>

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

@@ -216,6 +216,7 @@ export class HaConfigServerControl extends LitElement {
                   </div>
                   <div class="actions">
                     <ha-call-service-button
+                      outlined
                       domain="homeassistant"
                       service="reload_core_config"
                       .hass=${this.hass}
@@ -228,6 +229,7 @@ export class HaConfigServerControl extends LitElement {
                       isServiceLoaded(this.hass, domain, "reload")
                         ? html`
                             <ha-call-service-button
+                              outlined
                               service="reload"
                               .hass=${this.hass}
                               .domain=${domain}
@@ -346,12 +348,12 @@ export class HaConfigServerControl extends LitElement {
           width: 100%;
           display: flex;
           flex-wrap: wrap;
+          padding-bottom: 8px;
         }
 
         .reload ha-call-service-button {
-          padding: 8px;
+          padding: 0 8px;
           display: inline-block;
-          border: 1px solid var(--divider-color, #e8e8e8);
           width: calc(33% - 24px);
           margin: 4px;
         }