update 18 files

src/Views/Home/Main/index.js

@@ -7,10 +7,10 @@ function Main({ activeComponent }) {
     <div className="lg:flex lg:flex-col lg:w-5/6 lg:h-full border-r border-gray-200">
       <header className="w-full flex flex-row items-center h-16 px-1 py-4 bg-gray-700"></header>
       <section className="w-full lg:overflow-y-scroll py-5 px-10 flex-1 flex-col">
-        <h1 className="font-bold text-3xl text-left">
+        <h1 className="font-sansbold text-3xl text-left">
           {activeComponent?.content?.name}
         </h1>
-        <span className="font-bold text-xs mb-10 text-left block">
+        <span className="font-sansbold text-xs mb-10 text-left block">
           {activeComponent?.name && `Designed by: ${activeComponent?.author}`}
         </span>
         {activeComponent?.content?.component}
@@ -22,11 +22,11 @@ function Main({ activeComponent }) {
           <table className="w-full" style={{ direction: "ltr" }}>
             <thead>
               <tr>
-                <th className="font-bold text-lg">Name</th>
-                <th className="font-bold text-lg">Type</th>
-                <th className="font-bold text-lg">Required</th>
-                <th className="font-bold text-lg">Default value</th>
-                <th className="font-bold text-lg">Description</th>
+                <th className="font-sansbold text-lg">Name</th>
+                <th className="font-sansbold text-lg">Type</th>
+                <th className="font-sansbold text-lg">Required</th>
+                <th className="font-sansbold text-lg">Default value</th>
+                <th className="font-sansbold text-lg">Description</th>
               </tr>
             </thead>
             <tbody className="w-full divided divide-y">

src/components/Blogs/design1/index.js

@@ -19,7 +19,7 @@ const BlogDesign1 = ({
         </div>
         <div className="w-3/5 mr-4 flex flex-col justify-between py-2">
           <div>
-            <h2 className="text-base text-justify text-grayTextColor font-bold leading-6">
+            <h2 className="text-base text-justify text-grayTextColor font-sansbold leading-6">
               آیا مواد غذای پر فیبر و مفید هستند؟
             </h2>
             {blogExcerpt && (

src/components/Blogs/design2/index.js

@@ -41,11 +41,11 @@ const BlogDesign2 = ({
           </button>
         )}
         <div className="z-10 child-text">
-          <h2 className="text-white text-base font-bold leading-6">
+          <h2 className="text-white text-base font-sansbold leading-6">
             آیا مواد غذایی پر فیبر مفید هستند؟
           </h2>
           {blogSubTitle && (
-            <h2 className="text-white text-base mt-2 font-bold leading-6">
+            <h2 className="text-white text-base mt-2 font-sansbold leading-6">
               شما چه فکری می کنید
             </h2>
           )}

src/components/Blogs/design3/index.js

@@ -31,13 +31,13 @@ const BlogDesign3 = ({
         {/* <img src={blogFeaturedImage2} alt="" /> */}
         <div className="w-full mx-auto p-4 rounded-lg shadow-md bg-white transform translate-y-20">
           <h2
-            className={`text-base text-justify font-bold leading-6 ${blogTitleColor}`}
+            className={`text-base text-justify font-sansbold leading-6 ${blogTitleColor}`}
           >
             آیا مواد غذای پر فیبر و مفید هستند؟
           </h2>
           {blogSubTitle && (
             <h2
-              className={`text-base text-justify mt-2 font-bold leading-6 ${blogTitleColor}`}
+              className={`text-base text-justify mt-2 font-sansbold leading-6 ${blogTitleColor}`}
             >
               نظر شما چیه
             </h2>

src/components/Blogs/design4/index.js

@@ -21,7 +21,7 @@ const BlogDesign4 = ({
         </div>
         <div className="w-3/5 flex flex-col justify-between py-3 transform translate-x-10">
           <div>
-            <h2 className="text-base text-grayTextColor font-bold leading-6">
+            <h2 className="text-base text-grayTextColor font-sansbold leading-6">
               آیا مواد غذای پر فیبر و مفید هستند؟
             </h2>
             {blogExcerpt && (

src/components/Blogs/design5/index.js

@@ -22,7 +22,7 @@ const BlogDesign5 = ({
         </div>
         <div className="w-3/5 flex flex-col justify-between py-3 mr-4">
           <div>
-            <h2 className="text-base text-justify text-grayTextColor font-bold leading-6">
+            <h2 className="text-base text-justify text-grayTextColor font-sansbold leading-6">
               آیا مواد غذای پر فیبر و مفید هستند؟
             </h2>
             {blogExcerpt && (

src/components/Blogs/design6/index.js

@@ -18,7 +18,7 @@ const BlogDesign6 = ({
       <div className="">
         <img src={FeaturedImage} alt="" className="w-full" />
         <div className="py-2">
-          <h2 className="text-base text-justify text-grayTextColor mt-2 font-bold leading-6">
+          <h2 className="text-base text-justify text-grayTextColor mt-2 font-sansbold leading-6">
             آیا مواد غذای پر فیبر و مفید هستند؟
           </h2>
           {blogExcerpt && (

src/components/Calendar/CalendarComponents/Calendar.js

@@ -1,20 +1,20 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from "react";
 
 import {
   getDateAccordingToMonth,
   shallowClone,
   getValueType,
-} from './shared/generalUtils';
+} from "./shared/generalUtils";
 import {
   TYPE_SINGLE_DATE,
   TYPE_RANGE,
   TYPE_MUTLI_DATE,
-} from './shared/constants';
-import { useLocaleUtils, useLocaleLanguage } from './shared/hooks';
+} from "./shared/constants";
+import { useLocaleUtils, useLocaleLanguage } from "./shared/hooks";
 
-import { Header, MonthSelector, YearSelector, DaysList } from './components';
+import { Header, MonthSelector, YearSelector, DaysList } from "./components";
 
- const Calendar = ({
+const Calendar = ({
   value,
   onChange,
   onDisabledDayError,
@@ -38,12 +38,12 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
   customDaysClassName,
   events,
   renderEvents,
-  type
+  type,
 }) => {
   const calendarElement = useRef(null);
   const [mainState, setMainState] = useState({
     activeDate: null,
-    monthChangeDirection: '',
+    monthChangeDirection: "",
     isMonthSelectorOpen: false,
     isYearSelectorOpen: false,
   });
@@ -51,10 +51,10 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
   useEffect(() => {
     const handleKeyUp = ({ key }) => {
       /* istanbul ignore else */
-      if (key === 'Tab')
-        calendarElement.current.classList.remove('-noFocusOutline');
+      if (key === "Tab")
+        calendarElement.current.classList.remove("-noFocusOutline");
     };
-    calendarElement.current.addEventListener('keyup', handleKeyUp, false);
+    calendarElement.current.addEventListener("keyup", handleKeyUp, false);
     return () => {
       // calendarElement.current.removeEventListener('keyup', handleKeyUp, false);
     };
@@ -68,8 +68,8 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
     setMainState({ ...mainState, [property]: !mainState[property] });
   };
 
-  const toggleMonthSelector = createStateToggler('isMonthSelectorOpen');
-  const toggleYearSelector = createStateToggler('isYearSelectorOpen');
+  const toggleMonthSelector = createStateToggler("isMonthSelectorOpen");
+  const toggleYearSelector = createStateToggler("isYearSelectorOpen");
 
   const getComputedActiveDate = () => {
     const valueType = getValueType(value);
@@ -85,8 +85,12 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
     : getComputedActiveDate();
 
   const weekdays = weekDaysList.map((weekDay) => (
-    <abbr key={weekDay.name} title={weekDay.name} className={`Calendar__weekDay ${type}`}>
-      { type == 'dashboard' ? weekDay.name : weekDay.short}
+    <abbr
+      key={weekDay.name}
+      title={weekDay.name}
+      className={`Calendar__weekDay ${type}`}
+    >
+      {type == "dashboard" ? weekDay.name : weekDay.short}
     </abbr>
   ));
 
@@ -104,7 +108,7 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
         activeDate,
         mainState.monthChangeDirection
       ),
-      monthChangeDirection: '',
+      monthChangeDirection: "",
     });
   };
 
@@ -126,13 +130,14 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
 
   return (
     <div
-      className={`Calendar ${type} -noFocusOutline ${calendarClassName} -${isRtl ? 'rtl' : 'ltr'
+      className={`Calendar ${type} -noFocusOutline ${calendarClassName} -${
+        isRtl ? "rtl" : "ltr"
       }`}
       role="grid"
       style={{
-        '--cl-color-primary': colorPrimary,
-        '--cl-color-primary-light': colorPrimaryLight,
-        '--animation-duration': slideAnimationDuration,
+        "--cl-color-primary": colorPrimary,
+        "--cl-color-primary-light": colorPrimaryLight,
+        "--animation-duration": slideAnimationDuration,
       }}
       ref={calendarElement}
     >
@@ -196,18 +201,28 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
         isQuickSelectorOpen={
           mainState.isYearSelectorOpen || mainState.isMonthSelectorOpen
         }
-        showEvent={event => setEventInFooter(event)}
+        showEvent={(event) => setEventInFooter(event)}
         type={type}
       />
       <div className="Calendar__footer">
         <div className={`footer__Events ${type}`}>
-          {
-            type == 'dashboard' ? <><div className='text-xl font-black text-blue-400'>رویداد ها: </div><p className='text-blue-300 font-bold'>{eventInFooter ? eventInFooter : 'رویدادی در این روز وجود ندارد!'}</p></> : eventInFooter
-          }
-          
-          
+          {type == "dashboard" ? (
+            <>
+              <div className="text-xl font-black text-blue-400">
+                رویداد ها:{" "}
+              </div>
+              <p className="text-blue-300 font-sansbold">
+                {eventInFooter
+                  ? eventInFooter
+                  : "رویدادی در این روز وجود ندارد!"}
+              </p>
+            </>
+          ) : (
+            eventInFooter
+          )}
+        </div>
+        {renderFooter()}
       </div>
-        {renderFooter()}</div>
     </div>
   );
 };
@@ -215,17 +230,16 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
 Calendar.defaultProps = {
   minimumDate: null,
   maximumDate: null,
-  colorPrimary: '#0eca2d',
-  colorPrimaryLight: '#cff4d5',
-  slideAnimationDuration: '0.4s',
-  calendarClassName: '',
-  locale: 'en',
+  colorPrimary: "#0eca2d",
+  colorPrimaryLight: "#cff4d5",
+  slideAnimationDuration: "0.4s",
+  calendarClassName: "",
+  locale: "en",
   value: null,
   renderFooter: () => null,
-  renderEvents : () => null,
+  renderEvents: () => null,
   customDaysClassName: [],
   events: [],
 };
 
-
 export default Calendar;

src/components/Code/index.js

@@ -32,7 +32,7 @@ function Code({ code }) {
           </span>
         </div>
         <div
-          className={`font-bold text-lg cursor-pointer ${
+          className={`font-sansbold text-lg cursor-pointer ${
             height === 350 ? "text-blue-500" : "text-red-500"
           }`}
           onClick={() => setHeight(() => (height == 350 ? "auto" : 350))}

src/components/Counter/index.js

@@ -15,7 +15,9 @@ const Counter = ({ incrementIcon, decrementIcon, flex }) => {
         onClick={() => setCount(count + 1)}
       />
       <span
-        className={`text-sm sm:text-base md:text-2xl font-bold text-color ${flex === 'flex-col' ? 'my-2' : 'mx-2'}`}
+        className={`text-sm sm:text-base md:text-2xl font-sansbold text-color ${
+          flex === "flex-col" ? "my-2" : "mx-2"
+        }`}
         style={count > 0 ? { color: "green" } : { color: "red" }}
       >
         {count}

src/components/Features/index.js

@@ -10,7 +10,7 @@ import plane from "./plane.svg";
 const Features = ({ features }) => {
   return (
     <section className="bg-white border-2 border-gray-400 rounded m-7">
-      <h2 className="text-lg font-bold text-productTitle mr-7 my-5">
+      <h2 className="text-lg font-sansbold text-productTitle mr-7 my-5">
         امکانات و ویژگی ها
       </h2>
       <div className="w-full flex flex-wrap justify-around items-center">
@@ -27,7 +27,9 @@ const Features = ({ features }) => {
             </div>
             <div className="flex flex-col">
               <div className="flex items-center">
-                <strong className={`text-base font-medium`}>{feature.title}</strong>
+                <strong className={`text-base font-medium`}>
+                  {feature.title}
+                </strong>
                 <span
                   className={`mr-4 text-xs px-2 py-1 rounded-lg bg-blue-100`}
                 >
@@ -43,9 +45,7 @@ const Features = ({ features }) => {
       </div>
       <div className="flex flex-col sm:flex-row items-center justify-between py-10 px-7 bg-blue-100 ">
         <div>
-          <h2 className="font-semibold text-base">
-            هزاران درصد تحفیف
-          </h2>
+          <h2 className="font-semibold text-base">هزاران درصد تحفیف</h2>
           <p className="mt-4 text-sm">
             با وارد کردن کد بهار نگو تابستون از تخفیف 10 درصدی ویژه برخوردار
             شوید

src/components/Footer/index.js

@@ -13,18 +13,18 @@ const FooterDesign1 = ({ color, bg, links }) => {
     >
       <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 ${color}`}
+          {links.map((section, index) => (
+            <ul className="mr-10" key={index}>
+              {section.map((link, index) => (
+                <li
+                  className={`font-light text-xs leading-7 hover:font-sansbold footer-items ${color}`}
                   key={index}
                 >
                   <a href="">{link}</a>
-              </li>)
-              }
-            </ul>)
-          }
+                </li>
+              ))}
+            </ul>
+          ))}
         </>
       </div>
       <div className="flex items-center mt-10 md:mt-0">

src/components/Navbar/index.js

@@ -50,11 +50,13 @@ const HeaderDesign1 = ({
       </>
       <div className="flex justify-between items-center relative">
         <div className="ml-10">
-          <span className={`text-sm font-bold ml-4 text-gray-700`}>
+          <span className={`text-sm font-sansbold ml-4 text-gray-700`}>
             Design System
           </span>
           {category && (
-            <span className={`text-sm font-bold ${productCategoryTextColor}`}>
+            <span
+              className={`text-sm font-sansbold ${productCategoryTextColor}`}
+            >
               دسته بندی ها
             </span>
           )}

src/components/Product/index.js

@@ -50,7 +50,7 @@ const ProductDesign = ({
             <div className="absolute left-2 top-2">
               {discountPricePercent && (
                 <div className="bg-discountPriceBg rounded-md px-2">
-                  <p className="text-discountPriceTitle font-bold text-xs">
+                  <p className="text-discountPriceTitle font-sansbold text-xs">
                     23<span>%</span>
                   </p>
                 </div>
@@ -148,7 +148,7 @@ const ProductDesign = ({
             {star && (
               <div className="flex items-center mt-2">
                 <StarRating />
-                <span className="text-xs text-productContent font-bold mr-2">
+                <span className="text-xs text-productContent font-sansbold mr-2">
                   39
                 </span>
               </div>
@@ -190,9 +190,9 @@ const ProductDesign = ({
             )}
             {productTags && (
               <div className="mt-2 flex flex-wrap">
-                {
-                  productTags.map((item, index) => <Tag title={item} key={index} />)
-                }
+                {productTags.map((item, index) => (
+                  <Tag title={item} key={index} />
+                ))}
               </div>
             )}
             {rangeHolder && (

src/components/ProductStatusCard/index.js

@@ -24,13 +24,13 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
                 <img src={item.icon} alt="" className="w-8" />
                 <div className="flex flex-col mr-3">
                   <p className="text-sm">
-                    <span className="font-bold">{item.subtitle}</span>
+                    <span className="font-sansbold">{item.subtitle}</span>
                     {item.title}
                   </p>
                   {item.customerSatisfaction && (
                     <p className="text-xs mt-1">
                       رضایت خریداران:
-                      <span className="font-bold text-green-500 mr-2">
+                      <span className="font-sansbold text-green-500 mr-2">
                         {item.customerSatisfactionPercent}
                       </span>
                     </p>
@@ -64,7 +64,7 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
           <img src={arrow} alt="" className="w-20 h-20" />
         </div>
         <div className="flex flex-col mr-5">
-          <h2 className="text-sm font-bold text-blue-900">
+          <h2 className="text-sm font-sansbold text-blue-900">
             بازگشت بی چون و چرا
           </h2>
           <p className="text-xs mt-2 leading-5 text-justify">

src/components/ProductSuggestion/index.js

@@ -8,13 +8,17 @@ const ProductSuggestion = ({ suggestions }) => {
 
   return (
     <section className="m-10 border-2 border-gray-300 p-4 rounded-lg">
-      <h2 className="text-center text-lg font-bold text-productPrice">
+      <h2 className="text-center text-lg font-sansbold text-productPrice">
         این کالاها برای خرید به شما پیشنهام می دهیم
       </h2>
       {/* product design */}
       <div className="flex flex-row flex-wrap items-center justify-center mt-5 w-full">
         {suggestions.map((suggestion, index) => (
-          <div className="flex flex-row mb-7 justify-center relative" style={{ width : 'calc(100% / 4.5)' }} key={index}>
+          <div
+            className="flex flex-row mb-7 justify-center relative"
+            style={{ width: "calc(100% / 4.5)" }}
+            key={index}
+          >
             <div
               className={`flex flex-col items-center border rounded-md border-gray-300 p-5 cursor-pointer
                ${selectedProduct === suggestion ? "bg-white" : ""}`}
@@ -37,7 +41,11 @@ const ProductSuggestion = ({ suggestions }) => {
               </div>
             </div>
             {Number(index) !== suggestions.length - 1 && (
-              <img src={plus} alt="" className="w-5 absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-1/2" />
+              <img
+                src={plus}
+                alt=""
+                className="w-5 absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-1/2"
+              />
             )}
           </div>
         ))}
@@ -45,12 +53,12 @@ const ProductSuggestion = ({ suggestions }) => {
       {/* bottom */}
       <div className="flex flex-col justify-center items-center mt-4">
         <div className="flex flex-row mb-5">
-          <p className="text-base text-productPrice font-bold">
+          <p className="text-base text-productPrice font-sansbold">
             جمع لوازم اختیاری خریداری شده
             <span> 56/894/400 </span>
             تومان
           </p>
-          <span className="text-lightBlueTextColor text-base mr-1 font-bold">
+          <span className="text-lightBlueTextColor text-base mr-1 font-sansbold">
             1 کالا
           </span>
         </div>

src/components/SidebarMenu/index.js

@@ -24,7 +24,7 @@ const SidebarMenu = ({ items, buttons }) => {
         {/* profile */}
         <div className="flex flex-row items-center">
           <img src={profilePic} alt="" className="w-12 rounded-full" />
-          <p className="text-blue-600 font-bold text-base flex-1 mx-2">
+          <p className="text-blue-600 font-sansbold text-base flex-1 mx-2">
             کامران کوهستانی شیرازی
           </p>
           <img src={downwardArrow} alt="" className="w-5" />

src/components/VodProductNew/index.js

@@ -69,7 +69,7 @@ const VodProduct = ({
               <div className="absolute left-2 top-2">
                 {discountPricePercent && (
                   <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
-                    <p className="text-discountPriceTitle font-bold text-xs">
+                    <p className="text-discountPriceTitle font-sansbold text-xs">
                       23<span>%</span>
                     </p>
                   </div>
@@ -189,7 +189,7 @@ const VodProduct = ({
                 {star && (
                   <div className="flex items-center">
                     <StarRating />
-                    <span className="text-xs text-productContent font-bold mr-2">
+                    <span className="text-xs text-productContent font-sansbold mr-2">
                       39
                     </span>
                   </div>