From 9b2e77e781d1443a7ceca80cf8f9878fc4155c8a Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 1 Jun 2023 12:01:09 +0200
Subject: [PATCH] Align integration card, limit height of logo (#16714)

---
 src/components/ha-list-item.ts                | 10 +++++++--
 .../ha-config-integration-page.ts             |  3 ++-
 .../integrations/ha-integration-card.ts       | 21 ++++++++++++++-----
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/ha-list-item.ts b/src/components/ha-list-item.ts
index 7b9b633a76..a5179008b5 100644
--- a/src/components/ha-list-item.ts
+++ b/src/components/ha-list-item.ts
@@ -17,8 +17,14 @@ export class HaListItem extends ListItemBase {
       styles,
       css`
         :host {
-          padding-left: var(--mdc-list-side-padding, 20px);
-          padding-right: var(--mdc-list-side-padding, 20px);
+          padding-left: var(
+            --mdc-list-side-padding-left,
+            var(--mdc-list-side-padding, 20px)
+          );
+          padding-right: var(
+            --mdc-list-side-padding-right,
+            var(--mdc-list-side-padding, 20px)
+          );
         }
         :host([graphic="avatar"]:not([twoLine])),
         :host([graphic="icon"]:not([twoLine])) {
diff --git a/src/panels/config/integrations/ha-config-integration-page.ts b/src/panels/config/integrations/ha-config-integration-page.ts
index a374ef0fa5..b5ecc21f75 100644
--- a/src/panels/config/integrations/ha-config-integration-page.ts
+++ b/src/panels/config/integrations/ha-config-integration-page.ts
@@ -1179,7 +1179,8 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
           padding: 0;
         }
         img {
-          width: 200px;
+          max-width: 200px;
+          max-height: 100px;
         }
         ha-alert {
           display: block;
diff --git a/src/panels/config/integrations/ha-integration-card.ts b/src/panels/config/integrations/ha-integration-card.ts
index 5b83d20dbf..2d4a39b486 100644
--- a/src/panels/config/integrations/ha-integration-card.ts
+++ b/src/panels/config/integrations/ha-integration-card.ts
@@ -1,7 +1,12 @@
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import "@material/mwc-button";
 import "@material/mwc-list";
-import { mdiApplication, mdiCog, mdiDevices, mdiShape } from "@mdi/js";
+import {
+  mdiCogOutline,
+  mdiDevices,
+  mdiHandExtendedOutline,
+  mdiShapeOutline,
+} from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -78,7 +83,7 @@ export class HaIntegrationCard extends LitElement {
             href=${`/config/integrations/integration/${this.domain}`}
             slot="header-button"
           >
-            <ha-icon-button .path=${mdiCog}></ha-icon-button>
+            <ha-icon-button .path=${mdiCogOutline}></ha-icon-button>
           </a>
         </ha-integration-header>
 
@@ -103,7 +108,7 @@ export class HaIntegrationCard extends LitElement {
             >
               <ha-list-item hasMeta graphic="icon">
                 <ha-svg-icon
-                  .path=${services ? mdiApplication : mdiDevices}
+                  .path=${services ? mdiHandExtendedOutline : mdiDevices}
                   slot="graphic"
                 ></ha-svg-icon>
                 ${this.hass.localize(
@@ -122,7 +127,10 @@ export class HaIntegrationCard extends LitElement {
               href=${`/config/entities?historyBack=1&domain=${this.domain}`}
             >
               <ha-list-item hasMeta graphic="icon">
-                <ha-svg-icon .path=${mdiShape} slot="graphic"></ha-svg-icon>
+                <ha-svg-icon
+                  .path=${mdiShapeOutline}
+                  slot="graphic"
+                ></ha-svg-icon>
                 ${this.hass.localize(
                   `ui.panel.config.integrations.config_entry.entities`,
                   "count",
@@ -191,6 +199,7 @@ export class HaIntegrationCard extends LitElement {
           display: flex;
           flex-direction: column;
           height: 100%;
+          overflow: hidden;
           --state-color: var(--divider-color, #e0e0e0);
           --ha-card-border-color: var(--state-color);
           --state-message-color: var(--state-color);
@@ -219,7 +228,9 @@ export class HaIntegrationCard extends LitElement {
         }
         .content {
           flex: 1;
-          --mdc-list-side-padding: 16px;
+          --mdc-list-side-padding-right: 20px;
+          --mdc-list-side-padding-left: 24px;
+          --mdc-list-item-graphic-margin: 24px;
         }
         a {
           text-decoration: none;