Merge pull request #460 from flixlix/439-spacing-between-icon-and-secondary_info-entity-on-the-grid-is-smaller-than-other-similar-locations

refactor: 🎨 use gap instead of random padding-top/bottom

Author: flixlix

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!);
         }}

src/components/individualLeftBottomElement.ts

@@ -66,11 +66,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"

src/components/individualLeftTopElement.ts

@@ -38,14 +38,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

src/components/individualRightBottomElement.ts

@@ -46,14 +46,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

src/components/individualRightTopElement.ts

@@ -50,10 +50,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">

src/components/nonFossil.ts

@@ -38,15 +38,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`

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>`
         : ""}

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 */
   }