From c9eb8798ea1d9fbabdb8fba38d170cccbe385222 Mon Sep 17 00:00:00 2001
From: Petri Partio <petri.partio@gmail.com>
Date: Sun, 2 Jun 2024 23:29:21 +0300
Subject: [PATCH] feat: make form input a bit prettier

---
 components/Form.tsx    | 37 +++++++++++++++++++++----------------
 components/Spinner.tsx | 16 ++++++++++++++++
 2 files changed, 37 insertions(+), 16 deletions(-)
 create mode 100644 components/Spinner.tsx

diff --git a/components/Form.tsx b/components/Form.tsx
index 4c0be07..6cb38a8 100644
--- a/components/Form.tsx
+++ b/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="minna.meikalainen@example.org"
-              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="minna.meikalainen@example.org"
+                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">
diff --git a/components/Spinner.tsx b/components/Spinner.tsx
new file mode 100644
index 0000000..108838b
--- /dev/null
+++ b/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>
+  );
+}