working on dark mode

2023-08-02 19:53:55 +02:00
parent ffb1098a15
commit 64c417c1be
27 changed files with 162 additions and 108 deletions
@@ -6,6 +6,7 @@ import Head from "next/head";
 import AuthRedirect from "@/layouts/AuthRedirect";
 import { Toaster } from "react-hot-toast";
 import { Session } from "next-auth";
+import { ThemeProvider } from "next-themes";

 export default function App({
  Component,
@@ -43,7 +44,9 @@ export default function App({
        toastOptions={{ className: "border border-sky-100" }}
      />
      <AuthRedirect>
-        <Component {...pageProps} />
+        <ThemeProvider attribute="class">
+          <Component {...pageProps} />
+        </ThemeProvider>
      </AuthRedirect>
    </SessionProvider>
  );
@@ -50,7 +50,7 @@ export default function Index() {
  return (
    <MainLayout>
      <div className="p-5 flex flex-col gap-5 w-full">
-        <div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
+        <div className="bg-gradient-to-tr from-sky-100 dark:from-sky-800 from-10% via-gray-100 via-20% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
          <div className="flex flex-col sm:flex-row gap-3 justify-between items-center sm:items-start">
            {activeCollection && (
              <div className="flex gap-3 items-center">
@@ -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 font-bold w-full py-1 break-words hyphens-auto">
+                  <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">
                    {activeCollection?.name}
                  </p>
                </div>
@@ -116,7 +116,7 @@ export default function Index() {
            ) : null}
          </div>

-          <div className="text-gray-600 flex justify-between items-end gap-5">
+          <div className="text-gray-600 dark:text-sky-400 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"
+                    className="w-5 h-5 text-gray-500 dark:text-sky-400"
                  />
                </div>

@@ -150,7 +150,7 @@ export default function Index() {
                    icon={faEllipsis}
                    id="expand-dropdown"
                    title="More"
-                    className="w-5 h-5 text-gray-500"
+                    className="w-5 h-5 text-gray-500 dark:text-sky-400"
                  />
                </div>
                {expandDropdown ? (
@@ -37,9 +37,9 @@ export default function Collections() {
            <div className="flex gap-2">
              <FontAwesomeIcon
                icon={faFolder}
-                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-sky-700 dark:text-sky-400 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"
+                  className="w-5 h-5 text-gray-500 dark:text-sky-500"
                />
              </div>

@@ -86,12 +86,12 @@ export default function Collections() {
            <div
              onClick={() => setSortDropdown(!sortDropdown)}
              id="sort-dropdown"
-              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-sky-800 duration-100 p-1"
            >
              <FontAwesomeIcon
                icon={faSort}
                id="sort-dropdown"
-                className="w-5 h-5 text-gray-500"
+                className="w-5 h-5 text-gray-500 dark:text-sky-500"
              />
            </div>

@@ -111,7 +111,7 @@ export default function Collections() {
          })}

          <div
-            className="p-5 self-stretch bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
+            className="p-5 self-stretch bg-gradient-to-tr from-sky-100 dark:from-sky-800 from-10% via-gray-100 via-20% min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
            onClick={() => {
              setModal({
                modal: "COLLECTION",
@@ -120,12 +120,12 @@ export default function Collections() {
              });
            }}
          >
-            <p className="text-sky-900 group-hover:opacity-0 duration-100">
+            <p className="text-sky-900 dark:text-sky-400 group-hover:opacity-0 duration-100">
              New Collection
            </p>
            <FontAwesomeIcon
              icon={faPlus}
-              className="w-8 h-8 text-sky-500 group-hover:w-12 group-hover:h-12 group-hover:-mt-10 duration-100"
+              className="w-8 h-8 text-sky-500 dark:text-sky-300 group-hover:w-12 group-hover:h-12 group-hover:-mt-10 duration-100"
            />
          </div>
        </div>
@@ -83,9 +83,9 @@ export default function Dashboard() {
          <div className="flex gap-2">
            <FontAwesomeIcon
              icon={faChartSimple}
-              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-sky-700 dark:text-sky-400 font-bold">
              Dashboard
            </p>
          </div>
@@ -95,24 +95,24 @@ 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">{numberOfLinks}</p>
-            <p className="text-sky-900 text-xl">
+            <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">
              {numberOfLinks === 1 ? "Link" : "Links"}
            </p>
          </div>

          <div className="flex items-baseline gap-2">
-            <p className="font-bold text-6xl text-sky-700">
+            <p className="font-bold text-6xl text-sky-700 dark:text-sky-300">
              {collections.length}
            </p>
-            <p className="text-sky-900 text-xl">
+            <p className="text-sky-900 dark:text-sky-500 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">{tags.length}</p>
-            <p className="text-sky-900 text-xl">
+            <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">
              {tags.length === 1 ? "Tag" : "Tags"}
            </p>
          </div>
@@ -163,11 +163,11 @@ export default function Dashboard() {
              </div>
            </Disclosure>
          ) : (
-            <div className="border border-solid border-sky-100 w-full mx-auto md:w-2/3 p-10 rounded-2xl">
-              <p className="text-center text-2xl text-sky-700">
+            <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">
                No Pinned Links
              </p>
-              <p className="text-center text-sky-900 text-sm">
+              <p className="text-center text-sky-900 dark:text-sky-500 text-sm">
                You can Pin Links by clicking on the three dots on each Link and
                clicking &quot;Pin to Dashboard.&quot;
              </p>
@@ -24,9 +24,9 @@ export default function Links() {
          <div className="flex gap-2">
            <FontAwesomeIcon
              icon={faLink}
-              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-sky-700 dark:text-sky-300 font-bold">
              All Links
            </p>
          </div>
@@ -35,12 +35,12 @@ export default function Links() {
            <div
              onClick={() => setSortDropdown(!sortDropdown)}
              id="sort-dropdown"
-              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-sky-800 duration-100 p-1"
            >
              <FontAwesomeIcon
                icon={faSort}
                id="sort-dropdown"
-                className="w-5 h-5 text-gray-500"
+                className="w-5 h-5 text-gray-500 dark:text-gray-200"
              />
            </div>