From 47b917005cc2adabcc21226af1135d37fb0682ae Mon Sep 17 00:00:00 2001
From: Ludeeus <ludeeus@ludeeus.dev>
Date: Sat, 5 Mar 2022 12:01:19 +0000
Subject: [PATCH] Remove paper elements

---
 src/components/hacs-repository-card.ts |   9 +-
 src/panels/hacs-entry-panel.ts         | 128 ++++++++++++++-----------
 src/panels/hacs-store-panel.ts         |   3 +-
 src/styles/element-styles.ts           |  10 --
 src/styles/hacs-common-style.ts        |   1 -
 5 files changed, 77 insertions(+), 74 deletions(-)

diff --git a/src/components/hacs-repository-card.ts b/src/components/hacs-repository-card.ts
index fe5eaa83..8217524f 100644
--- a/src/components/hacs-repository-card.ts
+++ b/src/components/hacs-repository-card.ts
@@ -9,8 +9,6 @@ import {
   mdiLanguageJavascript,
   mdiReload,
 } from "@mdi/js";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { ClassInfo, classMap } from "lit/directives/class-map";
@@ -114,9 +112,7 @@ export class HacsRepositoryCard extends LitElement {
                 : ""}
             </div>
           </div>
-          <paper-item>
-            <paper-item-body> ${this.repository.description} </paper-item-body>
-          </paper-item>
+          <div class="description">${this.repository.description}</div>
         </div>
         <div class="card-actions">
           ${this.repository.installed
@@ -361,9 +357,10 @@ export class HacsRepositoryCard extends LitElement {
         .pointer {
           cursor: pointer;
         }
-        paper-item-body {
+        .description {
           opacity: var(--dark-primary-opacity);
           font-size: 14px;
+          padding: 8px 16px;
         }
 
         .status-new {
diff --git a/src/panels/hacs-entry-panel.ts b/src/panels/hacs-entry-panel.ts
index 95f2a78a..d95cfe00 100644
--- a/src/panels/hacs-entry-panel.ts
+++ b/src/panels/hacs-entry-panel.ts
@@ -2,8 +2,6 @@ import "@material/mwc-button/mwc-button";
 import { mdiAlertCircle, mdiGithub, mdiHomeAssistant, mdiInformation, mdiOpenInNew } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-item/paper-item-body";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { isComponentLoaded } from "../../homeassistant-frontend/src/common/config/is_component_loaded";
@@ -114,41 +112,41 @@ export class HacsEntryPanel extends LitElement {
                 ${sortRepositoriesByName(this.hacs.updates).map(
                   (repository) =>
                     html`
-                      <paper-icon-item @click=${() => this._openUpdateDialog(repository)}>
-                        ${repository.category === "integration"
-                          ? html`
-                              <img
-                                slot="item-icon"
-                                loading="lazy"
-                                .src=${brandsUrl({
-                                  domain: repository.domain,
-                                  darkOptimized: this.hass.themes.darkMode,
-                                  type: "icon",
-                                })}
-                                referrerpolicy="no-referrer"
-                                @error=${this._onImageError}
-                                @load=${this._onImageLoad}
-                              />
-                            `
-                          : html`
-                              <div slot="item-icon" class="icon-background">
+                      <div class="list-item" @click=${() => this._openUpdateDialog(repository)}>
+                        <div class="list-item-icon">
+                          ${repository.category === "integration"
+                            ? html`
+                                <img
+                                  loading="lazy"
+                                  .src=${brandsUrl({
+                                    domain: repository.domain,
+                                    darkOptimized: this.hass.themes.darkMode,
+                                    type: "icon",
+                                  })}
+                                  referrerpolicy="no-referrer"
+                                  @error=${this._onImageError}
+                                  @load=${this._onImageLoad}
+                                />
+                              `
+                            : html`
                                 <ha-svg-icon
                                   path="${mdiGithub}"
                                   style="padding-left: 0; height: 40px; width: 40px;"
-                                ></ha-svg-icon>
-                              </div>
-                            `}
-                        <paper-item-body two-line>
-                          ${repository.name}
-                          <div secondary>
+                                >
+                                </ha-svg-icon>
+                              `}
+                        </div>
+                        <div class="list-item-content">
+                          <div class="list-item-header">${repository.name}</div>
+                          <div class="list-item-description">
                             ${this.hacs.localize("sections.pending_repository_upgrade", {
                               downloaded: repository.installed_version,
                               available: repository.available_version,
                             })}
                           </div>
-                        </paper-item-body>
+                        </div>
                         ${!this.narrow ? html`<ha-icon-next></ha-icon-next>` : ""}
-                      </paper-icon-item>
+                      </div>
                     `
                 )}
               </ha-card>`
@@ -162,40 +160,41 @@ export class HacsEntryPanel extends LitElement {
             >
             </ha-config-navigation>
 
-            ${isComponentLoaded(this.hass, "hassio")
+            ${!isComponentLoaded(this.hass, "hassio")
               ? html`
-                  <paper-icon-item @click=${this._openSupervisorDialog}>
-                    <div
-                      class="icon-background"
-                      slot="item-icon"
-                      style="background-color: rgb(64, 132, 205)"
-                    >
-                      <ha-svg-icon .path=${mdiHomeAssistant} slot="item-icon"></ha-svg-icon>
+                  <div class="list-item" @click=${this._openSupervisorDialog}>
+                    <div class="list-item-icon">
+                      <div class="icon-background" style="background-color: rgb(64, 132, 205)">
+                        <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
+                      </div>
+                    </div>
+                    <div class="list-item-content">
+                      <div class="list-item-header">
+                        ${this.hacs.localize(`sections.addon.title`)}
+                      </div>
+                      <div class="list-item-description">
+                        ${this.hacs.localize(`sections.addon.description`)}
+                      </div>
                     </div>
-                    <paper-item-body two-line>
-                      ${this.hacs.localize(`sections.addon.title`)}
-                      <div secondary>${this.hacs.localize(`sections.addon.description`)}</div>
-                    </paper-item-body>
                     ${!this.narrow
                       ? html`<ha-svg-icon right .path=${mdiOpenInNew}></ha-svg-icon>`
                       : ""}
-                  </paper-icon-item>
+                  </div>
                 `
               : ""}
-
-            <paper-icon-item @click=${this._openAboutDialog}>
-              <div
-                class="icon-background"
-                slot="item-icon"
-                style="background-color: rgb(74, 89, 99)"
-              >
-                <ha-svg-icon .path=${mdiInformation} slot="item-icon"></ha-svg-icon>
+            <div class="list-item" @click=${this._openAboutDialog}>
+              <div class="list-item-icon">
+                <div class="icon-background" style="background-color: rgb(74, 89, 99)">
+                  <ha-svg-icon .path=${mdiInformation}></ha-svg-icon>
+                </div>
               </div>
-              <paper-item-body two-line>
-                ${this.hacs.localize(`sections.about.title`)}
-                <div secondary>${this.hacs.localize(`sections.about.description`)}</div>
-              </paper-item-body>
-            </paper-icon-item>
+              <div class="list-item-content">
+                <div class="list-item-header">${this.hacs.localize(`sections.about.title`)}</div>
+                <div class="list-item-description">
+                  ${this.hacs.localize(`sections.about.description`)}
+                </div>
+              </div>
+            </div>
           </ha-card>
         </ha-config-section>
       </ha-app-layout>
@@ -324,8 +323,27 @@ export class HacsEntryPanel extends LitElement {
           max-width: 40px;
           border-radius: 50%;
         }
-        paper-icon-item {
+        .list-item {
+          width: 100%;
           cursor: pointer;
+          display: flex;
+          padding: 16px;
+        }
+        .list-item-icon {
+          margin-right: 16px;
+        }
+        .list-item-header {
+          font-size: 16px;
+        }
+        .list-item-description {
+          color: var(--secondary-text-color);
+          margin-right: 16px;
+        }
+        .list-item ha-icon-next,
+        .list-item ha-svg-icon[right] {
+          right: 0;
+          padding: 16px;
+          position: absolute;
         }
       `,
     ];
diff --git a/src/panels/hacs-store-panel.ts b/src/panels/hacs-store-panel.ts
index a1fa3925..4b22154b 100644
--- a/src/panels/hacs-store-panel.ts
+++ b/src/panels/hacs-store-panel.ts
@@ -23,7 +23,7 @@ import "../components/hacs-repository-card";
 import { Repository } from "../data/common";
 import { Hacs } from "../data/hacs";
 import { settingsClearAllNewRepositories } from "../data/websocket";
-import { hassTabsSubpage, scrollBarStyle } from "../styles/element-styles";
+import { scrollBarStyle } from "../styles/element-styles";
 import { HacsStyles } from "../styles/hacs-common-style";
 import { filterRepositoriesByInput } from "../tools/filter-repositories-by-input";
 import { activePanel } from "./hacs-sections";
@@ -310,7 +310,6 @@ export class HacsStorePanel extends LitElement {
   static get styles() {
     return [
       HacsStyles,
-      hassTabsSubpage,
       scrollBarStyle,
       css`
         .filter {
diff --git a/src/styles/element-styles.ts b/src/styles/element-styles.ts
index 3491aed7..d79b42be 100644
--- a/src/styles/element-styles.ts
+++ b/src/styles/element-styles.ts
@@ -21,16 +21,6 @@ export const hacsButtonStyle = css`
   }
 `;
 
-export const hassTabsSubpage = css`
-  hass-tabs-subpage {
-    font-family: var(--paper-font-body1_-_font-family);
-    -webkit-font-smoothing: var(--paper-font-body1_-_-webkit-font-smoothing);
-    font-size: var(--paper-font-body1_-_font-size);
-    font-weight: var(--paper-font-body1_-_font-weight);
-    line-height: var(--paper-font-body1_-_line-height);
-  }
-`;
-
 export const scrollBarStyle = css`
   *::-webkit-scrollbar {
     width: 0.4rem;
diff --git a/src/styles/hacs-common-style.ts b/src/styles/hacs-common-style.ts
index cd5c8e5b..424f7b9c 100644
--- a/src/styles/hacs-common-style.ts
+++ b/src/styles/hacs-common-style.ts
@@ -16,7 +16,6 @@ export const hacsCommonClasses = css`
     --mdc-theme-primary: var(--hcv-color-error);
   }
   .header {
-    font-size: var(--paper-font-headline_-_font-size);
     opacity: var(--dark-primary-opacity);
     padding: 8px 0 4px 16px;
   }