update 5 files

src/components/ThemeColor/ColorCard.js

@@ -16,7 +16,7 @@ const ColorCard = ({
         className={`w-[344px] h-[130px] flex flex-col cursor-pointer rounded-sm relative p-4 bg-${item} ${
           text ? `text-${item}Text` : ""
         } ${borderColor ? ` border border-${item}Border` : ""} `}
-        onClick={() => setItem(item)}
+        onClick={(e) => setItem(item, e)}
       >
         <ItemColor className="text-2xl font-bold" item={item} theme={theme} />
         <div className="flex flex-row items-center justify-between mt-5 ">
@@ -27,7 +27,7 @@ const ColorCard = ({
               theme={theme}
               onClick={(e) => {
                 e.stopPropagation();
-                setItem(item + "Text");
+                setItem(item + "Text", e);
               }}
             />
           )}
@@ -38,7 +38,7 @@ const ColorCard = ({
               theme={theme}
               onClick={(e) => {
                 e.stopPropagation();
-                setItem(item + "Border");
+                setItem(item + "Border", e);
               }}
             />
           )}
@@ -51,7 +51,7 @@ const ColorCard = ({
             className={`flex flex-col cursor-pointer rounded-sm relative p-4 w-[165px] h-[75px] bg-${item}Dark ${
               text ? `text-${item}Text` : ""
             }`}
-            onClick={() => setItem(item + "Dark")}
+            onClick={(e) => setItem(item + "Dark", e)}
           >
             <ItemColor
               className=" text-lg font-bold"
@@ -65,7 +65,7 @@ const ColorCard = ({
             className={`flex flex-col cursor-pointer rounded-sm relative p-4 w-[165px] h-[75px]  bg-${item}Light ${
               text ? `text-${item}Text` : ""
             }`}
-            onClick={() => setItem(item + "Light")}
+            onClick={(e) => setItem(item + "Light", e)}
           >
             <ItemColor
               className=" text-lg font-bold"

src/components/ThemeColor/default.js

@@ -27,5 +27,5 @@ const defaultTheme = {
   "2xl": "1536px",
 };
 const classNames =
-  "sm:sm md:md lg:lg xl:xl 2xl:2xl bg-primary text-primaryText bg-secondary text-secondaryText bg-primaryDark  bg-primaryLight  text-primaryDark text-primaryLight bg-primaryDark  bg-secondaryLight  text-secondaryDark text-secondaryLight bg-secondaryDark  text-secondaryDark bg-background text-backgroundText bg-surface text-surfaceText border-surfaceBorder bg-info text-infoText bg-success text-successText bg-warning text-warningText bg-error text-errorText";
+  "bg-primary text-primaryText bg-secondary text-secondaryText bg-primaryDark  bg-primaryLight  text-primaryDark text-primaryLight bg-primaryDark  bg-secondaryLight  text-secondaryDark text-secondaryLight bg-secondaryDark  text-secondaryDark bg-background text-backgroundText bg-surface text-surfaceText border-surfaceBorder bg-info text-infoText bg-success text-successText bg-warning text-warningText bg-error text-errorText";
 export default defaultTheme;

src/components/ThemeColor/index.js

@@ -11,12 +11,22 @@ import { useForm } from "react-hook-form";
 import Input from "../AnimatedInput/Input";
 
 const ThemeColor = ({ inputFields }) => {
-  const [item, setItem] = useState(null);
+  const [item, setItem_] = useState(null);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const setItem = (nitem, e) => {
+    e.stopPropagation();
+    if (item == nitem) nitem = "";
+    setItem_(nitem);
+    setPosition({ top: e.clientY, left: e.clientX });
+  };
   const [theme, setTheme] = useState(defaultTheme);
   putTheme(theme);
 
   return (
-    <div className="ltr w-full flex flex-col items-center bg-background rounded-sm border border-[#b8dff3]">
+    <div
+      className="ltr w-full flex flex-col items-center bg-background rounded-sm border border-[#b8dff3]"
+      onClick={() => setItem_("")}
+    >
       <h2 className="mt-4 text-2xl text-blue-900 font-sansbold">
         Theme Properties
       </h2>
@@ -34,7 +44,7 @@ const ThemeColor = ({ inputFields }) => {
           <div className="w-full flex flex-row items-center justify-between">
             <p className="text-2xl">Screens</p>
           </div>
-          <hr className="my-2 border border-[#b8dff3]" />
+          <hr className="my-2 border border-[#b8dff3] nh-tf bh-3--- d" />
           <p className="w-fit self-end px-2 py-0.5 bg-surface text-surfaceText text-xs rtl border border-dashed">
             بعد از نوشتن عدد مورد نظر حتما از
             <span className="mx-1 font-bold">px</span>
@@ -77,6 +87,7 @@ const ThemeColor = ({ inputFields }) => {
             Original Colors
           </p>
           {/* Primary && Secondary */}
+
           <div className="flex flex-row justify-between mt-2 gap-x-5">
             <ColorCard
               theme={theme}
@@ -140,7 +151,14 @@ const ThemeColor = ({ inputFields }) => {
           </div>
         </div>
       </div>
-      {item && <Picker item={item} theme={theme} setTheme={setTheme} />}
+      {item && (
+        <Picker
+          item={item}
+          theme={theme}
+          setTheme={setTheme}
+          position={position}
+        />
+      )}
     </div>
   );
 };

src/components/ThemeColor/util/Picker.js

@@ -1,17 +1,23 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { SketchPicker } from "react-color";
 
-const Picker = ({ theme, item, setTheme }) => {
+const Picker = ({ theme, item, setTheme, position }) => {
   const [color, setColor] = useState(theme[item]);
+  useEffect(() => {
+    setColor(theme[item]);
+  }, [theme,item]);
+
+  console.log({ position });
   return (
+    <div className={`absolute`} style={position}>
       <SketchPicker
-      className="absolute bottom-0 left-1/2"
         color={color}
         onChange={(updatedColor) => {
           setColor(updatedColor.hex);
           setTheme({ ...theme, [item]: updatedColor.hex });
         }}
       />
+    </div>
   );
 };
 export default Picker;

tailwind.config.js

@@ -34,13 +34,13 @@ module.exports = {
       error: "var(--theme-error)",
       errorText: "var(--theme-errorText)",
     },
-    screens: {
-      sm: "var(--theme-sm)",
-      md: "var(--theme-md)",
-      lg: "var(--theme-lg)",
-      xl: "var(--theme-xl)",
-      "2xl": "var(--theme-2xl)",
-    },
+    // screens: {
+    //   sm: "var(--theme-sm)",
+    //   md: "var(--theme-md)",
+    //   lg: "var(--theme-lg)",
+    //   xl: "var(--theme-xl)",
+    //   "2xl": "var(--theme-2xl)",
+    // },
   },
   plugins: [
     require("@themesberg/flowbite/plugin"),