Align integration card, limit height of logo (#16714)

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])) {

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;

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;