Reasonably Scoped Branding Update (#299)

- Adds TsconfigPathsPlugin
- Custom icons, branding assets, and favicons now all live under
`/src/assets` in organized folders (Mirrors Browsertrix folder
organization and naming)
- Assets can now be referenced with `import: varName from
~assets/assetpath` app wide!
- SVGs continue to use `svg-inline-loader`, favicons are copied to
`/site/favicons` on app build
- Adds favicons to the main `index.html` page for ReplayWeb.page and
`embed.html` example page
- Replace README header with new branding
  - Lives under /assets because it's not app related
- Adds new webmanifest app icons
- Adds new Electron app .icns (macOS ) and .png (Windows & Linux) app
icons
- Replaces globe icon in the embed receipt with ReplayWebpage icon!
  - Adds lockup to the footer section
- Removes logo animation
- Removes logo values from `renderErrorReport()` in swmanager.ts in
favour of additional import statements

---------
Co-authored-by: Ilya Kreymer <ikreymer@gmail.com>

src/embed-receipt.ts

@@ -1,6 +1,7 @@
-import btGlobe from "../assets/globe.svg";
-import btAngleDoubleDown from "../assets/chevron-double-down.svg";
-import btAngleDoubleUp from "../assets/chevron-double-up.svg";
+import rwpLogo from "~assets/brand/replaywebpage-icon-color.svg";
+import brandLockupColor from "~assets/brand/replaywebpage-lockup-color.svg";
+import btAngleDoubleDown from "~assets/icons/chevron-double-down.svg";
+import btAngleDoubleUp from "~assets/icons/chevron-double-up.svg";
 import fabGithub from "@fortawesome/fontawesome-free/svgs/brands/github.svg";
 import fasDownload from "@fortawesome/fontawesome-free/svgs/solid/download.svg";
 
@@ -18,7 +19,6 @@ export class RWPEmbedReceipt extends LitElement {
     | ItemType
     | null
     | Record<string, never> = null;
-  @property({ type: Object }) appLogo = null;
   @property({ type: String }) ts: string | null = null;
   @property({ type: String }) url: string | null = null;
 
@@ -160,16 +160,9 @@ export class RWPEmbedReceipt extends LitElement {
         font-family: monospace;
       }
 
-      .embed-globe {
-        margin: 0.25rem;
-        padding: 7px;
-        background-color: #0366d6;
-        border-radius: 9999px;
-        color: white;
-        border-width: 1px;
-        border-color: #d1d5da;
-        border-style: solid;
-        line-height: 0.5em;
+      .embed-logo {
+        margin: 0.5rem;
+        line-height: 0.5rem;
       }
     `;
   }
@@ -203,10 +196,10 @@ export class RWPEmbedReceipt extends LitElement {
             @click="${this.onEmbedDrop}"
           >
             <fa-icon
-              class="menu-logo mr-2 embed-globe"
-              size="1rem"
+              class="embed-logo"
+              size="1.5rem"
               aria-hidden="true"
-              .svg=${btGlobe}
+              .svg=${rwpLogo}
             ></fa-icon>
             <span class="embed-info-buttontext">
               This embed is part of a web archive. Click here to learn more.
@@ -310,32 +303,24 @@ export class RWPEmbedReceipt extends LitElement {
                 : nothing}
             </div>
             ${sourceUrl ? html`` : ""}
-            <p
-              class="is-size-7 is-flex is-justify-content-space-between"
+            <div
+              class="is-size-7 is-flex is-justify-content-space-between is-align-items-center"
               style="margin-top: 40px"
             >
-              <span>
+              <div>
                 <a
-                  class="has-text-black"
                   target="_blank"
                   href="https://github.com/webrecorder/replayweb.page"
-                  >${
-                    // TODO: Fix this the next time the file is edited.
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    this.appLogo
-                      ? html`
-                          <fa-icon
-                            class="menu-logo mr-1"
-                            size="1.0rem"
-                            aria-hidden="true"
-                            .svg=${this.appLogo}
-                          ></fa-icon>
-                        `
-                      : nothing
-                  }
-                  Powered by ReplayWeb.page
+                >
+                  <img
+                    style="height: 1.5rem;"
+                    src="data:image/svg+xml,${encodeURIComponent(
+                      brandLockupColor as string,
+                    )}"
+                    alt="ReplayWeb.page Logo"
+                  />
                 </a>
-              </span>
+              </div>
               <span>
                 <a
                   class="has-text-black"
@@ -350,7 +335,7 @@ export class RWPEmbedReceipt extends LitElement {
                   ></fa-icon>
                 </a>
               </span>
-            </p>
+            </div>
           </div>
         </div>
       </div>