better input coloring in darkmode

This commit is contained in:
Daniel
2023-08-17 16:05:44 -04:00
parent 122b331efa
commit bf8a0df4c2
14 changed files with 79 additions and 76 deletions
+2 -3
View File
@@ -7,6 +7,7 @@ import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import useAccountStore from "@/store/account";
import CenteredForm from "@/layouts/CenteredForm";
import TextInput from "@/components/TextInput";
export default function Subscribe() {
const [submitLoader, setSubmitLoader] = useState(false);
@@ -49,12 +50,10 @@ export default function Subscribe() {
Username
</p>
<input
type="text"
<TextInput
placeholder="john"
value={inputedUsername}
onChange={(e) => setInputedUsername(e.target.value)}
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 dark:border-neutral-700 dark:bg-neutral-900 duration-100"
/>
</div>
<div>
+3 -3
View File
@@ -1,4 +1,5 @@
import SubmitButton from "@/components/SubmitButton";
import TextInput from "@/components/TextInput";
import CenteredForm from "@/layouts/CenteredForm";
import { signIn } from "next-auth/react";
import Image from "next/image";
@@ -59,12 +60,11 @@ export default function Forgot() {
Email
</p>
<input
type="text"
<TextInput
type="email"
placeholder="johnny@example.com"
value={form.email}
onChange={(e) => setForm({ ...form, email: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none dark:focus:border-sky-600 dark:border-neutral-700 dark:bg-neutral-900 focus:border-sky-700 duration-100"
/>
</div>
+3 -5
View File
@@ -1,4 +1,5 @@
import SubmitButton from "@/components/SubmitButton";
import TextInput from "@/components/TextInput";
import CenteredForm from "@/layouts/CenteredForm";
import { signIn } from "next-auth/react";
import Image from "next/image";
@@ -58,12 +59,10 @@ export default function Login() {
{emailEnabled ? " or Email" : undefined}
</p>
<input
type="text"
<TextInput
placeholder="johnny"
value={form.username}
onChange={(e) => setForm({ ...form, username: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-300 dark:focus:border-sky-600 duration-100"
/>
</div>
@@ -72,12 +71,11 @@ export default function Login() {
Password
</p>
<input
<TextInput
type="password"
placeholder="••••••••••••••"
value={form.password}
onChange={(e) => setForm({ ...form, password: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-300 dark:focus:border-sky-600 duration-100"
/>
{emailEnabled && (
<div className="w-fit ml-auto mt-1">
+6 -12
View File
@@ -5,6 +5,7 @@ import SubmitButton from "@/components/SubmitButton";
import { signIn } from "next-auth/react";
import { useRouter } from "next/router";
import CenteredForm from "@/layouts/CenteredForm";
import TextInput from "@/components/TextInput";
const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
@@ -107,12 +108,10 @@ export default function Register() {
Display Name
</p>
<input
type="text"
<TextInput
placeholder="Johnny"
value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 duration-100"
/>
</div>
@@ -122,12 +121,10 @@ export default function Register() {
Username
</p>
<input
type="text"
<TextInput
placeholder="john"
value={form.username}
onChange={(e) => setForm({ ...form, username: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 duration-100"
/>
</div>
)}
@@ -138,12 +135,11 @@ export default function Register() {
Email
</p>
<input
<TextInput
type="email"
placeholder="johnny@example.com"
value={form.email}
onChange={(e) => setForm({ ...form, email: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 duration-100"
/>
</div>
) : undefined}
@@ -153,12 +149,11 @@ export default function Register() {
Password
</p>
<input
<TextInput
type="password"
placeholder="••••••••••••••"
value={form.password}
onChange={(e) => setForm({ ...form, password: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 duration-100"
/>
</div>
@@ -167,14 +162,13 @@ export default function Register() {
Confirm Password
</p>
<input
<TextInput
type="password"
placeholder="••••••••••••••"
value={form.passwordConfirmation}
onChange={(e) =>
setForm({ ...form, passwordConfirmation: e.target.value })
}
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 duration-100"
/>
</div>