From cdfec7dc909fc26a3e6c937281f6c70ee38a0845 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Fri, 8 Apr 2016 00:10:39 -0700
Subject: [PATCH] More Material

---
 src/cards/ha-camera-card.html                 |  4 +-
 src/cards/ha-entities-card.html               |  6 +-
 src/cards/ha-introduction-card.html           |  2 +-
 src/components/entity/ha-entity-toggle.html   |  2 +
 src/components/entity/ha-entity-toggle.js     |  8 +++
 src/components/ha-card.html                   |  4 +-
 src/components/logbook-entry.html             |  4 +-
 src/components/state-cards.html               | 62 -------------------
 src/components/state-cards.js                 | 18 ------
 src/components/state-info.html                | 26 ++++----
 src/components/state-info.js                  |  5 ++
 src/dialogs/more-info-dialog.html             |  2 +-
 src/layouts/partial-dev-info.html             |  7 ++-
 .../state-card-configurator.html              | 19 +++++-
 src/state-summary/state-card-configurator.js  |  5 ++
 src/state-summary/state-card-content.js       | 14 ++++-
 src/state-summary/state-card-display.html     |  8 ++-
 src/state-summary/state-card-display.js       |  5 ++
 .../state-card-input_select.html              |  2 +-
 src/state-summary/state-card-input_select.js  |  5 ++
 .../state-card-input_slider.html              |  2 +-
 src/state-summary/state-card-input_slider.js  |  5 ++
 .../state-card-media_player.html              | 15 ++---
 src/state-summary/state-card-media_player.js  |  5 ++
 .../state-card-rollershutter.html             |  2 +-
 src/state-summary/state-card-rollershutter.js |  5 ++
 src/state-summary/state-card-scene.html       | 14 ++---
 src/state-summary/state-card-scene.js         |  8 ++-
 src/state-summary/state-card-script.html      | 14 ++---
 src/state-summary/state-card-script.js        |  8 ++-
 src/state-summary/state-card-thermostat.html  | 13 +---
 src/state-summary/state-card-thermostat.js    |  5 ++
 src/state-summary/state-card-toggle.html      |  4 +-
 src/state-summary/state-card-toggle.js        |  5 ++
 src/state-summary/state-card-weblink.html     | 18 +++---
 src/state-summary/state-card-weblink.js       |  9 +++
 src/state-summary/state-card.html             | 29 ---------
 src/state-summary/state-card.js               | 26 --------
 38 files changed, 179 insertions(+), 216 deletions(-)
 delete mode 100644 src/components/state-cards.html
 delete mode 100644 src/components/state-cards.js
 delete mode 100644 src/state-summary/state-card.html
 delete mode 100644 src/state-summary/state-card.js

diff --git a/src/cards/ha-camera-card.html b/src/cards/ha-camera-card.html
index 067719ab1d..2029fde593 100644
--- a/src/cards/ha-camera-card.html
+++ b/src/cards/ha-camera-card.html
@@ -17,6 +17,7 @@
       border-radius: 2px;
     }
     .caption {
+      @apply(--paper-font-common-nowrap);
       position: absolute;
       left: 0px;
       right: 0px;
@@ -32,9 +33,6 @@
       font-weight: 500;
       line-height: 16px;
       color: white;
-      white-space: nowrap;
-      overflow-x: hidden;
-      text-overflow: ellipsis;
     }
   </style>
   <template>
