From ef39a58276a288e05dece51b3219d341f7383638 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 21 Nov 2019 12:22:11 +0100
Subject: [PATCH 1/3] Fix thermostat card

---
 .../lovelace/cards/hui-thermostat-card.ts     | 31 ++++++++-----------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index 08bb5dcf6151..d389b7dd5085 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -14,7 +14,6 @@ import "@polymer/paper-icon-button/paper-icon-button";
 import "@thomasloven/round-slider";
 
 import "../../../components/ha-card";
-import "../../../components/ha-icon";
 import "../components/hui-warning";
 import "../components/hui-unavailable";
 
@@ -34,7 +33,6 @@ import {
   CLIMATE_PRESET_NONE,
 } from "../../../data/climate";
 import { HassEntity } from "home-assistant-js-websocket";
-import { actionHandler } from "../common/directives/action-handler-directive";
 
 const modeIcons: { [mode in HvacMode]: string } = {
   auto: "hass:calendar-repeat",
@@ -149,7 +147,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
     const setValues = svg`
       <svg id="set-values">
         <g>
-          <text text-anchor="middle" style="font-size: 20px;" class="set-value">
+          <text text-anchor="middle" class="set-value">
             ${
               !this._setTemp
                 ? ""
@@ -166,7 +164,6 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
           <text
             dy="22"
             text-anchor="middle"
-            style="font-size: 16px"
             id="set-mode"
           >
             ${
@@ -355,14 +352,13 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
       return html``;
     }
     return html`
-      <ha-icon
+      <paper-icon-button
         class="${classMap({ "selected-icon": currentMode === mode })}"
         .mode="${mode}"
         .icon="${modeIcons[mode]}"
-        @action="${this._handleModeClick}"
-        .actionHandler=${actionHandler()}
+        @click="${this._handleModeClick}"
         tabindex="0"
-      ></ha-icon>
+      ></paper-icon-button>
     `;
   }
 
@@ -455,7 +451,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
         height: 100%;
         width: 100%;
         position: relative;
-        max-width: 300px;
+        max-width: 250px;
         min-width: 100px;
       }
 
@@ -490,10 +486,12 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
       #set-values {
         max-width: 80%;
         transform: translate(0, -50%);
+        font-size: 20px;
       }
 
       #set-mode {
         fill: var(--secondary-text-color);
+        font-size: 16px;
       }
 
       #info {
@@ -505,24 +503,21 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
         font-size: var(--name-font-size);
       }
 
-      #modes {
-      }
-
-      #modes ha-icon {
+      #modes > * {
         color: var(--disabled-text-color);
         cursor: pointer;
         display: inline-block;
         margin: 0 10px;
         border-radius: 100%;
       }
-      #modes ha-icon:focus {
-        outline: none;
-        background: var(--divider-color);
-      }
 
-      #modes ha-icon.selected-icon {
+      #modes *.selected-icon {
         color: var(--mode-color);
       }
+
+      text {
+        fill: var(--primary-text-color);
+      }
     `;
   }
 }

From 5a4c2f72ea386950ff54e25ebb060a40a51bd4b9 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 21 Nov 2019 12:45:20 +0100
Subject: [PATCH 2/3] Change styling

---
 src/panels/lovelace/cards/hui-thermostat-card.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index d389b7dd5085..f7ee4569e52b 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -130,13 +130,14 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
       ? svg`
           <svg viewBox="0 0 40 20">
             <text
-              x=${23 - (stateObj.attributes.current_temperature < 0 ? 2 : 0)}
-              y="75%"
+              x="50%"
+              dx="1"
+              y="60%"
               text-anchor="middle"
-              style="font-size: 15px;"
+              style="font-size: 13px;"
             >
               ${stateObj.attributes.current_temperature}
-              <tspan dx="-4" dy="-7" style="font-size: 5px;">
+              <tspan dx="-3" dy="-6.5" style="font-size: 4px;">
                 ${this.hass.config.unit_system.temperature}
               </tspan>
             </text>
@@ -508,10 +509,9 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
         cursor: pointer;
         display: inline-block;
         margin: 0 10px;
-        border-radius: 100%;
       }
 
-      #modes *.selected-icon {
+      #modes .selected-icon {
         color: var(--mode-color);
       }
 

From afdd9daa539b0f984014cf7ad8d3e184d77ddd1d Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 21 Nov 2019 12:52:17 +0100
Subject: [PATCH 3/3] Remove margin on mode buttons

---
 src/panels/lovelace/cards/hui-thermostat-card.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index f7ee4569e52b..2b4602bc29e1 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -508,7 +508,6 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
         color: var(--disabled-text-color);
         cursor: pointer;
         display: inline-block;
-        margin: 0 10px;
       }
 
       #modes .selected-icon {