removed extra classNames

components/CollectionCard.tsx

@@ -66,7 +66,7 @@ export default function CollectionCard({ collection, className }: Props) {
           href={`/collections/${collection.id}`}
           className="flex flex-col gap-2 justify-between min-h-[12rem] h-full select-none p-5"
         >
-          <p className="text-2xl capitalize text-black dark:text-white break-words line-clamp-3 w-4/5">
+          <p className="text-2xl capitalize break-words line-clamp-3 w-4/5">
             {collection.name}
           </p>
           <div className="flex justify-between items-center">
@@ -90,7 +90,7 @@ export default function CollectionCard({ collection, className }: Props) {
               ) : null}
             </div>
             <div className="text-right w-40">
-              <div className="text-black dark:text-white font-bold text-sm flex justify-end gap-1 items-center">
+              <div className="font-bold text-sm flex justify-end gap-1 items-center">
                 {collection.isPublic ? (
                   <FontAwesomeIcon
                     icon={faGlobe}

components/Dropdown.tsx

@@ -84,7 +84,7 @@ export default function Dropdown({
         const inner = e && (
           <div className="cursor-pointer rounded-md">
             <div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 dark:hover:bg-neutral-700 duration-100">
-              <p className="text-black dark:text-white select-none">{e.name}</p>
+              <p className="select-none">{e.name}</p>
             </div>
           </div>
         );

components/FilterSearchDropdown.tsx

@@ -27,9 +27,7 @@ export default function FilterSearchDropdown({
       }}
       className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-40"
     >
-      <p className="mb-2 text-black dark:text-white text-center font-semibold">
-        Filter by
-      </p>
+      <p className="mb-2 text-center font-semibold">Filter by</p>
       <div className="flex flex-col gap-2">
         <Checkbox
           label="Name"

components/LinkCard.tsx

@@ -188,7 +188,7 @@ export default function LinkCard({ link, count, className }: Props) {
                 <p className="text-sm text-gray-500 dark:text-gray-300">
                   {count + 1}
                 </p>
-                <p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8">
+                <p className="text-lg truncate capitalize w-full pr-8">
                   {unescapeString(link.name || link.description)}
                 </p>
               </div>
@@ -204,9 +204,7 @@ export default function LinkCard({ link, count, className }: Props) {
                   className="w-4 h-4 mt-1 drop-shadow"
                   style={{ color: collection?.color }}
                 />
-                <p className="text-black dark:text-white truncate capitalize w-full">
-                  {collection?.name}
-                </p>
+                <p className="truncate capitalize w-full">{collection?.name}</p>
               </Link>
 
               {/* {link.tags[0] ? (
@@ -219,7 +217,7 @@ export default function LinkCard({ link, count, className }: Props) {
                         onClick={(e) => {
                           e.stopPropagation();
                         }}
-                        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}
                       </Link>

components/LinkPreview.tsx

@@ -75,7 +75,7 @@ export default function LinkPreview({ link, className, settings }: Props) {
             <div className="flex flex-col justify-between w-full">
               <div className="flex items-baseline gap-1">
                 <p className="text-sm text-gray-500 dark:text-gray-300">{1}</p>
-                <p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8">
+                <p className="text-lg truncate capitalize w-full pr-8">
                   {unescapeString(link.name as string)}
                 </p>
               </div>
@@ -84,9 +84,7 @@ export default function LinkPreview({ link, className, settings }: Props) {
                   icon={faFolder}
                   className="w-4 h-4 mt-1 drop-shadow text-sky-400"
                 />
-                <p className="text-black dark:text-white truncate capitalize w-full">
-                  Landing Pages ⚡️
-                </p>
+                <p className="truncate capitalize w-full">Landing Pages ⚡️</p>
               </div>
               <A
                 href={link.url as string}

components/LinkSidebar.tsx

@@ -76,9 +76,7 @@ export default function LinkSidebar({ className, onClick }: Props) {
               className="w-6 h-6 text-gray-500 dark:text-gray-300"
             />
 
-            <p className="text-black dark:text-white truncate w-full lg:hidden">
-              Edit
-            </p>
+            <p className="truncate w-full lg:hidden">Edit</p>
           </div>
         ) : undefined}
 
@@ -102,9 +100,7 @@ export default function LinkSidebar({ className, onClick }: Props) {
             className="w-6 h-6 text-gray-500 dark:text-gray-300"
           />
 
-          <p className="text-black dark:text-white truncate w-full lg:hidden">
-            Preserved Formats
-          </p>
+          <p className="truncate w-full lg:hidden">Preserved Formats</p>
         </div>
 
         {link?.collection.ownerId === userId ||
@@ -127,9 +123,7 @@ export default function LinkSidebar({ className, onClick }: Props) {
               className="w-6 h-6 text-gray-500 dark:text-gray-300"
             />
 
-            <p className="text-black dark:text-white truncate w-full lg:hidden">
-              Delete
-            </p>
+            <p className="truncate w-full lg:hidden">Delete</p>
           </div>
         ) : undefined}
       </div>

components/Modal/Collection/CollectionInfo.tsx

@@ -60,7 +60,7 @@ export default function CollectionInfo({
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       <div className="flex flex-col sm:flex-row gap-3">
         <div className="w-full">
-          <p className="text-black dark:text-white mb-2">Name</p>
+          <p className="mb-2">Name</p>
           <div className="flex flex-col gap-3">
             <TextInput
               value={collection.name}
@@ -71,7 +71,7 @@ export default function CollectionInfo({
             />
             <div className="color-picker flex justify-between">
               <div className="flex flex-col justify-between items-center w-32">
-                <p className="w-full text-black dark:text-white mb-2">Color</p>
+                <p className="w-full mb-2">Color</p>
                 <div style={{ color: collection.color }}>
                   <FontAwesomeIcon
                     icon={faFolder}
@@ -79,7 +79,7 @@ export default function CollectionInfo({
                   />
                 </div>
                 <div
-                  className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-black dark:text-white hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
+                  className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
                   onClick={() =>
                     setCollection({ ...collection, color: "#0ea5e9" })
                   }
@@ -96,7 +96,7 @@ export default function CollectionInfo({
         </div>
 
         <div className="w-full">
-          <p className="text-black dark:text-white mb-2">Description</p>
+          <p className="mb-2">Description</p>
           <textarea
             className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-gray-50 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..."

components/Modal/Collection/DeleteCollection.tsx

@@ -51,7 +51,7 @@ export default function DeleteCollection({
           <p className="text-red-500 font-bold text-center">Warning!</p>
 
           <div className="max-h-[20rem] overflow-y-auto">
-            <div className="text-black dark:text-white">
+            <div>
               <p>
                 Please note that deleting the collection will permanently remove
                 all its contents, including the following:
@@ -82,7 +82,7 @@ export default function DeleteCollection({
           </div>
 
           <div className="flex flex-col gap-3">
-            <p className="text-black dark:text-white text-center">
+            <p className="text-center">
               To confirm, type &quot;
               <span className="font-bold">{collection.name}</span>
               &quot; in the box below:
@@ -98,9 +98,7 @@ export default function DeleteCollection({
           </div>
         </>
       ) : (
-        <p className="text-black dark:text-white">
-          Click the button below to leave the current collection.
-        </p>
+        <p>Click the button below to leave the current collection.</p>
       )}
 
       <div

components/Modal/Collection/TeamManagement.tsx

@@ -102,7 +102,7 @@ export default function TeamManagement({
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       {permissions === true && (
         <>
-          <p className="text-black dark:text-white">Make Public</p>
+          <p>Make Public</p>
 
           <Checkbox
             label="Make this a public collection."
@@ -120,9 +120,7 @@ export default function TeamManagement({
 
       {collection.isPublic ? (
         <div>
-          <p className="text-black dark:text-white mb-2">
-            Public Link (Click to copy)
-          </p>
+          <p className="mb-2">Public Link (Click to copy)</p>
           <div
             onClick={() => {
               try {
@@ -146,7 +144,7 @@ export default function TeamManagement({
 
       {permissions === true && (
         <>
-          <p className="text-black dark:text-white">Member Management</p>
+          <p>Member Management</p>
 
           <div className="flex items-center gap-2">
             <TextInput
@@ -219,9 +217,7 @@ export default function TeamManagement({
                         className="border-[3px]"
                       />
                       <div>
-                        <p className="text-sm font-bold text-black dark:text-white">
-                          {e.user.name}
-                        </p>
+                        <p className="text-sm font-bold">{e.user.name}</p>
                         <p className="text-gray-500 dark:text-gray-300">
                           @{e.user.username}
                         </p>
@@ -230,7 +226,7 @@ export default function TeamManagement({
                     <div className="flex sm:block items-center justify-between gap-5 min-w-[10rem]">
                       <div>
                         <p
-                          className={`font-bold text-sm text-black dark:text-white ${
+                          className={`font-bold text-sm ${
                             permissions === true ? "" : "mb-2"
                           }`}
                         >
@@ -287,7 +283,7 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
+                              className={`peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
                                 permissions === true
                                   ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
                                   : ""
@@ -332,7 +328,7 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
+                              className={`peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
                                 permissions === true
                                   ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
                                   : ""
@@ -377,7 +373,7 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
+                              className={`peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
                                 permissions === true
                                   ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
                                   : ""
@@ -407,9 +403,7 @@ export default function TeamManagement({
           />
           <div>
             <div className="flex items-center gap-1">
-              <p className="text-sm font-bold text-black dark:text-white">
-                {collectionOwner.name}
-              </p>
+              <p className="text-sm font-bold">{collectionOwner.name}</p>
               <FontAwesomeIcon
                 icon={faCrown}
                 className="w-3 h-3 text-yellow-500"
@@ -421,7 +415,7 @@ export default function TeamManagement({
           </div>
         </div>
 
-        <div className="flex flex-col justify-center min-w-[10rem] text-black dark:text-white">
+        <div className="flex flex-col justify-center min-w-[10rem]">
           <p className={`font-bold text-sm`}>Permissions</p>
           <p>Full Access (Owner)</p>
         </div>

components/Modal/Collection/ViewTeam.tsx

@@ -43,9 +43,7 @@ export default function ViewTeam({ collection }: Props) {
           />
           <div className="w-full">
             <div className="flex items-center gap-1 w-full justify-between">
-              <p className="text-sm font-bold text-black dark:text-white">
-                {collectionOwner.name}
-              </p>
+              <p className="text-sm font-bold">{collectionOwner.name}</p>
               <div className="flex text-xs gap-1 items-center">
                 <FontAwesomeIcon
                   icon={faCrown}
@@ -78,9 +76,7 @@ export default function ViewTeam({ collection }: Props) {
                         className="border-[3px]"
                       />
                       <div>
-                        <p className="text-sm font-bold text-black dark:text-white">
-                          {e.user.name}
-                        </p>
+                        <p className="text-sm font-bold">{e.user.name}</p>
                         <p className="text-gray-500 dark:text-gray-300">
                           @{e.user.username}
                         </p>

components/Modal/Collection/index.tsx

@@ -60,7 +60,7 @@ export default function CollectionModal({
           </p>
         )}
         {method !== "VIEW_TEAM" && (
-          <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white">
+          <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5">
             {method === "UPDATE" && (
               <>
                 {isOwner && (

components/Modal/Link/AddOrEditLink.tsx

@@ -151,7 +151,7 @@ export default function AddOrEditLink({
       {method === "CREATE" ? (
         <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
           <div className="sm:col-span-3 col-span-5">
-            <p className="text-black dark:text-white mb-2">Address (URL)</p>
+            <p className="mb-2">Address (URL)</p>
             <TextInput
               value={link.url}
               onChange={(e) => setLink({ ...link, url: e.target.value })}
@@ -159,7 +159,7 @@ export default function AddOrEditLink({
             />
           </div>
           <div className="sm:col-span-2 col-span-5">
-            <p className="text-black dark:text-white mb-2">Collection</p>
+            <p className="mb-2">Collection</p>
             {link.collection.name ? (
               <CollectionSelection
                 onChange={setCollection}
@@ -189,7 +189,7 @@ export default function AddOrEditLink({
           {/* <hr className="mb-3 border border-sky-100 dark:border-neutral-700" /> */}
           <div className="grid sm:grid-cols-2 gap-3">
             <div className={`${method === "UPDATE" ? "sm:col-span-2" : ""}`}>
-              <p className="text-black dark:text-white mb-2">Name</p>
+              <p className="mb-2">Name</p>
               <TextInput
                 value={link.name}
                 onChange={(e) => setLink({ ...link, name: e.target.value })}
@@ -199,7 +199,7 @@ export default function AddOrEditLink({
 
             {method === "UPDATE" ? (
               <div>
-                <p className="text-black dark:text-white mb-2">Collection</p>
+                <p className="mb-2">Collection</p>
                 {link.collection.name ? (
                   <CollectionSelection
                     onChange={setCollection}
@@ -220,7 +220,7 @@ export default function AddOrEditLink({
             ) : undefined}
 
             <div>
-              <p className="text-black dark:text-white mb-2">Tags</p>
+              <p className="mb-2">Tags</p>
               <TagSelection
                 onChange={setTags}
                 defaultValue={link.tags.map((e) => {
@@ -230,7 +230,7 @@ export default function AddOrEditLink({
             </div>
 
             <div className="sm:col-span-2">
-              <p className="text-black dark:text-white mb-2">Description</p>
+              <p className="mb-2">Description</p>
               <textarea
                 value={unescapeString(link.description) as string}
                 onChange={(e) =>

components/Modal/Link/PreservedFormats.tsx

@@ -97,10 +97,10 @@ export default function PreservedFormats() {
               <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
             </div>
 
-            <p className="text-black dark:text-white">Screenshot</p>
+            <p>Screenshot</p>
           </div>
 
-          <div className="flex text-black dark:text-white gap-1">
+          <div className="flex gap-1">
             <div
               onClick={() => handleDownload(ArchivedFormat.screenshot)}
               className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
@@ -132,10 +132,10 @@ export default function PreservedFormats() {
               <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
             </div>
 
-            <p className="text-black dark:text-white">PDF</p>
+            <p>PDF</p>
           </div>
 
-          <div className="flex text-black dark:text-white gap-1">
+          <div className="flex gap-1">
             <div
               onClick={() => handleDownload(ArchivedFormat.pdf)}
               className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"

components/Navbar.tsx

@@ -93,7 +93,7 @@ export default function Navbar() {
             />
             <p
               id="profile-dropdown"
-              className="text-black dark:text-white leading-3 hidden sm:block select-none truncate max-w-[8rem] py-1"
+              className="leading-3 hidden sm:block select-none truncate max-w-[8rem] py-1"
             >
               {account.name}
             </p>

components/NoLinksFound.tsx

@@ -12,10 +12,10 @@ export default function NoLinksFound({ text }: Props) {
 
   return (
     <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full h-full flex flex-col justify-center 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">
         {text || "You haven't created any Links Here"}
       </p>
-      <div className="text-center text-black dark:text-white w-full mt-4">
+      <div className="text-center w-full mt-4">
         <div
           onClick={() => {
             setModal({

components/PublicPage/PublicLinkCard.tsx

@@ -57,7 +57,7 @@ export default function LinkCard({ link, count }: Props) {
                 <Link
                   href={"/public/collections/20?q=" + e.name}
                   key={i}
-                  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}
                 </Link>

components/RadioButton.tsx

@@ -26,9 +26,7 @@ export default function RadioButton({ label, state, onClick }: Props) {
         icon={faCircle}
         className="w-5 h-5 text-sky-500 dark:text-sky-500 peer-checked:hidden block"
       />
-      <span className="text-black dark:text-white rounded select-none">
-        {label}
-      </span>
+      <span className="rounded select-none">{label}</span>
     </label>
   );
 }

components/RequiredBadge.tsx

@@ -1,11 +0,0 @@
-export default function RequiredBadge() {
-  return (
-    <span
-      title="Required Field"
-      className="text-black dark:text-white cursor-help"
-    >
-      {" "}
-      *
-    </span>
-  );
-}

components/SettingsSidebar.tsx

@@ -53,9 +53,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
               className="w-6 h-6 text-sky-500 dark:text-sky-500"
             />
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              Account
-            </p>
+            <p className="truncate w-full pr-7">Account</p>
           </div>
         </Link>
 
@@ -72,9 +70,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
               className="w-6 h-6 text-sky-500 dark:text-sky-500"
             />
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              Appearance
-            </p>
+            <p className="truncate w-full pr-7">Appearance</p>
           </div>
         </Link>
 
@@ -91,9 +87,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
               className="w-6 h-6 text-sky-500 dark:text-sky-500"
             />
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              Archive
-            </p>
+            <p className="truncate w-full pr-7">Archive</p>
           </div>
         </Link>
 
@@ -108,9 +102,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
               className="w-6 h-6 text-sky-500 dark:text-sky-500"
             />
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              API Keys
-            </p>
+            <p className="truncate w-full pr-7">API Keys</p>
           </div>
         </Link>
 
@@ -127,9 +119,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
               className="w-6 h-6 text-sky-500 dark:text-sky-500"
             />
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              Password
-            </p>
+            <p className="truncate w-full pr-7">Password</p>
           </div>
         </Link>
 
@@ -147,9 +137,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
                 className="w-6 h-6 text-sky-500 dark:text-sky-500"
               />
 
-              <p className="text-black dark:text-white truncate w-full pr-7">
-                Billing
-              </p>
+              <p className="truncate w-full pr-7">Billing</p>
             </div>
           </Link>
         ) : undefined}
@@ -172,9 +160,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
               className="w-6 h-6 text-sky-500 dark:text-sky-500"
             />
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              Help
-            </p>
+            <p className="truncate w-full pr-7">Help</p>
           </div>
         </Link>
 
@@ -187,9 +173,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
               className="w-6 h-6 text-sky-500 dark:text-sky-500"
             />
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              GitHub
-            </p>
+            <p className="truncate w-full pr-7">GitHub</p>
           </div>
         </Link>
 
@@ -202,9 +186,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
               className="w-6 h-6 text-sky-500 dark:text-sky-500"
             />
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              Twitter
-            </p>
+            <p className="truncate w-full pr-7">Twitter</p>
           </div>
         </Link>
 
@@ -217,9 +199,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
               className="w-6 h-6 text-sky-500 dark:text-sky-500"
             />
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              Mastodon
-            </p>
+            <p className="truncate w-full pr-7">Mastodon</p>
           </div>
         </Link>
       </div>

components/Sidebar.tsx

@@ -67,9 +67,7 @@ export default function Sidebar({ className }: { className?: string }) {
               icon={faChartSimple}
               className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
             />
-            <p className="text-black dark:text-white truncate w-full">
-              Dashboard
-            </p>
+            <p className="truncate w-full">Dashboard</p>
           </div>
         </Link>
 
@@ -83,9 +81,7 @@ export default function Sidebar({ className }: { className?: string }) {
               icon={faLink}
               className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
             />
-            <p className="text-black dark:text-white truncate w-full">
-              All Links
-            </p>
+            <p className="truncate w-full">All Links</p>
           </div>
         </Link>
 
@@ -99,9 +95,7 @@ export default function Sidebar({ className }: { className?: string }) {
               icon={faFolder}
               className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
             />
-            <p className="text-black dark:text-white truncate w-full">
-              All Collections
-            </p>
+            <p className="truncate w-full">All Collections</p>
           </div>
         </Link>
 
@@ -115,9 +109,7 @@ export default function Sidebar({ className }: { className?: string }) {
               icon={faThumbTack}
               className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
             />
-            <p className="text-black dark:text-white truncate w-full">
-              Pinned Links
-            </p>
+            <p className="truncate w-full">Pinned Links</p>
           </div>
         </Link>
       </div>
@@ -165,9 +157,7 @@ export default function Sidebar({ className }: { className?: string }) {
                           className="w-6 h-6 drop-shadow"
                           style={{ color: e.color }}
                         />
-                        <p className="text-black dark:text-white truncate w-full">
-                          {e.name}
-                        </p>
+                        <p className="truncate w-full">{e.name}</p>
 
                         {e.isPublic ? (
                           <FontAwesomeIcon
@@ -235,9 +225,7 @@ export default function Sidebar({ className }: { className?: string }) {
                           className="w-4 h-4 text-sky-500 dark:text-sky-500 mt-1"
                         />
 
-                        <p className="text-black dark:text-white truncate w-full pr-7">
-                          {e.name}
-                        </p>
+                        <p className="truncate w-full pr-7">{e.name}</p>
                         <div className="drop-shadow text-gray-500 dark:text-gray-300 text-xs">
                           {e._count?.links}
                         </div>

components/SortDropdown.tsx

@@ -23,9 +23,7 @@ export default function SortDropdown({
       }}
       className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-52"
     >
-      <p className="mb-2 text-black dark:text-white text-center font-semibold">
-        Sort by
-      </p>
+      <p className="mb-2 text-center font-semibold">Sort by</p>
       <div className="flex flex-col gap-2">
         <RadioButton
           label="Date (Newest First)"

layouts/CenteredForm.tsx

@@ -42,7 +42,7 @@ export default function CenteredForm({ text, children }: Props) {
           />
         )} */}
         {text ? (
-          <p className="text-lg max-w-[30rem] min-w-80 w-full mx-auto font-semibold text-black dark:text-white px-2 text-center">
+          <p className="text-lg max-w-[30rem] min-w-80 w-full mx-auto font-semibold px-2 text-center">
             {text}
           </p>
         ) : undefined}

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