update src/components/Feedback/index.js, src/components/FileManager/index.js, src/components/MiniComponents/BreadCrumb/index.js and src/components/MiniComponents/TitleSubtitle/index.js

src/components/Feedback/index.js

@@ -9,7 +9,7 @@ const Feedback = ({ feedbakTitle, feedbacks }) => {
     <sections
       className={`relative flex-col items-center ${
         closeModal ? "hidden" : "flex"
-      } justify-center mx-auto my-20 px-4 bg-white rounded shadow-sm border border-surfaceBorder`}
+      } justify-center mx-auto my-20 px-4 bg-surface rounded shadow-sm border border-surfaceBorder`}
       // style={{ display: closeModal ? "none" : "" }}
     >
       <div

src/components/FileManager/index.js

@@ -13,10 +13,10 @@ import SemiDonut from "../ChartDesign/SemiDonut";
 
 const FileManager = ({ buttons }) => {
   return (
-    <div className="flex flex-row bg-[#FBFBFB]">
+    <div className="flex flex-row bg-surface border border-surfaceBorder">
       {/* ? right Section */}
       <div className="w-9/12 flex flex-col">
-        <div className=" p-4">
+        <div className="p-4">
           {/* ? breadCrumb */}
           <div className="mb-5">
             <BreadCrumb />

src/components/MiniComponents/BreadCrumb/index.js

@@ -6,10 +6,10 @@ const BreadCrumb = ({ breadCrumbs, grayLeftArrow, blackLeftArrow }) => {
       {breadCrumbs.map((breadCrumb, index) => (
         <div className="flex flex-row items-center" key={index}>
           <span
-            className={`cursor-pointer text-xs hover:text-blue-900 ${
+            className={`cursor-pointer text-xs hover:text-primaryDark ${
               Number(index) === breadCrumbs.length - 1
-                ? "text-blue-900"
+                ? "text-primaryDark"
-                : "text-blue-400"
+                : "text-primaryText"
             }`}
           >
             {breadCrumb.name}
@@ -46,6 +46,7 @@ export default BreadCrumb;
 BreadCrumb.defaultProps = {
   grayLeftArrow: "images/BreadCrumbgray-arrow-left.svg",
   blackLeftArrow: "images/BreadCrumbblack-arrow-left.svg",
+
   breadCrumbs: [
     {
       name: "صفحه اصلی",

src/components/MiniComponents/TitleSubtitle/index.js

@@ -13,15 +13,21 @@ const TitleSubtitle = ({
       {/*  page Title */}
       {title && (
         <div className="flex flex-row items-center mb-3">
-          <div className={`rounded-sm ${titleBorderClassName}`}></div>
+          <div
-          <h2 className={`${titleClassName}`}>{title}</h2>
+            className={`rounded bg-primaryDark ${titleBorderClassName}`}
+          ></div>
+          <h2 className={`text-primaryText ${titleClassName}`}>{title}</h2>
         </div>
       )}
       {/* page subTitle */}
       {subTitle && (
         <div className="flex flex-row items-center">
-          <div className={`rounded ml-1 ${subtitleBorderClassName}`}></div>
+          <div
-          <p className={`text-xs ${subtitleClassName}`}>{subTitle}</p>
+            className={`rounded bg-primaryDark ${subtitleBorderClassName}`}
+          ></div>
+          <p className={`text-xs text-primaryDark ${subtitleClassName}`}>
+            {subTitle}
+          </p>
         </div>
       )}
     </div>
@@ -33,9 +39,10 @@ export default TitleSubtitle;
 TitleSubtitle.defaultProps = {
   title: "میزان فروش محصولات",
   subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر",
-  titleClassName: "text-base font-normal text-[#233876]",
-  titleBorderClassName: "w-1 h-5 bg-blue-600 ml-1",
 
-  subtitleClassName: "text-gray-900",
+  titleClassName: "text-base",
-  subtitleBorderClassName: "w-1 h-5 bg-gray-400",
+  titleBorderClassName: "w-1 h-5 ml-1",
+
+  subtitleClassName: "",
+  subtitleBorderClassName: "w-1 h-5 ml-1",
 };