better input coloring in darkmode

components/Modal/Collection/CollectionInfo.tsx

@@ -11,6 +11,7 @@ import SubmitButton from "@/components/SubmitButton";
 import { HexColorPicker } from "react-colorful";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { toast } from "react-hot-toast";
+import TextInput from "@/components/TextInput";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -65,14 +66,12 @@ export default function CollectionInfo({
             <RequiredBadge />
           </p>
           <div className="flex flex-col gap-3">
-            <input
+            <TextInput
               value={collection.name}
+              placeholder="e.g. Example Collection"
               onChange={(e) =>
                 setCollection({ ...collection, name: e.target.value })
               }
-              type="text"
-              placeholder="e.g. Example Collection"
-              className="w-full rounded-md p-3 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"
             />
             <div className="color-picker flex justify-between">
               <div className="flex flex-col justify-between items-center w-32">
@@ -105,7 +104,7 @@ export default function CollectionInfo({
         <div className="w-full">
           <p className="text-sm text-black dark:text-white mb-2">Description</p>
           <textarea
-            className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white dark:bg-neutral-900 p-3 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
+            className="w-full h-[11.4rem] 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="The purpose of this Collection..."
             value={collection.description}
             onChange={(e) =>

components/Modal/Collection/DeleteCollection.tsx

@@ -9,6 +9,7 @@ import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
 import usePermissions from "@/hooks/usePermissions";
 import { toast } from "react-hot-toast";
+import TextInput from "@/components/TextInput";
 
 type Props = {
   toggleDeleteCollectionModal: Function;
@@ -87,13 +88,12 @@ export default function DeleteCollection({
               " in the box below:
             </p>
 
-            <input
-              autoFocus
+            <TextInput
+              autoFocus={true}
               value={inputField}
               onChange={(e) => setInputField(e.target.value)}
-              type="text"
               placeholder={`Type "${collection.name}" Here.`}
-              className="w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 dark:bg-neutral-900 border-solid border outline-none duration-100"
+              className="w-3/4 mx-auto"
             />
           </div>
         </>

components/Modal/Collection/TeamManagement.tsx

@@ -17,6 +17,7 @@ import ProfilePhoto from "@/components/ProfilePhoto";
 import usePermissions from "@/hooks/usePermissions";
 import { toast } from "react-hot-toast";
 import getPublicUserData from "@/lib/client/getPublicUserData";
+import TextInput from "@/components/TextInput";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -148,7 +149,7 @@ export default function TeamManagement({
                 console.log(err);
               }
             }}
-            className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-3 border-sky-100 dark:border-neutral-700 border-solid border outline-none hover:border-sky-300 dark:hover:border-sky-600 duration-100 cursor-text"
+            className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 dark:bg-neutral-950 border-sky-100 dark:border-neutral-700 border-solid border outline-none hover:border-sky-300 dark:hover:border-sky-600 duration-100 cursor-text"
           >
             {publicCollectionURL}
           </div>
@@ -164,8 +165,9 @@ export default function TeamManagement({
           </p>
 
           <div className="flex items-center gap-2">
-            <input
+            <TextInput
               value={member.user.username || ""}
+              placeholder="Username (without the '@')"
               onChange={(e) => {
                 setMember({
                   ...member,
@@ -181,9 +183,6 @@ export default function TeamManagement({
                   setMemberState
                 )
               }
-              type="text"
-              placeholder="Username (without the '@')"
-              className="w-full rounded-md p-3 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"
             />
 
             <div
@@ -195,7 +194,7 @@ export default function TeamManagement({
                   setMemberState
                 )
               }
-              className="flex items-center justify-center bg-sky-700 dark:bg-sky-400 hover:bg-sky-600 duration-100 text-white w-12 h-12 p-3 rounded-md cursor-pointer"
+              className="flex items-center justify-center bg-sky-700 hover:bg-sky-600 duration-100 text-white w-10 h-10 p-2 rounded-md cursor-pointer"
             >
               <FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
             </div>

components/Modal/Link/AddOrEditLink.tsx

@@ -12,6 +12,7 @@ import { useRouter } from "next/router";
 import SubmitButton from "../../SubmitButton";
 import { toast } from "react-hot-toast";
 import Link from "next/link";
+import TextInput from "@/components/TextInput";
 
 type Props =
   | {
@@ -130,12 +131,10 @@ export default function AddOrEditLink({
             Address (URL)
             <RequiredBadge />
           </p>
-          <input
+          <TextInput
             value={link.url}
             onChange={(e) => setLink({ ...link, url: e.target.value })}
-            type="text"
             placeholder="e.g. http://example.com/"
-            className="w-full rounded-md p-2 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"
           />
         </div>
       ) : null}
@@ -172,12 +171,10 @@ export default function AddOrEditLink({
 
         <div className="sm:col-span-2">
           <p className="text-sm text-black dark:text-white mb-2">Name</p>
-          <input
+          <TextInput
             value={link.name}
             onChange={(e) => setLink({ ...link, name: e.target.value })}
-            type="text"
             placeholder="e.g. Example Link"
-            className="w-full rounded-md p-2 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"
           />
         </div>
 
@@ -191,7 +188,7 @@ export default function AddOrEditLink({
                 ? "Will be auto generated if nothing is provided."
                 : ""
             }
-            className="resize-none w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-900"
+            className="resize-none w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
           />
         </div>
       </div>

components/Modal/User/ChangePassword.tsx

@@ -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

components/Modal/User/PrivacySettings.tsx

@@ -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) => {

components/Modal/User/ProfileSettings.tsx

@@ -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}