From bf8a0df4c2b5dade82a5a16f6738d58ec0e1b08e Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Thu, 17 Aug 2023 16:05:44 -0400
Subject: [PATCH] better input coloring in darkmode

---
 .../Modal/Collection/CollectionInfo.tsx       |  9 +++--
 .../Modal/Collection/DeleteCollection.tsx     |  8 ++---
 .../Modal/Collection/TeamManagement.tsx       | 11 +++----
 components/Modal/Link/AddOrEditLink.tsx       | 11 +++----
 components/Modal/User/ChangePassword.tsx      | 14 ++++----
 components/Modal/User/PrivacySettings.tsx     |  2 +-
 components/Modal/User/ProfileSettings.tsx     | 24 +++-----------
 components/Search.tsx                         |  2 +-
 components/TextInput.tsx                      | 33 +++++++++++++++++++
 pages/choose-username.tsx                     |  5 ++-
 pages/forgot.tsx                              |  6 ++--
 pages/login.tsx                               |  8 ++---
 pages/register.tsx                            | 18 ++++------
 styles/globals.css                            |  4 +--
 14 files changed, 79 insertions(+), 76 deletions(-)
 create mode 100644 components/TextInput.tsx

diff --git a/components/Modal/Collection/CollectionInfo.tsx b/components/Modal/Collection/CollectionInfo.tsx
index 73198d1..669d05e 100644
--- a/components/Modal/Collection/CollectionInfo.tsx
+++ b/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) =>
diff --git a/components/Modal/Collection/DeleteCollection.tsx b/components/Modal/Collection/DeleteCollection.tsx
index e6c8b6d..d119d5d 100644
--- a/components/Modal/Collection/DeleteCollection.tsx
+++ b/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({
               &quot; 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>
         </>
diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx
index 690ef10..6c6d5c3 100644
--- a/components/Modal/Collection/TeamManagement.tsx
+++ b/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>
diff --git a/components/Modal/Link/AddOrEditLink.tsx b/components/Modal/Link/AddOrEditLink.tsx
index fc0a011..00fc24b 100644
--- a/components/Modal/Link/AddOrEditLink.tsx
+++ b/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>
diff --git a/components/Modal/User/ChangePassword.tsx b/components/Modal/User/ChangePassword.tsx
index 5eb6730..552463c 100644
--- a/components/Modal/User/ChangePassword.tsx
+++ b/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
diff --git a/components/Modal/User/PrivacySettings.tsx b/components/Modal/User/PrivacySettings.tsx
index 17b920f..82631f7 100644
--- a/components/Modal/User/PrivacySettings.tsx
+++ b/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) => {
diff --git a/components/Modal/User/ProfileSettings.tsx b/components/Modal/User/ProfileSettings.tsx
index b3ad217..95ce4b8 100644
--- a/components/Modal/User/ProfileSettings.tsx
+++ b/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}
diff --git a/components/Search.tsx b/components/Search.tsx
index 9f24051..f3c8a3b 100644
--- a/components/Search.tsx
+++ b/components/Search.tsx
@@ -44,7 +44,7 @@ export default function Search() {
           router.push("/search/" + encodeURIComponent(searchQuery))
         }
         autoFocus={searchBox}
-        className="border border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none bg-inherit"
+        className="border border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none dark:bg-neutral-950"
       />
     </div>
   );
diff --git a/components/TextInput.tsx b/components/TextInput.tsx
new file mode 100644
index 0000000..c3909de
--- /dev/null
+++ b/components/TextInput.tsx
@@ -0,0 +1,33 @@
+import { ChangeEventHandler, KeyboardEventHandler } from "react";
+
+type Props = {
+  autoFocus?: boolean;
+  value?: string;
+  type?: string;
+  placeholder?: string;
+  onChange: ChangeEventHandler<HTMLInputElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement> | undefined;
+  className?: string;
+};
+
+export default function TextInput({
+  autoFocus,
+  value,
+  type,
+  placeholder,
+  onChange,
+  onKeyDown,
+  className,
+}: Props) {
+  return (
+    <input
+      autoFocus={autoFocus}
+      type={type ? type : "text"}
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+      onKeyDown={onKeyDown}
+      className={`w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 dark:bg-neutral-950 border-solid border outline-none focus:border-sky-700 focus:dark:border-sky-600 duration-100 ${className}`}
+    />
+  );
+}
diff --git a/pages/choose-username.tsx b/pages/choose-username.tsx
index bdf85bd..0dd385a 100644
--- a/pages/choose-username.tsx
+++ b/pages/choose-username.tsx
@@ -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>
diff --git a/pages/forgot.tsx b/pages/forgot.tsx
index 5e37d3e..d0c76ec 100644
--- a/pages/forgot.tsx
+++ b/pages/forgot.tsx
@@ -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>
 
diff --git a/pages/login.tsx b/pages/login.tsx
index 65b36f2..2b77163 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -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">
diff --git a/pages/register.tsx b/pages/register.tsx
index ea7a888..2602a2e 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -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>
 
diff --git a/styles/globals.css b/styles/globals.css
index bde9d0b..bbc732d 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -183,7 +183,6 @@
 }
 
 /* Theme */
-
 @layer base {
   body {
     @apply dark:bg-neutral-900 bg-white dark:text-white;
@@ -191,10 +190,9 @@
 }
 
 /* react-select */
-
 @layer components {
   .react-select-container .react-select__control {
-    @apply dark:bg-neutral-900 dark:border-neutral-700 dark:hover:border-neutral-500;
+    @apply dark:bg-neutral-950 dark:border-neutral-700 dark:hover:border-neutral-500;
   }
 
   .react-select-container {