From 81c49628e46d2e4634404581b42b833d740032bc Mon Sep 17 00:00:00 2001
From: c727 <crusader727@gmx.de>
Date: Fri, 9 Feb 2018 22:49:17 +0100
Subject: [PATCH] Hass.io card design for dashboard updateinfo (#877)

* Hass.io card design for dashboard updateinfo

* Remove test stuff
---
 hassio/dashboard/hassio-dashboard.html   |  2 +-
 hassio/dashboard/hassio-hass-update.html | 53 ++++++++++++++----------
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/hassio/dashboard/hassio-dashboard.html b/hassio/dashboard/hassio-dashboard.html
index e54901af67..4101f283de 100644
--- a/hassio/dashboard/hassio-dashboard.html
+++ b/hassio/dashboard/hassio-dashboard.html
@@ -73,7 +73,7 @@
       <div class='content'>
         <hassio-hass-update
           hass='[[hass]]'
-          data='[[hassInfo]]'
+          hass-info='[[hassInfo]]'
         ></hassio-hass-update>
         <hassio-addons
           hass='[[hass]]'
diff --git a/hassio/dashboard/hassio-hass-update.html b/hassio/dashboard/hassio-hass-update.html
index 027f70700e..de560c0f9c 100644
--- a/hassio/dashboard/hassio-hass-update.html
+++ b/hassio/dashboard/hassio-hass-update.html
@@ -2,11 +2,12 @@
 <link rel="import" href="../../bower_components/paper-card/paper-card.html">
 
 <link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
-<link rel="import" href="../../src/components/buttons/ha-call-service-button.html">
+<link rel='import' href='../../src/components/hassio-card-content.html'>
+<link rel='import' href='../../src/resources/hassio-style.html'>
 
 <dom-module id="hassio-hass-update">
   <template>
-    <style include="iron-flex ha-style">
+    <style include="ha-style hassio-style">
       paper-card {
         display: block;
         height: 100%;
@@ -17,22 +18,31 @@
         margin-top: 16px;
       }
     </style>
-
-    <template is='dom-if' if='[[_computeUpdateAvailable(data)]]'>
-      <paper-card heading='Update Available! 🎉'>
-        <div class="card-content">
-          You are currently running Home Assistant version [[data.version]] and [[data.last_version]] is available.
-          <template is='dom-if' if='[[errors]]'>
-            <div class='errors'>Error: [[errors]]</div>
-          </template>
+    <template is='dom-if' if='[[computeUpdateAvailable(hassInfo)]]'>
+      <div class='content'> 
+        <div class='card-group'>
+          <div class='title'>Update available! 🎉</div>     
+          <paper-card>
+            <div class='card-content'>
+              <hassio-card-content
+                title='Home Assistant [[hassInfo.last_version]] is available'
+                description='You are currently running version [[hassInfo.version]]'
+                icon='mdi:home-assistant'
+                icon-class='hassupdate'
+              ></hassio-card-content>
+              <template is='dom-if' if='[[error]]'>
+                <div class='error'>Error: [[error]]</div>
+              </template>
+            </div>
+            <div class='card-actions'>
+              <ha-call-api-button
+                hass='[[hass]]'
+                path='hassio/homeassistant/update'
+              >Update</ha-call-api-button>  
+            </div>
+          </paper-card>
         </div>
-        <div class='card-actions'>
-          <ha-call-api-button
-            hass='[[hass]]'
-            path="hassio/homeassistant/update"
-          >Update</ha-call-api-button>
-        </div>
-      </paper-card>
+      </div>
     </template>
   </template>
 </dom-module>
@@ -44,7 +54,8 @@ class HassioHassUpdate extends Polymer.Element {
   static get properties() {
     return {
       hass: Object,
-      data: Object,
+      hassInfo: Object,
+      error: String,
     };
   }
 
@@ -59,7 +70,7 @@ class HassioHassUpdate extends Polymer.Element {
       return;
     }
 
-    var response = ev.detail.response;
+    const response = ev.detail.response;
 
     if (typeof response.body === 'object') {
       this.errors = response.body.message || 'Unknown error';
@@ -68,8 +79,8 @@ class HassioHassUpdate extends Polymer.Element {
     }
   }
 
-  _computeUpdateAvailable(data) {
-    return data.version !== data.last_version;
+  computeUpdateAvailable(hassInfo) {
+    return hassInfo.version !== hassInfo.last_version;
   }
 }