ha-card migration Step #1 Configuration (#3161)

* Improvements to ha-card. Better paper-card compatibility

* Remove named slots

* Tweak distance between header and contents

* Further css tweaking

* Convert config dashboard to ha-card

* Convert cloud configuration to ha-card.

* Convert integrations configuration to ha-card.

* Convert user configuration to ha-card.

* Convert core configuration to ha-card

* Convert person, entity and area config to ha-card

* Convert automation and script editor to ha-card

* Convert customization editor to ha-card

src/panels/config/area_registry/ha-config-area-registry.ts

@@ -8,7 +8,6 @@ import {
 } from "lit-element";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-fab/paper-fab";
 
 import { HomeAssistant } from "../../../types";
@@ -19,6 +18,7 @@ import {
   deleteAreaRegistryEntry,
   createAreaRegistryEntry,
 } from "../../../data/area_registry";
+import "../../../components/ha-card";
 import "../../../layouts/hass-subpage";
 import "../../../layouts/hass-loading-screen";
 import compare from "../../../common/string/compare";
@@ -72,7 +72,7 @@ class HaConfigAreaRegistry extends LitElement {
               )}
             </a>
           </span>
-          <paper-card>
+          <ha-card>
             ${this._items.map((entry) => {
               return html`
                 <paper-item @click=${this._openEditEntry} .entry=${entry}>
@@ -96,7 +96,7 @@ class HaConfigAreaRegistry extends LitElement {
                   </div>
                 `
               : html``}
-          </paper-card>
+          </ha-card>
         </ha-config-section>
       </hass-subpage>
 
@@ -178,10 +178,10 @@ All devices in this area will become unassigned.`)
       a {
         color: var(--primary-color);
       }
-      paper-card {
+      ha-card {
-        display: block;
         max-width: 600px;
         margin: 16px auto;
+        overflow: hidden;
       }
       .empty {
         text-align: center;

src/panels/config/automation/ha-automation-editor.ts

@@ -226,6 +226,9 @@ class HaAutomationEditor extends LitElement {
     return [
       haStyle,
       css`
+        ha-card {
+          overflow: hidden;
+        }
         .errors {
           padding: 20px;
           font-weight: bold;
@@ -234,15 +237,12 @@ class HaAutomationEditor extends LitElement {
         .content {
           padding-bottom: 20px;
         }
-        paper-card {
-          display: block;
-        }
         .triggers,
         .script {
           margin-top: -16px;
         }
-        .triggers paper-card,
+        .triggers ha-card,
-        .script paper-card {
+        .script ha-card {
           margin-top: 16px;
         }
         .add-card mwc-button {

src/panels/config/automation/ha-automation-picker.js

@@ -1,6 +1,5 @@
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-fab/paper-fab";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item-body";
@@ -8,6 +7,7 @@ import "@polymer/paper-item/paper-item";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../../components/ha-card";
 import "../../../components/ha-paper-icon-button-arrow-prev";
 import "../../../layouts/ha-app-layout";
 
@@ -32,6 +32,10 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
           display: block;
         }
 
+        ha-card {
+          overflow: hidden;
+        }
+
         paper-item {
           cursor: pointer;
         }
@@ -91,7 +95,7 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
             </p>
           </div>
 
-          <paper-card
+          <ha-card
             heading="[[localize('ui.panel.config.automation.picker.pick_automation')]]"
           >
             <template is="dom-if" if="[[!automations.length]]">
@@ -110,7 +114,7 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
                 <ha-icon-next></ha-icon-next>
               </paper-item>
             </template>
-          </paper-card>
+          </ha-card>
         </ha-config-section>
 
         <paper-fab

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

@@ -7,11 +7,12 @@ import {
   css,
 } from "lit-element";
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 // tslint:disable-next-line
 import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
 
+import "../../../components/ha-card";
+
 import { fireEvent } from "../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../types";
 import "./cloud-exposed-entities";
@@ -36,7 +37,7 @@ export class CloudAlexaPref extends LitElement {
     const enabled = this.cloudStatus!.prefs.alexa_enabled;
 
     return html`
-      <paper-card heading="Alexa">
+      <ha-card header="Alexa">
         <paper-toggle-button
           .checked="${enabled}"
           @change="${this._toggleChanged}"
@@ -73,7 +74,7 @@ export class CloudAlexaPref extends LitElement {
               `
             : ""}
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 
@@ -92,10 +93,11 @@ export class CloudAlexaPref extends LitElement {
       a {
         color: var(--primary-color);
       }
-      paper-card > paper-toggle-button {
+      ha-card > paper-toggle-button {
+        margin: -4px 0;
         position: absolute;
         right: 8px;
-        top: 16px;
+        top: 32px;
       }
     `;
   }

src/panels/config/cloud/cloud-google-pref.ts

@@ -7,12 +7,13 @@ import {
   css,
 } from "lit-element";
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 // tslint:disable-next-line
 import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
 import "../../../components/buttons/ha-call-api-button";
 
+import "../../../components/ha-card";
+
 import { fireEvent } from "../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../types";
 import "./cloud-exposed-entities";
@@ -41,7 +42,7 @@ export class CloudGooglePref extends LitElement {
     } = this.cloudStatus.prefs;
 
     return html`
-      <paper-card heading="Google Assistant">
+      <ha-card header="Google Assistant">
         <paper-toggle-button
           id="google_enabled"
           .checked="${google_enabled}"
@@ -105,7 +106,7 @@ export class CloudGooglePref extends LitElement {
             >Sync devices</ha-call-api-button
           >
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 
@@ -137,10 +138,11 @@ export class CloudGooglePref extends LitElement {
       a {
         color: var(--primary-color);
       }
-      paper-card > paper-toggle-button {
+      ha-card > paper-toggle-button {
+        margin: -4px 0;
         position: absolute;
         right: 8px;
-        top: 16px;
+        top: 32px;
       }
       ha-call-api-button {
         color: var(--primary-color);

src/panels/config/cloud/cloud-remote-pref.ts

@@ -8,12 +8,13 @@ import {
   css,
 } from "lit-element";
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 import "@polymer/paper-item/paper-item-body";
 // tslint:disable-next-line
 import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
 
+import "../../../components/ha-card";
+
 import { fireEvent } from "../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../types";
 import {
@@ -48,16 +49,16 @@ export class CloudRemotePref extends LitElement {
 
     if (!remote_certificate) {
       return html`
-        <paper-card heading="Remote Control">
+        <ha-card header="Remote Control">
           <div class="preparing">
             Remote access is being prepared. We will notify you when it's ready.
           </div>
-        </paper-card>
+        </ha-card>
       `;
     }
 
     return html`
-      <paper-card heading="Remote Control">
+      <ha-card header="Remote Control">
         <paper-toggle-button
           .checked="${remote_connected}"
           @change="${this._toggleChanged}"
@@ -83,7 +84,7 @@ export class CloudRemotePref extends LitElement {
               `
             : ""}
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 
@@ -111,19 +112,17 @@ export class CloudRemotePref extends LitElement {
 
   static get styles(): CSSResult {
     return css`
-      paper-card {
-        display: block;
-      }
       .preparing {
         padding: 0 16px 16px;
       }
       a {
         color: var(--primary-color);
       }
-      paper-card > paper-toggle-button {
+      ha-card > paper-toggle-button {
+        margin: -4px 0;
         position: absolute;
         right: 8px;
-        top: 16px;
+        top: 32px;
       }
       .card-actions {
         display: flex;

src/panels/config/cloud/cloud-webhooks.ts

@@ -51,19 +51,17 @@ export class CloudWebhooks extends LitElement {
     return html`
       ${this.renderStyle()}
       <ha-card header="Webhooks">
-        <div class="body">
+        <div class="card-content">
           Anything that is configured to be triggered by a webhook can be given
           a publicly accessible URL to allow you to send data back to Home
           Assistant from anywhere, without exposing your instance to the
-          internet.
+          internet. ${this._renderBody()}
-        </div>
 
-        ${this._renderBody()}
+          <div class="footer">
-
+            <a href="https://www.nabucasa.com/config/webhooks" target="_blank">
-        <div class="footer">
+              Learn more about creating webhook-powered automations.
-          <a href="https://www.nabucasa.com/config/webhooks" target="_blank">
+            </a>
-            Learn more about creating webhook-powered automations.
+          </div>
-          </a>
         </div>
       </ha-card>
     `;
@@ -194,15 +192,12 @@ export class CloudWebhooks extends LitElement {
   private renderStyle() {
     return html`
       <style>
-        .body {
-          padding: 0 16px 8px;
-        }
         .body-text {
-          padding: 0 16px;
+          padding: 8px 0;
         }
         .webhook {
           display: flex;
-          padding: 4px 16px;
+          padding: 4px 0;
         }
         .progress {
           margin-right: 16px;
@@ -211,7 +206,7 @@ export class CloudWebhooks extends LitElement {
           justify-content: center;
         }
         .footer {
-          padding: 16px;
+          padding-top: 16px;
         }
         .body-text a,
         .footer a {

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

@@ -1,10 +1,10 @@
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../../components/ha-card";
 import "../../../components/buttons/ha-call-api-button";
 import "../../../layouts/hass-subpage";
 import "../../../resources/ha-style";
@@ -41,9 +41,6 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
           padding-bottom: 24px;
           direction: ltr;
         }
-        paper-card {
-          display: block;
-        }
         .account-row {
           display: flex;
           padding: 0 16px;
@@ -82,7 +79,7 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
               </p>
             </div>
 
-            <paper-card heading="Nabu Casa Account">
+            <ha-card header="Nabu Casa Account">
               <div class="account-row">
                 <paper-item-body two-line="">
                   [[cloudStatus.email]]
@@ -105,7 +102,7 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
                   >Sign out</mwc-button
                 >
               </div>
-            </paper-card>
+            </ha-card>
           </ha-config-section>
 
           <ha-config-section is-wide="[[isWide]]">

src/panels/config/cloud/ha-config-cloud-forgot-password.js

@@ -1,8 +1,8 @@
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../../components/ha-card";
 import "../../../components/buttons/ha-progress-button";
 import "../../../layouts/hass-subpage";
 import "../../../resources/ha-style";
@@ -20,8 +20,7 @@ class HaConfigCloudForgotPassword extends EventsMixin(PolymerElement) {
           direction: ltr;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           max-width: 600px;
           margin: 0 auto;
           margin-top: 24px;
@@ -47,9 +46,8 @@ class HaConfigCloudForgotPassword extends EventsMixin(PolymerElement) {
       </style>
       <hass-subpage header="Forgot Password">
         <div class="content">
-          <paper-card>
+          <ha-card header="Forgot your password">
             <div class="card-content">
-              <h1>Forgot your password?</h1>
               <p>
                 Enter your email address and we will send you a link to reset
                 your password.
@@ -72,7 +70,7 @@ class HaConfigCloudForgotPassword extends EventsMixin(PolymerElement) {
                 >Send reset email</ha-progress-button
               >
             </div>
-          </paper-card>
+          </ha-card>
         </div>
       </hass-subpage>
     `;

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

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item-body";
@@ -8,6 +7,7 @@ import "@polymer/paper-ripple/paper-ripple";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../../components/ha-card";
 import "../../../components/buttons/ha-progress-button";
 import "../../../layouts/hass-subpage";
 import "../../../resources/ha-style";
@@ -34,14 +34,14 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
         [slot="introduction"] a {
           color: var(--primary-color);
         }
-        paper-card {
-          display: block;
-        }
         paper-item {
           cursor: pointer;
         }
-        paper-card:last-child {
+        ha-card {
-          margin-top: 24px;
+          overflow: hidden;
+        }
+        ha-card .card-header {
+          margin-bottom: -8px;
         }
         h1 {
           @apply --paper-font-headline;
@@ -97,7 +97,7 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
               </p>
             </div>
 
-            <paper-card hidden$="[[!flashMessage]]">
+            <ha-card hidden$="[[!flashMessage]]">
               <div class="card-content flash-msg">
                 [[flashMessage]]
                 <paper-icon-button icon="hass:close" on-click="_dismissFlash"
@@ -105,11 +105,10 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
                 >
                 <paper-ripple id="flashRipple" noink=""></paper-ripple>
               </div>
-            </paper-card>
+            </ha-card>
 
-            <paper-card>
+            <ha-card header="Sign in">
               <div class="card-content">
-                <h1>Sign In</h1>
                 <div class="error" hidden$="[[!_error]]">[[_error]]</div>
                 <paper-input
                   label="Email"
@@ -142,9 +141,9 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
                   forgot password?
                 </button>
               </div>
-            </paper-card>
+            </ha-card>
 
-            <paper-card>
+            <ha-card>
               <paper-item on-click="_handleRegister">
                 <paper-item-body two-line="">
                   Start your free 1 month trial
@@ -152,7 +151,7 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
                 </paper-item-body>
                 <ha-icon-next></ha-icon-next>
               </paper-item>
-            </paper-card>
+            </ha-card>
           </ha-config-section>
         </div>
       </hass-subpage>

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

@@ -1,8 +1,8 @@
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../../components/ha-card";
 import "../../../components/buttons/ha-progress-button";
 import "../../../layouts/hass-subpage";
 import "../../../resources/ha-style";
@@ -29,15 +29,9 @@ class HaConfigCloudRegister extends EventsMixin(PolymerElement) {
       a {
         color: var(--primary-color);
       }
-      paper-card {
-        display: block;
-      }
       paper-item {
         cursor: pointer;
       }
-      paper-card:last-child {
-        margin-top: 24px;
-      }
       h1 {
         @apply --paper-font-headline;
         margin: 0;
@@ -84,10 +78,9 @@ class HaConfigCloudRegister extends EventsMixin(PolymerElement) {
             </p>
           </div>
 
-          <paper-card>
+          <ha-card header="Create Account">
             <div class="card-content">
               <div class="header">
-                <h1>Create Account</h1>
                 <div class="error" hidden$="[[!_error]]">[[_error]]</div>
               </div>
               <paper-input autofocus="" id="email" label="Email address" type="email" value="{{email}}" on-keydown="_keyDown" error-message="Invalid email"></paper-input>
@@ -97,7 +90,7 @@ class HaConfigCloudRegister extends EventsMixin(PolymerElement) {
               <ha-progress-button on-click="_handleRegister" progress="[[_requestInProgress]]">Start trial</ha-progress-button>
               <button class="link" hidden="[[_requestInProgress]]" on-click="_handleResendVerifyEmail">Resend confirmation email</button>
             </div>
-          </paper-card>
+          </ha-card>
         </ha-config-section>
       </div>
     </hass-subpage>

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

@@ -1,9 +1,9 @@
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../../components/ha-card";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../resources/ha-style";
 
@@ -57,8 +57,8 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
           >[[localize('ui.panel.config.core.section.core.introduction')]]</span
         >
 
-        <paper-card
+        <ha-card
-          heading="[[localize('ui.panel.config.core.section.core.validation.heading')]]"
+          header="[[localize('ui.panel.config.core.section.core.validation.heading')]]"
         >
           <div class="card-content">
             [[localize('ui.panel.config.core.section.core.validation.introduction')]]
@@ -91,10 +91,10 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
               <div id="configLog" class="validate-log">[[validateLog]]</div>
             </template>
           </div>
-        </paper-card>
+        </ha-card>
 
-        <paper-card
+        <ha-card
-          heading="[[localize('ui.panel.config.core.section.core.reloading.heading')]]"
+          header="[[localize('ui.panel.config.core.section.core.reloading.heading')]]"
         >
           <div class="card-content">
             [[localize('ui.panel.config.core.section.core.reloading.introduction')]]
@@ -128,10 +128,10 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
               >[[localize('ui.panel.config.core.section.core.reloading.script')]]
             </ha-call-service-button>
           </div>
-        </paper-card>
+        </ha-card>
 
-        <paper-card
+        <ha-card
-          heading="[[localize('ui.panel.config.core.section.core.server_management.heading')]]"
+          header="[[localize('ui.panel.config.core.section.core.server_management.heading')]]"
         >
           <div class="card-content">
             [[localize('ui.panel.config.core.section.core.server_management.introduction')]]
@@ -152,7 +152,7 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
               >[[localize('ui.panel.config.core.section.core.server_management.stop')]]
             </ha-call-service-button>
           </div>
-        </paper-card>
+        </ha-card>
       </ha-config-section>
     `;
   }

src/panels/config/dashboard/ha-config-dashboard.js

@@ -2,12 +2,12 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-item/paper-item";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../../components/ha-card";
 import "../../../components/ha-menu-button";
 import "../../../components/ha-icon-next";
 
@@ -25,12 +25,12 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
   static get template() {
     return html`
     <style include="iron-flex ha-style">
+      ha-card {
+        overflow: hidden;
+      }
       .content {
         padding-bottom: 32px;
       }
-      paper-card {
-        display: block;
-      }
       a {
         text-decoration: none;
         color: var(--primary-text-color);
@@ -51,7 +51,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
           <span slot="introduction">[[localize('ui.panel.config.introduction')]]</span>
 
           <template is="dom-if" if="[[computeIsLoaded(hass, 'cloud')]]">
-            <paper-card>
+            <ha-card>
               <a href='/config/cloud' tabindex="-1">
                 <paper-item>
                   <paper-item-body two-line="">
@@ -69,11 +69,11 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
                   </paper-item-body>
                   <ha-icon-next></ha-icon-next>
                 </paper-item>
-              </paper-card>
+              </ha-card>
             </a>
           </template>
 
-          <paper-card>
+          <ha-card>
             <a href='/config/integrations/dashboard' tabindex="-1">
               <paper-item>
                 <paper-item-body two-line>
@@ -97,7 +97,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
                 <ha-icon-next></ha-icon-next>
               </paper-item>
             </a>
-          </paper-card>
+          </ha-card>
 
           <ha-config-navigation hass="[[hass]]"></ha-config-navigation>
         </ha-config-section>

src/panels/config/dashboard/ha-config-navigation.js

@@ -1,5 +1,4 @@
 import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-item/paper-item";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -10,6 +9,7 @@ import LocalizeMixin from "../../../mixins/localize-mixin";
 
 import isComponentLoaded from "../../../common/config/is_component_loaded";
 
+import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
 
 const CORE_PAGES = ["core", "customize", "entity_registry", "area_registry"];
@@ -21,14 +21,14 @@ class HaConfigNavigation extends LocalizeMixin(NavigateMixin(PolymerElement)) {
   static get template() {
     return html`
       <style include="iron-flex">
-        paper-card {
+        ha-card {
-          display: block;
+          overflow: hidden;
         }
         paper-item {
           cursor: pointer;
         }
       </style>
-      <paper-card>
+      <ha-card>
         <template is="dom-repeat" items="[[pages]]">
           <template is="dom-if" if="[[_computeLoaded(hass, item)]]">
             <paper-item on-click="_navigate">
@@ -40,7 +40,7 @@ class HaConfigNavigation extends LocalizeMixin(NavigateMixin(PolymerElement)) {
             </paper-item>
           </template>
         </template>
-      </paper-card>
+      </ha-card>
     `;
   }
 

src/panels/config/entity_registry/ha-config-entity-registry.ts

@@ -8,7 +8,6 @@ import {
 } from "lit-element";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-card/paper-card";
 
 import { HomeAssistant } from "../../../types";
 import {
@@ -20,6 +19,7 @@ import {
 } from "../../../data/entity_registry";
 import "../../../layouts/hass-subpage";
 import "../../../layouts/hass-loading-screen";
+import "../../../components/ha-card";
 import "../../../components/ha-icon";
 import compare from "../../../common/string/compare";
 import domainIcon from "../../../common/entity/domain_icon";
@@ -77,7 +77,7 @@ class HaConfigEntityRegistry extends LitElement {
               )}
             </a>
           </span>
-          <paper-card>
+          <ha-card>
             ${this._items.map((entry) => {
               const state = this.hass!.states[entry.entity_id];
               return html`
@@ -103,7 +103,7 @@ class HaConfigEntityRegistry extends LitElement {
                 </paper-icon-item>
               `;
             })}
-          </paper-card>
+          </ha-card>
         </ha-config-section>
       </hass-subpage>
     `;
@@ -162,9 +162,9 @@ Deleting an entry will not remove the entity from Home Assistant. To do this, yo
       a {
         color: var(--primary-color);
       }
-      paper-card {
+      ha-card {
-        display: block;
         direction: ltr;
+        overflow: hidden;
       }
       paper-icon-item {
         cursor: pointer;

src/panels/config/ha-entity-config.js

@@ -1,11 +1,11 @@
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "../../components/ha-card";
 
 import computeStateName from "../../common/entity/compute_state_name";
 
@@ -13,8 +13,7 @@ class HaEntityConfig extends PolymerElement {
   static get template() {
     return html`
       <style include="iron-flex ha-style">
-        paper-card {
+        ha-card {
-          display: block;
           direction: ltr;
         }
 
@@ -38,7 +37,7 @@ class HaEntityConfig extends PolymerElement {
           @apply --layout-justified;
         }
       </style>
-      <paper-card>
+      <ha-card>
         <div class="card-content">
           <div class="device-picker">
             <paper-dropdown-menu
@@ -89,7 +88,7 @@ class HaEntityConfig extends PolymerElement {
             >
           </template>
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 

src/panels/config/integrations/ha-ce-entities-card.js

@@ -1,9 +1,9 @@
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../../components/ha-card";
 import "../../../layouts/hass-subpage";
 
 import EventsMixin from "../../../mixins/events-mixin";
@@ -19,7 +19,7 @@ class HaCeEntitiesCard extends LocalizeMixIn(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
       <style>
-        paper-card {
+        ha-card {
           flex: 1 0 100%;
           padding-bottom: 8px;
         }
@@ -29,7 +29,7 @@ class HaCeEntitiesCard extends LocalizeMixIn(EventsMixin(PolymerElement)) {
           padding-bottom: 4px;
         }
       </style>
-      <paper-card heading="[[heading]]">
+      <ha-card header="[[heading]]">
         <template is="dom-repeat" items="[[entities]]" as="entity">
           <paper-icon-item on-click="_openMoreInfo">
             <state-badge
@@ -42,7 +42,7 @@ class HaCeEntitiesCard extends LocalizeMixIn(EventsMixin(PolymerElement)) {
             </paper-item-body>
           </paper-icon-item>
         </template>
-      </paper-card>
+      </ha-card>
     `;
   }
 

src/panels/config/integrations/ha-config-entries-dashboard.js

@@ -2,13 +2,13 @@ import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import "@polymer/paper-tooltip/paper-tooltip";
 import "@material/mwc-button";
 import "@polymer/paper-fab/paper-fab";
-import "@polymer/paper-card/paper-card";
 import "@polymer/iron-icon/iron-icon";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../../components/ha-card";
 import "../../../components/entity/ha-state-icon";
 import "../../../layouts/hass-subpage";
 import "../../../resources/ha-style";
@@ -34,13 +34,13 @@ class HaConfigManagerDashboard extends LocalizeMixin(
   static get template() {
     return html`
       <style include="iron-flex ha-style">
+        ha-card {
+          overflow: hidden;
+        }
         mwc-button {
           top: 3px;
           margin-right: -0.57em;
         }
-        paper-card:last-child {
-          margin-top: 12px;
-        }
         .config-entry-row {
           display: flex;
           padding: 0 16px;
@@ -84,7 +84,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
             <span slot="header"
               >[[localize('ui.panel.config.integrations.discovered')]]</span
             >
-            <paper-card>
+            <ha-card>
               <template is="dom-repeat" items="[[progress]]">
                 <div class="config-entry-row">
                   <paper-item-body>
@@ -95,7 +95,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
                   >
                 </div>
               </template>
-            </paper-card>
+            </ha-card>
           </ha-config-section>
         </template>
 
@@ -103,7 +103,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
           <span slot="header"
             >[[localize('ui.panel.config.integrations.configured')]]</span
           >
-          <paper-card>
+          <ha-card>
             <template is="dom-if" if="[[!entries.length]]">
               <div class="config-entry-row">
                 <paper-item-body two-line>
@@ -140,7 +140,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
                 </paper-item>
               </a>
             </template>
-          </paper-card>
+          </ha-card>
         </ha-config-section>
 
         <paper-fab

src/panels/config/integrations/ha-config-entry-page.js

@@ -1,4 +1,3 @@
-import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 

src/panels/config/integrations/ha-device-card.js

@@ -1,12 +1,12 @@
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../../components/ha-card";
 import "../../../layouts/hass-subpage";
 
 import EventsMixin from "../../../mixins/events-mixin";
@@ -33,7 +33,7 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
           max-height: 225px;
           overflow: auto;
         }
-        paper-card {
+        ha-card {
           flex: 1 0 100%;
           padding-bottom: 10px;
           min-width: 0;
@@ -61,7 +61,7 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
           color: var(--secondary-text-color);
         }
       </style>
-      <paper-card heading="[[device.name]]">
+      <ha-card header="[[device.name]]">
         <div class="card-content">
           <!--
             <h1>[[configEntry.title]] ([[_computeIntegrationTitle(localize, configEntry.domain)]])</h1>
@@ -125,7 +125,7 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
             </paper-icon-item>
           </template>
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 

src/panels/config/js/automation.js

@@ -1,8 +1,8 @@
 import { h, Component } from "preact";
 
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import "../ha-config-section";
+import "../../../components/ha-card";
 
 import Trigger from "./trigger/index";
 import Condition from "./condition/index";
@@ -50,7 +50,7 @@ export default class Automation extends Component {
           <span slot="introduction">
             {localize("ui.panel.config.automation.editor.introduction")}
           </span>
-          <paper-card>
+          <ha-card>
             <div class="card-content">
               <paper-input
                 label={localize("ui.panel.config.automation.editor.alias")}
@@ -59,7 +59,7 @@ export default class Automation extends Component {
                 onvalue-changed={this.onChange}
               />
             </div>
-          </paper-card>
+          </ha-card>
         </ha-config-section>
 
         <ha-config-section is-wide={isWide}>

src/panels/config/js/condition/condition_row.js

@@ -1,9 +1,9 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-menu-button/paper-menu-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-item/paper-item";
+import "../../../../components/ha-card";
 
 import ConditionEdit from "./condition_edit";
 
@@ -29,36 +29,36 @@ export default class ConditionRow extends Component {
 
   render(props) {
     return (
-      <paper-card>
+      <ha-card>
-        <div class="card-menu">
-          <paper-menu-button
-            no-animations
-            horizontal-align="right"
-            horizontal-offset="-5"
-            vertical-offset="-5"
-          >
-            <paper-icon-button
-              icon="hass:dots-vertical"
-              slot="dropdown-trigger"
-            />
-            <paper-listbox slot="dropdown-content">
-              <paper-item disabled>
-                {props.localize(
-                  "ui.panel.config.automation.editor.conditions.duplicate"
-                )}
-              </paper-item>
-              <paper-item onTap={this.onDelete}>
-                {props.localize(
-                  "ui.panel.config.automation.editor.conditions.delete"
-                )}
-              </paper-item>
-            </paper-listbox>
-          </paper-menu-button>
-        </div>
         <div class="card-content">
+          <div class="card-menu">
+            <paper-menu-button
+              no-animations
+              horizontal-align="right"
+              horizontal-offset="-5"
+              vertical-offset="-5"
+            >
+              <paper-icon-button
+                icon="hass:dots-vertical"
+                slot="dropdown-trigger"
+              />
+              <paper-listbox slot="dropdown-content">
+                <paper-item disabled>
+                  {props.localize(
+                    "ui.panel.config.automation.editor.conditions.duplicate"
+                  )}
+                </paper-item>
+                <paper-item onTap={this.onDelete}>
+                  {props.localize(
+                    "ui.panel.config.automation.editor.conditions.delete"
+                  )}
+                </paper-item>
+              </paper-listbox>
+            </paper-menu-button>
+          </div>
           <ConditionEdit {...props} />
         </div>
-      </paper-card>
+      </ha-card>
     );
   }
 }

src/panels/config/js/condition/index.js

@@ -1,6 +1,6 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card";
 import "@material/mwc-button";
+import "../../../../components/ha-card";
 
 import ConditionRow from "./condition_row";
 
@@ -44,13 +44,13 @@ export default class Condition extends Component {
             localize={localize}
           />
         ))}
-        <paper-card>
+        <ha-card>
           <div class="card-actions add-card">
             <mwc-button onTap={this.addCondition}>
               {localize("ui.panel.config.automation.editor.conditions.add")}
             </mwc-button>
           </div>
-        </paper-card>
+        </ha-card>
       </div>
     );
   }

src/panels/config/js/script.js

@@ -1,8 +1,8 @@
 import { h, Component } from "preact";
 
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import "../ha-config-section";
+import "../../../components/ha-card";
 
 import Script from "./script/index";
 
@@ -36,7 +36,7 @@ export default class ScriptEditor extends Component {
           <span slot="introduction">
             Use scripts to execute a sequence of actions.
           </span>
-          <paper-card>
+          <ha-card>
             <div class="card-content">
               <paper-input
                 label="Name"
@@ -45,7 +45,7 @@ export default class ScriptEditor extends Component {
                 onvalue-changed={this.onChange}
               />
             </div>
-          </paper-card>
+          </ha-card>
         </ha-config-section>
 
         <ha-config-section is-wide={isWide}>

src/panels/config/js/script/action_row.js

@@ -1,9 +1,9 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-menu-button/paper-menu-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
+import "../../../../components/ha-card";
 
 import ActionEdit from "./action_edit";
 
@@ -29,36 +29,36 @@ export default class Action extends Component {
 
   render(props) {
     return (
-      <paper-card>
+      <ha-card>
-        <div class="card-menu">
-          <paper-menu-button
-            no-animations
-            horizontal-align="right"
-            horizontal-offset="-5"
-            vertical-offset="-5"
-          >
-            <paper-icon-button
-              icon="hass:dots-vertical"
-              slot="dropdown-trigger"
-            />
-            <paper-listbox slot="dropdown-content">
-              <paper-item disabled>
-                {props.localize(
-                  "ui.panel.config.automation.editor.actions.duplicate"
-                )}
-              </paper-item>
-              <paper-item onTap={this.onDelete}>
-                {props.localize(
-                  "ui.panel.config.automation.editor.actions.delete"
-                )}
-              </paper-item>
-            </paper-listbox>
-          </paper-menu-button>
-        </div>
         <div class="card-content">
+          <div class="card-menu">
+            <paper-menu-button
+              no-animations
+              horizontal-align="right"
+              horizontal-offset="-5"
+              vertical-offset="-5"
+            >
+              <paper-icon-button
+                icon="hass:dots-vertical"
+                slot="dropdown-trigger"
+              />
+              <paper-listbox slot="dropdown-content">
+                <paper-item disabled>
+                  {props.localize(
+                    "ui.panel.config.automation.editor.actions.duplicate"
+                  )}
+                </paper-item>
+                <paper-item onTap={this.onDelete}>
+                  {props.localize(
+                    "ui.panel.config.automation.editor.actions.delete"
+                  )}
+                </paper-item>
+              </paper-listbox>
+            </paper-menu-button>
+          </div>
           <ActionEdit {...props} />
         </div>
-      </paper-card>
+      </ha-card>
     );
   }
 }

src/panels/config/js/script/index.js

@@ -1,6 +1,6 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card";
 import "@material/mwc-button";
+import "../../../../components/ha-card";
 
 import ActionRow from "./action_row";
 
@@ -44,13 +44,13 @@ export default class Script extends Component {
             localize={localize}
           />
         ))}
-        <paper-card>
+        <ha-card>
           <div class="card-actions add-card">
             <mwc-button onTap={this.addAction}>
               {localize("ui.panel.config.automation.editor.actions.add")}
             </mwc-button>
           </div>
-        </paper-card>
+        </ha-card>
       </div>
     );
   }

src/panels/config/js/trigger/index.js

@@ -1,6 +1,6 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card";
 import "@material/mwc-button";
+import "../../../../components/ha-card";
 
 import TriggerRow from "./trigger_row";
 import StateTrigger from "./state";
@@ -45,13 +45,13 @@ export default class Trigger extends Component {
             localize={localize}
           />
         ))}
-        <paper-card>
+        <ha-card>
           <div class="card-actions add-card">
             <mwc-button onTap={this.addTrigger}>
               {localize("ui.panel.config.automation.editor.triggers.add")}
             </mwc-button>
           </div>
-        </paper-card>
+        </ha-card>
       </div>
     );
   }

src/panels/config/js/trigger/trigger_row.js

@@ -1,9 +1,9 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-menu-button/paper-menu-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
+import "../../../../components/ha-card";
 
 import TriggerEdit from "./trigger_edit";
 
@@ -29,36 +29,36 @@ export default class TriggerRow extends Component {
 
   render(props) {
     return (
-      <paper-card>
+      <ha-card>
-        <div class="card-menu">
-          <paper-menu-button
-            no-animations
-            horizontal-align="right"
-            horizontal-offset="-5"
-            vertical-offset="-5"
-          >
-            <paper-icon-button
-              icon="hass:dots-vertical"
-              slot="dropdown-trigger"
-            />
-            <paper-listbox slot="dropdown-content">
-              <paper-item disabled>
-                {props.localize(
-                  "ui.panel.config.automation.editor.triggers.duplicate"
-                )}
-              </paper-item>
-              <paper-item onTap={this.onDelete}>
-                {props.localize(
-                  "ui.panel.config.automation.editor.triggers.delete"
-                )}
-              </paper-item>
-            </paper-listbox>
-          </paper-menu-button>
-        </div>
         <div class="card-content">
+          <div class="card-menu">
+            <paper-menu-button
+              no-animations
+              horizontal-align="right"
+              horizontal-offset="-5"
+              vertical-offset="-5"
+            >
+              <paper-icon-button
+                icon="hass:dots-vertical"
+                slot="dropdown-trigger"
+              />
+              <paper-listbox slot="dropdown-content">
+                <paper-item disabled>
+                  {props.localize(
+                    "ui.panel.config.automation.editor.triggers.duplicate"
+                  )}
+                </paper-item>
+                <paper-item onTap={this.onDelete}>
+                  {props.localize(
+                    "ui.panel.config.automation.editor.triggers.delete"
+                  )}
+                </paper-item>
+              </paper-listbox>
+            </paper-menu-button>
+          </div>
           <TriggerEdit {...props} />
         </div>
-      </paper-card>
+      </ha-card>
     );
   }
 }

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

@@ -8,7 +8,6 @@ import {
 } from "lit-element";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-fab/paper-fab";
 
 import { HomeAssistant } from "../../../types";
@@ -19,6 +18,7 @@ import {
   deletePerson,
   createPerson,
 } from "../../../data/person";
+import "../../../components/ha-card";
 import "../../../layouts/hass-subpage";
 import "../../../layouts/hass-loading-screen";
 import compare from "../../../common/string/compare";
@@ -70,7 +70,7 @@ class HaConfigPerson extends LitElement {
                 `
               : ""}
           </span>
-          <paper-card class="storage">
+          <ha-card class="storage">
             ${this._storageItems.map((entry) => {
               return html`
                 <paper-item @click=${this._openEditEntry} .entry=${entry}>
@@ -90,10 +90,10 @@ class HaConfigPerson extends LitElement {
                   </div>
                 `
               : html``}
-          </paper-card>
+          </ha-card>
           ${this._configItems.length > 0
             ? html`
-                <paper-card heading="Configuration.yaml persons">
+                <ha-card header="Configuration.yaml persons">
                   ${this._configItems.map((entry) => {
                     return html`
                       <paper-item>
@@ -103,7 +103,7 @@ class HaConfigPerson extends LitElement {
                       </paper-item>
                     `;
                   })}
-                </paper-card>
+                </ha-card>
               `
             : ""}
         </ha-config-section>
@@ -205,10 +205,10 @@ All devices belonging to this person will become unassigned.`)
       a {
         color: var(--primary-color);
       }
-      paper-card {
+      ha-card {
-        display: block;
         max-width: 600px;
         margin: 16px auto;
+        overflow: hidden;
       }
       .empty {
         text-align: center;
@@ -218,7 +218,7 @@ All devices belonging to this person will become unassigned.`)
         padding-top: 4px;
         padding-bottom: 4px;
       }
-      paper-card.storage paper-item {
+      ha-card.storage paper-item {
         cursor: pointer;
       }
       paper-fab {

src/panels/config/script/ha-script-editor.js

@@ -39,15 +39,12 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
         .content {
           padding-bottom: 20px;
         }
-        paper-card {
-          display: block;
-        }
         .triggers,
         .script {
           margin-top: -16px;
         }
-        .triggers paper-card,
+        .triggers ha-card,
-        .script paper-card {
+        .script ha-card {
           margin-top: 16px;
         }
         .add-card mwc-button {

src/panels/config/script/ha-script-picker.js

@@ -1,6 +1,5 @@
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-fab/paper-fab";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item-body";
@@ -11,6 +10,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { computeRTL } from "../../../common/util/compute_rtl";
 
 import "../../../layouts/ha-app-layout";
+import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-paper-icon-button-arrow-prev";
 
@@ -32,6 +32,10 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
           display: block;
         }
 
+        ha-card {
+          overflow: hidden;
+        }
+
         paper-item {
           cursor: pointer;
         }
@@ -88,7 +92,7 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
             to make sure that you have configured Home Assistant correctly.
           </div>
 
-          <paper-card heading="Pick script to edit">
+          <ha-card header="Pick script to edit">
             <template is="dom-if" if="[[!scripts.length]]">
               <div class="card-content">
                 <p>We couldn't find any editable scripts.</p>
@@ -103,7 +107,7 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
                 <ha-icon-next></ha-icon-next>
               </paper-item>
             </template>
-          </paper-card>
+          </ha-card>
         </ha-config-section>
 
         <paper-fab

src/panels/config/users/ha-config-user-picker.js

@@ -1,12 +1,12 @@
 import "@polymer/paper-fab/paper-fab";
 import "@polymer/paper-item/paper-item";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item-body";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../layouts/hass-subpage";
 import "../../../components/ha-icon-next";
+import "../../../components/ha-card";
 
 import LocalizeMixin from "../../../mixins/localize-mixin";
 import NavigateMixin from "../../../mixins/navigate-mixin";
@@ -47,10 +47,10 @@ class HaUserPicker extends EventsMixin(
           left: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           max-width: 600px;
           margin: 16px auto;
+          overflow: hidden;
         }
         a {
           text-decoration: none;
@@ -59,7 +59,7 @@ class HaUserPicker extends EventsMixin(
       </style>
 
       <hass-subpage header="[[localize('ui.panel.config.users.picker.title')]]">
-        <paper-card>
+        <ha-card>
           <template is="dom-repeat" items="[[users]]" as="user">
             <a href="[[_computeUrl(user)]]">
               <paper-item>
@@ -76,7 +76,7 @@ class HaUserPicker extends EventsMixin(
               </paper-item>
             </a>
           </template>
-        </paper-card>
+        </ha-card>
 
         <paper-fab
           is-wide$="[[isWide]]"

src/panels/config/users/ha-user-editor.ts

@@ -176,23 +176,15 @@ class HaUserEditor extends LitElement {
     return [
       haStyle,
       css`
+        .card-actions {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
         ha-card {
-          display: block;
           max-width: 600px;
           margin: 0 auto 16px;
         }
-        ha-card:first-child {
-          margin-top: 16px;
-        }
-        ha-card:last-child {
-          margin-bottom: 16px;
-        }
-        .card-content {
-          padding: 0 16px 16px;
-        }
-        .card-actions {
-          padding: 0 8px;
-        }
         hass-subpage ha-card:first-of-type {
           direction: ltr;
         }