From ee8492df46d7b0a9b1e6823dd199f5781c43d0bf Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Thu, 27 Aug 2015 00:37:19 -0700
Subject: [PATCH] Adhere to material design spec

---
 src/cards/ha-domain-card.html                  | 12 +++---------
 src/components/entity/state-badge.html         | 10 +++++-----
 src/components/ha-card.html                    |  1 -
 src/components/ha-zone-cards.html              |  2 +-
 src/components/ha-zone-cards.js                |  2 +-
 src/components/state-info.html                 | 10 ++++------
 src/dialogs/more-info-dialog.html              |  5 +++++
 src/resources/home-assistant-style.html        |  2 ++
 src/state-summary/state-card-display.html      |  4 ++--
 src/state-summary/state-card-media_player.html |  9 +++------
 src/state-summary/state-card-thermostat.html   |  9 +++------
 11 files changed, 29 insertions(+), 37 deletions(-)

diff --git a/src/cards/ha-domain-card.html b/src/cards/ha-domain-card.html
index cfd3fb6da6..70c6f2d198 100644
--- a/src/cards/ha-domain-card.html
+++ b/src/cards/ha-domain-card.html
@@ -5,24 +5,18 @@
 
 <dom-module id='ha-domain-card'>
   <style>
-    .domain-title {
-      font-size: 24px;
-      padding: 24px 16px 16px;
-      border-bottom: 2px solid #E8E8E8;
-      text-transform: capitalize;
-    }
     .states {
-      padding: 8px 0;
+      padding-bottom: 16px;
     }
     .state {
       padding: 8px 16px;
     }
     state-card-content {
-      cursor: pointer;      
+      cursor: pointer;
     }
   </style>
   <template>
-    <ha-card title='[[computeDomainTitle(domain)]]'>
+    <ha-card header='[[computeDomainTitle(domain)]]'>
       <div class='states'>
         <template is='dom-repeat' items="[[states]]">
           <div class='state'>
diff --git a/src/components/entity/state-badge.html b/src/components/entity/state-badge.html
index 54a5dc7fba..082fbb9bcf 100644
--- a/src/components/entity/state-badge.html
+++ b/src/components/entity/state-badge.html
@@ -8,14 +8,14 @@
   :host {
     position: relative;
     display: inline-block;
-    width: 45px;
-    background-color: #4fc3f7;
-    color: white;
+    width: 40px;
+    /*background-color: #4fc3f7;*/
+    color: #44739E;
     border-radius: 50%;
   }
 
   div {
-    height: 45px;
+    height: 40px;
     text-align: center;
   }
 
@@ -32,7 +32,7 @@
   domain-icon[data-domain=light][data-state=on],
   domain-icon[data-domain=switch][data-state=on],
   domain-icon[data-domain=sun][data-state=above_horizon] {
-    color: #fff176;
+    color: #DCC91F;
   }
   </style>
 
diff --git a/src/components/ha-card.html b/src/components/ha-card.html
index b1046f3b2c..f3cc499de4 100644
--- a/src/components/ha-card.html
+++ b/src/components/ha-card.html
@@ -17,7 +17,6 @@
     .header {
       font-size: 24px;
       padding: 24px 16px 16px;
-      border-bottom: 2px solid #E8E8E8;
       text-transform: capitalize;
     }
   </style>
diff --git a/src/components/ha-zone-cards.html b/src/components/ha-zone-cards.html
index 8276f15aea..97e7bb46a8 100644
--- a/src/components/ha-zone-cards.html
+++ b/src/components/ha-zone-cards.html
@@ -13,7 +13,7 @@
     .badges {
       margin-top: 16px;
       margin-left: 8px;
-      font-size: 80%;
+      font-size: 85%;
       text-align: center;
     }
 
diff --git a/src/components/ha-zone-cards.js b/src/components/ha-zone-cards.js
index eca8a03ddf..50f47858e6 100644
--- a/src/components/ha-zone-cards.js
+++ b/src/components/ha-zone-cards.js
@@ -1,8 +1,8 @@
 import Polymer from '../polymer';
 import { util } from '../util/home-assistant-js-instance';
 
-require('../cards/ha-domain-card');
 require('../cards/ha-badges-card');
