Use ha-alert for no repositories in store (#523)

src/components/hacs-repository-card.ts

@@ -414,7 +414,7 @@ export class HacsRepositoryCard extends LitElement {
           padding: 6px 1px;
           margin: -1px;
           width: 100%;
-          font-weight: 300;
+          font-weight: 500;
           text-align: center;
           left: 0;
           border-top-left-radius: var(--ha-card-border-radius, 4px);

src/localize/languages/en.json

@@ -164,7 +164,7 @@
     "descending": "descending",
     "last_updated": "Last updated",
     "name": "Name",
-    "new_repositories_note": "You have over 10 new repositories showing here, if you want to clear them all click the 3 dots in the top right corner and dismiss all of them.",
+    "new_repositories_note": "You have over 10 new repositories showing here.",
     "no_repositories": "No repositories",
     "no_repositories_desc1": "It seems like you don't have any repositories downloaded in this section yet.",
     "no_repositories_desc2": "Click on the + in the bottom corner to add your first!",
@@ -264,7 +264,7 @@
     "about": "About HACS",
     "custom_repositories": "Custom repositories",
     "open_issue": "Open issue",
-    "dismiss": "Dismiss all new repositories",
+    "dismiss": "Dismiss new repositories",
     "documentation": "Documentation"
   },
   "dialog": {

src/panels/hacs-store-panel.ts

@@ -1,6 +1,6 @@
+import "../../homeassistant-frontend/src/components/ha-alert";
 import {
   mdiAlertCircleOutline,
-  mdiBroom,
   mdiFileDocument,
   mdiGit,
   mdiGithub,
@@ -147,19 +147,6 @@ export class HacsStorePanel extends LitElement {
             label: this.hacs.localize("menu.open_issue"),
             action: () => top?.open("https://hacs.xyz/docs/issues", "_blank", "noreferrer=true"),
           },
-          {
-            path: mdiBroom,
-            label: this.hacs.localize("menu.dismiss"),
-            disabled:
-              this.repositories?.filter(
-                (repo) =>
-                  repo.new &&
-                  this.hacs.sections
-                    ?.find((panel) => panel.id === this.section)
-                    ?.categories?.includes(repo.category)
-              ).length === 0,
-            action: () => this._clearAllNewRepositories(),
-          },
           {
             path: mdiGit,
             label: this.hacs.localize("menu.custom_repositories"),
@@ -221,9 +208,12 @@ export class HacsStorePanel extends LitElement {
             </div>`
           : ""}
         ${newRepositories?.length > 10
-          ? html`<div class="new-repositories">
+          ? html`<ha-alert
+              @alert-action-clicked=${this._clearAllNewRepositories}
+              .actionText=${this.hacs.localize("menu.dismiss")}
+            >
               ${this.hacs.localize("store.new_repositories_note")}
-            </div>`
+            </ha-alert> `
           : ""}
         <div class="container ${this.narrow ? "narrow" : ""}">
           ${this.repositories === undefined
@@ -238,7 +228,7 @@ export class HacsStorePanel extends LitElement {
       <ha-fab
         slot="fab"
         .label=${this.hacs.localize("store.add")}
-        extended
+        .extended=${!this.narrow}
         @click=${this._addRepository}
       >
         <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
@@ -270,27 +260,24 @@ export class HacsStorePanel extends LitElement {
   }
 
   private _renderNoResultsFound(): TemplateResult {
-    return html`<ha-card class="no-repositories">
-      <div class="header">${this.hacs!.localize("store.no_repositories")} 😕</div>
-      <p>
-        ${this.hacs!.localize("store.no_repositories_found_desc1", {
-          searchInput: this._searchInput,
-        })}
-        <br />
-        ${this.hacs!.localize("store.no_repositories_found_desc2")}
-      </p>
-    </ha-card>`;
+    return html`<ha-alert
+      alert-type="warning"
+      .title="${this.hacs!.localize("store.no_repositories")} 😕"
+    >
+      ${this.hacs!.localize("store.no_repositories_found_desc1", {
+        searchInput: this._searchInput,
+      })}
+      <br />
+      ${this.hacs!.localize("store.no_repositories_found_desc2")}
+    </ha-alert>`;
   }
 
   private _renderEmpty(): TemplateResult {
-    return html`<ha-card class="no-repositories">
-      <div class="header">${this.hacs!.localize("store.no_repositories")} 😕</div>
-      <p>
-        ${this.hacs!.localize("store.no_repositories_desc1")}<br />${this.hacs!.localize(
-          "store.no_repositories_desc2"
-        )}
-      </p>
-    </ha-card>`;
+    return html`<ha-alert .title="${this.hacs!.localize("store.no_repositories")} 😕">
+      ${this.hacs!.localize("store.no_repositories_desc1")}
+      <br />
+      ${this.hacs!.localize("store.no_repositories_desc2")}
+    </ha-alert>`;
   }
 
   private _inputValueChanged(ev: any) {
@@ -337,15 +324,6 @@ export class HacsStorePanel extends LitElement {
           padding: 8px 16px 16px;
           margin-bottom: 64px;
         }
-        .no-repositories {
-          width: 100%;
-          text-align: center;
-          margin-top: 12px;
-        }
-        .new-repositories {
-          margin: 4px 16px 0 16px;
-          color: var(--hcv-text-color-primary);
-        }
         ha-svg-icon {
           color: var(--hcv-text-color-on-background);
         }
@@ -359,7 +337,12 @@ export class HacsStorePanel extends LitElement {
           width: 100%;
         }
         hacs-repository-card[narrow]:last-of-type {
-          margin-bottom: 248px;
+          margin-bottom: 64px;
+        }
+        ha-alert {
+          color: var(--hcv-text-color-primary);
+          display: block;
+          margin-top: -4px;
         }
         .narrow {
           width: 100%;

src/tools/get-messages.ts

@@ -33,7 +33,7 @@ export const getMessages = memoizeOne((hacs: Hacs): Message[] => {
     messages.push({
       name: hacs.localize(`entry.messages.${hacs.status.stage}.title`),
       info: hacs.localize(`entry.messages.${hacs.status.stage}.content`),
-      severity: "info",
+      severity: "warning",
     });
   }