update 9 files and delete 1 file

src/components/CardDesgin/CardHolder/index.js

@@ -16,10 +16,8 @@ const CardHolder = ({ items, cardClass }) => {
         >
           <img src={item.icon} className="w-14" alt="" />
           <div className="flex flex-col mr-2 flex-1">
-            <p className="text-sm text-[#00253A]">{item.title}</p>
-            <p className="text-xs text-gray-400 font-light mr-1 mt-2">
-              {item.des}
-            </p>
+            <p className="text-sm text-primaryText">{item.title}</p>
+            <p className="text-xs text-primaryLight mr-1 mt-2">{item.des}</p>
           </div>
         </div>
       ))}

src/components/Datepicker/DateRangePicker/index.js

@@ -24,14 +24,14 @@ function CustomRangeInput({ openCalendar, value }) {
   return (
     <div className="flex flex-row items-center justify-center mt-3">
       <input
-        className="w-[45%] py-1 text-center text-sm rounded border border-gray-200 focus:outline-none focus:border-[#0074d9] focus:ring-[#0074d9] focus:ring-1"
+        className="w-[45%] py-1 text-center text-sm rounded border border-surfaceBorder focus:outline-none focus:border-primary focus:ring-primary focus:ring-1"
         onFocus={openCalendar}
         value={value[0]}
         readOnly
       />
       <p className="mx-2 text-sm">تا</p>
       <input
-        className="w-[45%] py-1 text-center text-sm rounded border border-gray-200 focus:outline-none focus:border-[#0074d9] focus:ring-[#0074d9] focus:ring-1"
+        className="w-[45%] py-1 text-center text-sm rounded border border-surfaceBorder focus:outline-none focus:border-primary focus:ring-primary focus:ring-1"
         onFocus={openCalendar}
         value={value[1]}
         readOnly

src/components/FooterDesign/Footer/index.js

@@ -3,17 +3,16 @@ import _ from "lodash";
 
 const FooterDesign1 = ({ links }) => {
   return (
-    <footer className="relative w-full flex flex-col md:flex-row justify-around items-start md:items-start p-4 shadow-md bg-white">
+    <footer className="relative w-full flex flex-col md:flex-row justify-around items-start md:items-start p-4 shadow bg-surface">
       <div className="flex items-start">
         <>
           {links.map((section, index) => (
             <ul className="mr-10" key={index}>
               {section.map((link, index) => (
-                <li
-                  className={`font-light text-xs leading-7 hover:font-bold footer-items text-gray-600`}
-                  key={index}
-                >
-                  <a href="#">{link}</a>
+                <li className={`text-xs leading-7 hover:font-bold`} key={index}>
+                  <a href="#" className="text-primaryText">
+                    {link}
+                  </a>
                 </li>
               ))}
             </ul>

src/components/FooterDesign/FooterDesign2/index.js

@@ -1,102 +0,0 @@
-// it has style inside index.scss ---> // Start Footer/Design1 && end Footer/Design1
-
-import React from "react";
-
-const FooterDesign1 = ({ footerItems, array }) => {
-  return (
-    <footer className="p-6 flex flex-col md:flex-row justify-around items-start md:items-start relative bg-white">
-      <div className="flex items-start">
-        {array.map((item, index) => (
-          <ul className="mr-10" key={index}>
-            {item.footerItems.map((footerItem, index) => (
-              <li
-                className="font-light text-xs leading-7 footer-items"
-                key={index}
-              >
-                <a href="#">{footerItem.name}</a>
-              </li>
-            ))}
-          </ul>
-        ))}
-      </div>
-      <div className="flex items-center mt-10 md:mt-0">
-        <img src="images/enamad-pic.svg" alt="" className="w-28 ml-10" />
-        <img src="images/samandehi-pic.svg" alt="" className="w-28" />
-      </div>
-      {/* line */}
-      <img
-        src="images/light-blue-line.svg"
-        alt=""
-        className="hidden sm:block absolute bottom-5 left-20"
-      />
-    </footer>
-  );
-};
-
-export default FooterDesign1;
-
-FooterDesign1.defaultProps = {
-  array: [
-    {
-      footerItems: [
-        {
-          name: "لینک های اصلی",
-        },
-        {
-          name: "فروشگاه",
-        },
-        {
-          name: "در باره ما",
-        },
-        {
-          name: "پرسش های متداول",
-        },
-      ],
-    },
-    {
-      footerItems: [
-        {
-          name: "لینک های اصلی",
-        },
-        {
-          name: "فروشگاه",
-        },
-        {
-          name: "در باره ما",
-        },
-        {
-          name: "پرسش های متداول",
-        },
-      ],
-    },
-    {
-      footerItems: [
-        {
-          name: "لینک های اصلی",
-        },
-        {
-          name: "فروشگاه",
-        },
-        {
-          name: "در باره ما",
-        },
-        {
-          name: "پرسش های متداول",
-        },
-      ],
-    },
-    {
-      footerItems: [
-        {
-          name: "لینک های اصلی",
-        },
-        {
-          name: "فروشگاه",
-        },
-        {
-          name: "در باره ما",
-        },
-      ],
-    },
-  ],
-};

src/components/FooterDesign/index.js

@@ -1,12 +1,10 @@
 import React, { useState } from "react";
 
 import Footer from "./Footer";
-import FooterDesign2 from "./FooterDesign2";
 
 function FooterDesign() {
   const list = {
     1: <Footer />,
-    2: <FooterDesign2 />,
   };
   const [type, setType] = useState(1);
   return (

src/components/FormFields/FormInput/index.js

@@ -12,33 +12,31 @@ const FormInput = ({ items }) => {
   const { register, getValues } = useForm();
 
   return (
-    <div className="mx-auto w-fit flex flex-row items-center justify-between divide-x-2 divide-[#F3F3F3] divide-x-reverse bg-white p-4 border border-gray-200 rounded-sm shadow-sm">
+    <div className="w-fit flex flex-row items-center justify-between mx-auto bg-surface p-4 border border-surfaceBorder rounded-sm shadow-sm divide-x-2 divide-surfaceBorder divide-x-reverse ">
       <div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
         <Input
           register={register("firstName")}
           label="نام "
           type="text"
-          borderClassname={`border border-[#E0E0E0] `}
-          inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`}
+          borderClassname={`border border-surfaceBorder `}
+          inputClassname={`px-3 py-2 text-primaryText focus:bg-white`}
         />
         <Input
           register={register("lastName")}
           label="نام خانوادگی"
           type="text"
-          borderClassname={`border border-[#E0E0E0] `}
-          inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`}
+          borderClassname={`border border-surfaceBorder `}
         />
         <Input
           register={register("birthYear")}
           label="تاریخ تولد"
           type="number"
-          borderClassname={`border border-[#E0E0E0] `}
-          inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`}
+          inputClassname={`px-3 py-2 text-primaryText focus:bg-white`}
         />
         <CustomSelectBox />
         <CustomSwitch
           register={register("gender")}
-          className="flex-1 bg-[#F9F9F9] border-[#E0E0E0]"
+          className="flex-1 bg-surface border-surfaceBorder"
           // defaultValue={activeUser?.gender}
           values={["خانم", "آقا"]}
         />
@@ -48,34 +46,34 @@ const FormInput = ({ items }) => {
           register={register("mobileNumber")}
           label="شماره تماس"
           type="number"
-          borderClassname={`border border-[#E0E0E0] `}
-          inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`}
+          borderClassname={`border border-surfaceBorder `}
+          inputClassname={`px-3 py-2 text-primaryText focus:bg-white`}
         />
         <Input
           register={register("job")}
           label="شغل"
           type="text"
-          borderClassname={`border border-[#E0E0E0] `}
-          inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`}
+          borderClassname={`border border-surfaceBorder `}
+          inputClassname={`px-3 py-2 text-primaryText focus:bg-white`}
         />
         <CustomSelectBox options={items} />
         <Input
           register={register("foundus")}
           label="نحوه آشنایی با موکب"
           type="text"
-          borderClassname={`border border-[#E0E0E0] `}
-          inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`}
+          borderClassname={`border border-surfaceBorder `}
+          inputClassname={`px-3 py-2 text-primaryText focus:bg-white`}
         />
         <Input
           register={register("idCard")}
           label="کد ملی"
           type="number"
-          borderClassname={`border border-[#E0E0E0] `}
-          inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`}
+          borderClassname={`border border-surfaceBorder `}
+          inputClassname={`px-3 py-2 text-primaryText focus:bg-white`}
         />
       </div>
       <div className="flex-grow flex-1 flex flex-col px-4 justify-between">
-        <lable className="text-xs bg-[#F9F9F9] border border-[#e0e0e0] text-[#0F0543]  rounded p-2">
+        <lable className="text-xs bg-surface border border-surfaceBorder text-primaryText rounded p-2">
           تاریخ ورود
         </lable>
         <DateRangePicker />

src/components/FormFields/OutlineInput/index.js

@@ -14,14 +14,14 @@ const OutlineInput = ({
     <div className={`${divWidth}`}>
       <input
         type="text"
-        className={`relative w-full border-2 rounded-md text-sm h-12
-focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E] ${textClr} ${borderClr}`}
+        className={`relative w-full border-2 rounded text-sm h-12
+focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary ${textClr} ${borderClr}`}
         onClick={onClick}
         onFocus={onFocus}
         onBlur={onBlur}
       />
       <span
-        className={`absolute right-20 -mt-2 bg-white text-xs px-2 font-sansbold ${outlineTitleClr}`}
+        className={`absolute right-20 -mt-2 bg-surface text-xs px-2 font-bold ${outlineTitleClr}`}
       >
         {outlineTitle}
       </span>
@@ -33,8 +33,8 @@ export default OutlineInput;
 
 OutlineInput.defaultProps = {
   divWidth: "w-full",
-  textClr: "text-blue-600",
-  borderClr: "border-pink-400",
+  textClr: "text-primaryText",
+  borderClr: "border-surfaceBorder",
   outlineTitle: "مهدی عندلیب",
-  outlineTitleClr: "text-red-400",
+  outlineTitleClr: "text-primaryText",
 };

src/components/FormFields/OutlineSpan/index.js

@@ -14,7 +14,7 @@ const OutlineSpan = ({
   return (
     <div className={`${divWidth}`}>
       <span
-        className={`absolute right-20 -mt-2 ${outlineTitleClr} bg-white text-xs px-2 font-sansbold z-10`}
+        className={`absolute right-20 -mt-2 ${outlineTitleClr} bg-red-400 text-xs px-2 font-sansbold z-10`}
       >
         {outlineTitle}
       </span>

src/components/MiniComponents/TitleSubtitle/index.js

@@ -25,9 +25,7 @@ const TitleSubtitle = ({
           <div
             className={`rounded bg-primaryDark ${subtitleBorderClassName}`}
           ></div>
-          <p className={`text-xs text-primaryDark ${subtitleClassName}`}>
-            {subTitle}
-          </p>
+          <p className={`text-primaryDark ${subtitleClassName}`}>{subTitle}</p>
         </div>
       )}
     </div>
@@ -43,6 +41,6 @@ TitleSubtitle.defaultProps = {
   titleClassName: "text-base",
   titleBorderClassName: "w-1 h-5 ml-1",
 
-  subtitleClassName: "",
+  subtitleClassName: "text-xs",
   subtitleBorderClassName: "w-1 h-5 ml-1",
 };

src/components/UploadFile/UploadDesign1/index.js

@@ -95,7 +95,7 @@ export default class UploadDesign1 extends Component {
                 className={`bg-[#68A8E6] h-3 rounded duration-500 w-72`}
               ></div>
             </div>
-            <p className="bg-red-400">{this.state.fileName}</p>
+            <p className="text-xs my-2 text-center">{this.state.fileName}</p>
           </div>
         </div>
       </div>