Revert "undo commit"

This reverts commit 9103f67db5.

components/ModalContent/NewCollectionModal.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from "react";
 import TextInput from "@/components/TextInput";
+import { HexColorPicker } from "react-colorful";
 import { Collection } from "@prisma/client";
 import Modal from "../Modal";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import { useTranslation } from "next-i18next";
 import { useCreateCollection } from "@/hooks/store/collections";
 import toast from "react-hot-toast";
-import IconPicker from "../IconPicker";
-import { IconWeight } from "@phosphor-icons/react";
 
 type Props = {
   onClose: Function;
@@ -43,7 +42,6 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
 
     await createCollection.mutateAsync(collection, {
       onSettled: (data, error) => {
-        setSubmitLoader(false);
         toast.dismiss(load);
 
         if (error) {
@@ -54,6 +52,8 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
         }
       },
     });
+
+    setSubmitLoader(false);
   };
 
   return (
@@ -72,32 +72,10 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
       <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
-        <div className="flex flex-col gap-3">
-          <div className="flex gap-3 items-end">
-            <IconPicker
-              color={collection.color || "#0ea5e9"}
-              setColor={(color: string) =>
-                setCollection({ ...collection, color })
-              }
-              weight={(collection.iconWeight || "regular") as IconWeight}
-              setWeight={(iconWeight: string) =>
-                setCollection({ ...collection, iconWeight })
-              }
-              iconName={collection.icon as string}
-              setIconName={(icon: string) =>
-                setCollection({ ...collection, icon })
-              }
-              reset={() =>
-                setCollection({
-                  ...collection,
-                  color: "#0ea5e9",
-                  icon: "",
-                  iconWeight: "",
-                })
-              }
-            />
-            <div className="w-full">
-              <p className="mb-2">{t("name")}</p>
+        <div className="flex flex-col sm:flex-row gap-3">
+          <div className="w-full">
+            <p className="mb-2">{t("name")}</p>
+            <div className="flex flex-col gap-2">
               <TextInput
                 className="bg-base-200"
                 value={collection.name}
@@ -106,13 +84,38 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
                   setCollection({ ...collection, name: e.target.value })
                 }
               />
+              <div>
+                <p className="w-full mb-2">{t("color")}</p>
+                <div className="color-picker flex justify-between items-center">
+                  <HexColorPicker
+                    color={collection.color}
+                    onChange={(color) =>
+                      setCollection({ ...collection, color })
+                    }
+                  />
+                  <div className="flex flex-col gap-2 items-center w-32">
+                    <i
+                      className={"bi-folder-fill text-5xl"}
+                      style={{ color: collection.color }}
+                    ></i>
+                    <div
+                      className="btn btn-ghost btn-xs"
+                      onClick={() =>
+                        setCollection({ ...collection, color: "#0ea5e9" })
+                      }
+                    >
+                      {t("reset")}
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
 
           <div className="w-full">
             <p className="mb-2">{t("description")}</p>
             <textarea
-              className="w-full h-32 resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
+              className="w-full h-[13rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
               placeholder={t("collection_description_placeholder")}
               value={collection.description}
               onChange={(e) =>