From 00f01222a7dc6554bff7c9fb894fd5bbe3fb7cd0 Mon Sep 17 00:00:00 2001
From: Henry Wilkinson <henry@wilkinson.graphics>
Date: Tue, 9 Apr 2024 18:01:10 -0400
Subject: [PATCH] Adds sl-copy-button fontawesome icons (#302)

- Changes `sl-copy-button` icons to use fontawesome equivalents so they
fit in with everything else in ReplayWebpage
- Converts sl-icon to use fa-icon for error icon
- Adds missing whitespace

Co-authored-by: Ilya Kreymer <ikreymer@gmail.com>
---
 src/components/labeled-field.ts | 37 ++++++++++++++++++++++++++++++++-
 src/item-info.ts                |  2 +-
 src/item.ts                     |  7 ++++++-
 3 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/components/labeled-field.ts b/src/components/labeled-field.ts
index 2f462df..38f2179 100644
--- a/src/components/labeled-field.ts
+++ b/src/components/labeled-field.ts
@@ -2,8 +2,27 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import { wrapCss } from "./../misc";
+import faClone from "@fortawesome/fontawesome-free/svgs/regular/clone.svg";
+import faCheck from "@fortawesome/fontawesome-free/svgs/solid/check.svg";
+import faX from "@fortawesome/fontawesome-free/svgs/solid/times.svg";
+
 import "@shoelace-style/shoelace/dist/components/copy-button/copy-button.js";
 
+import { registerIconLibrary } from "@shoelace-style/shoelace/dist/utilities/icon-library.js";
+
+import systemLibrary from "@shoelace-style/shoelace/dist/components/icon/library.system";
+
+// disable system library to prevent loading of unused data: URLs
+// allow only "x-lg" as it is needed for sl-dialog
+registerIconLibrary("system", {
+  resolver: (name) => {
+    if (name === "x-lg") {
+      return systemLibrary.resolver(name);
+    }
+    return "";
+  },
+});
+
 @customElement("wr-labeled-field")
 class LabeledField extends LitElement {
   @property({ type: String })
@@ -48,7 +67,23 @@ class LabeledField extends LitElement {
       <div class="col-content">
         <slot></slot>
         ${this.copy
-          ? html` <sl-copy-button .value=${this.copy || ""}></sl-copy-button>`
+          ? html` <sl-copy-button .value=${this.copy || ""}>
+              <fa-icon
+                slot="copy-icon"
+                .svg=${faClone}
+                aria-hidden="true"
+              ></fa-icon>
+              <fa-icon
+                slot="success-icon"
+                .svg=${faCheck}
+                aria-hidden="true"
+              ></fa-icon>
+              <fa-icon
+                slot="error-icon"
+                .svg=${faX}
+                aria-hidden="true"
+              ></fa-icon>
+            </sl-copy-button>`
           : nothing}
       </div>`;
   }
diff --git a/src/item-info.ts b/src/item-info.ts
index 67cb8d6..f117f4f 100644
--- a/src/item-info.ts
+++ b/src/item-info.ts
@@ -181,7 +181,7 @@ class ItemInfo extends LitElement {
               ${certFingerprintUrl
                 ? html`<span
                     ><a target="_blank" href="${certFingerprintUrl}"
-                      >View Certificate</a
+                      >&nbsp;View Certificate</a
                     ></span
                   >`
                 : nothing}
diff --git a/src/item.ts b/src/item.ts
index dca7d0e..6a20890 100644
--- a/src/item.ts
+++ b/src/item.ts
@@ -32,6 +32,7 @@ import {
   getDateFromTS,
 } from "./pageutils";
 
+import fasTriangleExclamation from "@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg";
 import fasBook from "@fortawesome/fontawesome-free/svgs/solid/book.svg";
 
 import fasDownload from "@fortawesome/fontawesome-free/svgs/solid/download.svg";
@@ -1478,7 +1479,11 @@ class Item extends LitElement {
   renderItemInfo() {
     if (!this.itemInfo)
       return html`<sl-alert open variant="warning">
-        <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
+        <fa-icon
+          slot="icon"
+          .svg=${fasTriangleExclamation}
+          aria-hidden="true"
+        ></fa-icon>
         <strong>Archive info is not available</strong><br />
         Please reload and try again.
       </sl-alert>`;