From 2c08cba8cca3bf2e253d55b8394bd8cd7115153f Mon Sep 17 00:00:00 2001
From: Philip Allgaier <mail@spacegaier.de>
Date: Tue, 4 May 2021 22:04:27 +0200
Subject: [PATCH] Draw a `<hr>` above the attributes in more-info (#9090)

---
 src/components/ha-attributes.ts               | 21 ++++++++++++++-----
 .../controls/more-info-automation.ts          |  6 ++++++
 .../more-info/controls/more-info-light.ts     |  8 +++----
 .../more-info/controls/more-info-script.ts    |  6 ++++++
 .../more-info/controls/more-info-sun.ts       |  6 ++++++
 .../controls/more-info-water_heater.js        |  1 -
 6 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/components/ha-attributes.ts b/src/components/ha-attributes.ts
index 59d4deaf58..e18910ef1d 100644
--- a/src/components/ha-attributes.ts
+++ b/src/components/ha-attributes.ts
@@ -27,13 +27,19 @@ class HaAttributes extends LitElement {
       return html``;
     }
 
+    const attributes = this.computeDisplayAttributes(
+      Object.keys(hassAttributeUtil.LOGIC_STATE_ATTRIBUTES).concat(
+        this.extraFilters ? this.extraFilters.split(",") : []
+      )
+    );
+    if (attributes.length === 0) {
+      return html``;
+    }
+
     return html`
+      <hr />
       <div>
-        ${this.computeDisplayAttributes(
-          Object.keys(hassAttributeUtil.LOGIC_STATE_ATTRIBUTES).concat(
-            this.extraFilters ? this.extraFilters.split(",") : []
-          )
-        ).map(
+        ${attributes.map(
           (attribute) => html`
             <div class="data-entry">
               <div class="key">${formatAttributeName(attribute)}</div>
@@ -80,6 +86,11 @@ class HaAttributes extends LitElement {
           overflow-wrap: break-word;
           white-space: pre-line;
         }
+        hr {
+          border-color: var(--divider-color);
+          border-bottom: none;
+          margin: 16px 0;
+        }
       `,
     ];
   }
diff --git a/src/dialogs/more-info/controls/more-info-automation.ts b/src/dialogs/more-info/controls/more-info-automation.ts
index d71eb25b10..293b56f6ad 100644
--- a/src/dialogs/more-info/controls/more-info-automation.ts
+++ b/src/dialogs/more-info/controls/more-info-automation.ts
@@ -26,6 +26,7 @@ class MoreInfoAutomation extends LitElement {
     }
 
     return html`
+      <hr />
       <div class="flex">
         <div>${this.hass.localize("ui.card.automation.last_triggered")}:</div>
         <ha-relative-time
@@ -61,6 +62,11 @@ class MoreInfoAutomation extends LitElement {
         flex-wrap: wrap;
         justify-content: center;
       }
+      hr {
+        border-color: var(--divider-color);
+        border-bottom: none;
+        margin: 16px 0;
+      }
     `;
   }
 }
diff --git a/src/dialogs/more-info/controls/more-info-light.ts b/src/dialogs/more-info/controls/more-info-light.ts
index daf66fc3f2..4118e557cb 100644
--- a/src/dialogs/more-info/controls/more-info-light.ts
+++ b/src/dialogs/more-info/controls/more-info-light.ts
@@ -102,7 +102,7 @@ class MoreInfoLight extends LitElement {
           : ""}
         ${this.stateObj.state === "on"
           ? html`
-              ${supportsTemp || supportsColor ? html`<hr></hr>` : ""}
+              ${supportsTemp || supportsColor ? html`<hr />` : ""}
               ${supportsTemp && supportsColor
                 ? html`<ha-button-toggle-group
                     fullWidth
@@ -205,7 +205,7 @@ class MoreInfoLight extends LitElement {
               ${supportsFeature(this.stateObj, SUPPORT_EFFECT) &&
               this.stateObj!.attributes.effect_list?.length
                 ? html`
-                    <hr></hr>
+                    <hr />
                     <ha-paper-dropdown-menu
                       .label=${this.hass.localize("ui.card.light.effect")}
                     >
@@ -560,7 +560,7 @@ class MoreInfoLight extends LitElement {
       }
 
       ha-button-toggle-group {
-        margin: 8px 0px;
+        margin-bottom: 8px;
       }
 
       ha-color-picker {
@@ -585,7 +585,7 @@ class MoreInfoLight extends LitElement {
       hr {
         border-color: var(--divider-color);
         border-bottom: none;
-        margin: 8px 0;
+        margin: 16px 0;
       }
     `;
   }
diff --git a/src/dialogs/more-info/controls/more-info-script.ts b/src/dialogs/more-info/controls/more-info-script.ts
index 2f4b93eefe..1c364318b9 100644
--- a/src/dialogs/more-info/controls/more-info-script.ts
+++ b/src/dialogs/more-info/controls/more-info-script.ts
@@ -23,6 +23,7 @@ class MoreInfoScript extends LitElement {
     }
 
     return html`
+      <hr />
       <div class="flex">
         <div>
           ${this.hass.localize(
@@ -47,6 +48,11 @@ class MoreInfoScript extends LitElement {
         display: flex;
         justify-content: space-between;
       }
+      hr {
+        border-color: var(--divider-color);
+        border-bottom: none;
+        margin: 16px 0;
+      }
     `;
   }
 }
diff --git a/src/dialogs/more-info/controls/more-info-sun.ts b/src/dialogs/more-info/controls/more-info-sun.ts
index ff20693f70..22904234d5 100644
--- a/src/dialogs/more-info/controls/more-info-sun.ts
+++ b/src/dialogs/more-info/controls/more-info-sun.ts
@@ -29,6 +29,7 @@ class MoreInfoSun extends LitElement {
     const order = risingDate > settingDate ? ["set", "ris"] : ["ris", "set"];
 
     return html`
+      <hr />
       ${order.map(
         (item) => html`
           <div class="row">
@@ -82,6 +83,11 @@ class MoreInfoSun extends LitElement {
       ha-relative-time::first-letter {
         text-transform: lowercase;
       }
+      hr {
+        border-color: var(--divider-color);
+        border-bottom: none;
+        margin: 16px 0;
+      }
     `;
   }
 }
diff --git a/src/dialogs/more-info/controls/more-info-water_heater.js b/src/dialogs/more-info/controls/more-info-water_heater.js
index e17f264e67..0a8c006006 100644
--- a/src/dialogs/more-info/controls/more-info-water_heater.js
+++ b/src/dialogs/more-info/controls/more-info-water_heater.js
@@ -50,7 +50,6 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
         .single-row {
           padding: 8px 0;
         }
-        }
       </style>
 
       <div class$="[[computeClassNames(stateObj)]]">