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
+7 -7
View File
@@ -5,6 +5,7 @@ import { signOut, useSession } from "next-auth/react";
import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
import SubmitButton from "@/components/SubmitButton";
import { toast } from "react-hot-toast";
import TextInput from "@/components/TextInput";
type Props = {
togglePasswordFormModal: Function;
@@ -80,26 +81,25 @@ export default function ChangePassword({
return (
<div className="mx-auto sm:w-[35rem] w-80">
<div className="max-w-[25rem] w-full mx-auto flex flex-col gap-3 justify-between">
<div className="max-w-[25rem] w-full mx-auto flex flex-col gap-2 justify-between">
<p className="text-sm text-black dark:text-white">New Password</p>
<input
<TextInput
value={newPassword}
onChange={(e) => setNewPassword1(e.target.value)}
type="password"
placeholder="••••••••••••••"
className="w-full rounded-md p-3 mx-auto dark:bg-neutral-900 border-solid border outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 duration-100"
type="password"
/>
<p className="text-sm text-black dark:text-white">
Confirm New Password
</p>
<input
<TextInput
value={newPassword2}
onChange={(e) => setNewPassword2(e.target.value)}
type="password"
placeholder="••••••••••••••"
className="w-full rounded-md p-3 mx-auto dark:bg-neutral-900 border-solid border outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 duration-100"
type="password"
/>
<SubmitButton
+1 -1
View File
@@ -144,7 +144,7 @@ export default function PrivacySettings({
visibility to your profile. Separated by comma.
</p>
<textarea
className="w-full resize-none border rounded-md duration-100 bg-white dark:bg-neutral-900 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
className="w-full resize-none border rounded-md duration-100 bg-white dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
placeholder="Your profile is hidden from everyone right now..."
value={whitelistedUsersTextbox}
onChange={(e) => {
+5 -19
View File
@@ -9,6 +9,7 @@ import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
import SubmitButton from "../../SubmitButton";
import ProfilePhoto from "../../ProfilePhoto";
import { toast } from "react-hot-toast";
import TextInput from "@/components/TextInput";
type Props = {
toggleSettingsModal: Function;
@@ -150,32 +151,26 @@ export default function ProfileSettings({
<p className="text-sm text-black dark:text-white mb-2">
Display Name
</p>
<input
type="text"
value={user.name}
<TextInput
value={user.name || ""}
onChange={(e) => setUser({ ...user, name: e.target.value })}
className="w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 focus:dark:border-sky-600 duration-100"
/>
</div>
<div>
<p className="text-sm text-black dark:text-white mb-2">Username</p>
<input
type="text"
<TextInput
value={user.username || ""}
onChange={(e) => setUser({ ...user, username: e.target.value })}
className="w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 focus:dark:border-sky-600 duration-100"
/>
</div>
{emailEnabled ? (
<div>
<p className="text-sm text-black dark:text-white mb-2">Email</p>
<input
type="text"
<TextInput
value={user.email || ""}
onChange={(e) => setUser({ ...user, email: e.target.value })}
className="w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 focus:dark:border-sky-600 duration-100"
/>
</div>
) : undefined}
@@ -188,15 +183,6 @@ export default function ProfileSettings({
</div>
</div>
{/* <hr /> TODO: Export functionality
<p className="text-black">Data Settings</p>
<div className="w-fit">
<div className="border border-sky-100 rounded-md bg-white px-2 py-1 text-center select-none cursor-pointer text-black duration-100 hover:border-sky-700">
Export Data
</div>
</div> */}
<SubmitButton
onClick={submit}
loading={submitLoader}