update src/components/Feedback/index.js

src/components/Feedback/index.js

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import Button from "../ButtonDesign/Button";
 
 const Feedback = ({ feedbakTitle, feedbacks }) => {
   const [closeModal, setCloseModal] = useState(false);
@@ -6,8 +7,10 @@ const Feedback = ({ feedbakTitle, feedbacks }) => {
 
   return (
     <sections
-      className="relative flex-col items-center justify-center mx-auto my-20 px-4 bg-white rounded shadow-sm border border-gray-500"
-      style={{ display: closeModal ? "none" : "flex" }}
+      className={`relative flex-col items-center ${
+        closeModal ? "hidden" : "flex"
+      } justify-center mx-auto my-20 px-4 bg-white rounded shadow-sm border border-gray-500`}
+      // style={{ display: closeModal ? "none" : "" }}
     >
       <div
         className="p-2 absolute -top-5 right-10 bg-red-500 rounded-full cursor-pointer"
@@ -15,7 +18,7 @@ const Feedback = ({ feedbakTitle, feedbacks }) => {
       >
         <img src="images/card-remove.svg" alt="remove" className="w-5" />
       </div>
-      <h2 className="mt-10 text-productPrice">{feedbakTitle}</h2>
+      <h2 className="mt-10 text-[#132F52]">{feedbakTitle}</h2>
       <div className="flex flex-row justify-between">
         {feedbacks.map((item, index) => (
           <div
@@ -40,7 +43,7 @@ const Feedback = ({ feedbakTitle, feedbacks }) => {
             <img
               src="images/gray-upward-icon.svg"
               alt=""
-              className={`w-20 h-20  rounded-full absolute left-1/2 transform -translate-x-1/2 bottom-0 translate-y-2/3 z-10 transition-all duration-500 ${
+              className={`w-20 rounded-full absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-2/3 transition-all duration-500 z-10 ${
                 activeFeedback === item ? "opacity-100" : "opacity-0"
               }`}
             />
@@ -53,12 +56,10 @@ const Feedback = ({ feedbakTitle, feedbacks }) => {
         }`}
         placeholder="به ما در رابطه تجربه کار با سایتمون بگید..."
       ></textarea>
-      <button
-        className="text-white rounded px-8 py-2 my-5 self-end ml-4"
-        style={{ backgroundColor: "#246E8A" }}
-      >
-        ارسال
-      </button>
+      <Button
+        text={"ارسال"}
+        className="self-end my-5 ml-4 px-8 py-2 bg-[#246E8A] text-white rounded "
+      />
     </sections>
   );
 };