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 {
}
}
-
-
-
- ${this.filter &&
- html`
-
- `}
-
-
+
+
+ ${this.filter &&
+ html`
+
+ `}
+
`;
}
@@ -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`
-
+
+
+
${handler.name}
-
+
`
)}
@@ -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,