From be180d34e28df42cdc491df84c4dc27be04caf0c Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Fri, 2 Jun 2023 15:29:52 +0330
Subject: [PATCH] customizable icon color

---
 .../Modal/Collection/CollectionInfo.tsx       |  56 +++++--
 components/Sidebar/SidebarItem.tsx            |  16 +-
 components/Sidebar/index.tsx                  | 137 +++++++++---------
 .../controllers/collections/postCollection.ts |   1 +
 .../collections/updateCollection.ts           |   1 +
 package.json                                  |   1 +
 pages/collections/[id].tsx                    |  23 +--
 .../migration.sql                             |   1 +
 prisma/schema.prisma                          |   3 +-
 styles/globals.css                            |  20 ++-
 yarn.lock                                     |   5 +
 11 files changed, 165 insertions(+), 99 deletions(-)
 rename prisma/migrations/{20230528224940_init => 20230602115917_init}/migration.sql (98%)

diff --git a/components/Modal/Collection/CollectionInfo.tsx b/components/Modal/Collection/CollectionInfo.tsx
index 3ba1948..3f26449 100644
--- a/components/Modal/Collection/CollectionInfo.tsx
+++ b/components/Modal/Collection/CollectionInfo.tsx
@@ -1,10 +1,15 @@
 import React, { useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPenToSquare, faPlus } from "@fortawesome/free-solid-svg-icons";
+import {
+  faFolder,
+  faPenToSquare,
+  faPlus,
+} from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { CollectionIncludingMembers } from "@/types/global";
 import RequiredBadge from "../../RequiredBadge";
 import SubmitButton from "@/components/SubmitButton";
