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

@@ -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>`;
   }

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}

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>`;