From cedff0568411089d3f1e2508a5615ed5a5743ebd Mon Sep 17 00:00:00 2001
From: William Scanlon <scanlonw1@gmail.com>
Date: Mon, 29 Feb 2016 12:56:40 -0500
Subject: [PATCH 1/5] Change color based on online status

---
 src/components/entity/state-badge.html | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/entity/state-badge.html b/src/components/entity/state-badge.html
index 651d6aae9c..fabce4dd11 100644
--- a/src/components/entity/state-badge.html
+++ b/src/components/entity/state-badge.html
@@ -27,11 +27,18 @@
   ha-state-icon[data-domain=sun][data-state=above_horizon] {
     color: #DCC91F;
   }
+
+  /* Color the icon if entity is offline */
+  ha-state-icon[data-domain=light][data-online=offline],
+  ha-state-icon[data-domain=switch][data-online=offline],
+  ha-state-icon[data-domain=binary_sensor][data-online=offline] {
+    color: #D3D3D3;
+  }
   </style>
 
   <template>
     <ha-state-icon id='icon' state-obj='[[stateObj]]'
-      data-domain$='[[stateObj.domain]]' data-state$='[[stateObj.state]]'>
+      data-domain$='[[stateObj.domain]]' data-state$='[[stateObj.state]]' data-online$='[[stateObj.online]]'>
     </ha-state-icon>
   </template>
 </dom-module>

From fefa4e6d5cc9ecb60b3519083f3ab057743f3e9f Mon Sep 17 00:00:00 2001
From: William Scanlon <scanlonw1@gmail.com>
Date: Tue, 1 Mar 2016 11:39:08 -0500
Subject: [PATCH 2/5] Display error icon if unavailable

---
 src/components/entity/state-badge.html | 8 +-------
 src/util/state-icon.js                 | 5 +++++
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/entity/state-badge.html b/src/components/entity/state-badge.html
index fabce4dd11..fd186a2104 100644
--- a/src/components/entity/state-badge.html
+++ b/src/components/entity/state-badge.html
@@ -28,17 +28,11 @@
     color: #DCC91F;
   }
 
-  /* Color the icon if entity is offline */
-  ha-state-icon[data-domain=light][data-online=offline],
-  ha-state-icon[data-domain=switch][data-online=offline],
-  ha-state-icon[data-domain=binary_sensor][data-online=offline] {
-    color: #D3D3D3;
-  }
   </style>
 
   <template>
     <ha-state-icon id='icon' state-obj='[[stateObj]]'
-      data-domain$='[[stateObj.domain]]' data-state$='[[stateObj.state]]' data-online$='[[stateObj.online]]'>
+      data-domain$='[[stateObj.domain]]' data-state$='[[stateObj.state]]'>
     </ha-state-icon>
   </template>
 </dom-module>
