From 0cb4085c1043d4eebb6e131aabfc07f9305fc144 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luca=20F=C3=A9lix?= <luca.ziegler.felix@gmail.com>
Date: Mon, 15 Jan 2024 00:08:49 +0100
Subject: [PATCH] refactor: :art: use gap instead of random padding-top/bottom

---
 src/components/battery.ts                      |  5 -----
 src/components/individualLeftBottomElement.ts  |  5 -----
 src/components/individualLeftTopElement.ts     |  9 +--------
 src/components/individualRightBottomElement.ts |  9 +--------
 src/components/individualRightTopElement.ts    |  5 +----
 src/components/nonFossil.ts                    | 10 +---------
 src/components/solar.ts                        |  7 +------
 src/style.ts                                   |  1 +
 8 files changed, 6 insertions(+), 45 deletions(-)

diff --git a/src/components/battery.ts b/src/components/battery.ts
index 2834094..c35944f 100644
--- a/src/components/battery.ts
+++ b/src/components/battery.ts
@@ -58,11 +58,6 @@ export const batteryElement = (
         : null}
       <ha-icon
         .icon=${battery.icon}
-        style=${entities.battery?.display_state === "two_way"
-          ? "padding-top: 0px; padding-bottom: 2px;"
-          : entities.battery?.display_state === "one_way_no_zero" && battery.state.toBattery === 0 && battery.state.fromBattery === 0
-          ? "padding-top: 2px; padding-bottom: 0px;"
-          : "padding-top: 2px; padding-bottom: 2px;"}
         @click=${(e: { stopPropagation: () => void }) => {
           main.openDetails(e, entities.battery?.state_of_charge!);
         }}
diff --git a/src/components/individualLeftBottomElement.ts b/src/components/individualLeftBottomElement.ts
index 83e67cc..91c954b 100644
--- a/src/components/individualLeftBottomElement.ts
+++ b/src/components/individualLeftBottomElement.ts
@@ -65,11 +65,6 @@ export const individualLeftBottomElement = (
       <ha-icon
         id="individual-left-bottom-icon"
         .icon=${individualObj?.icon}
-        style="${individualObj?.secondary?.has ? "padding-top: 2px;" : "padding-top: 0px;"}
-                          ${individualObj?.field?.display_zero_state !== false ||
-        (individualObj?.state || 0) > (individualObj.displayZeroTolerance ?? 0)
-          ? "padding-bottom: 2px;"
-          : "padding-bottom: 0px;"}"
       ></ha-icon>
       ${individualObj?.field?.display_zero_state !== false || (individualObj?.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-bottom individual-left-top"
diff --git a/src/components/individualLeftTopElement.ts b/src/components/individualLeftTopElement.ts
index a71d276..a0f4da1 100644
--- a/src/components/individualLeftTopElement.ts
+++ b/src/components/individualLeftTopElement.ts
@@ -37,14 +37,7 @@ export const individualLeftTopElement = (
       }}
     >
       ${individualSecondarySpan(main.hass, main, templatesObj, individualObj, 0, "left-top")}
-      <ha-icon
-        id="individual-left-top-icon"
-        .icon=${individualObj.icon}
-        style="${individualObj?.secondary?.has ? "padding-top: 2px;" : "padding-top: 0px;"}
-      ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
-          ? "padding-bottom: 2px;"
-          : "padding-bottom: 0px;"}"
-      ></ha-icon>
+      <ha-icon id="individual-left-top-icon" .icon=${individualObj.icon}></ha-icon>
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-top individual-left-top">
             ${individualObj?.showDirection
diff --git a/src/components/individualRightBottomElement.ts b/src/components/individualRightBottomElement.ts
index 07846e7..35b805d 100644
--- a/src/components/individualRightBottomElement.ts
+++ b/src/components/individualRightBottomElement.ts
@@ -45,14 +45,7 @@ export const individualRightBottomElement = (
       }}
     >
       ${individualSecondarySpan(main.hass, main, templatesObj, individualObj, 3, "right-bottom")}
-      <ha-icon
-        id="individual-right-bottom-icon"
-        .icon=${individualObj.icon}
-        style="${individualObj?.secondary?.has ? "padding-top: 2px;" : "padding-top: 0px;"}
-      ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
-          ? "padding-bottom: 2px;"
-          : "padding-bottom: 0px;"}"
-      ></ha-icon>
+      <ha-icon id="individual-right-bottom-icon" .icon=${individualObj.icon}></ha-icon>
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-bottom individual-right-bottom">
             ${individualObj?.showDirection
diff --git a/src/components/individualRightTopElement.ts b/src/components/individualRightTopElement.ts
index 8bc9460..d064ee4 100644
--- a/src/components/individualRightTopElement.ts
+++ b/src/components/individualRightTopElement.ts
@@ -49,10 +49,7 @@ export const individualRightTopElement = (
       <ha-icon
         id="individual-right-top-icon"
         .icon=${individualObj.icon}
-        style="${individualObj?.secondary?.has ? "padding-top: 2px;" : "padding-top: 0px;"}
-      ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
-          ? "padding-bottom: 2px;"
-          : "padding-bottom: 0px;"}"
+        
       ></ha-icon>
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-top individual-right-top">
diff --git a/src/components/nonFossil.ts b/src/components/nonFossil.ts
index d690bbc..983d22b 100644
--- a/src/components/nonFossil.ts
+++ b/src/components/nonFossil.ts
@@ -37,15 +37,7 @@ export const nonFossilElement = (
           }}
         >
           ${generalSecondarySpan(main.hass, main, templatesObj, nonFossil, "low-carbon")}