diff --git a/src/cards/ha-entities-card.html b/src/cards/ha-entities-card.html
index e79e8d2a6a..242b4cadb5 100644
--- a/src/cards/ha-entities-card.html
+++ b/src/cards/ha-entities-card.html
@@ -15,13 +15,13 @@
       cursor: pointer;
     }
     .header {
-      font-size: 24px;
+      @apply(--paper-font-headline);
+      color: var(--primary-text-color);
       padding: 24px 16px 16px;
       text-transform: capitalize;
     }
     .header .name {
-      overflow: hidden;
-      text-overflow: ellipsis;
+      @apply(--paper-font-common-nowrap);
     }
     ha-entity-toggle {
       margin-left: 16px;
diff --git a/src/cards/ha-introduction-card.html b/src/cards/ha-introduction-card.html
index 3f36f21160..deafb12855 100644
--- a/src/cards/ha-introduction-card.html
+++ b/src/cards/ha-introduction-card.html
@@ -5,7 +5,7 @@
 <dom-module id='ha-introduction-card'>
   <style>
     :host {
-      font-size: 14px;
+      @apply(--paper-font-body1)
     }
     a {
       color: var(--dark-primary-color);
diff --git a/src/components/entity/ha-entity-toggle.html b/src/components/entity/ha-entity-toggle.html
index e166cb7344..b46ca595a7 100644
--- a/src/components/entity/ha-entity-toggle.html
+++ b/src/components/entity/ha-entity-toggle.html
@@ -5,6 +5,7 @@
 <dom-module id="ha-entity-toggle">
   <style>
     paper-icon-button {
+      color: var(--primary-text-color);
       transition: color .5s;
     }
     paper-icon-button[state-active] {
@@ -13,6 +14,7 @@
     paper-toggle-button {
       cursor: pointer;
       --paper-toggle-button-label-spacing: 0;
+      padding: 9px 0;
     }
   </style>
   <template>
diff --git a/src/components/entity/ha-entity-toggle.js b/src/components/entity/ha-entity-toggle.js
index c432c8180d..b3bbcab409 100644
--- a/src/components/entity/ha-entity-toggle.js
+++ b/src/components/entity/ha-entity-toggle.js
@@ -25,6 +25,14 @@ export default new Polymer({
     },
   },
 
+  listeners: {
+    tap: 'onTap',
+  },
+
+  onTap(ev) {
+    ev.stopPropagation();
+  },
+
   ready() {
     this.forceStateChange();
   },
diff --git a/src/components/ha-card.html b/src/components/ha-card.html
index fe60d5192f..7626381ab0 100644
--- a/src/components/ha-card.html
+++ b/src/components/ha-card.html
@@ -11,7 +11,9 @@
       background-color: white;
     }
     .header {
-      font-size: 24px;
+      @apply(--paper-font-headline);
+      @apply(--paper-font-common-expensive-kerning);
+      opacity: var(--dark-primary-opacity);
       padding: 24px 16px 16px;
       text-transform: capitalize;
     }
diff --git a/src/components/logbook-entry.html b/src/components/logbook-entry.html
index d83174c1f1..14c8212460 100644
--- a/src/components/logbook-entry.html
+++ b/src/components/logbook-entry.html
@@ -8,6 +8,8 @@
   <style is="custom-style" include="iron-flex"></style>
   <style>
     :host {
+      @apply(--paper-font-body1);
+
       display: block;
       line-height: 2em;
     }
@@ -32,7 +34,7 @@
     }
 
     a {
-      color: var(--accent-color);
+      color: var(--primary-color);
     }
   </style>
   <template>
diff --git a/src/components/state-cards.html b/src/components/state-cards.html
deleted file mode 100644
index 41eca2d2db..0000000000
--- a/src/components/state-cards.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<link rel="import" href="../state-summary/state-card.html">
-
-<dom-module id="state-cards">
-  <style is="custom-style" include="iron-flex"></style>
-  <style>
-  :host {
-    display: block;
-  }
-
-  @media all and (min-width: 1020px) {
-    .state-card {
-      width: calc(50% - 44px);
-      margin: 8px 0 0 8px;
-    }
-  }
-
-  @media all and (min-width: 1356px) {
-    .state-card {
-      width: calc(33% - 38px);
-    }
-  }
-
-  @media all and (min-width: 1706px) {
-    .state-card {
-      width: calc(25% - 42px);
-    }
-  }
-
-  .no-states-content {
-    max-width: 500px;
-    background-color: #fff;
-    border-radius: 2px;
-    box-shadow: rgba(0, 0, 0, 0.098) 0px 2px 4px, rgba(0, 0, 0, 0.098) 0px 0px 3px;
-    padding: 0 16px 8px;
-    margin: 16px;
-  }
-  </style>
-
-  <template>
-    <div class='horizontal layout wrap'>
-
-      <template is='dom-repeat' items="{{states}}">
-        <state-card class="state-card" state-obj="[[item]]"></state-card>
-      </template>
-
-      <template is='dom-if' if="[[computeEmptyStates(states)]]">
-        <div class='no-states-content'>
-          <h3>Hi there!</h3>
-          <p>
-            It looks like we have nothing to show you right now. It could be that we have not yet discovered all your devices but it is more likely that you have not configured Home Assistant yet.
-          </p>
-          <p>
-            Please see the <a href='https://home-assistant.io/getting-started/' target='_blank'>Getting Started</a> section on how to setup your devices.
-          </p>
-        </div>
-      </template>
-
-    </div>
-  </template>
-</dom-module>
diff --git a/src/components/state-cards.js b/src/components/state-cards.js
deleted file mode 100644
index 846e3e623a..0000000000
--- a/src/components/state-cards.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Polymer from '../polymer';
-
-require('../state-summary/state-card');
-
-export default new Polymer({
-  is: 'state-cards',
-
-  properties: {
-    states: {
-      type: Array,
-      value: [],
-    },
-  },
-
-  computeEmptyStates(states) {
-    return states.length === 0;
-  },
-});
diff --git a/src/components/state-info.html b/src/components/state-info.html
index 5f3404d69b..f87c6a8ca7 100644
--- a/src/components/state-info.html
+++ b/src/components/state-info.html
@@ -6,7 +6,7 @@
 <dom-module id="state-info">
   <style>
   :host {
-    line-height: 1.5;
+    @apply(--paper-font-body1);
     min-width: 150px;
     white-space: nowrap;
   }
@@ -20,17 +20,19 @@
   }
 
   .name {
+    @apply(--paper-font-common-nowrap);
     text-transform: capitalize;
-    font-weight: 400;
-    text-overflow: ellipsis;
-    overflow-x: hidden;
+    color: var(--primary-text-color);
+    line-height: 40px;
+  }
+
+  .name[in-dialog] {
+    line-height: 20px;
   }
 
   .time-ago {
+    @apply(--paper-font-common-nowrap);
     color: var(--secondary-text-color);
-    margin-top: -2px;
-    text-overflow: ellipsis;
-    overflow-x: hidden;
   }
   </style>
 
