feat: make form input a bit prettier

components/Form.tsx

@@ -2,6 +2,7 @@
 
 import { FormEvent, ReactNode, useState } from 'react';
 import Confetti from 'react-confetti';
+import Spinner from './Spinner';
 
 const API_URL = 'https://koodiklinikka-api.fly.dev/invites';
 
@@ -91,22 +92,26 @@ export default function Form() {
             Syötä sähköpostiosoitteesi alle ja saat kutsun Slack-yhteisöömme:
           </h2>
 
-          <div className="my-5 grid grid-cols-4 gap-2">
-            <input
-              type="email"
-              name="email"
-              required
-              className="col-span-3 grow rounded px-3 py-2 text-sm text-fuchsia-950 sm:text-base md:rounded-lg md:px-4 md:py-4 lg:rounded-lg lg:px-5 lg:py-5 lg:text-lg"
-              placeholder="[email protected]"
-              tabIndex={1}
-            />
-            <button
-              tabIndex={3}
-              type="submit"
-              className="text-shadow bg-button rounded border border-pink-400 border-b-pink-600 border-t-pink-300 px-3 py-2 text-sm font-extrabold sm:text-base md:rounded-lg md:px-4 md:py-4 lg:px-5 lg:py-5 lg:text-lg"
-            >
-              {isSubmitting ? 'Liitytään' : 'Liity'}
-            </button>
+          <div className="mx-auto my-5 max-w-[300px] gap-2 space-y-2 sm:grid sm:max-w-none sm:grid-cols-4 sm:space-y-0">
+            <div className="col-span-3 flex rounded-[5px] bg-gradient-to-b from-fuchsia-50/30 to-fuchsia-800/50 md:rounded-[9px]">
+              <input
+                type="email"
+                name="email"
+                required
+                className={`m-px block grow rounded bg-gradient-to-b from-[#0b0b21] to-[#1e092e] px-3 py-2  text-fuchsia-100 placeholder:text-fuchsia-100/25 md:rounded-lg md:px-4 md:py-4 lg:px-5 lg:py-5 lg:text-lg ${isSubmitting ? 'opacity-75' : ''}`}
+                placeholder="[email protected]"
+                tabIndex={1}
+              />
+            </div>
+            <div className="w-full p-px">
+              <button
+                tabIndex={3}
+                type="submit"
+                className="text-shadow bg-button block h-full w-full rounded border border-pink-400 border-b-pink-600 border-t-pink-300 px-3 py-2 font-bold sm:text-base md:rounded-lg md:px-4 md:py-4 lg:px-5 lg:py-5 lg:text-lg"
+              >
+                {isSubmitting ? <Spinner /> : 'Liity'}
+              </button>
+            </div>
           </div>
 
           <label className="flex select-none flex-wrap items-center justify-center gap-2 font-mono text-xxs sm:text-xs">

components/Spinner.tsx

@@ -0,0 +1,16 @@
+export default function Spinner() {
+  return (
+    <svg
+      className="mx-auto h-5 w-5 animate-spin text-white"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle className="opacity-35" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <path
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  );
+}