update src/components/SingleProduct/ProductDesign1/index.js and Picker.js

src/components/SingleProduct/ProductDesign1/index.js

@@ -199,12 +199,15 @@ const Design1 = ({
           />
         )}
       </div>
-      {/* {hoverEffect && (      )} */}
+      {hoverEffect && (
-      <div className="absolute right-0 bottom-0 h-full w-full group-hover:bg-blackBg group-hover:rounded group-hover:border transition duration-300 opacity-50"></div>
+        <>
+          <div className="absolute right-0 bottom-0 h-full w-full group-hover:bg-black group-hover:rounded group-hover:border transition duration-300 opacity-50"></div>
           <Button
-        className={`group-hover:opacity-100 bg-blueBgColor text-white rounded p-2 text-xs opacity-0 absolute left-1/2 bottom-1/2 transform -translate-x-1/2 -translate-y-1/2`}
+            className={`group-hover:opacity-100 bg-blue-600 text-white rounded p-2 text-xs opacity-0 absolute left-1/2 bottom-1/2 transform -translate-x-1/2 -translate-y-1/2`}
             text={"افزودن به سبد خرید"}
           />
+        </>
+      )}
     </div>
   );
 };
@@ -248,7 +251,7 @@ Design1.defaultProps = {
 
   productTags: ["ارسال رایگان", "برچسب های دیگر", "دسته بندی به صورت کادو"],
 
-  hoverEffect: false,
+  hoverEffect: true,
 
   //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
   priceDirection: "flex-row",

src/components/ThemeColor/util/Picker.js

@@ -1,10 +1,11 @@
-import { SketchPicker } from "react-color";
 import { useState } from "react";
+import { SketchPicker } from "react-color";
+
 const Picker = ({ theme, item, setTheme }) => {
   const [color, setColor] = useState(theme[item]);
   return (
     <SketchPicker
-      className="absolute bottom-16 left-0"
+      className="absolute bottom-0 left-1/2"
       color={color}
       onChange={(updatedColor) => {
         setColor(updatedColor.hex);