@@ -39,11 +41,13 @@
       <state-badge state-obj='[[stateObj]]'></state-badge>
 
       <div class='info'>
-        <div class='name'>[[stateObj.entityDisplay]]</div>
+        <div class='name' in-dialog$='[[inDialog]]'>[[stateObj.entityDisplay]]</div>
 
-        <div class='time-ago'>
-          <relative-ha-datetime datetime-obj='[[stateObj.lastChangedAsDate]]'></relative-ha-datetime>
-        </div>
+        <template is='dom-if' if='[[inDialog]]'>
+          <div class='time-ago'>
+            <relative-ha-datetime datetime-obj='[[stateObj.lastChangedAsDate]]'></relative-ha-datetime>
+          </div>
+        </template>
 
       </div>
     </div>
diff --git a/src/components/state-info.js b/src/components/state-info.js
index 6bd1969f49..9370f0a80f 100644
--- a/src/components/state-info.js
+++ b/src/components/state-info.js
@@ -7,6 +7,11 @@ export default new Polymer({
   is: 'state-info',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
diff --git a/src/dialogs/more-info-dialog.html b/src/dialogs/more-info-dialog.html
index 970699c3b7..a327275eef 100644
--- a/src/dialogs/more-info-dialog.html
+++ b/src/dialogs/more-info-dialog.html
@@ -37,7 +37,7 @@
   <template>
     <!-- entry-animation='slide-up-animation' exit-animation='slide-down-animation' -->
     <paper-dialog id="dialog" with-backdrop opened='{{dialogOpen}}'>
-      <h2><state-card-content state-obj="[[stateObj]]"></state-card-content></h2>
+      <h2><state-card-content state-obj="[[stateObj]]" in-dialog></state-card-content></h2>
       <paper-dialog-scrollable>
       <template is='dom-if' if="[[showHistoryComponent]]">
         <state-history-charts state-history="[[stateHistory]]"
diff --git a/src/layouts/partial-dev-info.html b/src/layouts/partial-dev-info.html
index beba8f6386..3cf17c5092 100644
--- a/src/layouts/partial-dev-info.html
+++ b/src/layouts/partial-dev-info.html
@@ -22,11 +22,11 @@
     }
 
     .version {
-      font-size: 24px;
+      @apply(--paper-font-headline);
     }
 
     .develop {
-      font-size: 18px;
+      @apply(--paper-font-subhead);
     }
 
     .about a {
@@ -44,6 +44,7 @@
     }
 
     .error-log {
+      @apply(--paper-font-code1)
       clear: both;
       white-space: pre-wrap;
     }
@@ -83,7 +84,7 @@
           The following errors have been logged this session:
           <paper-icon-button icon='mdi:refresh' on-tap='refreshErrorLog'></paper-icon-button>
         </p>
-        <pre class='error-log'>[[errorLog]]</pre>
+        <div class='error-log'>[[errorLog]]</div>
       </div>
     </partial-base>
   </template>
diff --git a/src/state-summary/state-card-configurator.html b/src/state-summary/state-card-configurator.html
index cb6ebd9705..0ca0ba85b6 100644
--- a/src/state-summary/state-card-configurator.html
+++ b/src/state-summary/state-card-configurator.html
@@ -1,11 +1,26 @@
 <link rel='import' href='../../bower_components/polymer/polymer.html'>
+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
+
+<link rel="import" href="../components/state-info.html">
 
-<link rel='import' href='./state-card-display.html'>
 <link rel='import' href='../components/state-info.html'>
 
 <dom-module id='state-card-configurator'>
+  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+  <style>
+    paper-button {
+      color: var(--default-primary-color);
+      font-weight: 500;
+      top: 3px;
+      height: 37px;
+    }
+  </style>
+
   <template>
-    <state-card-display state-obj='[[stateObj]]'></state-card-display>
+    <div class='horizontal justified layout'>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
+      <paper-button hidden$='[[inDialog]]'>[[stateObj.state]]</paper-button>
+    </div>
 
     <!-- pre load the image so the dialog is rendered the proper size -->
     <template is='dom-if' if='[[stateObj.attributes.description_image]]'>
diff --git a/src/state-summary/state-card-configurator.js b/src/state-summary/state-card-configurator.js
index 3ef0ee62c1..31b6857df6 100644
--- a/src/state-summary/state-card-configurator.js
+++ b/src/state-summary/state-card-configurator.js
@@ -7,6 +7,11 @@ export default new Polymer({
   is: 'state-card-configurator',
 
   properties: {
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
diff --git a/src/state-summary/state-card-content.js b/src/state-summary/state-card-content.js
index 29a85ca7c5..0e81649d20 100644
--- a/src/state-summary/state-card-content.js
+++ b/src/state-summary/state-card-content.js
@@ -19,16 +19,24 @@ export default new Polymer({
   is: 'state-card-content',
 
   properties: {
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
-      observer: 'stateObjChanged',
     },
   },
 
-  stateObjChanged(stateObj) {
+  observers: [
+    'inputChanged(inDialog, stateObj)',
+  ],
+
+  inputChanged(inDialog, stateObj) {
     if (!stateObj) return;
 
     dynamicContentUpdater(
-      this, `STATE-CARD-${stateCardType(stateObj).toUpperCase()}`, { stateObj });
+      this, `STATE-CARD-${stateCardType(stateObj).toUpperCase()}`, { stateObj, inDialog });
   },
 });
diff --git a/src/state-summary/state-card-display.html b/src/state-summary/state-card-display.html
index 401ed83675..772d868626 100755
--- a/src/state-summary/state-card-display.html
+++ b/src/state-summary/state-card-display.html
@@ -6,17 +6,19 @@
   <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
   .state {
+    @apply(--paper-font-body1);
+    color: var(--primary-text-color);
+
     margin-left: 16px;
     text-transform: capitalize;
-    font-weight: 400;
     text-align: right;
-    line-height: 1.5;
+    line-height: 40px;
   }
   </style>
 
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <div class='state'>[[stateObj.stateDisplay]]</div>
     </div>
   </template>
diff --git a/src/state-summary/state-card-display.js b/src/state-summary/state-card-display.js
index 06d201c4f7..1ad21227f1 100644
--- a/src/state-summary/state-card-display.js
+++ b/src/state-summary/state-card-display.js
@@ -6,6 +6,11 @@ export default new Polymer({
   is: 'state-card-display',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
diff --git a/src/state-summary/state-card-input_select.html b/src/state-summary/state-card-input_select.html
index b149523f59..16133c2837 100644
--- a/src/state-summary/state-card-input_select.html
+++ b/src/state-summary/state-card-input_select.html
@@ -13,7 +13,7 @@
 
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <paper-dropdown-menu no-label-float selected-item-label='{{selectedOption}}' on-tap='stopPropagation'>
         <paper-menu class="dropdown-content" selected="[[computeSelected(stateObj)]]">
           <template is='dom-repeat' items='[[stateObj.attributes.options]]'>
diff --git a/src/state-summary/state-card-input_select.js b/src/state-summary/state-card-input_select.js
index 3f1c446e68..d521dbb289 100644
--- a/src/state-summary/state-card-input_select.js
+++ b/src/state-summary/state-card-input_select.js
@@ -9,6 +9,11 @@ export default new Polymer({
   is: 'state-card-input_select',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
diff --git a/src/state-summary/state-card-input_slider.html b/src/state-summary/state-card-input_slider.html
index fa2bf7e576..44919804b4 100644
--- a/src/state-summary/state-card-input_slider.html
+++ b/src/state-summary/state-card-input_slider.html
@@ -13,7 +13,7 @@
 
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <paper-slider min='[[min]]' max='[[max]]' value='{{value}}' step='[[step]]' pin on-change='selectedValueChanged'>
       </paper-slider>
     </div>
diff --git a/src/state-summary/state-card-input_slider.js b/src/state-summary/state-card-input_slider.js
index 902550d638..355de56af6 100644
--- a/src/state-summary/state-card-input_slider.js
+++ b/src/state-summary/state-card-input_slider.js
@@ -9,6 +9,11 @@ export default new Polymer({
   is: 'state-card-input_slider',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
       observer: 'stateObjectChanged',
diff --git a/src/state-summary/state-card-media_player.html b/src/state-summary/state-card-media_player.html
index c674ad706b..97e84f7fd3 100644
--- a/src/state-summary/state-card-media_player.html
+++ b/src/state-summary/state-card-media_player.html
@@ -10,29 +10,26 @@
   }
 
   .state {
+    @apply(--paper-font-common-nowrap);
+    @apply(--paper-font-body1);
     margin-left: 16px;
     text-align: right;
-    overflow-x: hidden;
   }
 
   .main-text {
-    white-space: nowrap;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
+    @apply(--paper-font-common-nowrap);
+    color: var(--primary-text-color);
     text-transform: capitalize;
-    font-weight: 400;
   }
 
   .secondary-text {
-    white-space: nowrap;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
+    @apply(--paper-font-common-nowrap);
     color: var(--secondary-text-color);
   }
   </style>
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <div class='state'>
         <div class='main-text'>[[computePrimaryText(stateObj, isPlaying)]]</div>
         <div class='secondary-text'>[[computeSecondaryText(stateObj)]]</div>
diff --git a/src/state-summary/state-card-media_player.js b/src/state-summary/state-card-media_player.js
index cc5b07a90b..703941b539 100644
--- a/src/state-summary/state-card-media_player.js
+++ b/src/state-summary/state-card-media_player.js
@@ -8,6 +8,11 @@ export default new Polymer({
   is: 'state-card-media_player',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
diff --git a/src/state-summary/state-card-rollershutter.html b/src/state-summary/state-card-rollershutter.html
index e5b8b9c001..5ef02c91df 100644
--- a/src/state-summary/state-card-rollershutter.html
+++ b/src/state-summary/state-card-rollershutter.html
@@ -19,7 +19,7 @@
   </style>
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <div class='state'>
         <paper-icon-button icon="mdi:arrow-up" on-tap='onMoveUpTap'
           disabled='[[computeIsFullyClosed(stateObj)]]'></paper-icon-button>
diff --git a/src/state-summary/state-card-rollershutter.js b/src/state-summary/state-card-rollershutter.js
index 11b2f23e73..032dc6c8bd 100644
--- a/src/state-summary/state-card-rollershutter.js
+++ b/src/state-summary/state-card-rollershutter.js
@@ -10,6 +10,11 @@ export default new Polymer({
   is: 'state-card-rollershutter',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
diff --git a/src/state-summary/state-card-scene.html b/src/state-summary/state-card-scene.html
index 3a68333b58..e35052fe20 100644
--- a/src/state-summary/state-card-scene.html
+++ b/src/state-summary/state-card-scene.html
@@ -1,23 +1,23 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
 
 <link rel="import" href="../components/state-info.html">
 
 <dom-module id="state-card-scene">
   <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
-    paper-icon-button {
-      border: 1px solid;
-      border-radius: 50%;
+    paper-button {
       color: var(--default-primary-color);
-      line-height: 24px;
+      font-weight: 500;
+      top: 3px;
+      height: 37px;
     }
   </style>
 
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
-      <paper-icon-button on-tap='activateScene' icon='mdi:play'></paper-icon-button>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
+      <paper-button on-tap='activateScene'>ACTIVATE</paper-button>
     </div>
   </template>
 </dom-module>
diff --git a/src/state-summary/state-card-scene.js b/src/state-summary/state-card-scene.js
index d80a26d1a1..5594c559ba 100644
--- a/src/state-summary/state-card-scene.js
+++ b/src/state-summary/state-card-scene.js
@@ -9,12 +9,18 @@ export default new Polymer({
   is: 'state-card-scene',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
   },
 
-  activateScene() {
+  activateScene(ev) {
+    ev.stopPropagation();
     serviceActions.callTurnOn(this.stateObj.entityId);
   },
 });
diff --git a/src/state-summary/state-card-script.html b/src/state-summary/state-card-script.html
index f4ee4f0549..9f78394b89 100644
--- a/src/state-summary/state-card-script.html
+++ b/src/state-summary/state-card-script.html
@@ -1,5 +1,5 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
 
 <link rel="import" href="../components/state-info.html">
 <link rel="import" href="../components/entity/ha-entity-toggle.html">
@@ -7,22 +7,22 @@
 <dom-module id="state-card-script">
   <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
-    paper-icon-button {
-      border: 1px solid;
-      border-radius: 50%;
+    paper-button {
       color: var(--default-primary-color);
-      line-height: 24px;
+      font-weight: 500;
+      top: 3px;
+      height: 37px;
     }
   </style>
 
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <template is='dom-if' if='[[stateObj.attributes.can_cancel]]'>
         <ha-entity-toggle state-obj='[[stateObj]]'></ha-entity-toggle>
       </template>
       <template is='dom-if' if='[[!stateObj.attributes.can_cancel]]'>
-        <paper-icon-button on-tap='fireScript' icon='mdi:play'></paper-icon-button>
+        <paper-button on-tap='fireScript'>ACTIVATE</paper-button>
       </template>
     </div>
   </template>
diff --git a/src/state-summary/state-card-script.js b/src/state-summary/state-card-script.js
index ce1a9ec67d..3c81b03080 100644
--- a/src/state-summary/state-card-script.js
+++ b/src/state-summary/state-card-script.js
@@ -10,12 +10,18 @@ export default new Polymer({
   is: 'state-card-script',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
   },
 
-  fireScript() {
+  fireScript(ev) {
+    ev.stopPropagation();
     serviceActions.callTurnOn(this.stateObj.entityId);
   },
 });
diff --git a/src/state-summary/state-card-thermostat.html b/src/state-summary/state-card-thermostat.html
index 5960f758cf..d481808670 100644
--- a/src/state-summary/state-card-thermostat.html
+++ b/src/state-summary/state-card-thermostat.html
@@ -6,33 +6,26 @@
   <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
   :host {
+    @apply(--paper-font-body1);
     line-height: 1.5;
   }
 
   .state {
     margin-left: 16px;
     text-align: right;
-    overflow-x: hidden;
   }
 
   .target {
-    text-transform: capitalize;
-    font-weight: 400;
-    white-space: nowrap;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
+    color: var(--primary-text-color);
   }
 
   .current {
     color: var(--secondary-text-color);
-    white-space: nowrap;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
   }
   </style>
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <div class='state'>
         <div class='target'>[[computeTargetTemperature(stateObj)]]</div>
 
diff --git a/src/state-summary/state-card-thermostat.js b/src/state-summary/state-card-thermostat.js
index 4b23b9c791..e103ab967b 100644
--- a/src/state-summary/state-card-thermostat.js
+++ b/src/state-summary/state-card-thermostat.js
@@ -6,6 +6,11 @@ export default new Polymer({
   is: 'state-card-thermostat',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
diff --git a/src/state-summary/state-card-toggle.html b/src/state-summary/state-card-toggle.html
index 3aee26d14f..364c8f79d8 100755
--- a/src/state-summary/state-card-toggle.html
+++ b/src/state-summary/state-card-toggle.html
@@ -11,8 +11,8 @@
     }
   </style>
   <template>
-    <div class='horizontal justified layout center'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+    <div class='horizontal justified layout'>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <ha-entity-toggle state-obj="[[stateObj]]"></ha-entity-toggle>
     </div>
 
diff --git a/src/state-summary/state-card-toggle.js b/src/state-summary/state-card-toggle.js
index 21fe460d61..67755870ba 100644
--- a/src/state-summary/state-card-toggle.js
+++ b/src/state-summary/state-card-toggle.js
@@ -7,6 +7,11 @@ export default new Polymer({
   is: 'state-card-toggle',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
diff --git a/src/state-summary/state-card-weblink.html b/src/state-summary/state-card-weblink.html
index 9bdd616a4c..662014b1bc 100644
--- a/src/state-summary/state-card-weblink.html
+++ b/src/state-summary/state-card-weblink.html
@@ -4,22 +4,22 @@
 
 <dom-module id="state-card-weblink">
   <style>
-  state-badge {
-    float: left;
+  :host {
+    display: block;
   }
-
   .name {
-    margin-left: 56px;
+    @apply(--paper-font-common-nowrap);
+    @apply(--paper-font-body1);
+    color: var(--primary-color);
+
     text-transform: capitalize;
-    font-weight: 400;
-    text-overflow: ellipsis;
-    overflow-x: hidden;
     line-height: 40px;
+    margin-left: 16px;
   }
   </style>
 
   <template>
-    <state-badge state-obj='[[stateObj]]'></state-badge>
-    <div class='name'>[[stateObj.entityDisplay]]</div>
+    <state-badge state-obj='[[stateObj]]' in-dialog='[[inDialog]]'></state-badge>
+    <a href='[[stateObj.entityDisplay]]' target='_blank' class='name' id='link'>[[stateObj.entityDisplay]]</a>
   </template>
 </dom-module>
diff --git a/src/state-summary/state-card-weblink.js b/src/state-summary/state-card-weblink.js
index f7678444d7..2ab87d95de 100644
--- a/src/state-summary/state-card-weblink.js
+++ b/src/state-summary/state-card-weblink.js
@@ -6,6 +6,11 @@ export default new Polymer({
   is: 'state-card-weblink',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
@@ -17,6 +22,10 @@ export default new Polymer({
 
   onTap(ev) {
     ev.stopPropagation();
+    if (ev.target === this.$.link) {
+      // Only open window if we clicked on card but not the link
+      return;
+    }
     window.open(this.stateObj.state, '_blank');
   },
 });
diff --git a/src/state-summary/state-card.html b/src/state-summary/state-card.html
deleted file mode 100644
index 523b9f2221..0000000000
--- a/src/state-summary/state-card.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<link rel="import" href="state-card-content.html">
-
-<dom-module id="state-card">
-  <style>
-    :host {
-      border-radius: 2px;
-      box-shadow: rgba(0, 0, 0, 0.098) 0px 2px 4px, rgba(0, 0, 0, 0.098) 0px 0px 3px;
-      transition: all 0.30s ease-out;
-
-      position: relative;
-      background-color: white;
-      padding: 16px;
-      width: 100%;
-
-      cursor: pointer;
-      overflow: hidden;
-
-      -ms-user-select: none;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-    }
-  </style>
-
-  <template>
-    <state-card-content state-obj="[[stateObj]]"></state-card-content>
-  </template>
-</dom-module>
diff --git a/src/state-summary/state-card.js b/src/state-summary/state-card.js
deleted file mode 100644
index 91cbe34272..0000000000
--- a/src/state-summary/state-card.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import hass from '../util/home-assistant-js-instance';
-
-import Polymer from '../polymer';
-
-require('./state-card-content');
-
-const { moreInfoActions } = hass;
-
-export default new Polymer({
-  is: 'state-card',
-
-  properties: {
-    stateObj: {
-      type: Object,
-    },
-  },
-
-  listeners: {
-    tap: 'cardTapped',
-  },
-
-  cardTapped(ev) {
-    ev.stopPropagation();
-    this.async(() => moreInfoActions.selectEntity(this.stateObj.entityId), 1);
-  },
-});