From 6e38f5accfefa918d9a6dad0227b2ca100e892c2 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 30 Aug 2021 10:38:33 +0200
Subject: [PATCH] Align entity errors (#9904)

---
 src/panels/lovelace/cards/hui-glance-card.ts  | 46 +++++++++++++++++--
 .../lovelace/cards/hui-picture-glance-card.ts |  3 ++
 .../components/hui-warning-element.ts         | 11 +++--
 3 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts
index 87265c6d81..d308df7b4e 100644
--- a/src/panels/lovelace/cards/hui-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-glance-card.ts
@@ -192,6 +192,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
         padding: 0 16px 4px;
         flex-wrap: wrap;
         box-sizing: border-box;
+        align-items: center;
         align-content: center;
       }
       .entities.no-header {
@@ -224,9 +225,31 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
       .name {
         min-height: var(--paper-font-body1_-_line-height, 20px);
       }
+      .warning {
+        cursor: default;
+        position: relative;
+        padding: 8px;
+        width: calc(var(--glance-column-width, 20%) - 4px);
+        margin: 0 2px;
+      }
+      .warning::before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        opacity: 0.12;
+        pointer-events: none;
+        content: "";
+        border-radius: 4px;
+        background-color: var(--warning-color);
+      }
       state-badge {
         margin: 8px 0;
       }
+      hui-warning-element {
+        padding: 8px;
+      }
     `;
   }
 
@@ -234,11 +257,24 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
     const stateObj = this.hass!.states[entityConf.entity];
 
     if (!stateObj) {
-      return html`
-        <hui-warning-element
-          .label=${createEntityNotFoundWarning(this.hass!, entityConf.entity)}
-        ></hui-warning-element>
-      `;
+      return html`<div class="entity warning">
+        ${this._config!.show_name
+          ? html`
+              <div class="name">
+                ${createEntityNotFoundWarning(this.hass!, entityConf.entity)}
+              </div>
+            `
+          : ""}
+        ${this._config!.show_icon
+          ? html` <hui-warning-element
+              .label=${createEntityNotFoundWarning(
+                this.hass!,
+                entityConf.entity
+              )}
+            ></hui-warning-element>`
+          : ""}
+        <div>${this._config!.show_state ? entityConf.entity : ""}</div>
+      </div>`;
     }
 
     return html`
diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts
index e5c7281edd..4a29f5679f 100644
--- a/src/panels/lovelace/cards/hui-picture-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts
@@ -337,6 +337,9 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
       ha-icon-button.state-on {
         color: var(--ha-picture-icon-button-on-color, white);
       }
+      hui-warning-element {
+        padding: 0 8px;
+      }
       .state {
         display: block;
         font-size: 12px;
diff --git a/src/panels/lovelace/components/hui-warning-element.ts b/src/panels/lovelace/components/hui-warning-element.ts
index 85a99c0217..a8a163b891 100644
--- a/src/panels/lovelace/components/hui-warning-element.ts
+++ b/src/panels/lovelace/components/hui-warning-element.ts
@@ -1,19 +1,22 @@
+import { mdiAlertOutline } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../components/ha-icon";
+import "../../../components/ha-svg-icon";
 
 @customElement("hui-warning-element")
 export class HuiWarningElement extends LitElement {
   @property() public label?: string;
 
   protected render(): TemplateResult {
-    return html` <ha-icon icon="hass:alert" .title=${this.label}></ha-icon> `;
+    return html`
+      <ha-svg-icon .path=${mdiAlertOutline} .title=${this.label}></ha-svg-icon>
+    `;
   }
 
   static get styles(): CSSResultGroup {
     return css`
-      ha-icon {
-        color: #fce588;
+      ha-svg-icon {
+        color: var(--warning-color);
       }
     `;
   }