many coloring changes and improvements

pages/choose-username.tsx

@@ -45,7 +45,7 @@ export default function Subscribe() {
         </p>
 
         <div>
-          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
+          <p className="text-sm text-black w-fit font-semibold mb-1">
             Username
           </p>
 

pages/collections/[id].tsx

@@ -60,7 +60,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-sky-700 dark:text-sky-300 font-bold w-full py-1 break-words hyphens-auto">
+                  <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold w-full py-1 break-words hyphens-auto">
                     {activeCollection?.name}
                   </p>
                 </div>
@@ -116,7 +116,7 @@ export default function Index() {
             ) : null}
           </div>
 
-          <div className="text-gray-600 dark:text-sky-400 flex justify-between items-end gap-5">
+          <div className="text-gray-600 dark:text-white flex justify-between items-end gap-5">
             <p>{activeCollection?.description}</p>
             <div className="flex items-center gap-2">
               <div className="relative">
@@ -128,7 +128,7 @@ export default function Index() {
                   <FontAwesomeIcon
                     icon={faSort}
                     id="sort-dropdown"
-                    className="w-5 h-5 text-gray-500 dark:text-sky-400"
+                    className="w-5 h-5 text-gray-500 dark:text-white"
                   />
                 </div>
 
@@ -150,7 +150,7 @@ export default function Index() {
                     icon={faEllipsis}
                     id="expand-dropdown"
                     title="More"
-                    className="w-5 h-5 text-gray-500 dark:text-sky-400"
+                    className="w-5 h-5 text-gray-500 dark:text-white"
                   />
                 </div>
                 {expandDropdown ? (

pages/collections/index.tsx

@@ -39,7 +39,7 @@ export default function Collections() {
                 icon={faFolder}
                 className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
               />
-              <p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-400 font-bold">
+              <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold">
                 All Collections
               </p>
             </div>
@@ -52,7 +52,7 @@ export default function Collections() {
                 <FontAwesomeIcon
                   icon={faEllipsis}
                   id="expand-dropdown"
-                  className="w-5 h-5 text-gray-500 dark:text-sky-500"
+                  className="w-5 h-5 text-gray-500 dark:text-white"
                 />
               </div>
 
@@ -91,7 +91,7 @@ export default function Collections() {
               <FontAwesomeIcon
                 icon={faSort}
                 id="sort-dropdown"
-                className="w-5 h-5 text-gray-500 dark:text-sky-500"
+                className="w-5 h-5 text-gray-500 dark:text-white"
               />
             </div>
 
@@ -120,7 +120,7 @@ export default function Collections() {
               });
             }}
           >
-            <p className="text-sky-900 dark:text-sky-400 group-hover:opacity-0 duration-100">
+            <p className="text-black dark:text-white group-hover:opacity-0 duration-100">
               New Collection
             </p>
             <FontAwesomeIcon

pages/confirmation.tsx

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

pages/dashboard.tsx

@@ -85,7 +85,7 @@ export default function Dashboard() {
               icon={faChartSimple}
               className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
             />
-            <p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-400 font-bold">
+            <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold">
               Dashboard
             </p>
           </div>
@@ -95,24 +95,28 @@ export default function Dashboard() {
 
         <div className="flex flex-col md:flex-row md:items-center justify-evenly gap-2 mb-10">
           <div className="flex items-baseline gap-2">
-            <p className="font-bold text-6xl text-sky-700 dark:text-sky-300">{numberOfLinks}</p>
-            <p className="text-sky-900 dark:text-sky-500 text-xl">
+            <p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
+              {numberOfLinks}
+            </p>
+            <p className="text-black dark:text-white text-xl">
               {numberOfLinks === 1 ? "Link" : "Links"}
             </p>
           </div>
 
           <div className="flex items-baseline gap-2">
-            <p className="font-bold text-6xl text-sky-700 dark:text-sky-300">
+            <p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
               {collections.length}
             </p>
-            <p className="text-sky-900 dark:text-sky-500 text-xl">
+            <p className="text-black dark:text-white text-xl">
               {collections.length === 1 ? "Collection" : "Collections"}
             </p>
           </div>
 
           <div className="flex items-baseline gap-2">
-            <p className="font-bold text-6xl text-sky-700 dark:text-sky-300">{tags.length}</p>
-            <p className="text-sky-900 dark:text-sky-500 text-xl">
+            <p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
+              {tags.length}
+            </p>
+            <p className="text-black dark:text-white text-xl">
               {tags.length === 1 ? "Tag" : "Tags"}
             </p>
           </div>
@@ -131,13 +135,13 @@ export default function Dashboard() {
                   }}
                   className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
                 >
-                  <p className="text-sky-700 text-xl">Pinned Links</p>
+                  <p className="text-black text-xl">Pinned Links</p>
 
-                  <div className="text-sky-700 flex items-center gap-2">
+                  <div className="text-black flex items-center gap-2">
                     {linkPinDisclosure ? "Hide" : "Show"}
                     <FontAwesomeIcon
                       icon={faChevronDown}
-                      className={`w-4 h-4 text-sky-300 ${
+                      className={`w-4 h-4 text-black ${
                         linkPinDisclosure ? "rotate-reverse" : "rotate"
                       }`}
                     />
@@ -164,10 +168,10 @@ export default function Dashboard() {
             </Disclosure>
           ) : (
             <div className="border border-solid border-sky-100 dark:border-sky-800 w-full mx-auto md:w-2/3 p-10 rounded-2xl">
-              <p className="text-center text-2xl text-sky-700 dark:text-sky-300">
+              <p className="text-center text-2xl text-black dark:text-white">
                 No Pinned Links
               </p>
-              <p className="text-center text-sky-900 dark:text-sky-500 text-sm">
+              <p className="text-center text-black dark:text-white text-sm">
                 You can Pin Links by clicking on the three dots on each Link and
                 clicking &quot;Pin to Dashboard.&quot;
               </p>
@@ -182,13 +186,13 @@ export default function Dashboard() {
                 }}
                 className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
               >
-                <p className="text-sky-700 text-xl">Pinned Collections</p>
+                <p className="text-black text-xl">Pinned Collections</p>
 
-                <div className="text-sky-700 flex items-center gap-2">
+                <div className="text-black flex items-center gap-2">
                   {collectionPinDisclosure ? "Hide" : "Show"}
                   <FontAwesomeIcon
                     icon={faChevronDown}
-                    className={`w-4 h-4 text-sky-300 ${
+                    className={`w-4 h-4 text-black ${
                       collectionPinDisclosure ? "rotate-reverse" : "rotate"
                     }`}
                   />
@@ -219,13 +223,13 @@ export default function Dashboard() {
                 }}
                 className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
               >
-                <p className="text-sky-700 text-xl">Pinned Tags</p>
+                <p className="text-black text-xl">Pinned Tags</p>
 
-                <div className="text-sky-700 flex items-center gap-2">
+                <div className="text-black flex items-center gap-2">
                   {tagPinDisclosure ? "Hide" : "Show"}
                   <FontAwesomeIcon
                     icon={faChevronDown}
-                    className={`w-4 h-4 text-sky-300 ${
+                    className={`w-4 h-4 text-black ${
                       tagPinDisclosure ? "rotate-reverse" : "rotate"
                     }`}
                   />
@@ -244,7 +248,7 @@ export default function Dashboard() {
                     <Link
                       href={`/tags/${e.id}`}
                       key={i}
-                      className="px-2 py-1 bg-sky-200 rounded-full hover:opacity-60 duration-100 text-sky-700"
+                      className="px-2 py-1 bg-sky-200 rounded-full hover:opacity-60 duration-100 text-black"
                     >
                       {e.name}
                     </Link>

pages/forgot.tsx

@@ -53,7 +53,7 @@ export default function Forgot() {
           </p>
         </div>
         <div>
-          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">Email</p>
+          <p className="text-sm text-black w-fit font-semibold mb-1">Email</p>
 
           <input
             type="text"
@@ -71,7 +71,7 @@ export default function Forgot() {
           loading={submitLoader}
         />
         <div className="flex items-baseline gap-1 justify-center">
-          <Link href={"/login"} className="block text-sky-700 font-bold">
+          <Link href={"/login"} className="block text-black font-bold">
             Go back
           </Link>
         </div>

pages/links.tsx

@@ -26,7 +26,7 @@ export default function Links() {
               icon={faLink}
               className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
             />
-            <p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-300 font-bold">
+            <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold">
               All Links
             </p>
           </div>

pages/login.tsx

@@ -53,7 +53,7 @@ export default function Login() {
         </p>
 
         <div>
-          <p className="text-sm text-sky-700 dark:text-sky-300 w-fit font-semibold mb-1">
+          <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
             Username
             {emailEnabled ? "/Email" : undefined}
           </p>
@@ -68,7 +68,7 @@ export default function Login() {
         </div>
 
         <div>
-          <p className="text-sm text-sky-700 dark:text-sky-300 w-fit font-semibold mb-1">
+          <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
             Password
           </p>
 
@@ -95,8 +95,11 @@ export default function Login() {
           loading={submitLoader}
         />
         <div className="flex items-baseline gap-1 justify-center">
-          <p className="w-fit text-gray-500 dark:text-sky-300">New here?</p>
-          <Link href={"/register"} className="block text-sky-700 dark:text-sky-500 font-bold">
+          <p className="w-fit text-gray-500 dark:text-white">New here?</p>
+          <Link
+            href={"/register"}
+            className="block text-black dark:text-white font-bold"
+          >
             Sign Up
           </Link>
         </div>

pages/public/collections/[id].tsx

@@ -45,7 +45,7 @@ export default function PublicCollections() {
       <div
         className={`text-center bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-3xl shadow-lg p-5`}
       >
-        <p className="text-5xl text-sky-700 font-bold mb-5 capitalize">
+        <p className="text-5xl text-black font-bold mb-5 capitalize">
           {data.name}
         </p>
 
@@ -64,7 +64,7 @@ export default function PublicCollections() {
       </div>
 
       {/* <p className="text-center font-bold text-gray-500">
-        List created with <span className="text-sky-700">Linkwarden.</span>
+        List created with <span className="text-black">Linkwarden.</span>
       </p> */}
     </div>
   ) : (

pages/register.tsx

@@ -103,7 +103,7 @@ export default function Register() {
           Enter your details
         </p>
         <div>
-          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
+          <p className="text-sm text-black w-fit font-semibold mb-1">
             Display Name
           </p>
 
@@ -118,7 +118,7 @@ export default function Register() {
 
         {emailEnabled ? undefined : (
           <div>
-            <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
+            <p className="text-sm text-black w-fit font-semibold mb-1">
               Username
             </p>
 
@@ -134,9 +134,7 @@ export default function Register() {
 
         {emailEnabled ? (
           <div>
-            <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
-              Email
-            </p>
+            <p className="text-sm text-black w-fit font-semibold mb-1">Email</p>
 
             <input
               type="email"
@@ -149,7 +147,7 @@ export default function Register() {
         ) : undefined}
 
         <div className="w-full">
-          <p className="text-sm text-sky-700 w-fit font-semibold  mb-1">
+          <p className="text-sm text-black w-fit font-semibold  mb-1">
             Password
           </p>
 
@@ -163,7 +161,7 @@ export default function Register() {
         </div>
 
         <div className="w-full">
-          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
+          <p className="text-sm text-black w-fit font-semibold mb-1">
             Confirm Password
           </p>
 
@@ -215,7 +213,7 @@ export default function Register() {
         />
         <div className="flex items-baseline gap-1 justify-center">
           <p className="w-fit text-gray-500">Already have an account?</p>
-          <Link href={"/login"} className="block text-sky-700 font-bold">
+          <Link href={"/login"} className="block text-black font-bold">
             Login
           </Link>
         </div>

pages/search/[query].tsx

@@ -40,9 +40,9 @@ export default function Links() {
             <div className="flex gap-2">
               <FontAwesomeIcon
                 icon={faSearch}
-                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
               />
-              <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
+              <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold">
                 Search Results
               </p>
             </div>
@@ -99,9 +99,9 @@ export default function Links() {
             return <LinkCard key={i} link={e} count={i} />;
           })
         ) : (
-          <p className="text-sky-900">
+          <p className="text-black dark:text-white">
             Nothing found.{" "}
-            <span className="text-sky-700 font-bold text-xl" title="Shruggie">
+            <span className="font-bold text-xl" title="Shruggie">
               ¯\_(ツ)_/¯
             </span>
           </p>

pages/tags/[id].tsx

@@ -38,7 +38,7 @@ export default function Index() {
                 icon={faHashtag}
                 className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300"
               />
-              <p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-500 font-bold">
+              <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold">
                 {activeTag?.name}
               </p>
             </div>