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] 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;
   }