+import { HexColorPicker } from "react-colorful";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -46,21 +51,48 @@ export default function CollectionInfo({
             Name
             <RequiredBadge />
           </p>
-          <input
-            value={collection.name}
-            onChange={(e) =>
-              setCollection({ ...collection, name: e.target.value })
-            }
-            type="text"
-            placeholder="e.g. Example Collection"
-            className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-          />
+          <div className="flex flex-col gap-3">
+            <input
+              value={collection.name}
+              onChange={(e) =>
+                setCollection({ ...collection, name: e.target.value })
+              }
+              type="text"
+              placeholder="e.g. Example Collection"
+              className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+            />
+            <div className="color-picker flex justify-between">
+              <div className="flex flex-col justify-between items-center w-32">
+                <p className="text-sm w-full font-bold text-sky-300 mb-2">
+                  Icon Color
+                </p>
+                <div style={{ color: collection.color || "#7dd3fc" }}>
+                  <FontAwesomeIcon
+                    icon={faFolder}
+                    className="w-12 h-12 drop-shadow"
+                  />
+                </div>
+                <div
+                  className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-gray-500 hover:bg-slate-200 duration-100"
+                  onClick={() =>
+                    setCollection({ ...collection, color: "#7dd3fc" })
+                  }
+                >
+                  Reset
+                </div>
+              </div>
+              <HexColorPicker
+                color={collection.color || "#7dd3fc"}
+                onChange={(e) => setCollection({ ...collection, color: e })}
+              />
+            </div>
+          </div>
         </div>
 
         <div className="w-full">
           <p className="text-sm font-bold text-sky-300 mb-2">Description</p>
           <textarea
-            className="w-full h-40 resize-none border rounded-md duration-100 bg-white p-3 outline-none border-sky-100 focus:border-sky-500"
+            className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white p-3 outline-none border-sky-100 focus:border-sky-500"
             placeholder="The purpose of this Collection..."
             value={collection.description}
             onChange={(e) =>
diff --git a/components/Sidebar/SidebarItem.tsx b/components/Sidebar/SidebarItem.tsx
index 8fb8989..926adc5 100644
--- a/components/Sidebar/SidebarItem.tsx
+++ b/components/Sidebar/SidebarItem.tsx
@@ -7,9 +7,16 @@ interface SidebarItemProps {
   icon: ReactElement;
   path: string;
   className?: string;
+  iconColor?: string;
 }
 
-export default function ({ text, icon, path, className }: SidebarItemProps) {
+export default function ({
+  text,
+  icon,
+  path,
+  className,
+  iconColor,
+}: SidebarItemProps) {
   const router = useRouter();
   const [active, setActive] = useState(false);
 
@@ -23,10 +30,13 @@ export default function ({ text, icon, path, className }: SidebarItemProps) {
       <div
         className={`${
           active ? "bg-sky-500" : "hover:bg-slate-200 bg-gray-100"
-        } duration-100 py-1 px-4 cursor-pointer flex items-center gap-2 w-full ${className}`}
+        } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md ${className}`}
       >
         {React.cloneElement(icon, {
-          className: `w-4 h-4 ${active ? "text-white" : "text-sky-300"}`,
+          className: "w-4 h-4",
+          style: {
+            color: active ? "white" : iconColor ? iconColor : "#7dd3fc",
+          },
         })}
         <p
           className={`${active ? "text-white" : "text-sky-900"} truncate w-4/6`}
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index cb714b5..e644985 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -27,84 +27,88 @@ export default function ({ className }: { className?: string }) {
 
   return (
     <div
-      className={`bg-gray-100 h-screen w-64 xl:w-80 overflow-y-auto border-solid border-r-sky-100 border z-20 ${className}`}
+      className={`bg-gray-100 h-screen w-64 xl:w-80 overflow-y-auto border-solid border-r-sky-100 px-2 border z-20 ${className}`}
     >
-      <p className="p-4 text-sky-500 font-bold text-2xl my-2 leading-4">
+      <p className="p-3 text-sky-500 font-bold text-2xl my-2 leading-4">
         Linkwarden
       </p>
 
-      <Link href="/dashboard">
-        <div
-          className={`${
-            active === "/dashboard"
-              ? "bg-sky-500"
-              : "hover:bg-slate-200 bg-gray-100"
-          } outline-sky-100 outline-1 duration-100 py-1 px-4 cursor-pointer flex items-center gap-2`}
-        >
-          <FontAwesomeIcon
-            icon={faChartSimple}
-            className={`w-4 h-4 ${
-              active === "/dashboard" ? "text-white" : "text-sky-300"
-            }`}
-          />
-          <p
+      <div className="flex flex-col gap-1">
+        <Link href="/dashboard">
+          <div
             className={`${
-              active === "/dashboard" ? "text-white" : "text-sky-900"
-            }`}
+              active === "/dashboard"
+                ? "bg-sky-500"
+                : "hover:bg-slate-200 bg-gray-100"
+            } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex items-center gap-2`}
           >
-            Dashboard
-          </p>
-        </div>
-      </Link>
+            <FontAwesomeIcon
+              icon={faChartSimple}
+              className={`w-4 h-4 ${
+                active === "/dashboard" ? "text-white" : "text-sky-300"
+              }`}
+            />
+            <p
+              className={`${
+                active === "/dashboard" ? "text-white" : "text-sky-900"
+              }`}
+            >
+              Dashboard
+            </p>
+          </div>
+        </Link>
 
-      <Link href="/collections">
-        <div
-          className={`${
-            active === "/collections" ? "bg-sky-500" : "hover:bg-slate-200"
-          } outline-sky-100 outline-1 duration-100  py-1 px-4  cursor-pointer flex items-center gap-2`}
-        >
-          <FontAwesomeIcon
-            icon={faBox}
-            className={`w-4 h-4 ${
-              active === "/collections" ? "text-white" : "text-sky-300"
-            }`}
-          />
-          <p
+        <Link href="/collections">
+          <div
             className={`${
-              active === "/collections" ? "text-white" : "text-sky-900"
-            }`}
+              active === "/collections" ? "bg-sky-500" : "hover:bg-slate-200"
+            } outline-sky-100 outline-1 duration-100  py-1 px-2 rounded-md cursor-pointer flex items-center gap-2`}
           >
-            All Collections
-          </p>
-        </div>
-      </Link>
+            <FontAwesomeIcon
+              icon={faBox}
+              className={`w-4 h-4 ${
+                active === "/collections" ? "text-white" : "text-sky-300"
+              }`}
+            />
+            <p
+              className={`${
+                active === "/collections" ? "text-white" : "text-sky-900"
+              }`}
+            >
+              All Collections
+            </p>
+          </div>
+        </Link>
 
-      <Link href="/links">
-        <div
-          className={`${
-            active === "/links"
-              ? "bg-sky-500"
-              : "hover:bg-slate-200 bg-gray-100"
-          } outline-sky-100 outline-1 duration-100 py-1 px-4 cursor-pointer flex items-center gap-2`}
-        >
-          <FontAwesomeIcon
-            icon={faBookmark}
-            className={`w-4 h-4 ${
-              active === "/links" ? "text-white" : "text-sky-300"
-            }`}
-          />
-          <p
-            className={`${active === "/links" ? "text-white" : "text-sky-900"}`}
+        <Link href="/links">
+          <div
+            className={`${
+              active === "/links"
+                ? "bg-sky-500"
+                : "hover:bg-slate-200 bg-gray-100"
+            } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex items-center gap-2`}
           >
-            All Links
-          </p>
-        </div>
-      </Link>
+            <FontAwesomeIcon
+              icon={faBookmark}
+              className={`w-4 h-4 ${
+                active === "/links" ? "text-white" : "text-sky-300"
+              }`}
+            />
+            <p
+              className={`${
+                active === "/links" ? "text-white" : "text-sky-900"
+              }`}
+            >
+              All Links
+            </p>
+          </div>
+        </Link>
+      </div>
 
       <div className="text-gray-500 mt-5">
-        <p className="text-sm px-4 mb-2">Collections</p>
+        <p className="text-sm mb-2 pl-3 font-semibold">Collections</p>
       </div>
-      <div>
+      <div className="flex flex-col gap-1">
         {collections
           .sort((a, b) => a.name.localeCompare(b.name))
           .map((e, i) => {
@@ -113,6 +117,7 @@ export default function ({ className }: { className?: string }) {
                 key={i}
                 text={e.name}
                 icon={<FontAwesomeIcon icon={faFolder} />}
+                iconColor={e.color}
                 path={`/collections/${e.id}`}
                 className="capitalize"
               />
@@ -120,9 +125,9 @@ export default function ({ className }: { className?: string }) {
           })}
       </div>
       <div className="text-gray-500 mt-5">
-        <p className="text-sm px-4 mb-2">Tags</p>
+        <p className="text-sm mb-2 pl-3 font-semibold">Tags</p>
       </div>
-      <div>
+      <div className="flex flex-col gap-1">
         {tags
           .sort((a, b) => a.name.localeCompare(b.name))
           .map((e, i) => {
diff --git a/lib/api/controllers/collections/postCollection.ts b/lib/api/controllers/collections/postCollection.ts
index 2aa5170..929d314 100644
--- a/lib/api/controllers/collections/postCollection.ts
+++ b/lib/api/controllers/collections/postCollection.ts
@@ -39,6 +39,7 @@ export default async function (
       },
       name: collection.name,
       description: collection.description,
+      color: collection.color,
       members: {
         create: collection.members.map((e) => ({
           user: { connect: { email: e.user.email } },
diff --git a/lib/api/controllers/collections/updateCollection.ts b/lib/api/controllers/collections/updateCollection.ts
index 6387bc8..ebd1069 100644
--- a/lib/api/controllers/collections/updateCollection.ts
+++ b/lib/api/controllers/collections/updateCollection.ts
@@ -30,6 +30,7 @@ export default async function (
       data: {
         name: collection.name,
         description: collection.description,
+        color: collection.color,
         isPublic: collection.isPublic,
         members: {
           create: collection.members.map((e) => ({
diff --git a/package.json b/package.json
index c633a23..aaed8ab 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "puppeteer-extra-plugin-adblocker": "^2.13.6",
     "puppeteer-extra-plugin-stealth": "^2.11.2",
     "react": "18.2.0",
+    "react-colorful": "^5.6.1",
     "react-dom": "18.2.0",
     "react-image-file-resizer": "^0.4.8",
     "react-select": "^5.7.0",
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 1a7ce62..81a2eb4 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -104,17 +104,20 @@ export default function () {
       <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-xl 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">
-            <div className="flex gap-3 items-center">
-              <div className="flex gap-2">
-                <FontAwesomeIcon
-                  icon={faFolder}
-                  className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-300"
-                />
-                <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">
-                  {activeCollection?.name}
-                </p>
+            {activeCollection ? (
+              <div className="flex gap-3 items-center">
+                <div className="flex gap-2">
+                  <FontAwesomeIcon
+                    icon={faFolder}
+                    style={{ color: activeCollection?.color }}
+                    className="sm:w-8 sm:h-8 w-6 h-6 mt-2"
+                  />
+                  <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">
+                    {activeCollection?.name}
+                  </p>
+                </div>
               </div>
-            </div>
+            ) : null}
 
             {activeCollection ? (
               <div
diff --git a/prisma/migrations/20230528224940_init/migration.sql b/prisma/migrations/20230602115917_init/migration.sql
similarity index 98%
rename from prisma/migrations/20230528224940_init/migration.sql
rename to prisma/migrations/20230602115917_init/migration.sql
index f317c9c..4fffd6a 100644
--- a/prisma/migrations/20230528224940_init/migration.sql
+++ b/prisma/migrations/20230602115917_init/migration.sql
@@ -16,6 +16,7 @@ CREATE TABLE "Collection" (
     "id" SERIAL NOT NULL,
     "name" TEXT NOT NULL,
     "description" TEXT NOT NULL DEFAULT '',
+    "color" TEXT NOT NULL DEFAULT '#7dd3fc',
     "isPublic" BOOLEAN NOT NULL DEFAULT false,
     "ownerId" INTEGER NOT NULL,
     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 425070b..636dd0d 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -24,6 +24,7 @@ model Collection {
   id Int @id @default(autoincrement())
   name String
   description String @default("")
+  color String @default("#7dd3fc")
   isPublic Boolean @default(false)
   owner User @relation(fields: [ownerId], references: [id])
   ownerId Int
@@ -69,4 +70,4 @@ model Tag {
   ownerId Int
 
   @@unique([name, ownerId])
-}
\ No newline at end of file
+}
diff --git a/styles/globals.css b/styles/globals.css
index b8f92d1..dedd09f 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -31,13 +31,6 @@
   animation: fade-in-animation 100ms;
 }
 
-/* Bug: "lg:block" just didn't work... */
-@media (min-width: 1024px) {
-  .lgblock {
-    display: block;
-  }
-}
-
 @keyframes fade-in-animation {
   0% {
     opacity: 0;
@@ -89,3 +82,16 @@
     opacity: 1;
   }
 }
+
+/* For react-colorful */
+.color-picker .react-colorful {
+  width: 7.5rem;
+  height: 7.5rem;
+}
+.color-picker .react-colorful__hue {
+  height: 1rem;
+}
+.color-picker .react-colorful__pointer {
+  width: 1.3rem;
+  height: 1.3rem;
+}
diff --git a/yarn.lock b/yarn.lock
index 65023ba..4abb814 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3132,6 +3132,11 @@ quick-lru@^5.1.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
 
+react-colorful@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
+  integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
+
 react-dom@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"