From cb255ef137d67ee6b59efcfd2c771e89b0cac8e6 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Thu, 9 Apr 2020 05:44:08 -0700
Subject: [PATCH] Add icons when adding integration (#5500)

* Add icons when adding integration

* Remove margin from search input and put in parent
---
 src/common/search/search-input.ts             | 55 ++++++++-----------
 src/components/data-table/ha-data-table.ts    |  1 +
 src/dialogs/config-flow/step-flow-loading.ts  |  3 +
 .../config-flow/step-flow-pick-handler.ts     | 33 +++++++++--
 src/layouts/hass-tabs-subpage-data-table.ts   |  2 +
 .../config/entities/ha-config-entities.ts     |  1 +
 .../resources/ha-config-lovelace-resources.ts |  1 -
 7 files changed, 58 insertions(+), 38 deletions(-)

diff --git a/src/common/search/search-input.ts b/src/common/search/search-input.ts
index d24295c5d4..2581141b0f 100644
--- a/src/common/search/search-input.ts
+++ b/src/common/search/search-input.ts
@@ -34,29 +34,27 @@ class SearchInput extends LitElement {
           }
         }
       </style>
-      <div class="search-container">
-        <paper-input
-          class=${classMap({ "no-underline": this.noUnderline })}
-          autofocus
-          label="Search"
-          .value=${this.filter}
-          @value-changed=${this._filterInputChanged}
-          .noLabelFloat=${this.noLabelFloat}
-        >
-          <ha-icon icon="hass:magnify" slot="prefix" class="prefix"></ha-icon>
-          ${this.filter &&
-            html`
-              <paper-icon-button
-                slot="suffix"
-                class="suffix"
-                @click=${this._clearSearch}
-                icon="hass:close"
-                alt="Clear"
-                title="Clear"
-              ></paper-icon-button>
-            `}
-        </paper-input>
-      </div>
+      <paper-input
+        class=${classMap({ "no-underline": this.noUnderline })}
+        autofocus
+        label="Search"
+        .value=${this.filter}
+        @value-changed=${this._filterInputChanged}
+        .noLabelFloat=${this.noLabelFloat}
+      >
+        <ha-icon icon="hass:magnify" slot="prefix" class="prefix"></ha-icon>
+        ${this.filter &&
+          html`
+            <paper-icon-button
+              slot="suffix"
+              class="suffix"
+              @click=${this._clearSearch}
+              icon="hass:close"
+              alt="Clear"
+              title="Clear"
+            ></paper-icon-button>
+          `}
+      </paper-input>
     `;
   }
 
@@ -74,16 +72,7 @@ class SearchInput extends LitElement {
 
   static get styles(): CSSResult {
     return css`
-      paper-input {
-        flex: 1 1 auto;
-        margin: 0 16px;
-      }
-      .search-container {
-        display: inline-flex;
-        width: 100%;
-        align-items: center;
-      }
-      .prefix {
+      ha-icon {
         margin: 8px;
       }
     `;
diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index b091357df9..921a90d277 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -727,6 +727,7 @@ export class HaDataTable extends LitElement {
       }
       .table-header {
         border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
+        padding: 0 16px;
       }
       search-input {
         position: relative;
diff --git a/src/dialogs/config-flow/step-flow-loading.ts b/src/dialogs/config-flow/step-flow-loading.ts
index ce6ffd2f13..9180770051 100644
--- a/src/dialogs/config-flow/step-flow-loading.ts
+++ b/src/dialogs/config-flow/step-flow-loading.ts
@@ -32,6 +32,9 @@ class StepFlowLoading extends LitElement {
         padding: 50px 100px;
         text-align: center;
       }
+      paper-spinner-lite {
+        margin-top: 16px;
+      }
     `;
   }
 }
diff --git a/src/dialogs/config-flow/step-flow-pick-handler.ts b/src/dialogs/config-flow/step-flow-pick-handler.ts
index fab1731784..b6082abfd9 100644
--- a/src/dialogs/config-flow/step-flow-pick-handler.ts
+++ b/src/dialogs/config-flow/step-flow-pick-handler.ts
@@ -8,7 +8,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import "@polymer/paper-spinner/paper-spinner-lite";
-import "@polymer/paper-item/paper-item";
+import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
 import { HomeAssistant } from "../../types";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -77,12 +77,25 @@ class StepFlowPickHandler extends LitElement {
         ${handlers.map(
           (handler: HandlerObj) =>
             html`
-              <paper-item @click=${this._handlerPicked} .handler=${handler}>
+              <paper-icon-item
+                @click=${this._handlerPicked}
+                .handler=${handler}
+              >
+                <img
+                  slot="item-icon"
+                  loading="lazy"
+                  src="https://brands.home-assistant.io/_/${handler.slug}/icon.png"
+                  srcset="
+                    https://brands.home-assistant.io/_/${handler.slug}/icon@2x.png 2x
+                  "
+                  referrerpolicy="no-referrer"
+                />
+
                 <paper-item-body>
                   ${handler.name}
                 </paper-item-body>
                 <ha-icon-next></ha-icon-next>
-              </paper-item>
+              </paper-icon-item>
             `
         )}
       </div>
@@ -144,6 +157,17 @@ class StepFlowPickHandler extends LitElement {
     return [
       configFlowContentStyles,
       css`
+        img {
+          max-width: 40px;
+          max-height: 40px;
+        }
+        search-input {
+          display: block;
+          margin: -12px 16px 0;
+        }
+        ha-icon-next {
+          margin-right: 8px;
+        }
         div {
           overflow: auto;
           max-height: 600px;
@@ -156,8 +180,9 @@ class StepFlowPickHandler extends LitElement {
             max-height: calc(100vh - 300px);
           }
         }
-        paper-item {
+        paper-icon-item {
           cursor: pointer;
+          margin-bottom: 4px;
         }
         p {
           text-align: center;
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index 143b965cbf..33b621afd4 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -160,9 +160,11 @@ export class HaTabsSubpageDataTable extends LitElement {
       }
       .table-header {
         border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
+        padding: 0 16px;
       }
       .search-toolbar {
         color: var(--secondary-text-color);
+        padding: 0 16px;
       }
       search-input {
         position: relative;
diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts
index 6069d3e40e..00b61c8761 100644
--- a/src/panels/config/entities/ha-config-entities.ts
+++ b/src/panels/config/entities/ha-config-entities.ts
@@ -624,6 +624,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
       }
       search-input {
+        margin-left: 16px;
         flex-grow: 1;
         position: relative;
         top: 2px;
diff --git a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
index a746d7209c..c011b9cceb 100644
--- a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
+++ b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
@@ -14,7 +14,6 @@ import {
   css,
 } from "lit-element";
 import memoize from "memoize-one";
-import "../../../../common/search/search-input";
 import {
   DataTableColumnContainer,
   RowClickedEvent,