this repo has no description
Update email-input.tsx
+13
-7
+13
-7
apps/nextjs/src/app/email-input.tsx
+13
-7
apps/nextjs/src/app/email-input.tsx
···
23
23
case "idle":
24
24
return (
25
25
<form
26
-
className="flex max-w-[90%] gap-1 rounded border p-1 backdrop-blur backdrop-brightness-50"
26
+
className="flex max-w-[90%] gap-1 rounded border border-neutral-400 p-1 shadow-white backdrop-blur backdrop-brightness-50 transition-shadow focus-within:shadow-xl hover:shadow-xl"
27
27
onSubmit={(evt) => {
28
28
evt.preventDefault();
29
29
send.mutate();
30
30
}}
31
31
>
32
32
<input
33
-
className="flex-1 rounded-sm border bg-transparent px-4 py-2 text-white"
33
+
className="flex-1 rounded-sm border border-neutral-400 bg-transparent px-4 py-2 text-white focus:outline-none focus:ring-1 focus:ring-white"
34
34
type="email"
35
35
value={email}
36
36
onChange={(evt) => setEmail(evt.target.value)}
···
40
40
<button
41
41
type="submit"
42
42
disabled={!email}
43
-
className="rounded-sm border px-4 text-white"
43
+
className="cursor-pointer rounded-sm border border-neutral-400 px-4 text-white transition hover:border-white hover:bg-white hover:text-black"
44
44
>
45
45
Join Waitlist
46
46
</button>
47
47
</form>
48
48
);
49
49
case "loading":
50
-
return <div className="h-[52px]" />;
50
+
return (
51
+
<div className="grid h-[50px] place-items-center rounded border border-neutral-400 px-8 text-white backdrop-blur backdrop-brightness-50">
52
+
<p className="text-center text-transparent text-white">
53
+
Thanks for joining the waitlist. We'll be in touch.
54
+
</p>
55
+
</div>
56
+
);
51
57
case "success":
52
58
return (
53
-
<div className="grid h-[52px] w-full place-items-center text-white">
59
+
<div className="grid h-[50px] place-items-center rounded border border-neutral-400 px-8 text-white backdrop-blur backdrop-brightness-50">
54
60
<p className="text-center text-white">
55
-
Thanks for joining the waitlist
61
+
Thanks for joining the waitlist. We'll be in touch.
56
62
</p>
57
63
</div>
58
64
);
59
65
case "error":
60
66
return (
61
-
<div className="grid h-[52px] w-full place-items-center text-white">
67
+
<div className="px8 grid h-[50px] place-items-center rounded border border-neutral-400 text-white backdrop-blur backdrop-brightness-50">
62
68
<p className="text-center text-white">
63
69
Error: {(send.error as Error)?.message ?? "Something went wrong"}
64
70
</p>