customizable icon color

2023-06-02 15:29:52 +03:30 · 2023-06-02 15:29:52 +03:30 · be180d34e2
parent 3e6bef875b
commit be180d34e2
11 changed files with 165 additions and 99 deletions
--- 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) =>
--- 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`}
--- 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) => {
--- 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 } },
--- 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) => ({
--- 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",
--- 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
--- a/prisma/migrations/20230602115917_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,
--- 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])
-}
+}
--- 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;
+}
--- 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"