removed extra classNames

pages/choose-username.tsx

@@ -42,16 +42,14 @@ export default function ChooseUsername() {
     <CenteredForm>
       <form onSubmit={submitUsername}>
         <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
-          <p className="text-3xl text-center text-black dark:text-white font-extralight">
+          <p className="text-3xl text-center font-extralight">
             Choose a Username
           </p>
 
           <hr className="border-1 border-sky-100 dark:border-neutral-700" />
 
           <div>
-            <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
-              Username
-            </p>
+            <p className="text-sm w-fit font-semibold mb-1">Username</p>
 
             <TextInput
               autoFocus

pages/collections/[id].tsx

@@ -69,7 +69,7 @@ export default function Index() {
                     style={{ color: activeCollection?.color }}
                     className="sm:w-8 sm:h-8 w-6 h-6 mt-3 drop-shadow"
                   />
-                  <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white w-full py-1 break-words hyphens-auto font-thin">
+                  <p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
                     {activeCollection?.name}
                   </p>
                 </div>
@@ -120,7 +120,7 @@ export default function Index() {
             ) : null}
           </div>
 
-          <div className="text-black dark:text-white flex justify-between items-end gap-5">
+          <div className="flex justify-between items-end gap-5">
             <p>{activeCollection?.description}</p>
             <div className="flex items-center gap-2">
               <div className="relative">

pages/collections/index.tsx

@@ -40,13 +40,11 @@ export default function Collections() {
                 className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
               />
               <div>
-                <p className="text-3xl capitalize text-black dark:text-white font-thin">
+                <p className="text-3xl capitalize font-thin">
                   Your Collections
                 </p>
 
-                <p className="text-black dark:text-white">
-                  Collections you own
-                </p>
+                <p>Collections you own</p>
               </div>
             </div>
             <div className="relative mt-2">
@@ -128,9 +126,7 @@ export default function Collections() {
               });
             }}
           >
-            <p className="text-black dark:text-white group-hover:opacity-0 duration-100">
-              New Collection
-            </p>
+            <p className="group-hover:opacity-0 duration-100">New Collection</p>
             <FontAwesomeIcon
               icon={faPlus}
               className="w-8 h-8 text-sky-500 dark:text-sky-500 group-hover:w-12 group-hover:h-12 group-hover:-mt-10 duration-100"
