fix: fa component breaking font-subset (@Miodec) (#7446)

Author: Miodec

frontend/__tests__/components/Button.spec.tsx

@@ -52,7 +52,7 @@ describe("Button component", () => {
           //
         }}
         fa={{
-          icon: "keyboard",
+          icon: "fa-keyboard",
         }}
       />
     ));
@@ -70,7 +70,7 @@ describe("Button component", () => {
           //
         }}
         fa={{
-          icon: "keyboard",
+          icon: "fa-keyboard",
           fixedWidth: true,
         }}
       />
@@ -88,7 +88,7 @@ describe("Button component", () => {
         }}
         fa={{
           fixedWidth: true,
-          icon: "keyboard",
+          icon: "fa-keyboard",
         }}
         text="Hello"
       />
@@ -105,7 +105,7 @@ describe("Button component", () => {
           //
         }}
         fa={{
-          icon: "keyboard",
+          icon: "fa-keyboard",
         }}
         text="Hello"
       />

frontend/src/ts/components/common/AsyncContent.tsx

@@ -52,7 +52,7 @@ export default function AsyncContent<T>(
           <>
             <Show when={p.showLoader && props.resource.loading}>
               <div class="preloader text-main p-4 text-center text-2xl">
-                <Fa icon="circle-notch" fixedWidth spin />
+                <Fa icon="fa-circle-notch" fixedWidth spin />
               </div>
             </Show>
             {p.children(value())}
@@ -66,7 +66,7 @@ export default function AsyncContent<T>(
           <Suspense
             fallback={
               <div class="preloader text-main p-4 text-center text-2xl">
-                <Fa icon="circle-notch" fixedWidth spin />
+                <Fa icon="fa-circle-notch" fixedWidth spin />
               </div>
             }
           >

frontend/src/ts/components/common/Fa.tsx

@@ -12,7 +12,7 @@ export function Fa(props: FaProps): JSXElement {
   const variant = (): string => props.variant ?? "solid";
   return (
     <i
-      class={`fa-${props.icon}`}
+      class={props.icon}
       classList={{
         ["fas"]: variant() === "solid",
         ["far"]: variant() === "regular",

frontend/src/ts/components/layout/footer/Footer.tsx

@@ -29,7 +29,7 @@ export function Footer(): JSXElement {
             type="text"
             text="contact"
             fa={{
-              icon: "envelope",
+              icon: "fa-envelope",
               fixedWidth: true,
             }}
             onClick={() => showModal("Contact")}
@@ -38,7 +38,7 @@ export function Footer(): JSXElement {
             type="text"
             text="support"
             fa={{
-              icon: "donate",
+              icon: "fa-donate",
               fixedWidth: true,
             }}
             onClick={() => showModal("Support")}
@@ -47,7 +47,7 @@ export function Footer(): JSXElement {
             type="text"
             text="github"
             fa={{
-              icon: "code",
+              icon: "fa-code",
               fixedWidth: true,
             }}
             href="https://github.com/monkeytypegame/monkeytype"
@@ -56,7 +56,7 @@ export function Footer(): JSXElement {
             type="text"
             text="discord"
             fa={{
-              icon: "discord",
+              icon: "fa-discord",
               variant: "brand",
               fixedWidth: true,
             }}
@@ -66,7 +66,7 @@ export function Footer(): JSXElement {
             type="text"
             text="twitter"
             fa={{
-              icon: "twitter",
+              icon: "fa-twitter",
               variant: "brand",
               fixedWidth: true,
             }}
@@ -76,7 +76,7 @@ export function Footer(): JSXElement {
             type="text"
             text="terms"
             fa={{
-              icon: "file-contract",
+              icon: "fa-file-contract",
               fixedWidth: true,
             }}
             href="/terms-of-service.html"
@@ -86,7 +86,7 @@ export function Footer(): JSXElement {
             type="text"
             text="security"
             fa={{
-              icon: "shield-alt",
+              icon: "fa-shield-alt",
               fixedWidth: true,
             }}
           />
@@ -95,7 +95,7 @@ export function Footer(): JSXElement {
             type="text"
             text="privacy"
             fa={{
-              icon: "lock",
+              icon: "fa-lock",
               fixedWidth: true,
             }}
           />

frontend/src/ts/components/layout/footer/ScrollToTop.tsx

@@ -43,7 +43,7 @@ export function ScrollToTop(): JSXElement {
           });
         }}
       >
-        <Fa icon="angle-double-up" />
+        <Fa icon="fa-angle-double-up" />
       </button>
     </div>
   );

frontend/src/ts/components/layout/footer/ThemeIndicator.tsx

@@ -43,10 +43,10 @@ export function ThemeIndicator(): JSXElement {
       <div class="relative">
         <Show when={getThemeIndicator().isFavorite}>
           <div class="bg-bg absolute top-[-0.5em] right-[-0.5em] flex rounded-full p-[0.25em]">
-            <Fa icon="star" size={0.5} />
+            <Fa icon="fa-star" size={0.5} />
           </div>
         </Show>
-        <Fa icon="palette" fixedWidth />
+        <Fa icon="fa-palette" fixedWidth />
       </div>
       <div class="text">{getThemeIndicator().text}</div>
     </button>

frontend/src/ts/components/layout/footer/VersionButton.tsx

@@ -46,7 +46,7 @@ export function VersionButton(): JSXElement {
 
   return (
     <button type="button" class="textButton flex" onClick={handleClick}>
-      <Fa icon="code-branch" fixedWidth />
+      <Fa icon="fa-code-branch" fixedWidth />
       <div class="text">{getVersionText()}</div>
       <Show when={showNewIndicator()}>
         <div

frontend/src/ts/components/layout/overlays/Banners.tsx

@@ -66,7 +66,7 @@ function Banner(props: BannerType): JSXElement {
                 remove();
               }}
             >
-              <Fa icon="times" fixedWidth />
+              <Fa icon="fa-times" fixedWidth />
             </button>
           }
         />
@@ -96,7 +96,7 @@ export function Banners(): JSXElement {
   createEffectOn(() => getBanners().length, setGlobalOffsetSignal);
 
   return (
-    <div ref={ref} class="fixed top-0 left-0 z-[1000] w-full">
+    <div ref={ref} class="fixed top-0 left-0 z-1000 w-full">
       <For each={getBanners()}>{(banner) => <Banner {...banner} />}</For>
     </div>
   );

frontend/src/ts/components/layout/overlays/Overlays.tsx

@@ -29,7 +29,7 @@ export function Overlays(): JSXElement {
         }}
         tabIndex="-1"
       >
-        <Fa icon="terminal" />
+        <Fa icon="fa-terminal" />
       </button>
       <Banners />
       <MediaQueryDebugger />

frontend/src/ts/components/modals/ContactModal.tsx

@@ -25,15 +25,15 @@ export function ContactModal(): JSXElement {
           text="Question"
           class={buttonClass}
           fa={{
-            icon: "question-circle",
+            icon: "fa-question-circle",
             fixedWidth: true,
           }}
         />
         <Button
           type="button"
           href="mailto:contact@monkeytype.com?subject=[Feedback] "
           fa={{
-            icon: "comment-dots",
+            icon: "fa-comment-dots",
             fixedWidth: true,
           }}
           text="Feedback"
@@ -43,7 +43,7 @@ export function ContactModal(): JSXElement {
           type="button"
           href="mailto:support@monkeytype.com?subject=[Bug] "
           fa={{
-            icon: "bug",
+            icon: "fa-bug",
             fixedWidth: true,
           }}
           text="Bug Report"
@@ -53,7 +53,7 @@ export function ContactModal(): JSXElement {
           type="button"
           href="mailto:support@monkeytype.com?subject=[Account] "
           fa={{
-            icon: "user-circle",
+            icon: "fa-user-circle",
             fixedWidth: true,
           }}
           text="Account Help"
@@ -63,7 +63,7 @@ export function ContactModal(): JSXElement {
           type="button"
           href="mailto:jack@monkeytype.com?subject=[Business] "
           fa={{
-            icon: "briefcase",
+            icon: "fa-briefcase",
             fixedWidth: true,
           }}
           text="Business Inquiry"
@@ -73,7 +73,7 @@ export function ContactModal(): JSXElement {
           type="button"
           href="mailto:contact@monkeytype.com?subject=[Other] "
           fa={{
-            icon: "ellipsis-h",
+            icon: "fa-ellipsis-h",
             fixedWidth: true,
           }}
           text="Other"