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="card-content">
           <div class="switch">
             <ha-switch
               .checked=${alexa_enabled}
               @change=${this._enabledToggleChanged}
             ></ha-switch>
           </div>
-        <div class="card-content">
           ${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,12 +51,6 @@ 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
             class="flex"
@@ -70,14 +64,6 @@ class ConfigUrlForm extends LitElement {
             @value-changed=${this._handleChange}
           >
           </paper-input>
-          </div>
-
-          <div class="row">
-            <div class="flex">
-              ${this.hass.localize(
-                "ui.panel.config.core.section.core.core_config.internal_url"
-              )}
-            </div>
           <paper-input
             class="flex"
             .label=${this.hass.localize(
@@ -91,7 +77,6 @@ class ConfigUrlForm extends LitElement {
           >
           </paper-input>
         </div>
-        </div>
         <div class="card-actions">
           <mwc-button @click=${this._save} .disabled=${disabled}>
             ${this.hass.localize(

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;
         }