From 625ab0cc32a124342293bd755401cf18f1208c1d Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Tue, 4 Feb 2020 12:10:10 -0500
Subject: [PATCH 1/3] Update CSS

---
 src/panels/lovelace/components/hui-card-options.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts
index fe360b298700..391a450a1902 100644
--- a/src/panels/lovelace/components/hui-card-options.ts
+++ b/src/panels/lovelace/components/hui-card-options.ts
@@ -99,6 +99,10 @@ export class HuiCardOptions extends LitElement {
           rgba(0, 0, 0, 0.12) 0px 1px 5px -4px,
           rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
         display: flex;
+        position: relative;
+        border-radius: var(--ha-card-border-radius, 2px);
+        margin-top: -1px;
+        border-radius: 0px 0px 2px 2px;
       }
 
       div.options .primary-actions {

From 4d387c90f25fcd144d247241fded00f24b0816f3 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Tue, 4 Feb 2020 12:44:50 -0500
Subject: [PATCH 2/3] Radius Updates

---
 src/panels/lovelace/components/hui-card-options.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts
index 391a450a1902..5f1531a3820c 100644
--- a/src/panels/lovelace/components/hui-card-options.ts
+++ b/src/panels/lovelace/components/hui-card-options.ts
@@ -100,9 +100,9 @@ export class HuiCardOptions extends LitElement {
           rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
         display: flex;
         position: relative;
-        border-radius: var(--ha-card-border-radius, 2px);
         margin-top: -1px;
-        border-radius: 0px 0px 2px 2px;
+        border-radius: 0px 0px var(--ha-card-border-radius, 2px)
+          var(--ha-card-border-radius, 2px);
       }
 
       div.options .primary-actions {

From 642c2df5459a3f3a6f7a8785150e44c6a5ba506a Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Wed, 5 Feb 2020 14:31:23 -0500
Subject: [PATCH 3/3] Updating to be a ha-card element

---
 .../lovelace/components/hui-card-options.ts   | 117 +++++++++---------
 1 file changed, 60 insertions(+), 57 deletions(-)

diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts
index 5f1531a3820c..1223354fddbb 100644
--- a/src/panels/lovelace/components/hui-card-options.ts
+++ b/src/panels/lovelace/components/hui-card-options.ts
@@ -33,76 +33,79 @@ export class HuiCardOptions extends LitElement {
   protected render(): TemplateResult {
     return html`
       <slot></slot>
-      <div class="options">
-        <div class="primary-actions">
-          <mwc-button @click="${this._editCard}"
-            >${this.hass!.localize(
-              "ui.panel.lovelace.editor.edit_card.edit"
-            )}</mwc-button
-          >
-        </div>
-        <div class="secondary-actions">
-          <paper-icon-button
-            title="Move card down"
-            class="move-arrow"
-            icon="hass:arrow-down"
-            @click="${this._cardDown}"
-            ?disabled="${this.lovelace!.config.views[this.path![0]].cards!
-              .length ===
-              this.path![1] + 1}"
-          ></paper-icon-button>
-          <paper-icon-button
-            title="Move card up"
-            class="move-arrow"
-            icon="hass:arrow-up"
-            @click="${this._cardUp}"
-            ?disabled="${this.path![1] === 0}"
-          ></paper-icon-button>
-          <paper-menu-button
-            horizontal-align="right"
-            vertical-align="bottom"
-            vertical-offset="40"
-            close-on-activate
-          >
+      <ha-card>
+        <div class="options">
+          <div class="primary-actions">
+            <mwc-button @click="${this._editCard}"
+              >${this.hass!.localize(
+                "ui.panel.lovelace.editor.edit_card.edit"
+              )}</mwc-button
+            >
+          </div>
+          <div class="secondary-actions">
+            <paper-icon-button
+              title="Move card down"
+              class="move-arrow"
+              icon="hass:arrow-down"
+              @click="${this._cardDown}"
+              ?disabled="${this.lovelace!.config.views[this.path![0]].cards!
+                .length ===
+                this.path![1] + 1}"
+            ></paper-icon-button>
             <paper-icon-button
-              icon="hass:dots-vertical"
-              slot="dropdown-trigger"
-              aria-label=${this.hass!.localize(
-                "ui.panel.lovelace.editor.edit_card.options"
-              )}
+              title="Move card up"
+              class="move-arrow"
+              icon="hass:arrow-up"
+              @click="${this._cardUp}"
+              ?disabled="${this.path![1] === 0}"
             ></paper-icon-button>
-            <paper-listbox slot="dropdown-content">
-              <paper-item @tap="${this._moveCard}">
-                ${this.hass!.localize(
-                  "ui.panel.lovelace.editor.edit_card.move"
-                )}</paper-item
-              >
-              <paper-item .class="delete-item" @tap="${this._deleteCard}">
-                ${this.hass!.localize(
-                  "ui.panel.lovelace.editor.edit_card.delete"
-                )}</paper-item
-              >
-            </paper-listbox>
-          </paper-menu-button>
+            <paper-menu-button
+              horizontal-align="right"
+              vertical-align="bottom"
+              vertical-offset="40"
+              close-on-activate
+            >
+              <paper-icon-button
+                icon="hass:dots-vertical"
+                slot="dropdown-trigger"
+                aria-label=${this.hass!.localize(
+                  "ui.panel.lovelace.editor.edit_card.options"
+                )}
+              ></paper-icon-button>
+              <paper-listbox slot="dropdown-content">
+                <paper-item @tap="${this._moveCard}">
+                  ${this.hass!.localize(
+                    "ui.panel.lovelace.editor.edit_card.move"
+                  )}</paper-item
+                >
+                <paper-item .class="delete-item" @tap="${this._deleteCard}">
+                  ${this.hass!.localize(
+                    "ui.panel.lovelace.editor.edit_card.delete"
+                  )}</paper-item
+                >
+              </paper-listbox>
+            </paper-menu-button>
+          </div>
         </div>
-      </div>
+      </ha-card>
     `;
   }
 
   static get styles(): CSSResult {
     return css`
-      div.options {
-        border-top: 1px solid #e8e8e8;
-        padding: 5px 8px;
-        background: var(--paper-card-background-color, white);
+      ha-card {
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
         box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
           rgba(0, 0, 0, 0.12) 0px 1px 5px -4px,
           rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
+      }
+
+      div.options {
+        border-top: 1px solid #e8e8e8;
+        padding: 5px 8px;
         display: flex;
-        position: relative;
         margin-top: -1px;
-        border-radius: 0px 0px var(--ha-card-border-radius, 2px)
-          var(--ha-card-border-radius, 2px);
       }
 
       div.options .primary-actions {