Updated design for integration icons (#22393)

* Show if a custom integration overwrites a core integration

* use 1 icon and change tooltip and color

* Updated design for integration icons

* add color for `overwrites_built_in`

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

@@ -1,5 +1,5 @@
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
-import { mdiCloud, mdiFileCodeOutline, mdiPackageVariant } from "@mdi/js";
+import { mdiFileCodeOutline, mdiPackageVariant, mdiWeb } from "@mdi/js";
 import {
   CSSResultGroup,
   LitElement,
@@ -181,7 +181,7 @@ export class HaIntegrationCard extends LitElement {
             : nothing}
           ${this.manifest && this.manifest.iot_class?.startsWith("cloud_")
             ? html`<div class="icon cloud">
-                <ha-svg-icon .path=${mdiCloud}></ha-svg-icon>
+                <ha-svg-icon .path=${mdiWeb}></ha-svg-icon>
                 <simple-tooltip
                   animation-delay="0"
                   .position=${computeRTL(this.hass) ? "right" : "left"}
@@ -354,28 +354,21 @@ export class HaIntegrationCard extends LitElement {
           display: flex;
         }
         .icon {
-          border-radius: 50%;
-          color: var(--text-primary-color);
+          color: var(--label-badge-grey);
           padding: 4px;
           margin-left: 8px;
           margin-inline-start: 8px;
           margin-inline-end: initial;
         }
-        .icon.cloud {
-          background: var(--info-color);
-        }
         .icon.custom {
-          background: var(--warning-color);
+          color: var(--warning-color);
         }
         .icon.overwrites {
-          background: var(--error-color);
-        }
-        .icon.yaml {
-          background: var(--label-badge-grey);
+          color: var(--error-color);
         }
         .icon ha-svg-icon {
-          width: 16px;
-          height: 16px;
+          width: 24px;
+          height: 24px;
           display: block;
         }
         simple-tooltip {

src/panels/config/integrations/ha-integration-list-item.ts

@@ -3,7 +3,7 @@ import {
   ListItemBase,
 } from "@material/mwc-list/mwc-list-item-base";
 import { styles } from "@material/mwc-list/mwc-list-item.css";
-import { mdiCloudOutline, mdiOpenInNew, mdiPackageVariant } from "@mdi/js";
+import { mdiFileCodeOutline, mdiPackageVariant, mdiWeb } from "@mdi/js";
 import { css, CSSResultGroup, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -72,7 +72,7 @@ export class HaIntegrationListItem extends ListItemBase {
     return html`<span class="mdc-deprecated-list-item__meta material-icons">
       ${this.integration.cloud
         ? html`<span
-            ><ha-svg-icon .path=${mdiCloudOutline}></ha-svg-icon
+            ><ha-svg-icon .path=${mdiWeb}></ha-svg-icon
             ><simple-tooltip animation-delay="0" position="left"
               >${this.hass.localize(
                 "ui.panel.config.integrations.config_entry.depends_on_cloud"
@@ -82,6 +82,9 @@ export class HaIntegrationListItem extends ListItemBase {
         : ""}
       ${!this.integration.is_built_in
         ? html`<span
+            class=${this.integration.overwrites_built_in
+              ? "overwrites"
+              : "custom"}
             ><ha-svg-icon .path=${mdiPackageVariant}></ha-svg-icon
             ><simple-tooltip animation-delay="0" position="left"
               >${this.hass.localize(
@@ -101,7 +104,7 @@ export class HaIntegrationListItem extends ListItemBase {
                 "ui.panel.config.integrations.config_entry.yaml_only"
               )}</simple-tooltip
             ><ha-svg-icon
-              .path=${mdiOpenInNew}
+              .path=${mdiFileCodeOutline}
               class="open-in-new"
             ></ha-svg-icon
           ></span>`
@@ -161,6 +164,12 @@ export class HaIntegrationListItem extends ListItemBase {
           --mdc-icon-size: 22px;
           padding: 1px;
         }
+        .custom {
+          color: var(--warning-color);
+        }
+        .overwrites {
+          color: var(--error-color);
+        }
       `,
     ];
   }

src/translations/en.json

@@ -4405,8 +4405,8 @@
             },
             "custom_integration": "Custom integration",
             "custom_overwrites_core": "Custom integration that replaces a core component",
-            "depends_on_cloud": "Depends on the cloud",
-            "yaml_only": "Needs manual configuration",
+            "depends_on_cloud": "Depends on Internet connection",
+            "yaml_only": "This integration cannot be setup from the UI",
             "no_config_flow": "This integration was not set up from the UI",
             "disabled_polling": "Automatic polling for updated data disabled",
             "debug_logging_enabled": "Debug logging enabled",