@@ -146,13 +142,11 @@ export default function Collections() {
                 className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
               />
               <div>
-                <p className="text-3xl capitalize text-black dark:text-white font-thin">
+                <p className="text-3xl capitalize font-thin">
                   Other Collections
                 </p>
 
-                <p className="text-black dark:text-white">
-                  Shared collections you&apos;re a member of
-                </p>
+                <p>Shared collections you&apos;re a member of</p>
               </div>
             </div>
 

pages/confirmation.tsx

@@ -5,7 +5,7 @@ import React from "react";
 export default function EmailConfirmaion() {
   return (
     <CenteredForm>
-      <div className="p-4 max-w-[30rem] min-w-80 w-full rounded-2xl shadow-md mx-auto border border-sky-100 dark:border-neutral-700 bg-slate-50 text-black dark:text-white dark:bg-neutral-800">
+      <div className="p-4 max-w-[30rem] min-w-80 w-full rounded-2xl shadow-md mx-auto border border-sky-100 dark:border-neutral-700 bg-slate-50 dark:bg-neutral-800">
         <p className="text-center text-2xl sm:text-3xl font-extralight mb-2 ">
           Please check your Email
         </p>

pages/dashboard.tsx

@@ -113,13 +113,9 @@ export default function Dashboard() {
             className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
           />
           <div>
-            <p className="text-3xl capitalize text-black dark:text-white font-thin">
-              Dashboard
-            </p>
+            <p className="text-3xl capitalize font-thin">Dashboard</p>
 
-            <p className="text-black dark:text-white">
-              A brief overview of your data
-            </p>
+            <p>A brief overview of your data</p>
           </div>
         </div>
 
@@ -157,19 +153,14 @@ export default function Dashboard() {
               icon={faClockRotateLeft}
               className="w-5 h-5 text-sky-500 dark:text-sky-500 drop-shadow"
             />
-            <p className="text-2xl text-black dark:text-white">
-              Recently Added Links
-            </p>
+            <p className="text-2xl">Recently Added Links</p>
           </div>
           <Link
             href="/links"
-            className="text-black dark:text-white flex items-center gap-2 cursor-pointer"
+            className="flex items-center gap-2 cursor-pointer"
           >
             View All
-            <FontAwesomeIcon
-              icon={faChevronRight}
-              className={`w-4 h-4 text-black dark:text-white`}
-            />
+            <FontAwesomeIcon icon={faChevronRight} className={`w-4 h-4`} />
           </Link>
         </div>
 
@@ -192,7 +183,7 @@ export default function Dashboard() {
               style={{ flex: "1 1 auto" }}
               className="sky-shadow flex flex-col justify-center h-full border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
             >
-              <p className="text-center text-2xl text-black dark:text-white">
+              <p className="text-center text-2xl">
                 View Your Recently Added Links Here!
               </p>
               <p className="text-center mx-auto max-w-96 w-fit text-gray-500 dark:text-gray-300 text-sm mt-2">
@@ -200,7 +191,7 @@ export default function Dashboard() {
                 Collections you have access to.
               </p>
 
-              <div className="text-center text-black dark:text-white w-full mt-4 flex flex-wrap gap-4 justify-center">
+              <div className="text-center w-full mt-4 flex flex-wrap gap-4 justify-center">
                 <div
                   onClick={() => {
                     setModal({
@@ -245,7 +236,7 @@ export default function Dashboard() {
                         if (target.id !== "import-dropdown")
                           setImportDropdown(false);
                       }}
-                      className={`absolute text-black dark:text-white top-10 left-0 w-52 py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
+                      className={`absolute top-10 left-0 w-52 py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
                     >
                       <div className="cursor-pointer rounded-md">
                         <label
@@ -297,17 +288,14 @@ export default function Dashboard() {
               icon={faThumbTack}
               className="w-5 h-5 text-sky-500 dark:text-sky-500 drop-shadow"
             />
-            <p className="text-2xl text-black dark:text-white">Pinned Links</p>
+            <p className="text-2xl">Pinned Links</p>
           </div>
           <Link
             href="/links/pinned"
-            className="text-black dark:text-white flex items-center gap-2 cursor-pointer"
+            className="flex items-center gap-2 cursor-pointer"
           >
             View All
-            <FontAwesomeIcon
-              icon={faChevronRight}
-              className={`w-4 h-4 text-black dark:text-white`}
-            />
+            <FontAwesomeIcon icon={faChevronRight} className={`w-4 h-4`} />
           </Link>
         </div>
 
@@ -332,7 +320,7 @@ export default function Dashboard() {
               style={{ flex: "1 1 auto" }}
               className="sky-shadow flex flex-col justify-center h-full border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
             >
-              <p className="text-center text-2xl text-black dark:text-white">
+              <p className="text-center text-2xl">
                 Pin Your Favorite Links Here!
               </p>
               <p className="text-center mx-auto max-w-96 w-fit text-gray-500 dark:text-gray-300 text-sm mt-2">

pages/forgot.tsx

@@ -44,14 +44,14 @@ export default function Forgot() {
     <CenteredForm>
       <form onSubmit={sendConfirmation}>
         <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
-          <p className="text-3xl text-center text-black dark:text-white font-extralight">
+          <p className="text-3xl text-center font-extralight">
             Password Recovery
           </p>
 
           <hr className="border-1 border-sky-100 dark:border-neutral-700" />
 
           <div>
-            <p className="text-black dark:text-white">
+            <p>
               Enter your email so we can send you a link to recover your
               account. Make sure to change your password in the profile settings
               afterwards.
@@ -61,9 +61,7 @@ export default function Forgot() {
             </p>
           </div>
           <div>
-            <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
-              Email
-            </p>
+            <p className="text-sm w-fit font-semibold mb-1">Email</p>
 
             <TextInput
               autoFocus
@@ -82,10 +80,7 @@ export default function Forgot() {
             loading={submitLoader}
           />
           <div className="flex items-baseline gap-1 justify-center">
-            <Link
-              href={"/login"}
-              className="block text-black dark:text-white font-bold"
-            >
+            <Link href={"/login"} className="block font-bold">
               Go back
             </Link>
           </div>

pages/links/[id].tsx

@@ -230,7 +230,7 @@ export default function Index() {
                   />
                   <p
                     title={link?.collection.name}
-                    className="text-black dark:text-white text-lg truncate max-w-[12rem]"
+                    className="text-lg truncate max-w-[12rem]"
                   >
                     {link?.collection.name}
                   </p>
@@ -239,7 +239,7 @@ export default function Index() {
                   <Link key={i} href={`/tags/${e.id}`} className="z-10">
                     <p
                       title={e.name}
-                      className="px-2 bg-sky-200 text-black dark:text-white dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
+                      className="px-2 bg-sky-200 dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
                     >
                       {e.name}
                     </p>
@@ -266,10 +266,10 @@ export default function Index() {
                 </p>
               ) : (
                 <>
-                  <p className="text-center text-2xl text-black dark:text-white">
+                  <p className="text-center text-2xl">
                     There is no reader view for this webpage
                   </p>
-                  <p className="text-center text-sm text-black dark:text-white">
+                  <p className="text-center text-sm">
                     {link?.collection.ownerId === userId
                       ? "You can update (refetch) the preserved formats by managing them below"
                       : "The collections owners can refetch the preserved formats"}

pages/links/index.tsx

@@ -27,13 +27,9 @@ export default function Links() {
               className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
             />
             <div>
-              <p className="text-3xl capitalize text-black dark:text-white font-thin">
-                All Links
-              </p>
+              <p className="text-3xl capitalize font-thin">All Links</p>
 
-              <p className="text-black dark:text-white">
-                Links from every Collections
-              </p>
+              <p>Links from every Collections</p>
             </div>
           </div>
 

pages/links/pinned.tsx

@@ -27,13 +27,9 @@ export default function PinnedLinks() {
               className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
             />
             <div>
-              <p className="text-3xl capitalize text-black dark:text-white font-thin">
-                Pinned Links
-              </p>
+              <p className="text-3xl capitalize font-thin">Pinned Links</p>
 
-              <p className="text-black dark:text-white">
-                Pinned Links from your Collections
-              </p>
+              <p>Pinned Links from your Collections</p>
             </div>
           </div>
 
@@ -70,7 +66,7 @@ export default function PinnedLinks() {
             style={{ flex: "1 1 auto" }}
             className="sky-shadow flex flex-col justify-center h-full border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
           >
-            <p className="text-center text-2xl text-black dark:text-white">
+            <p className="text-center text-2xl">
               Pin Your Favorite Links Here!
             </p>
             <p className="text-center mx-auto max-w-96 w-fit text-gray-500 dark:text-gray-300 text-sm mt-2">

pages/login.tsx

@@ -64,14 +64,14 @@ export default function Login() {
     <CenteredForm text="Sign in to your account">
       <form onSubmit={loginUser}>
         <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
-          <p className="text-3xl text-black dark:text-white text-center font-extralight">
+          <p className="text-3xl text-center font-extralight">
             Enter your credentials
           </p>
 
           <hr className="border-1 border-sky-100 dark:border-neutral-700" />
 
           <div>
-            <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
+            <p className="text-sm w-fit font-semibold mb-1">
               Username
               {emailEnabled ? " or Email" : undefined}
             </p>
@@ -86,9 +86,7 @@ export default function Login() {
           </div>
 
           <div className="w-full">
-            <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
-              Password
-            </p>
+            <p className="text-sm w-fit font-semibold mb-1">Password</p>
 
             <TextInput
               type="password"
@@ -130,10 +128,7 @@ export default function Login() {
               <p className="w-fit text-gray-500 dark:text-gray-400">
                 New here?
               </p>
-              <Link
-                href={"/register"}
-                className="block text-black dark:text-white font-semibold"
-              >
+              <Link href={"/register"} className="block font-semibold">
                 Sign Up
               </Link>
             </div>

pages/public/links/[id].tsx

@@ -230,7 +230,7 @@ export default function Index() {
                   />
                   <p
                     title={link?.collection?.name}
-                    className="text-black dark:text-white text-lg truncate max-w-[12rem]"
+                    className="text-lg truncate max-w-[12rem]"
                   >
                     {link?.collection?.name}
                   </p>
@@ -239,7 +239,7 @@ export default function Index() {
                   <Link key={i} href={`/tags/${e.id}`} className="z-10">
                     <p
                       title={e.name}
-                      className="px-2 py-1 bg-sky-200 text-black dark:text-white dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
+                      className="px-2 py-1 bg-sky-200 dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
                     >
                       {e.name}
                     </p>
@@ -266,10 +266,10 @@ export default function Index() {
                 </p>
               ) : (
                 <>
-                  <p className="text-center text-2xl text-black dark:text-white">
+                  <p className="text-center text-2xl">
                     There is no reader view for this webpage
                   </p>
-                  <p className="text-center text-sm text-black dark:text-white">
+                  <p className="text-center text-sm">
                     {link?.collection?.ownerId === userId
                       ? "You can update (refetch) the preserved formats by managing them below"
                       : "The collections owners can refetch the preserved formats"}

pages/register.tsx

@@ -113,16 +113,14 @@ export default function Register() {
       ) : (
         <form onSubmit={registerUser}>
           <div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full mx-auto bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
-            <p className="text-3xl text-black dark:text-white text-center font-extralight">
+            <p className="text-3xl text-center font-extralight">
               Enter your details
             </p>
 
             <hr className="border-1 border-sky-100 dark:border-neutral-700" />
 
             <div>
-              <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
-                Display Name
-              </p>
+              <p className="text-sm w-fit font-semibold mb-1">Display Name</p>
 
               <TextInput
                 autoFocus={true}
@@ -135,9 +133,7 @@ export default function Register() {
 
             {emailEnabled ? undefined : (
               <div>
-                <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
-                  Username
-                </p>
+                <p className="text-sm w-fit font-semibold mb-1">Username</p>
 
                 <TextInput
                   placeholder="john"
@@ -152,9 +148,7 @@ export default function Register() {
 
             {emailEnabled ? (
               <div>
-                <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
-                  Email
-                </p>
+                <p className="text-sm w-fit font-semibold mb-1">Email</p>
 
                 <TextInput
                   type="email"
@@ -167,9 +161,7 @@ export default function Register() {
             ) : undefined}
 
             <div className="w-full">
-              <p className="text-sm text-black dark:text-white w-fit font-semibold  mb-1">
-                Password
-              </p>
+              <p className="text-sm w-fit font-semibold  mb-1">Password</p>
 
               <TextInput
                 type="password"
@@ -181,7 +173,7 @@ export default function Register() {
             </div>
 
             <div className="w-full">
-              <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
+              <p className="text-sm w-fit font-semibold mb-1">
                 Confirm Password
               </p>
 
@@ -238,10 +230,7 @@ export default function Register() {
               <p className="w-fit text-gray-500 dark:text-gray-400">
                 Already have an account?
               </p>
-              <Link
-                href={"/login"}
-                className="block text-black dark:text-white font-bold"
-              >
+              <Link href={"/login"} className="block font-bold">
                 Login
               </Link>
             </div>

pages/search.tsx

@@ -47,7 +47,7 @@ export default function Search() {
                 icon={faSearch}
                 className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-500 drop-shadow"
               />
-              <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-thin">
+              <p className="sm:text-4xl text-3xl capitalize font-thin">
                 Search Results
               </p>
             </div>
@@ -106,7 +106,7 @@ export default function Search() {
             })}
           </div>
         ) : (
-          <p className="text-black dark:text-white">
+          <p>
             Nothing found.{" "}
             <span className="font-bold text-xl" title="Shruggie">
               ¯\_(ツ)_/¯

pages/settings/account.tsx

@@ -159,14 +159,14 @@ export default function Account() {
         <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
           <div className="flex flex-col gap-3">
             <div>
-              <p className="text-black dark:text-white mb-2">Display Name</p>
+              <p className="mb-2">Display Name</p>
               <TextInput
                 value={user.name || ""}
                 onChange={(e) => setUser({ ...user, name: e.target.value })}
               />
             </div>
             <div>
-              <p className="text-black dark:text-white mb-2">Username</p>
+              <p className="mb-2">Username</p>
               <TextInput
                 value={user.username || ""}
                 onChange={(e) => setUser({ ...user, username: e.target.value })}
@@ -175,7 +175,7 @@ export default function Account() {
 
             {emailEnabled ? (
               <div>
-                <p className="text-black dark:text-white mb-2">Email</p>
+                <p className="mb-2">Email</p>
                 {user.email !== account.email &&
                 process.env.NEXT_PUBLIC_STRIPE === "true" ? (
                   <p className="text-gray-500 dark:text-gray-400 mb-2 text-sm">
@@ -191,9 +191,7 @@ export default function Account() {
           </div>
 
           <div className="sm:row-span-2 sm:justify-self-center mx-auto my-3">
-            <p className="text-black dark:text-white mb-2 text-center">
-              Profile Photo
-            </p>
+            <p className="mb-2 text-center">Profile Photo</p>
             <div className="w-28 h-28 flex items-center justify-center rounded-full relative">
               <ProfilePhoto
                 priority={true}
@@ -232,7 +230,7 @@ export default function Account() {
 
         <div>
           <div className="flex items-center gap-2 w-full rounded-md h-8">
-            <p className="text-black dark:text-white truncate w-full pr-7 text-3xl font-thin">
+            <p className="truncate w-full pr-7 text-3xl font-thin">
               Import & Export
             </p>
           </div>
@@ -241,9 +239,7 @@ export default function Account() {
 
           <div className="flex gap-3 flex-col">
             <div>
-              <p className="text-black dark:text-white mb-2">
-                Import your data from other platforms.
-              </p>
+              <p className="mb-2">Import your data from other platforms.</p>
               <div
                 onClick={() => setImportDropdown(true)}
                 className="w-fit relative"
@@ -306,9 +302,7 @@ export default function Account() {
             </div>
 
             <div>
-              <p className="text-black dark:text-white mb-2">
-                Download your data instantly.
-              </p>
+              <p className="mb-2">Download your data instantly.</p>
               <Link className="w-fit" href="/api/v1/migration">
                 <div className="border w-fit border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600">
                   Export Data
@@ -320,7 +314,7 @@ export default function Account() {
 
         <div>
           <div className="flex items-center gap-2 w-full rounded-md h-8">
-            <p className="text-black dark:text-white truncate w-full pr-7 text-3xl font-thin">
+            <p className="truncate w-full pr-7 text-3xl font-thin">
               Profile Visibility
             </p>
           </div>
@@ -339,9 +333,7 @@ export default function Account() {
 
           {user.isPrivate && (
             <div className="pl-5">
-              <p className="text-black dark:text-white mt-2">
-                Whitelisted Users
-              </p>
+              <p className="mt-2">Whitelisted Users</p>
               <p className="text-gray-500 dark:text-gray-300 text-sm mb-3">
                 Please provide the Username of the users you wish to grant
                 visibility to your profile. Separated by comma.

pages/settings/appearance.tsx

@@ -105,9 +105,7 @@ export default function Appearance() {
 
         <div>
           <div className="flex items-center gap-2 w-full rounded-md h-8">
-            <p className="text-black dark:text-white truncate w-full pr-7 text-3xl font-thin">
-              Link Card
-            </p>
+            <p className="truncate w-full pr-7 text-3xl font-thin">Link Card</p>
           </div>
           <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
           <Checkbox

pages/settings/billing.tsx

@@ -16,7 +16,7 @@ export default function Billing() {
       <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
 
       <div className="w-full mx-auto flex flex-col gap-3 justify-between">
-        <p className="text-md text-black dark:text-white">
+        <p className="text-md">
           To manage/cancel your subscription, visit the{" "}
           <a
             href={process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL}
@@ -27,7 +27,7 @@ export default function Billing() {
           .
         </p>
 
-        <p className="text-md text-black dark:text-white">
+        <p className="text-md">
           If you still need help or encountered any issues, feel free to reach
           out to us at:{" "}
           <a

pages/settings/delete.tsx

@@ -80,9 +80,7 @@ export default function Password() {
 
         {process.env.NEXT_PUBLIC_KEYCLOAK_ENABLED !== "true" ? (
           <div>
-            <p className="mb-2 text-black dark:text-white">
-              Confirm Your Password
-            </p>
+            <p className="mb-2">Confirm Your Password</p>
 
             <TextInput
               value={password}
@@ -120,7 +118,7 @@ export default function Password() {
               </select>
             </label>
             <div>
-              <p className="text-sm mb-2 text-black dark:text-white">
+              <p className="text-sm mb-2">
                 More information (the more details, the more helpful it&apos;d
                 be)
               </p>

pages/settings/password.tsx

@@ -54,7 +54,7 @@ export default function Password() {
         should be at least 8 characters.
       </p>
       <div className="w-full flex flex-col gap-2 justify-between">
-        <p className="text-black dark:text-white">New Password</p>
+        <p>New Password</p>
 
         <TextInput
           value={newPassword}
@@ -63,7 +63,7 @@ export default function Password() {
           type="password"
         />
 
-        <p className="text-black dark:text-white">Confirm New Password</p>
+        <p>Confirm New Password</p>
 
         <TextInput
           value={newPassword2}

pages/subscribe.tsx

@@ -50,7 +50,7 @@ export default function Subscribe() {
         <div className="flex text-white dark:text-black gap-3 border border-solid border-sky-100 dark:border-neutral-700 w-4/5 mx-auto p-1 rounded-xl relative">
           <button
             onClick={() => setPlan(Plan.monthly)}
-            className={`w-full text-black dark:text-white duration-100 text-sm rounded-lg p-1 ${
+            className={`w-full duration-100 text-sm rounded-lg p-1 ${
               plan === Plan.monthly
                 ? "text-white bg-sky-700 dark:bg-sky-700"
                 : "hover:opacity-80"
@@ -61,7 +61,7 @@ export default function Subscribe() {
 
           <button
             onClick={() => setPlan(Plan.yearly)}
-            className={`w-full text-black dark:text-white duration-100 text-sm rounded-lg p-1 ${
+            className={`w-full duration-100 text-sm rounded-lg p-1 ${
               plan === Plan.yearly
                 ? "text-white bg-sky-700 dark:bg-sky-700"
                 : "hover:opacity-80"

pages/tags/[id].tsx

@@ -115,7 +115,7 @@ export default function Index() {
                     <input
                       type="text"
                       autoFocus
-                      className="sm:text-4xl text-3xl capitalize text-black dark:text-white bg-transparent h-10 w-3/4 outline-none border-b border-b-sky-100 dark:border-b-neutral-700"
+                      className="sm:text-4xl text-3xl capitalize bg-transparent h-10 w-3/4 outline-none border-b border-b-sky-100 dark:border-b-neutral-700"
                       value={newTagName}
                       onChange={(e) => setNewTagName(e.target.value)}
                     />
@@ -145,7 +145,7 @@ export default function Index() {
                 </>
               ) : (
                 <>
-                  <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
+                  <p className="sm:text-4xl text-3xl capitalize">
                     {activeTag?.name}
                   </p>
                   <div className="relative">