impr: replace twitter bird icon with X logo (@rileygramlich)

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

@@ -7,6 +7,8 @@ import { Fa, FaProps } from "./Fa";
 type BaseProps = {
   text?: string;
   fa?: FaProps;
+  /** Leading icon for icons that are not available in Font Awesome. Rendered in the same slot as `fa`. */
+  icon?: JSXElement;
   class?: string;
   variant?: "text" | "button";
   children?: JSXElement;
@@ -48,6 +50,7 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
       <Show when={props.fa !== undefined}>
         <Fa {...(props.fa as FaProps)} />
       </Show>
+      {props.icon}
       <Show when={props.text !== undefined}>{props.text}</Show>
       {props.children}
     </>

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

@@ -0,0 +1,34 @@
+import { JSXElement } from "solid-js";
+
+import { cn } from "../../utils/cn";
+
+type XIconProps = {
+  fixedWidth?: boolean;
+  class?: string;
+};
+
+/**
+ * The X (formerly Twitter) logo. Font Awesome only ships this icon from v6
+ * onwards, so it is inlined here instead of going through `Fa`.
+ */
+export function XIcon(props: XIconProps): JSXElement {
+  return (
+    <span
+      class={cn(
+        "inline-flex items-center justify-center",
+        { "w-[1.25em]": props.fixedWidth },
+        props.class,
+      )}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 512"
+        class="h-[1em] fill-current"
+        aria-hidden="true"
+      >
+        {/* <!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--> */}
+        <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zm-24.8 373.8h39.1L151.1 88h-42l255.3 333.8z"></path>
+      </svg>
+    </span>
+  );
+}

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

@@ -5,6 +5,7 @@ import { showModal } from "../../../states/modals";
 import { getFocus } from "../../../states/test";
 import { cn } from "../../../utils/cn";
 import { Button } from "../../common/Button";
+import { XIcon } from "../../common/XIcon";
 import { Keytips } from "./Keytips";
 import { ThemeIndicator } from "./ThemeIndicator";
 import { VersionButton } from "./VersionButton";
@@ -64,12 +65,8 @@ export function Footer(): JSXElement {
           />
           <Button
             variant="text"
-            text="twitter"
-            fa={{
-              icon: "fa-twitter",
-              variant: "brand",
-              fixedWidth: true,
-            }}
+            text="x"
+            icon={<XIcon fixedWidth />}
             href="https://x.com/monkeytype"
           />
           <Button

frontend/src/ts/components/pages/AboutPage.tsx

@@ -17,6 +17,7 @@ import { Button } from "../common/Button";
 import { ChartJs } from "../common/ChartJs";
 import { H2, H3 } from "../common/Headers";
 import { Page } from "../common/Page";
+import { XIcon } from "../common/XIcon";
 import { CommandlineHotkey } from "../hotkeys/CommandlineHotkey";
 import { QuickRestartHotkey } from "../hotkeys/QuickRestartHotkey";
 
@@ -307,8 +308,8 @@ export function AboutPage(): JSXElement {
               class="w-full p-8"
             />
             <Button
-              text="twitter"
-              fa={{ icon: "fa-twitter", variant: "brand" }}
+              text="x"
+              icon={<XIcon />}
               href="https://x.com/monkeytype"
               class="w-full p-8"
             />

frontend/src/ts/components/pages/profile/UserDetails.tsx

@@ -33,6 +33,7 @@ import { Button } from "../../common/Button";
 import { DiscordAvatar } from "../../common/DiscordAvatar";
 import { UserBadge } from "../../common/UserBadge";
 import { UserFlags } from "../../common/UserFlags";
+import { XIcon } from "../../common/XIcon";
 import { EditProfile } from "../../modals/EditProfileModal";
 
 type Variant = "basic" | "hasSocials" | "hasBioOrKeyboard" | "full";
@@ -525,7 +526,7 @@ function Socials(props: {
           <Show when={props.socials?.twitter}>
             <Button
               variant="text"
-              fa={{ icon: "fa-twitter", variant: "brand", fixedWidth: true }}
+              icon={<XIcon fixedWidth />}
               href={`https://x.com/${props.socials?.twitter}`}
               balloon={{ text: props.socials?.twitter ?? "" }}
             />