a bunch of cleanup, mostly of my messy css hacks over the years

app/contact/form.module.css

@@ -37,7 +37,8 @@
 }
 
 .submitButton {
-  flex-shrink: 0;
+  display: flex;
+  align-items: center;
   height: 3.25em;
   padding: 1em 1.25em;
   margin-right: 1.5em;
@@ -56,9 +57,16 @@
   background-color: var(--colors-link);
 }
 
+.submitIcon {
+  width: 1.3em;
+  height: 1.3em;
+  margin-right: 0.5em;
+}
+
 .result {
+  display: flex;
+  align-items: center;
   font-weight: 600;
-  line-height: 1.5;
 }
 
 .result.success {
@@ -70,8 +78,7 @@
 }
 
 .resultIcon {
-  display: inline;
   width: 1.3em;
   height: 1.3em;
-  vertical-align: -0.3em;
+  margin-right: 0.25em;
 }

app/contact/form.tsx

@@ -5,7 +5,7 @@ import { useActionState, useState } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import Turnstile from "react-turnstile";
 import clsx from "clsx";
-import { CheckIcon, XIcon } from "lucide-react";
+import { SendIcon, LoaderIcon, CheckIcon, XIcon } from "lucide-react";
 import Link from "../../components/Link";
 
 import { send, type ContactState, type ContactInput } from "./action";
@@ -80,13 +80,12 @@ const ContactForm = () => {
           stroke="currentColor"
           strokeWidth="0"
           viewBox="0 0 24 24"
-          height="1.25em"
           width="1.25em"
+          height="1.25em"
           style={{
-            display: "inline",
             width: "1.25em",
             height: "1.25em",
-            verticalAlign: "-0.25em",
+            verticalAlign: "text-top",
             marginRight: "0.25em",
           }}
           xmlns="http://www.w3.org/2000/svg"
@@ -115,19 +114,12 @@ const ContactForm = () => {
         {!formState.success && (
           <button type="submit" disabled={pending} className={styles.submitButton}>
             {pending ? (
-              <span>Sending...</span>
+              <>
+                <LoaderIcon size="1.3em" className={styles.submitIcon} /> <span>Sending...</span>
+              </>
             ) : (
               <>
-                <span
-                  style={{
-                    fontSize: "1.3em",
-                    marginRight: "0.3em",
-                    lineHeight: "1",
-                  }}
-                >
-                  📤
-                </span>{" "}
-                <span>Send</span>
+                <SendIcon size="1.3em" className={styles.submitIcon} /> <span>Send</span>
               </>
             )}
           </button>

app/contact/page.tsx

@@ -1,3 +1,4 @@
+import { LockIcon } from "lucide-react";
 import PageTitle from "../../components/PageTitle";
 import Link from "../../components/Link";
 import { addMetadata } from "../../lib/helpers/metadata";
@@ -28,7 +29,15 @@ const Page = () => {
         <Link href="https://fediverse.jarv.is/@jake">direct message on Mastodon</Link>.
       </p>
       <p>
-        🔐 You can grab my public key here:{" "}
+        <LockIcon
+          size="0.975em"
+          style={{
+            marginRight: "0.15em",
+            stroke: "var(--colors-warning)",
+            verticalAlign: "middle",
+          }}
+        />{" "}
+        You can grab my public key here:{" "}
         <Link href="https://jrvs.io/pgp" title="My Public Key">
           <code
             style={{