update src/components/CommentDesign/Comments/index.js, src/components/ContactUs/ContactInfoSectioin/index.js, src/components/ContactUs/ContactUsInfoCard/index.js and src/components/MiniComponents/Avatar/index.js

src/components/CommentDesign/Comments/index.js

@@ -10,27 +10,27 @@ export const Comments = ({ comments }) => {
   // connectToParent(comments);
   const Comment = ({ comment }) => {
     return (
-      <div className="w-full flex flex-col">
+      <div className="w-full flex flex-col bg-surface border border-surfaceBorder px-4 py-2">
         <header className="w-full flex flex-row justify-between py-1">
           <div className="flex flex-row items-end">
             <Avatar source={comment.userImage} size={60} rounded={true} />
             <div className="flex flex-col">
               <strong className="mr-2 text-lg">{comment.username}</strong>
-              <div className="flex flex-row items-center divide-x divide-gray-300 divided ltr">
-                <span className="px-2 text-xs text-gray-500">
+              <div className="flex flex-row items-center divide-x divide-surfaceBorder divided ltr">
+                <span className="px-2 text-xs text-primaryText">
                   {comment.product?.color}
                 </span>
-                <span className="px-2 text-xs text-gray-500">
+                <span className="px-2 text-xs text-primaryText">
                   {comment.product?.name}
                 </span>
               </div>
             </div>
           </div>
           <div className="flex flex-row items-center divide-x divide-gray-300 divided ltr">
-            <span className="px-2 text-sm text-blue-400">
+            <span className="px-2 text-sm text-primaryLight">
               {moment(comment.data).locale("fa").format("YYYY/MM/DD")}
             </span>
-            <span className="px-2 text-sm text-blue-400">
+            <span className="px-2 text-sm text-primaryLight">
               {comment.date.getHours()}&nbsp;:&nbsp;{comment.date.getMinutes()}
             </span>
           </div>
@@ -67,9 +67,9 @@ export const Comments = ({ comments }) => {
                 )}
               </div>
             </header>
-            <p className="text-gray-500 mt-2">{comment.text}</p>
+            <p className="text-primaryText mt-2">{comment.text}</p>
             <div className="self-end mt-4">
-              <Button className="bg-gray-400 text-sm text-white rounded p-2" />
+              <Button className="bg-primary text-sm text-white rounded p-2" />
             </div>
           </div>
         </div>

src/components/ContactUs/ContactInfoSectioin/index.js

@@ -2,14 +2,10 @@
 
 import React from "react";
 
-const ContactInfoSectioin = ({
-  className,
-  dayNumTextColor,
-  contentTextColor,
-}) => {
+const ContactInfoSectioin = ({ className }) => {
   return (
     <section
-      className={`relative flex flex-row items-center justify-center p-4 rounded ${className}`}
+      className={`relative flex flex-row items-center justify-center p-4 bg-surface border border-surfaceBorder rounded ${className}`}
     >
       {/* line */}
       <img src="images/light-blue-line.svg" alt="" className="" />
@@ -19,21 +15,21 @@ const ContactInfoSectioin = ({
         alt=""
         className="w-14 cursor-pointer customer-support animate-bounce"
       />
-      <p className={`mr10 mt-0 text-sm leading-6 mr-10 ${contentTextColor}`}>
-        <span className="text-[#196EC0]">7 </span>
+      <p className={`mt-0 text-sm leading-6 mr-10 text-primaryText`}>
+        <span className="text-primaryText">7 </span>
         روز هفته
-        <span className="text-[#196EC0]"> 24 </span>
+        <span className="text-primaryText"> 24 </span>
         ساعته
         <br />
         منتظر شنیدن صدای گرمتان هستیم
       </p>
       <div className="flex flex-col mr-10 mt-0">
-        <a href="tel:021654412" className={`text-sm ${contentTextColor}`}>
+        <a href="tel:021654412" className={`text-sm text-primaryText`}>
           021654412
         </a>
         <a
           href="mailto:webmaster@example.com"
-          className={`text-sm ${contentTextColor}`}
+          className={`text-sm text-primaryText`}
         >
           info@danovin.ir
         </a>
@@ -47,7 +43,5 @@ const ContactInfoSectioin = ({
 export default ContactInfoSectioin;
 
 ContactInfoSectioin.defaultProps = {
-  className: "bg-[#DBDBDB]",
-  dayNumTextColor: "text-[#196EC0]",
-  contentTextColor: "text-[#05335F]",
+  className: "",
 };

src/components/ContactUs/ContactUsInfoCard/index.js

@@ -2,7 +2,7 @@ import React from "react";
 
 const ContactUsInfoCard = ({ items }) => {
   return (
-    <div className="w-fit flex flex-col rounded-md border bg-white border-gray-200 p-4 mx-auto mt-10">
+    <div className="w-fit flex flex-col p-4 mt-10 bg-surface border border-surfaceBorder mx-auto rounded">
       {/* logo && map */}
       <div className="flex flex-row items-center justify-between">
         <img
@@ -21,12 +21,12 @@ const ContactUsInfoCard = ({ items }) => {
         <div className="flex flex-row items-center mt-2" key={index}>
           {item.icon && <img className="w-5" src={item.icon} alt={item.icon} />}
           <p
-            className={`text-[#2383E1] text-sm font-sansbold ${
+            className={`text-primary text-sm font-bold ${
               item.icon === null ? "mr-8" : "mr-2"
             }`}
           >
             {item.title}
-            <span className="text-[#0F0543] mr-1 text-sm text-justify leading-6">
+            <span className="text-primaryText mr-1 text-sm text-justify leading-6">
               {item.content}
             </span>
           </p>

src/components/MiniComponents/Avatar/index.js

@@ -8,9 +8,7 @@ function Avatar({ source, size, rounded, status, userImage }) {
         alt="avatar"
         style={{ width: size, height: size, objectFit: "cover" }}
       />
-      {status && (
-        <span className="w-1.5 h-1.5 rounded-full bg-green-500"></span>
-      )}
+      {status && <span className="w-1.5 h-1.5 rounded-full bg-success"></span>}
     </div>
   );
 }