+require('../cards/ha-domain-card');
 
 const PRIORITY = {
   a: -1,
diff --git a/src/components/state-info.html b/src/components/state-info.html
index 0e57e76374..5f3404d69b 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: normal;
+    line-height: 1.5;
     min-width: 150px;
     white-space: nowrap;
   }
@@ -16,21 +16,19 @@
   }
 
   .info {
-    margin-left: 60px;
+    margin-left: 56px;
   }
 
   .name {
     text-transform: capitalize;
-    font-weight: 300;
-    font-size: 1.3rem;
+    font-weight: 400;
     text-overflow: ellipsis;
     overflow-x: hidden;
   }
 
   .time-ago {
-    color: darkgrey;
+    color: var(--secondary-text-color);
     margin-top: -2px;
-    font-size: 1rem;
     text-overflow: ellipsis;
     overflow-x: hidden;
   }
diff --git a/src/dialogs/more-info-dialog.html b/src/dialogs/more-info-dialog.html
index 58a766a7b9..5e47d1493a 100644
--- a/src/dialogs/more-info-dialog.html
+++ b/src/dialogs/more-info-dialog.html
@@ -11,8 +11,13 @@
 
 <dom-module id="more-info-dialog">
   <style>
+    paper-dialog {
+      font-size: 14px;
+    }
+
     state-card-content {
       margin-bottom: 24px;
+      font-size: 14px;
     }
 
     @media all and (max-width: 450px) {
diff --git a/src/resources/home-assistant-style.html b/src/resources/home-assistant-style.html
index cb7685568e..4f11771487 100644
--- a/src/resources/home-assistant-style.html
+++ b/src/resources/home-assistant-style.html
@@ -18,6 +18,8 @@
     --paper-toggle-button-checked-bar-color: #039be5;
 
     --paper-toolbar-background: #03A9F4;
+
+    font-size: 14px;
   }
 
   @-webkit-keyframes ha-spin {
diff --git a/src/state-summary/state-card-display.html b/src/state-summary/state-card-display.html
index 52976475f4..5cdd4eb7ed 100755
--- a/src/state-summary/state-card-display.html
+++ b/src/state-summary/state-card-display.html
@@ -7,9 +7,9 @@
   .state {
     margin-left: 16px;
     text-transform: capitalize;
-    font-weight: 300;
-    font-size: 1.3rem;
+    font-weight: 400;
     text-align: right;
+    line-height: 1.5;
   }
   </style>
 
diff --git a/src/state-summary/state-card-media_player.html b/src/state-summary/state-card-media_player.html
index 82f2d46807..52bf7e08b8 100644
--- a/src/state-summary/state-card-media_player.html
+++ b/src/state-summary/state-card-media_player.html
@@ -5,7 +5,7 @@
 <dom-module id="state-card-media_player">
   <style>
   :host {
-    line-height: normal;
+    line-height: 1.5;
   }
 
   .state {
@@ -19,14 +19,11 @@
       overflow-x: hidden;
       text-overflow: ellipsis;
       text-transform: capitalize;
-      font-weight: 300;
-      font-size: 1.3rem;
+      font-weight: 400;
   }
 
   .secondary-text {
-      color: darkgrey;
-      margin-top: -2px;
-      font-size: 1rem;
+      color: var(--secondary-text-color);
   }
   </style>
   <template>
diff --git a/src/state-summary/state-card-thermostat.html b/src/state-summary/state-card-thermostat.html
index 0a062e5756..71a43a1ae9 100644
--- a/src/state-summary/state-card-thermostat.html
+++ b/src/state-summary/state-card-thermostat.html
@@ -5,7 +5,7 @@
 <dom-module id="state-card-thermostat">
   <style>
   :host {
-    line-height: normal;
+    line-height: 1.5;
   }
 
   .state {
@@ -15,14 +15,11 @@
 
   .target {
       text-transform: capitalize;
-      font-weight: 300;
-      font-size: 1.3rem;
+      font-weight: 400;
   }
 
   .current {
-      color: darkgrey;
-      margin-top: -2px;
-      font-size: 1rem;
+      color: var(--secondary-text-color);
   }
   </style>
   <template>