update src/components/CardDesgin/ProcessCard/index.js

src/components/CardDesgin/ProcessCard/index.js

@@ -3,11 +3,11 @@ import Button from "../../ButtonDesign/Button";
 
 const ProcessCard = ({ processes, title, hint, items, options }) => {
   return (
-    <section className="flex flex-row border border-gray-400 rounded">
+    <section className="flex flex-row bg-surface border border-surfaceBorder rounded">
       {/* right */}
       <div className="flex flex-1 flex-col">
         {/* top */}
-        <div className="flex flex-row p-4 bg-blue-100 rounded divide-x-2 divide-gray-300 divide-x-reverse">
+        <div className="flex flex-row p-4 bg-blue-100 rounded divide-x-2 divide-surfaceBorder divide-x-reverse">
           {processes.map((process, index) => (
             <div
               className="flex flex-row flex-1 items-center justify-center flex-grow"
@@ -15,11 +15,11 @@ const ProcessCard = ({ processes, title, hint, items, options }) => {
             >
               {process.color && (
                 <div
-                  className={`w-1.5 h-5 rounded-sm ml-1.5 ${process.color}`}
+                  className={`w-1.5 h-5 rounded ml-1.5 ${process.color}`}
                 ></div>
               )}
-              <p className="text-xs text-blue-900">{process.name}</p>
-              <span className="text-xs mr-2 text-blue-900">
+              <p className="text-xs text-primaryText">{process.name}</p>
+              <span className="text-xs mr-2 text-primaryText">
                 {process.content}
               </span>
             </div>
@@ -27,7 +27,7 @@ const ProcessCard = ({ processes, title, hint, items, options }) => {
         </div>
         {/* middle */}
         <div className="flex flex-col p-4 my-5 mr-5">
-          <h2 className="text-lg text-blue-800 font-sansbold">{title}</h2>
+          <h2 className="text-lg text-primaryText font-bold">{title}</h2>
           <p className="text-sm text-justify leading-6 mt-3">{hint}</p>
         </div>
         {/* bottom */}
@@ -38,25 +38,25 @@ const ProcessCard = ({ processes, title, hint, items, options }) => {
             icon={"images/white-cart-icon.svg"}
             iconHolderClassName={""}
             iconClassName={"mr-2 w-5"}
-            className="p-2 bg-blue-500 text-white text-sm rounded-md"
+            className="p-2 bg-primary text-white text-sm rounded"
           />
           {/* left */}
-          <div className="flex-1 flex flex-row items-center justify-around  divide-x-2 divide-gray-300 divide-x-reverse">
+          <div className="flex-1 flex flex-row items-center justify-around divide-x-2 divide-surfaceBorder divide-x-reverse">
             {items.map((item, i) => (
               <div
                 key={i}
                 className="flex flex-row flex-1 items-center justify-center flex-grow"
               >
                 <img src={item.icon} alt="" className="w-4 h-4 ml-1" />
-                <p className="text-xs text-blue-900">{item.name}</p>
-                <p className="text-xs mr-1 text-blue-900">{item.ans}</p>
+                <p className="text-xs text-primaryText">{item.name}</p>
+                <p className="text-xs mr-1 text-primaryText">{item.ans}</p>
               </div>
             ))}
           </div>
         </div>
       </div>
       {/* left */}
-      <div className="flex flex-col justify-center p-2 border-r border-gray-400 gap-y-4">
+      <div className="flex flex-col justify-center p-2 border-r border-surfaceBorder gap-y-4">
         {options.map((option, j) => (
           <div key={j} className="flex flex-row items-center justify-between">
             <div className="flex flex-row items-center">
@@ -79,7 +79,7 @@ ProcessCard.defaultProps = {
 
   processes: [
     {
-      color: "bg-red-600",
+      color: "bg-error",
       name: "فرایند اجرایی",
       content: 256,
     },
@@ -89,7 +89,7 @@ ProcessCard.defaultProps = {
       content: "پرداخت شده",
     },
     {
-      color: "bg-blue-600",
+      color: "bg-info",
       name: "در حال انجام",
       content: 55,
     },