From 399d14a5e0a1b3b5b740c970878631676f4087f2 Mon Sep 17 00:00:00 2001
From: Marc Khouri <marc.khouri@ubnt.com>
Date: Thu, 22 Mar 2018 13:32:32 -0400
Subject: [PATCH]  Add styling to Config Entries (#1011)

* Add some styling to Config Entries

This commit adds some styling to the (experimental) Config Entries

* re-add localization

Note: I'm having issues with localization on my current setup -- it doesn't
seem to be working for me :shrug:. This commit just keeps the same localization
as there was previously, no change

* Update based on PR review

* Remove stale annotations
---
 .../config-entries/ha-config-entries.html     | 105 ++++++++++--------
 1 file changed, 57 insertions(+), 48 deletions(-)

diff --git a/panels/config/config-entries/ha-config-entries.html b/panels/config/config-entries/ha-config-entries.html
index dceda08b6c..160d969b25 100644
--- a/panels/config/config-entries/ha-config-entries.html
+++ b/panels/config/config-entries/ha-config-entries.html
@@ -12,62 +12,71 @@
 <dom-module id="ha-config-entries">
   <template>
     <style include='iron-flex ha-style'>
-      .content {
-        padding: 8px;
+      paper-button {
+        color: var(--primary-color);
+        font-weight: 500;
+        top: 3px;
+        margin-right: -.57em;
       }
-      .entries {
-        margin: 0 -4px;
-      }
-      .entries paper-card {
-        margin: 4px;
+      paper-card:last-child {
+        margin-top: 12px;
       }
     </style>
+
     <hass-subpage title='Integrations'>
-      <div class='content'>
-        <h1>Configured</h1>
-        <template is='dom-if' if='[[!_entries.length]]'>
-          <i>Nothing configured.</i>
-        </template>
-        <div class='entries layout horizontal wrap'>
-          <template is='dom-repeat' items='[[_entries]]'>
-            <paper-card heading='[[item.title]]'>
-              <div class='card-content'>
-                Integration: [[_computeIntegrationTitle(localize, item.domain)]]<br>
-                State: [[item.state]]<br>
-                Added by: [[item.source]]
-              </div>
-              <div class="card-actions">
-                <paper-button on-click='_removeEntry'>Remove</paper-button>
-              </div>
-            </paper-card>
-          </template>
-        </div>
-
-        <template is='dom-if' if='[[_progress.length]]'>
-          <h1>To be finished</h1>
-          <div class='entries layout horizontal wrap'>
+      <template is='dom-if' if='[[_progress.length]]'>
+        <ha-config-section is-wide='[[isWide]]'>
+          <span slot='header'>In Progress</span>
+          <paper-card>
             <template is='dom-repeat' items='[[_progress]]'>
-              <paper-card heading='[[_computeIntegrationTitle(localize, item.domain)]]'>
-                <div class="card-actions">
-                  <paper-button on-click='_continueFlow'>Configure</paper-button>
-                </div>
-              </paper-card>
+              <paper-item>
+                <paper-item-body>
+                  [[_computeIntegrationTitle(localize, item.domain)]]
+                </paper-item-body>
+                <paper-button on-click='_continueFlow'>Configure</paper-button>
+              </paper-item>
             </template>
-          </div>
-        </template>
+          </paper-card>
+        </ha-config-section>
+      </template>
 
-        <h1>Add integration</h1>
-        <div class='entries layout horizontal wrap'>
-          <template is='dom-repeat' items='[[_handlers]]'>
-            <paper-card heading='[[_computeIntegrationTitle(localize, item)]]'>
-              <!-- <div class="card-content">Some content</div> -->
-              <div class="card-actions">
-                <paper-button on-click='_createFlow'>Configure</paper-button>
-              </div>
-            </paper-card>
+      <ha-config-section is-wide='[[isWide]]'>
+        <span slot='header'>Configured</span>
+        <paper-card>
+          <template is='dom-if' if='[[!_entries.length]]'>
+            <paper-item>
+              <paper-item-body>
+                Nothing configured yet
+              </paper-item-body>
+            </paper-item>
           </template>
-        </div>
-      </div>
+          <template is='dom-repeat' items='[[_entries]]'>
+            <paper-item>
+              <paper-item-body three-line>
+                [[item.title]]
+                <div secondary>Integration: [[_computeIntegrationTitle(localize, item.domain)]]</div>
+                <div secondary>Added by: [[item.source]]</div>
+                <div secondary>State: [[item.state]]</div>
+              </paper-item-body>
+              <paper-button on-click='_removeEntry'>Remove</paper-button>
+            </paper-item>
+          </template>
+        </paper-card>
+      </ha-config-section>
+
+      <ha-config-section is-wide='[[isWide]]'>
+        <span slot='header'>Available</span>
+        <paper-card>
+          <template is='dom-repeat' items='[[_handlers]]'>
+            <paper-item>
+              <paper-item-body>
+                [[_computeIntegrationTitle(localize, item)]]
+              </paper-item-body>
+              <paper-button on-click='_createFlow'>Configure</paper-button>
+            </paper-item>
+          </template>
+        </paper-card>
+      </ha-config-section>
     </hass-subpage>
 
     <ha-config-flow