-          <ha-icon
-            .icon=${nonFossil.icon}
-            class="low-carbon"
-            style="${nonFossil.secondary.has ? "padding-top: 2px;" : "padding-top: 0px;"}
-            ${entities.fossil_fuel_percentage?.display_zero_state !== false ||
-            (nonFossil.state.power || 0) > (entities.fossil_fuel_percentage?.display_zero_tolerance || 0)
-              ? "padding-bottom: 2px;"
-              : "padding-bottom: 0px;"}"
-          ></ha-icon>
+          <ha-icon .icon=${nonFossil.icon} class="low-carbon"></ha-icon>
           ${entities.fossil_fuel_percentage?.display_zero_state !== false ||
           (nonFossil.state.power || 0) > (entities.fossil_fuel_percentage?.display_zero_tolerance || 0)
             ? html`
diff --git a/src/components/solar.ts b/src/components/solar.ts
index 9283cef..0303d45 100644
--- a/src/components/solar.ts
+++ b/src/components/solar.ts
@@ -31,12 +31,7 @@ export const solarElement = (
       }}
     >
       ${generalSecondarySpan(main.hass, main, templatesObj, solar, "solar")}
-      <ha-icon
-        id="solar-icon"
-        .icon=${solar.icon}
-        style="${solar.secondary.has ? "padding-top: 2px;" : "padding-top: 0px;"}
-      ${entities.solar?.display_zero_state !== false || (solar.state.total || 0) > 0 ? "padding-bottom: 2px;" : "padding-bottom: 0px;"}"
-      ></ha-icon>
+      <ha-icon id="solar-icon" .icon=${solar.icon}></ha-icon>
       ${entities.solar?.display_zero_state !== false || (solar.state.total || 0) > 0
         ? html` <span class="solar"> ${displayValue(main.hass, solar.state.total as number)}</span>`
         : ""}
diff --git a/src/style.ts b/src/style.ts
index 2d4993d..4610bc1 100644
--- a/src/style.ts
+++ b/src/style.ts
@@ -88,6 +88,7 @@ export const styles = css`
     position: relative;
     text-decoration: none;
     color: var(--primary-text-color);
+    gap: 2px;
     // background-color: var(--card-background-color); /* hide overflowing lines behind background */
   }