update src/components/AddToCart/AddToCart1/index.js, src/components/AddToCart/AddToCart2/index.js and default.js

src/components/AddToCart/AddToCart1/index.js

@@ -26,36 +26,36 @@ const AddToCart1 = ({
     },
   ];
   return (
-    <div className="w-full felx flex-col items-center justify-center p-4 pt-0 bg-gray-200">
+    <div className="w-full felx flex-col items-center justify-center p-4 pt-0 bg-surface rounded border border-surfaceBorder">
       {showProduct && (
-        <div className="w-full max-w-8 flex justify-center items-center  py-4 overflow-hidden">
+        <div className="w-full max-w-8 flex justify-center items-center py-4 overflow-hidden">
           <img
             src={productImg}
             alt="productImage"
-            className="max-w-[100px] ml-4 py-2 px-4 bg-gray-200 rounded"
+            className="max-w-[100px] ml-4 py-2 px-4 bg-gray-100 rounded"
           />
           <div className="text-sm">
             <h1 className="text-sm">{productName}</h1>
-            <p className="pt-2 text-xs text-blue-400">{productCat}</p>
+            <p className="pt-2 text-xs text-primary">{productCat}</p>
           </div>
         </div>
       )}
       {specialities.map((item, index) => (
         <div
           key={index}
-          className="w-full flex items-center p-2 border-b border-solid border-gray-300"
+          className="w-full flex items-center p-2 border-b border-solid border-surfaceBorder"
         >
           {item.icon && <img src={item.icon} alt="" className="pl-3" />}
-          <p className="text-sm text-blue-400 text-right">{item.description}</p>
+          <p className="text-sm text-primary text-right">{item.description}</p>
         </div>
       ))}
       <div className="w-full flex flex-col items-center justify-center p-4">
-        <h1 className="text-xl text-gray-500">
+        <h1 className="text-xl text-primary">
           <span className="text-blue-400"> {price} </span>
           تومان
         </h1>
         {profit && (
-          <h5 className="p-2 pb-0 text-xs text-blue-400">
+          <h5 className="p-2 pb-0 text-xs text-primary">
             با خرید این کالا {profit} تومان سود کنید
           </h5>
         )}

src/components/AddToCart/AddToCart2/index.js

@@ -6,7 +6,7 @@ const AddToCart2 = ({ items, productPrice, discountPrice }) => {
 
   return (
     <section className="w-fit">
-      <div className="flex flex-col bg-gray-200 rounded px-4 py-2">
+      <div className="flex flex-col bg-surface rounded px-4 py-2">
         {items.map((item, index) => (
           <>
             <div
@@ -14,16 +14,16 @@ const AddToCart2 = ({ items, productPrice, discountPrice }) => {
               key={index}
             >
               <div className="flex flex-row items-center">
-                <img src={item.icon} alt="" className="w-8" />
+                <img src={item.icon} alt="icon" className="w-8" />
                 <div className="flex flex-col mr-3">
-                  <p className="text-sm">
+                  <p className="text-sm text-primaryText">
-                    <span className="font-sansbold">{item.subtitle}</span>
+                    <span className="font-bold">{item.subtitle}</span>
                     {item.title}
                   </p>
                   {item.customerSatisfaction && (
-                    <p className="text-xs mt-1">
+                    <p className="text-xs mt-1 text-primaryText">
                       رضایت خریداران:
-                      <span className="font-sansbold text-green-500 mr-2">
+                      <span className="font-bold text-primary mr-2">
                         {item.customerSatisfactionPercent}
                       </span>
                     </p>
@@ -39,16 +39,16 @@ const AddToCart2 = ({ items, productPrice, discountPrice }) => {
               )}
             </div>
             {Number(index) !== items.length - 1 && (
-              <div className="border-b border-gray-300"></div>
+              <div className="border-b border-surfaceBorder"></div>
             )}
           </>
         ))}
         <div className="flex flex-col items-center">
-          <p className="text-lg text-blue-600 mt-5 mb-2">
+          <p className="text-lg text-primary mt-5 mb-2">
             {productPrice}
-            <span className="text-sm text-gray-700 font-light">تومان</span>
+            <span className="text-sm text-primaryText">تومان</span>
           </p>
-          <p className="text-xs font-light text-gray-600">
+          <p className="text-xs text-primaryText">
             با خرید این کالا
             <span>{discountPrice}</span>
             صرفه جویی کنید
@@ -57,11 +57,11 @@ const AddToCart2 = ({ items, productPrice, discountPrice }) => {
         <div className="w-full flex flex-col items-center">
           <Button
             text={"افزودن به سبد خرید"}
-            className="my-4 text-white rounded-sm text-sm p-2 bg-blue-400 hover:bg-blue-600 hover:bg-opacity-90"
+            className="my-4 text-white rounded text-sm p-2 bg-primary hover:bg-primaryDark hover:bg-opacity-90"
           />
         </div>
       </div>
-      <div className="bg-gray-200 rounded px-4 py-2 mt-2 flex flex-row items-center">
+      <div className="bg-surface rounded px-4 py-2 mt-2 flex flex-row items-center">
         <div>
           <img
             src="images/AddToCart2arrow-icon.svg"
@@ -70,10 +70,10 @@ const AddToCart2 = ({ items, productPrice, discountPrice }) => {
           />
         </div>
         <div className="flex flex-col mr-5">
-          <h2 className="text-sm font-sansbold text-blue-900">
+          <h2 className="text-sm font-bold text-primaryDark">
             بازگشت بی چون و چرا
           </h2>
-          <p className="text-xs mt-2 leading-5 text-justify">
+          <p className="text-xs mt-2 leading-5 text-justify text-primaryText">
             از اونجایی که ما خیلی خوب هستیم و دوستون داریم در صورتی که از کالایی
             خوشتون نیومده میتونید بی قید و شرط پس بدید
           </p>

src/components/ThemeColor/default.js

@@ -11,7 +11,7 @@ const defaultTheme = {
   backgroundText: "#000000",
   surface: "#ffffff",
   surfaceText: "#000000",
-  surfaceBorder: "#c8d6e5",
+  surfaceBorder: "#dcdde1",
   info: "#43c1ff",
   infoText: "#000000",
   success: "#42b258",