ha-card migration - step #2 (#3187)

* Convert profile settings to ha-card

* Convert dev- panels to ha-card

* Convert empty-state-card to ha-card

* Convert zha config to ha-card - UNTESTED

* Convert zwave config to ha-card - UNTESTED

* Convert various panels to ha-card - UNTESTED

* Convert gallery to ha-card

gallery/src/ha-gallery.js

@@ -2,7 +2,6 @@ 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";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-icon-button/paper-icon-button";
@@ -10,6 +9,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../src/managers/notification-manager";
+import "../../src/components/ha-card";
 
 const DEMOS = require.context("./demos", true, /^(.*\.(ts$))[^.]*$/im);
 
@@ -38,13 +38,13 @@ class HaGallery extends PolymerElement {
         align-items: start;
       }
 
-      .pickers paper-card {
+      .pickers ha-card {
         width: 400px;
         display: block;
         margin: 16px 8px;
       }
 
-      .pickers paper-card:last-child {
+      .pickers ha-card:last-child {
         margin-bottom: 16px;
       }
 
@@ -79,7 +79,7 @@ class HaGallery extends PolymerElement {
           <div id='demo'></div>
           <template is='dom-if' if='[[!_demo]]'>
             <div class='pickers'>
-              <paper-card heading="Lovelace card demos">
+              <ha-card header="Lovelace card demos">
                 <div class='card-content intro'>
                   <p>
                     Lovelace has many different cards. Each card allows the user to tell a different story about what is going on in their house. These cards are very customizable, as no household is the same.
@@ -101,9 +101,9 @@ class HaGallery extends PolymerElement {
                     </paper-item>
                   </a>
                 </template>
-              </paper-card>
+              </ha-card>
 
-              <paper-card heading="More Info demos">
+              <ha-card header="More Info demos">
                 <div class='card-content intro'>
                   <p>
                     More info screens show up when an entity is clicked.
@@ -117,9 +117,9 @@ class HaGallery extends PolymerElement {
                     </paper-item>
                   </a>
                 </template>
-              </paper-card>
+              </ha-card>
 
-              <paper-card heading="Util demos">
+              <ha-card header="Util demos">
                 <div class='card-content intro'>
                   <p>
                     Test pages for our utility functions.
@@ -133,7 +133,7 @@ class HaGallery extends PolymerElement {
                     </paper-item>
                   </a>
                 </template>
-              </paper-card>
+              </ha-card>
             </div>
           </template>
         </div>

src/panels/calendar/ha-panel-calendar.js

@@ -2,7 +2,6 @@ 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/paper-listbox/paper-listbox";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-item/paper-item";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -11,6 +10,7 @@ import moment from "moment";
 import dates from "react-big-calendar/lib/utils/dates";
 
 import "../../components/ha-menu-button";
+import "../../components/ha-card";
 import "../../resources/ha-style";
 import "./ha-big-calendar";
 
@@ -74,7 +74,7 @@ class HaPanelCalendar extends LocalizeMixin(PolymerElement) {
 
         <div class="flex content">
           <div id="calendars" class="layout vertical wrap">
-            <paper-card heading="Calendars">
+            <ha-card header="Calendars">
               <paper-listbox
                 id="calendar_list"
                 multi
@@ -92,7 +92,7 @@ class HaPanelCalendar extends LocalizeMixin(PolymerElement) {
                   </paper-item>
                 </template>
               </paper-listbox>
-            </paper-card>
+            </ha-card>
           </div>
           <div class="flex layout horizontal wrap">
             <ha-big-calendar

src/panels/config/zha/zha-binding.ts

@@ -1,8 +1,8 @@
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
+import "../../../components/ha-card";
 import "../ha-config-section";
 import "@material/mwc-button/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-listbox/paper-listbox";
@@ -55,7 +55,7 @@ export class ZHABindingControl extends LitElement {
         </div>
         <span slot="introduction">Bind and unbind devices.</span>
 
-        <paper-card class="content">
+        <ha-card class="content">
           <div class="command-picker">
             <paper-dropdown-menu label="Bindable Devices" class="flex">
               <paper-listbox
@@ -102,7 +102,7 @@ export class ZHABindingControl extends LitElement {
                 `
               : ""}
           </div>
-        </paper-card>
+        </ha-card>
       </ha-config-section>
     `;
   }
@@ -155,8 +155,7 @@ export class ZHABindingControl extends LitElement {
           margin-top: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }

src/panels/config/zha/zha-cluster-attributes.ts

@@ -1,8 +1,8 @@
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
+import "../../../components/ha-card";
 import "../ha-config-section";
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
@@ -95,7 +95,7 @@ export class ZHAClusterAttributes extends LitElement {
         </div>
         <span slot="introduction">View and edit cluster attributes.</span>
 
-        <paper-card class="content">
+        <ha-card class="content">
           <div class="attribute-picker">
             <paper-dropdown-menu
               label="Attributes of the selected cluster"
@@ -129,7 +129,7 @@ export class ZHAClusterAttributes extends LitElement {
           ${this._selectedAttributeIndex !== -1
             ? this._renderAttributeInteractions()
             : ""}
-        </paper-card>
+        </ha-card>
       </ha-config-section>
     `;
   }
@@ -280,8 +280,7 @@ export class ZHAClusterAttributes extends LitElement {
           margin-top: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }

src/panels/config/zha/zha-cluster-commands.ts

@@ -1,7 +1,7 @@
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
+import "../../../components/ha-card";
 import "../ha-config-section";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
@@ -88,7 +88,7 @@ export class ZHAClusterCommands extends LitElement {
         </div>
         <span slot="introduction">View and issue cluster commands.</span>
 
-        <paper-card class="content">
+        <ha-card class="content">
           <div class="command-picker">
             <paper-dropdown-menu
               label="Commands of the selected cluster"
@@ -149,7 +149,7 @@ export class ZHAClusterCommands extends LitElement {
                 </div>
               `
             : ""}
-        </paper-card>
+        </ha-card>
       </ha-config-section>
     `;
   }
@@ -215,8 +215,7 @@ export class ZHAClusterCommands extends LitElement {
           margin-top: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }

src/panels/config/zha/zha-clusters.ts

@@ -1,7 +1,7 @@
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
+import "../../../components/ha-card";
 import "../ha-config-section";
-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";

src/panels/config/zha/zha-device-card.ts

@@ -1,8 +1,8 @@
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
 import "../../../components/entity/state-badge";
+import "../../../components/ha-card";
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-icon-item";
@@ -108,7 +108,7 @@ class ZHADeviceCard extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      <paper-card heading="${this.isJoinPage ? this.device!.name : ""}">
+      <ha-card header="${this.isJoinPage ? this.device!.name : ""}">
         ${
           this.isJoinPage
             ? html`
@@ -256,7 +256,7 @@ class ZHADeviceCard extends LitElement {
             : ""
         }
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 
@@ -326,7 +326,7 @@ class ZHADeviceCard extends LitElement {
           padding: 4px;
           justify-content: left;
         }
-        paper-card {
+        ha-card {
           flex: 1 0 100%;
           padding-bottom: 10px;
           min-width: 425px;

src/panels/config/zha/zha-network.ts

@@ -1,8 +1,8 @@
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
+import "../../../components/ha-card";
 import "../ha-config-section";
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 
 import {
@@ -50,7 +50,7 @@ export class ZHANetwork extends LitElement {
         </div>
         <span slot="introduction">Commands that affect entire network</span>
 
-        <paper-card class="content">
+        <ha-card class="content">
           <div class="card-actions">
             <mwc-button @click=${this._onAddDevicesClick}>
               Add Devices
@@ -66,7 +66,7 @@ export class ZHANetwork extends LitElement {
                 `
               : ""}
           </div>
-        </paper-card>
+        </ha-card>
       </ha-config-section>
     `;
   }
@@ -87,8 +87,7 @@ export class ZHANetwork extends LitElement {
           margin-top: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }

src/panels/config/zha/zha-node.ts

@@ -1,10 +1,10 @@
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
+import "../../../components/ha-card";
 import "../ha-config-section";
 import "./zha-clusters";
 import "./zha-device-card";
 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";
@@ -70,7 +70,7 @@ export class ZHANode extends LitElement {
           press at ~5 second intervals that keep devices awake while you
           interact with them.
         </span>
-        <paper-card class="content">
+        <ha-card class="content">
           <div class="node-picker">
             <paper-dropdown-menu
               label="Devices"
@@ -116,7 +116,7 @@ export class ZHANode extends LitElement {
               `
             : ""}
           ${this._selectedDevice ? this._renderClusters() : ""}
-        </paper-card>
+        </ha-card>
       </ha-config-section>
     `;
   }
@@ -183,8 +183,7 @@ export class ZHANode extends LitElement {
           padding-bottom: 16px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }

src/panels/config/zwave/ha-config-zwave.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-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
@@ -15,6 +14,7 @@ import "../../../components/ha-service-description";
 import "../../../components/ha-paper-icon-button-arrow-prev";
 import "../../../layouts/ha-app-layout";
 import "../../../resources/ha-style";
+import "../../../components/ha-card";
 
 import "../ha-config-section";
 import "../ha-form-style";
@@ -53,8 +53,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
           padding-right: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }
@@ -116,7 +115,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
             list of available commands.
           </span>
 
-          <paper-card class="content">
+          <ha-card class="content">
             <div class="device-picker">
               <paper-dropdown-menu dynamic-align="" label="Nodes" class="flex">
                 <paper-listbox
@@ -309,7 +308,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
                 </div>
               </template>
             </template>
-          </paper-card>
+          </ha-card>
 
           <template is="dom-if" if="[[computeIsNodeSelected(selectedNode)]]">
             <!-- Value card -->

src/panels/config/zwave/zwave-groups.js

@@ -1,4 +1,3 @@
-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";
@@ -6,6 +5,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../components/buttons/ha-call-service-button";
+import "../../../components/ha-card";
 
 import computeStateName from "../../../common/entity/compute_state_name";
 
@@ -17,8 +17,7 @@ class ZwaveGroups extends PolymerElement {
           margin-top: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }
@@ -37,7 +36,7 @@ class ZwaveGroups extends PolymerElement {
           padding-bottom: 12px;
         }
       </style>
-      <paper-card class="content" heading="Node group associations">
+      <ha-card class="content" header="Node group associations">
         <!-- TODO make api for getting groups and members -->
         <div class="device-picker">
           <paper-dropdown-menu label="Group" dynamic-align="" class="flex">
@@ -120,7 +119,7 @@ class ZwaveGroups extends PolymerElement {
             </template>
           </div>
         </template>
-      </paper-card>
+      </ha-card>
     `;
   }
 

src/panels/config/zwave/zwave-log.js

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -8,6 +7,7 @@ import { EventsMixin } from "../../../mixins/events-mixin";
 import isPwa from "../../../common/config/is_pwa";
 
 import "../ha-config-section";
+import "../../../components/ha-card";
 
 let registeredDialog = false;
 
@@ -19,8 +19,7 @@ class OzwLog extends EventsMixin(PolymerElement) {
         margin-top: 24px;
       }
 
-      paper-card {
+      ha-card {
-        display: block;
         margin: 0 auto;
         max-width: 600px;
       }
@@ -34,7 +33,7 @@ class OzwLog extends EventsMixin(PolymerElement) {
     </style>
     <ha-config-section is-wide="[[isWide]]">
       <span slot="header">OZW Log</span>
-      <paper-card>
+      <ha-card>
         <div class="device-picker">
           <paper-input label="Number of last log lines." type="number" min="0" max="1000" step="10" value="{{numLogLines}}">
           </paper-input>
@@ -42,7 +41,7 @@ class OzwLog extends EventsMixin(PolymerElement) {
         <div class="card-actions">
           <mwc-button raised="true" on-click="_openLogWindow">Load</mwc-button>
           <mwc-button raised="true" on-click="_tailLog" disabled="{{_completeLog}}">Tail</mwc-button>
-      </paper-card>
+      </ha-card>
     </ha-config-section>
 `;
   }

src/panels/config/zwave/zwave-network.js

@@ -1,4 +1,3 @@
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -6,6 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../components/buttons/ha-call-api-button";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
+import "../../../components/ha-card";
 import "../ha-config-section";
 
 class ZwaveNetwork extends PolymerElement {
@@ -16,8 +16,7 @@ class ZwaveNetwork extends PolymerElement {
           margin-top: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }
@@ -57,7 +56,7 @@ class ZwaveNetwork extends PolymerElement {
           to figure out.
         </span>
 
-        <paper-card class="content">
+        <ha-card class="content">
           <div class="card-actions">
             <ha-call-service-button
               hass="[[hass]]"
@@ -193,7 +192,7 @@ class ZwaveNetwork extends PolymerElement {
               Save Config
             </ha-call-api-button>
           </div>
-        </paper-card>
+        </ha-card>
       </ha-config-section>
     `;
   }

src/panels/config/zwave/zwave-node-config.js

@@ -1,4 +1,3 @@
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
@@ -7,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../components/buttons/ha-call-service-button";
+import "../../../components/ha-card";
 
 class ZwaveNodeConfig extends PolymerElement {
   static get template() {
@@ -16,8 +16,7 @@ class ZwaveNodeConfig extends PolymerElement {
           margin-top: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }
@@ -36,7 +35,7 @@ class ZwaveNodeConfig extends PolymerElement {
         }
       </style>
       <div class="content">
-        <paper-card heading="Node config options">
+        <ha-card header="Node config options">
           <template is="dom-if" if="[[_wakeupNode]]">
             <div class="card-actions">
               <paper-input
@@ -159,7 +158,7 @@ class ZwaveNodeConfig extends PolymerElement {
               </ha-call-service-button>
             </div>
           </template>
-        </paper-card>
+        </ha-card>
       </div>
     `;
   }

src/panels/config/zwave/zwave-node-protection.js

@@ -1,4 +1,3 @@
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
@@ -7,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../components/buttons/ha-call-api-button";
+import "../../../components/ha-card";
 
 class ZwaveNodeProtection extends PolymerElement {
   static get template() {
@@ -19,8 +19,7 @@ class ZwaveNodeProtection extends PolymerElement {
         margin-top: 24px;
       }
 
-      paper-card {
+      ha-card {
-        display: block;
         margin: 0 auto;
         max-width: 600px;
       }
@@ -33,7 +32,7 @@ class ZwaveNodeProtection extends PolymerElement {
 
     </style>
       <div class="content">
-        <paper-card heading="Node protection">
+        <ha-card header="Node protection">
           <div class="device-picker">
           <paper-dropdown-menu label="Protection" dynamic-align class="flex" placeholder="{{_loadedProtectionValue}}">
             <paper-listbox slot="dropdown-content" selected="{{_selectedProtectionParameter}}">
@@ -51,7 +50,8 @@ class ZwaveNodeProtection extends PolymerElement {
               Set Protection
             </ha-call-service-button>
           </div>
-        </div>
+        </ha-card>
+      </div>
 `;
   }
 

src/panels/config/zwave/zwave-usercodes.js

@@ -1,4 +1,3 @@
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
@@ -7,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../components/buttons/ha-call-service-button";
+import "../../../components/ha-card";
 
 class ZwaveUsercodes extends PolymerElement {
   static get template() {
@@ -16,8 +16,7 @@ class ZwaveUsercodes extends PolymerElement {
           margin-top: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }
@@ -31,7 +30,7 @@ class ZwaveUsercodes extends PolymerElement {
         }
       </style>
       <div class="content">
-        <paper-card heading="Node user codes">
+        <ha-card header="Node user codes">
           <div class="device-picker">
             <paper-dropdown-menu
               label="Code slot"
@@ -83,7 +82,7 @@ class ZwaveUsercodes extends PolymerElement {
               </ha-call-service-button>
             </div>
           </template>
-        </paper-card>
+        </ha-card>
       </div>
     `;
   }

src/panels/config/zwave/zwave-values.js

@@ -1,4 +1,3 @@
-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";
@@ -6,6 +5,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../components/buttons/ha-call-service-button";
+import "../../../components/ha-card";
 
 class ZwaveValues extends PolymerElement {
   static get template() {
@@ -15,8 +15,7 @@ class ZwaveValues extends PolymerElement {
           margin-top: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }
@@ -35,7 +34,7 @@ class ZwaveValues extends PolymerElement {
         }
       </style>
       <div class="content">
-        <paper-card heading="Node Values">
+        <ha-card header="Node Values">
           <div class="device-picker">
             <paper-dropdown-menu label="Value" dynamic-align="" class="flex">
               <paper-listbox
@@ -48,7 +47,7 @@ class ZwaveValues extends PolymerElement {
               </paper-listbox>
             </paper-dropdown-menu>
           </div>
-        </paper-card>
+        </ha-card>
       </div>
     `;
   }

src/panels/dev-info/system-health-card.ts

@@ -6,8 +6,8 @@ import {
   PropertyDeclarations,
   TemplateResult,
 } from "lit-element";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-spinner/paper-spinner";
+import "../../components/ha-card";
 
 import { HomeAssistant } from "../../types";
 import {
@@ -85,9 +85,9 @@ class SystemHealthCard extends LitElement {
     }
 
     return html`
-      <paper-card heading="System Health">
+      <ha-card header="System Health">
         <div class="card-content">${sections}</div>
-      </paper-card>
+      </ha-card>
     `;
   }
 
@@ -114,10 +114,6 @@ class SystemHealthCard extends LitElement {
 
   static get styles(): CSSResult {
     return css`
-      paper-card {
-        display: block;
-      }
-
       table {
         width: 100%;
       }

src/panels/dev-info/system-log-card.ts

@@ -6,11 +6,11 @@ import {
   PropertyDeclarations,
   TemplateResult,
 } from "lit-element";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-spinner/paper-spinner";
+import "../../components/ha-card";
 import "../../components/buttons/ha-call-service-button";
 import "../../components/buttons/ha-progress-button";
 import { HomeAssistant } from "../../types";
@@ -43,7 +43,7 @@ class SystemLogCard extends LitElement {
   protected render(): TemplateResult | void {
     return html`
       <div class="system-log-intro">
-        <paper-card>
+        <ha-card>
           ${this._items === undefined
             ? html`
                 <div class="loading-container">
@@ -96,7 +96,7 @@ class SystemLogCard extends LitElement {
                   >
                 </div>
               `}
-        </paper-card>
+        </ha-card>
       </div>
     `;
   }
@@ -131,8 +131,7 @@ class SystemLogCard extends LitElement {
 
   static get styles(): CSSResult {
     return css`
-      paper-card {
+      ha-card {
-        display: block;
         padding-top: 16px;
       }
 

src/panels/dev-mqtt/ha-panel-dev-mqtt.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 "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-input/paper-textarea";
 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 "../../resources/ha-style";
 import "../../util/app-localstorage-document";
@@ -29,10 +29,6 @@ class HaPanelDevMqtt extends PolymerElement {
           direction: ltr;
         }
 
-        paper-card {
-          display: block;
-        }
-
         mwc-button {
           background-color: white;
         }
@@ -55,7 +51,7 @@ class HaPanelDevMqtt extends PolymerElement {
         </app-localstorage-document>
 
         <div class="content">
-          <paper-card heading="Publish a packet">
+          <ha-card header="Publish a packet">
             <div class="card-content">
               <paper-input label="topic" value="{{topic}}"></paper-input>
 
@@ -68,7 +64,7 @@ class HaPanelDevMqtt extends PolymerElement {
             <div class="card-actions">
               <mwc-button on-click="_publish">Publish</mwc-button>
             </div>
-          </paper-card>
+          </ha-card>
         </div>
       </app-header-layout>
     `;

src/panels/lovelace/cards/hui-empty-state-card.ts

@@ -8,7 +8,7 @@ import {
   property,
 } from "lit-element";
 
-import "@polymer/paper-card/paper-card";
+import "../../../components/ha-card";
 
 import { LovelaceCard } from "../types";
 import { HomeAssistant } from "../../../types";
@@ -32,8 +32,8 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
     }
 
     return html`
-      <paper-card
+      <ha-card
-        .heading="${this.hass.localize(
+        .header="${this.hass.localize(
           "ui.panel.lovelace.cards.empty_state.title"
         )}"
       >
@@ -51,7 +51,7 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
             </mwc-button>
           </a>
         </div>
-      </paper-card>
+      </header-card>
     `;
   }
 

src/panels/mailbox/ha-panel-mailbox.js

@@ -2,7 +2,6 @@ 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 "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-textarea";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-item/paper-item";
@@ -12,6 +11,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../components/ha-menu-button";
+import "../../components/ha-card";
 import "../../resources/ha-style";
 
 import formatDateTime from "../../common/datetime/format_date_time";
@@ -39,8 +39,8 @@ class HaPanelMailbox extends EventsMixin(LocalizeMixin(PolymerElement)) {
           margin: 0 auto;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
+          overflow: hidden;
         }
 
         paper-item {
@@ -98,7 +98,7 @@ class HaPanelMailbox extends EventsMixin(LocalizeMixin(PolymerElement)) {
           </div>
         </app-header>
         <div class="content">
-          <paper-card>
+          <ha-card>
             <template is="dom-if" if="[[!_messages.length]]">
               <div class="card-content empty">
                 [[localize('ui.panel.mailbox.empty')]]
@@ -120,7 +120,7 @@ class HaPanelMailbox extends EventsMixin(LocalizeMixin(PolymerElement)) {
                 </paper-item-body>
               </paper-item>
             </template>
-          </paper-card>
+          </ha-card>
         </div>
       </app-header-layout>
     `;

src/panels/profile/ha-change-password-card.js

@@ -1,9 +1,9 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-spinner/paper-spinner";
-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 LocalizeMixin from "../../mixins/localize-mixin";
 
@@ -27,16 +27,13 @@ class HaChangePasswordCard extends LocalizeMixin(PolymerElement) {
           position: absolute;
           top: -4px;
         }
-        paper-card {
-          display: block;
-        }
         .currentPassword {
           margin-top: -4px;
         }
       </style>
       <div>
-        <paper-card
+        <ha-card
-          heading="[[localize('ui.panel.profile.change_password.header')]]"
+          header="[[localize('ui.panel.profile.change_password.header')]]"
         >
           <div class="card-content">
             <template is="dom-if" if="[[_errorMsg]]">
@@ -83,7 +80,7 @@ class HaChangePasswordCard extends LocalizeMixin(PolymerElement) {
               >
             </template>
           </div>
-        </paper-card>
+        </ha-card>
       </div>
     `;
   }

src/panels/profile/ha-long-lived-access-tokens-card.js

@@ -5,6 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
 import formatDateTime from "../../common/datetime/format_date_time";
+import "../../components/ha-card";
 
 import "../../resources/ha-style";
 
@@ -18,9 +19,6 @@ class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
       <style include="ha-style">
-        paper-card {
-          display: block;
-        }
         .card-content {
           margin: -1em 0;
         }
@@ -31,8 +29,8 @@ class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
           color: var(--primary-text-color);
         }
       </style>
-      <paper-card
+      <ha-card
-        heading="[[localize('ui.panel.profile.long_lived_access_tokens.header')]]"
+        header="[[localize('ui.panel.profile.long_lived_access_tokens.header')]]"
       >
         <div class="card-content">
           <p>
@@ -65,7 +63,7 @@ class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
             [[localize('ui.panel.profile.long_lived_access_tokens.create')]]
           </mwc-button>
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 

src/panels/profile/ha-mfa-modules-card.js

@@ -1,9 +1,9 @@
 import "@material/mwc-button";
-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 "../../resources/ha-style";
 
@@ -31,16 +31,11 @@ class HaMfaModulesCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
           position: absolute;
           top: -4px;
         }
-        paper-card {
-          display: block;
-          max-width: 600px;
-          margin: 16px auto;
-        }
         mwc-button {
           margin-right: -0.57em;
         }
       </style>
-      <paper-card heading="[[localize('ui.panel.profile.mfa.header')]]">
+      <ha-card header="[[localize('ui.panel.profile.mfa.header')]]">
         <template is="dom-repeat" items="[[mfaModules]]" as="module">
           <paper-item>
             <paper-item-body two-line="">
@@ -59,7 +54,7 @@ class HaMfaModulesCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
             </template>
           </paper-item>
         </template>
-      </paper-card>
+      </ha-card>
     `;
   }
 

src/panels/profile/ha-panel-profile.js

@@ -1,6 +1,5 @@
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-item/paper-item";
 import "@material/mwc-button";
@@ -8,6 +7,7 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
 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 "../../resources/ha-style";
 
@@ -58,7 +58,7 @@ class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) {
         </app-header>
 
         <div class="content">
-          <paper-card heading="[[hass.user.name]]">
+          <ha-card header="[[hass.user.name]]">
             <div class="card-content">
               [[localize('ui.panel.profile.current_user', 'fullName',
               hass.user.name)]]
@@ -87,7 +87,7 @@ class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) {
                 >[[localize('ui.panel.profile.logout')]]</mwc-button
               >
             </div>
-          </paper-card>
+          </ha-card>
 
           <template is="dom-if" if="[[_canChangePassword(hass.user)]]">
             <ha-change-password-card hass="[[hass]]"></ha-change-password-card>

src/panels/profile/ha-pick-language-row.js

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

src/panels/profile/ha-pick-theme-row.js

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

src/panels/profile/ha-push-notifications-row.js

@@ -1,6 +1,5 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import "@polymer/iron-label/iron-label";
-import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 

src/panels/profile/ha-refresh-tokens-card.js

@@ -1,6 +1,8 @@
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-tooltip/paper-tooltip";
 
+import "../../components/ha-card";
+
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { EventsMixin } from "../../mixins/events-mixin";
@@ -17,9 +19,6 @@ class HaRefreshTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
       <style>
-        paper-card {
-          display: block;
-        }
         paper-icon-button {
           color: var(--primary-text-color);
         }
@@ -27,9 +26,7 @@ class HaRefreshTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
           color: var(--disabled-text-color);
         }
       </style>
-      <paper-card
+      <ha-card header="[[localize('ui.panel.profile.refresh_tokens.header')]]">
-        heading="[[localize('ui.panel.profile.refresh_tokens.header')]]"
-      >
         <div class="card-content">
           [[localize('ui.panel.profile.refresh_tokens.description')]]
         </div>
@@ -52,7 +49,7 @@ class HaRefreshTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
             </div>
           </ha-settings-row>
         </template>
-      </paper-card>
+      </ha-card>
     `;
   }
 

src/panels/shopping-list/ha-panel-shopping-list.js

@@ -1,7 +1,6 @@
 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/paper-card/paper-card";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
@@ -15,6 +14,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../components/ha-menu-button";
 import "../../components/ha-start-voice-button";
+import "../../components/ha-card";
 import LocalizeMixin from "../../mixins/localize-mixin";
 
 /*
@@ -38,9 +38,6 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) {
           max-width: 600px;
           margin: 0 auto;
         }
-        paper-card {
-          display: block;
-        }
         paper-icon-item {
           border-top: 1px solid var(--divider-color);
         }
@@ -95,7 +92,7 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) {
         </app-header>
 
         <div class="content">
-          <paper-card>
+          <ha-card>
             <paper-icon-item on-focus="_focusRowInput">
               <paper-icon-button
                 slot="item-icon"
@@ -130,7 +127,7 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) {
                 </paper-item-body>
               </paper-icon-item>
             </template>
-          </paper-card>
+          </ha-card>
           <div class="tip" hidden$="[[!canListen]]">
             [[localize('ui.panel.shopping-list.microphone_tip')]]
           </div>