update src/components/Blog/design1/index.js, src/components/Blog/design2/index.js, src/components/Blog/design3/index.js and src/components/CurrentDateTime/DateTime/index.js

src/components/Blog/design1/index.js

@@ -10,17 +10,17 @@ const BlogDesign1 = ({
   blogComments,
 }) => {
   return (
-    <div className="w-fit flex items-strech justify-around p-4 bg-white">
+    <div className="w-fit flex items-strech justify-around p-4 bg-surface rounded">
       <img src={featuredImage} alt="blogImage" className="shrink" />
       <div className="flex-1 flex flex-col justify-between mr-4 py-2">
         <div className="flex flex-col">
           {blogTitle && (
-            <h2 className="text-base text-justify text-[#646464] font-sansbold leading-6">
+            <h2 className="text-base text-justify text-primaryText font-bold leading-6">
               {blogTitle}
             </h2>
           )}
           {blogExcerpt && (
-            <p className="mt-4 text-justify text-sm text-[#646464] leading-6">
+            <p className="mt-4 text-justify text-sm text-primaryText leading-6">
               {blogExcerpt}
             </p>
           )}
@@ -29,16 +29,16 @@ const BlogDesign1 = ({
           {blogAuthor && (
             <div className="flex items-center">
               <img src={blogAuthorImg} alt="author" className="w-8" />
-              <p className="mr-2 text-sm text-[#818181]">{blogAuthor}</p>
+              <p className="mr-2 text-sm text-primaryText">{blogAuthor}</p>
             </div>
           )}
           {blogComments && (
             <div className="flex items-center">
-              <p className="ml-2 text-sm text-[#818181]">{blogComments}</p>
+              <p className="ml-2 text-sm text-primaryText">{blogComments}</p>
               <CommentIcon
                 commentClassName="w-7"
                 commentNum={"26"}
-                className="w-5 h-5 bg-[#818181] text-white text-[10px] font-sansbold absolute top-0 right-0 transform translate-x-1 -translate-y-2"
+                className="w-5 h-5 bg-primaryText text-white text-[10px] font-sansbold absolute top-0 right-0 transform translate-x-1 -translate-y-2"
               />
             </div>
           )}

src/components/Blog/design2/index.js

@@ -29,7 +29,7 @@ const BlogDesign2 = ({
         <Button
           text={"1400/09/19"}
           className={
-            "w-fit bg-yellow-100 p-2 rounded text-xs font-sansbold absolute left-2 top-4"
+            "w-fit bg-primary text-primaryText  p-2 rounded text-xs font-bold absolute left-2 top-4"
           }
         />
       )}
@@ -38,18 +38,18 @@ const BlogDesign2 = ({
           title={"تگ"}
           icon={false}
           tagClassName={
-            "w-fit bg-yellow-100 p-2 rounded text-xs font-sansbold absolute left-2 top-4"
+            "w-fit bg-primary text-primaryText p-2 rounded text-xs font-bold absolute left-2 top-4"
           }
         />
       )}
       <div className="transition-all duration-300 transfrom group-hover:-translate-y-1 z-10">
         {blogTitle && (
-          <h2 className="text-base text-justify text-white font-sansbold leading-6">
+          <h2 className="text-base text-justify text-white font-bold leading-6">
             {blogTitle}
           </h2>
         )}
         {blogSubTitle && (
-          <h2 className="text-white text-base mt-2 font-sansbold leading-6">
+          <h2 className="text-white text-base mt-2 font-bold leading-6">
             شما چه فکری می کنید
           </h2>
         )}
@@ -68,7 +68,7 @@ const BlogDesign2 = ({
               commentClassName="w-7"
               icon={"images/white-comment-icon.svg"}
               commentNum={"26"}
-              className="w-5 h-5 bg-white text-[#818181] text-[10px] border-[#818181] font-sansbold absolute top-0 right-0 transform translate-x-1 -translate-y-2"
+              className="w-5 h-5 bg-white text-primaryText text-[10px] border-primaryText font-bold absolute top-0 right-0 transform translate-x-1 -translate-y-2"
             />
           </div>
         )}

src/components/Blog/design3/index.js

@@ -11,7 +11,7 @@ const BlogDesign3 = ({
 }) => {
   return (
     <div
-      className="min-w-[550px] relative flex flex-col justify-end  p-3"
+      className="min-w-[550px] relative flex flex-col justify-end p-3"
       style={{
         backgroundImage: `url(${featuredImage})`,
         backgroundSize: "100% 100%",

src/components/CurrentDateTime/DateTime/index.js

@@ -8,11 +8,11 @@ const DateTime = () => {
     <div className="flex flex-col">
       {/* ? time */}
       <div className="flex flex-row items-center mb-2">
-        <span className="text-sm ml-2 text-[#0F0543] ">ساعت</span>
+        <span className="text-sm ml-2 text-primaryText ">ساعت</span>
-        <CurrentTime color={"text-[#2A527A]"} fontSize={"text-sm"} />
+        <CurrentTime color={"text-primaryLight"} fontSize={"text-sm"} />
       </div>
       {/* ? date */}
-      <CurrentDateShamsi color={"text-[#2A527A]"} fontSize={"text-sm"} />
+      <CurrentDateShamsi color={"text-primaryLight"} fontSize={"text-sm"} />
     </div>
   );
 };