diff --git a/src/util/state-icon.js b/src/util/state-icon.js
index fceebd6fe9..ee50b8d2da 100644
--- a/src/util/state-icon.js
+++ b/src/util/state-icon.js
@@ -6,6 +6,9 @@ const { util: { temperatureUnits } } = hass;
 
 function binarySensorIcon(state) {
   const activated = state.state && state.state === 'off';
+  if (state.state && state.state === 'unavailable') {
+    return 'mdi:alert-circle-outline';
+  }
   switch (state.attributes.sensor_class) {
     case 'opening':
       return activated ? 'mdi:crop-square' : 'mdi:exit-to-app';
@@ -33,6 +36,8 @@ function binarySensorIcon(state) {
 export default function stateIcon(state) {
   if (!state) {
     return defaultIcon;
+  } else if (state.state && state.state === 'unavailable') {
+    return 'mdi:alert-circle-outline';
   } else if (state.attributes.icon) {
     return state.attributes.icon;
   }

From e8d9bfd33c220762c87b4562b23b09ae414d508d Mon Sep 17 00:00:00 2001
From: William Scanlon <scanlonw1@gmail.com>
Date: Tue, 1 Mar 2016 11:40:31 -0500
Subject: [PATCH 3/5] Display error icon if unavailable

---
 src/components/entity/state-badge.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/entity/state-badge.html b/src/components/entity/state-badge.html
index fd186a2104..651d6aae9c 100644
--- a/src/components/entity/state-badge.html
+++ b/src/components/entity/state-badge.html
@@ -27,7 +27,6 @@
   ha-state-icon[data-domain=sun][data-state=above_horizon] {
     color: #DCC91F;
   }
-
   </style>
 
   <template>

From 6dd7d9d1589c68a89d7f444670bac6ca95fcbc22 Mon Sep 17 00:00:00 2001
From: William Scanlon <scanlonw1@gmail.com>
Date: Tue, 1 Mar 2016 12:02:13 -0500
Subject: [PATCH 4/5] Remove condition from binary sensor

---
 src/util/state-icon.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/util/state-icon.js b/src/util/state-icon.js
index ee50b8d2da..d26d28c24e 100644
--- a/src/util/state-icon.js
+++ b/src/util/state-icon.js
@@ -6,9 +6,6 @@ const { util: { temperatureUnits } } = hass;
 
 function binarySensorIcon(state) {
   const activated = state.state && state.state === 'off';
-  if (state.state && state.state === 'unavailable') {
-    return 'mdi:alert-circle-outline';
-  }
   switch (state.attributes.sensor_class) {
     case 'opening':
       return activated ? 'mdi:crop-square' : 'mdi:exit-to-app';

From c95e7dae4a4c29fb98fa7de8267929924e48a0f6 Mon Sep 17 00:00:00 2001
From: William Scanlon <scanlonw1@gmail.com>
Date: Fri, 4 Mar 2016 13:48:38 -0500
Subject: [PATCH 5/5] Fade icon to grey for all entities it unavailable

---
 src/components/entity/ha-entity-toggle.js | 3 ++-
 src/components/entity/state-badge.html    | 8 ++++++++
 src/util/state-icon.js                    | 2 --
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/entity/ha-entity-toggle.js b/src/components/entity/ha-entity-toggle.js
index 0bd1309771..556dac110f 100644
--- a/src/components/entity/ha-entity-toggle.js
+++ b/src/components/entity/ha-entity-toggle.js
@@ -59,7 +59,8 @@ export default new Polymer({
 
   computeIsOn(stateObj) {
     return stateObj && stateObj.state !== 'off' &&
-      stateObj.state !== 'unlocked' && stateObj.state !== 'closed';
+      stateObj.state !== 'unlocked' && stateObj.state !== 'closed' &&
+      stateObj.state !== 'unavailable';
   },
 
   // We call updateToggle after a successful call to re-sync the toggle
diff --git a/src/components/entity/state-badge.html b/src/components/entity/state-badge.html
index 651d6aae9c..6ddb6e97ef 100644
--- a/src/components/entity/state-badge.html
+++ b/src/components/entity/state-badge.html
@@ -27,6 +27,14 @@
   ha-state-icon[data-domain=sun][data-state=above_horizon] {
     color: #DCC91F;
   }
+
+  /* Color the icon if unavailable */
+  ha-state-icon[data-domain=light][data-state=unavailable],
+  ha-state-icon[data-domain=switch][data-state=unavailable],
+  ha-state-icon[data-domain=binary_sensor][data-state=unavailable],
+  ha-state-icon[data-domain=sensor][data-state=unavailable] {
+    color: #D3D3D3;
+  }
   </style>
 
   <template>
diff --git a/src/util/state-icon.js b/src/util/state-icon.js
index d26d28c24e..fceebd6fe9 100644
--- a/src/util/state-icon.js
+++ b/src/util/state-icon.js
@@ -33,8 +33,6 @@ function binarySensorIcon(state) {
 export default function stateIcon(state) {
   if (!state) {
     return defaultIcon;
-  } else if (state.state && state.state === 'unavailable') {
-    return 'mdi:alert-circle-outline';
   } else if (state.attributes.icon) {
     return state.attributes.icon;
   }