From 833ccf363768c9aecf35dfec5d8b90c09c0c2283 Mon Sep 17 00:00:00 2001
From: Yosi Levy <37745463+yosilevy@users.noreply.github.com>
Date: Sat, 11 Jul 2020 19:06:39 +0300
Subject: [PATCH] Card picker improvements (#6361)

---
 .../editor/card-editor/hui-card-picker.ts     | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
index 9fdf96e464..c9b7b8b963 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
@@ -116,16 +116,16 @@ export class HuiCardPicker extends LitElement {
             @click=${this._cardPicked}
             .config=${{ type: "" }}
           >
-            <div class="preview description">
-              ${this.hass!.localize(
-                `ui.panel.lovelace.editor.card.generic.manual_description`
-              )}
-            </div>
             <div class="card-header">
               ${this.hass!.localize(
                 `ui.panel.lovelace.editor.card.generic.manual`
               )}
             </div>
+            <div class="preview description">
+              ${this.hass!.localize(
+                `ui.panel.lovelace.editor.card.generic.manual_description`
+              )}
+            </div>
           </div>
         </div>
       </div>
@@ -255,6 +255,7 @@ export class HuiCardPicker extends LitElement {
           color: var(--ha-card-header-color, --primary-text-color);
           font-family: var(--ha-card-header-font-family, inherit);
           font-size: 16px;
+          font-weight: bold;
           letter-spacing: -0.012em;
           line-height: 20px;
           padding: 12px 16px;
@@ -265,7 +266,7 @@ export class HuiCardPicker extends LitElement {
             var(--paper-card-background-color, white)
           );
           border-radius: 0 0 4px 4px;
-          border-top: 1px solid var(--divider-color);
+          border-bottom: 1px solid var(--divider-color);
         }
 
         .preview {
@@ -377,6 +378,13 @@ export class HuiCardPicker extends LitElement {
           @click=${this._cardPicked}
           .config=${cardConfig}
         ></div>
+        <div class="card-header">
+          ${customCard
+            ? `${this.hass!.localize(
+                "ui.panel.lovelace.editor.cardpicker.custom_card"
+              )}: ${customCard.name || customCard.type}`
+            : name}
+        </div>
         <div
           class="preview ${classMap({
             description: !element || element.tagName === "HUI-ERROR-CARD",
@@ -391,13 +399,6 @@ export class HuiCardPicker extends LitElement {
               )
             : description}
         </div>
-        <div class="card-header">
-          ${customCard
-            ? `${this.hass!.localize(
-                "ui.panel.lovelace.editor.cardpicker.custom_card"
-              )}: ${customCard.name || customCard.type}`
-            : name}
-        </div>
       </div>
     `;
   }