Align layout of all cards

gallery/src/demos/demo-integration-card.ts

@@ -44,9 +44,10 @@ const createConfigEntry = (
 
 const createManifest = (
   isCustom: boolean,
-  isCloud: boolean
+  isCloud: boolean,
+  name = "ESPHome"
 ): IntegrationManifest => ({
-  name: "ESPHome",
+  name,
   domain: "esphome",
   is_built_in: !isCustom,
   config_flow: false,
@@ -103,7 +104,7 @@ const configFlows: DataEntryFlowProgressExtended[] = [
       },
     },
     step_id: "discovery_confirm",
-    localized_title: "Roku: Living room Roku",
+    localized_title: "Living room Roku",
   },
   {
     flow_id: "adbb401329d8439ebb78ef29837826a8",
@@ -234,7 +235,8 @@ export class DemoIntegrationCard extends LitElement {
               .flow=${flow}
               .manifest=${createManifest(
                 this.isCustomIntegration,
-                this.isCloud
+                this.isCloud,
+                flow.handler === "roku" ? "Roku" : "Philips Hue"
               )}
             ></ha-config-flow-card>
           `

src/panels/config/integrations/ha-ignored-config-entry-card.ts

@@ -31,14 +31,14 @@ export class HaIgnoredConfigEntryCard extends LitElement {
           "ui.panel.config.integrations.ignore.ignored"
         )}
         .domain=${this.entry.domain}
+        .localizedDomainName=${this.entry.localized_domain_name}
         .label=${this.entry.title === "Ignored"
           ? // In 2020.2 we added support for entry.title. All ignored entries before
             // that have title "Ignored" so we fallback to localized domain name.
             this.entry.localized_domain_name
           : this.entry.title}
       >
         <mwc-button
-          unelevated
           @click=${this._removeIgnoredIntegration}
           .label=${this.hass.localize(
             "ui.panel.config.integrations.ignore.stop_ignore"

src/panels/config/integrations/ha-integration-action-card.ts

@@ -1,25 +1,23 @@
 import {
+  TemplateResult,
+  html,
   customElement,
   LitElement,
   property,
-  CSSResult,
   css,
 } from "lit-element";
-import { TemplateResult, html } from "lit-html";
-import { IntegrationManifest } from "../../../data/integration";
-import { HomeAssistant } from "../../../types";
-import { brandsUrl } from "../../../util/brands-url";
-import {
-  haConfigIntegrationRenderIcons,
-  haConfigIntegrationsStyles,
-} from "./ha-config-integrations-common";
+import type { IntegrationManifest } from "../../../data/integration";
+import type { HomeAssistant } from "../../../types";
+import "./ha-integration-header";
 
 @customElement("ha-integration-action-card")
 export class HaIntegrationActionCard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public banner!: string;
 
+  @property() public localizedDomainName?: string;
+
   @property() public domain!: string;
 
   @property() public label!: string;
@@ -29,82 +27,47 @@ export class HaIntegrationActionCard extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-card outlined>
-        <div class="banner">
-          ${this.banner}
-        </div>
-        <div class="content">
-          ${haConfigIntegrationRenderIcons(this.hass, this.manifest)}
-          <div class="image">
-            <img
-              src=${brandsUrl(this.domain, "logo")}
-              referrerpolicy="no-referrer"
-              @error=${this._onImageError}
-              @load=${this._onImageLoad}
-            />
-          </div>
-          <h2>${this.label}</h2>
-        </div>
+        <ha-integration-header
+          .hass=${this.hass}
+          .banner=${this.banner}
+          .domain=${this.domain}
+          .label=${this.label}
+          .localizedDomainName=${this.localizedDomainName}
+          .manifest=${this.manifest}
+        ></ha-integration-header>
+        <div class="filler"></div>
         <div class="actions"><slot></slot></div>
       </ha-card>
     `;
   }
 
-  private _onImageLoad(ev) {
-    ev.target.style.visibility = "initial";
-  }
-
-  private _onImageError(ev) {
-    ev.target.style.visibility = "hidden";
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haConfigIntegrationsStyles,
-      css`
-        ha-card {
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          --ha-card-border-color: var(--state-color);
-          --mdc-theme-primary: var(--state-color);
-        }
-        .content {
-          position: relative;
-          flex: 1;
-        }
-        .image {
-          height: 60px;
-          margin-top: 16px;
-          display: flex;
-          align-items: center;
-          justify-content: space-around;
-        }
-        img {
-          max-width: 90%;
-          max-height: 100%;
-        }
-        h2 {
-          text-align: center;
-          margin: 16px 8px 0;
-        }
-        .attention {
-          --state-color: var(--error-color);
-          --text-on-state-color: var(--text-primary-color);
-        }
-        .discovered {
-          --state-color: var(--primary-color);
-          --text-on-state-color: var(--text-primary-color);
-        }
-        .actions {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 8px 6px 0;
-          height: 48px;
-        }
-      `,
-    ];
-  }
+  static styles = css`
+    ha-card {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      --ha-card-border-color: var(--state-color);
+      --mdc-theme-primary: var(--state-color);
+    }
+    .filler {
+      flex: 1;
+    }
+    .attention {
+      --state-color: var(--error-color);
+      --text-on-state-color: var(--text-primary-color);
+    }
+    .discovered {
+      --state-color: var(--primary-color);
+      --text-on-state-color: var(--text-primary-color);
+    }
+    .actions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 6px 0;
+      height: 48px;
+    }
+  `;
 }
 
 declare global {