update src/components/Empty/index.js, src/views/ShoppingCart/index.js and tailwind.config.js

src/components/Empty/index.js

@@ -4,12 +4,17 @@ import { connect } from "react-redux";
 export const Empty = ({ text, buttonText, buttonAction }) => {
   return (
     <div
-      className="flex-1 flex flex-col justify-center items-center"
+      className="flex-1 flex flex-col justify-center items-center "
       style={{ minHeight: "calc(100vh - 120px)" }}
     >
       <strong className="text-lg font-bold text-gray1">{text}</strong>
       {buttonText && (
-        <button className="transform translate-y-20 py-2 px-6 text-base rounded-md bg-blueC0 text-white" onClick={() => buttonAction()}>{buttonText}</button>
+        <button
+          className="transform translate-y-7 py-2 px-6 text-base rounded-md bg-blueC0 text-white cursor-pointer"
+          onClick={() => buttonAction()}
+        >
+          {buttonText}
+        </button>
       )}
     </div>
   );

src/views/ShoppingCart/index.js

@@ -181,7 +181,12 @@ function ShoppingCart({
     ) : productsLength ? (
       <Table />
     ) : (
-      <strong className="text-blueC0">سبد خرید شما خالی است.</strong>
+      <Empty
+        text="سبد خرید شما خالی است."
+        buttonText="فروشگاه"
+        buttonAction={() => navigation("/products")}
+      />
+      // <strong className="text-blueC0">سبد خرید شما خالی است.</strong>
     ),
     deliveryForm: <DeliveryForm setPhase={setPhase} />,
     address: <Address setPhase={setPhase} />,

tailwind.config.js

@@ -12,8 +12,8 @@ module.exports = {
       blueFF: "#E8FCFF", // در موبایل صفحه ویديو رنگ پس زمینه لیست فصل ها
       blueFF1: "#E9F0FF", // در صفحه نمایش ویديو پس زمینه پلی لیست
       blueFD: "#F6F9FD", // در صفحه فعال سازی کتاب پس زمینه هشدار
-      blueFD1 : "#F4F8FD", // در صفحه فعال سازی هدر بالای سایت
-      blueFFOP : "rgba(6, 146, 255, 0.36)", // در صفحه محصولات دکمه پاک کردن فیلترها در سایدبار
+      blueFD1: "#F4F8FD", // در صفحه فعال سازی هدر بالای سایت
+      blueFFOP: "rgba(6, 146, 255, 0.36)", // در صفحه محصولات دکمه پاک کردن فیلترها در سایدبار
       redFF: "#FFE6E6", // در انیمیشن موبایل که میاد کد رو اسکن کنه نتیجه اسکن پس زمینه پی دی اف
       redFF1: "#FF2020", // در آیکن همبرگری نقطه نوتیف
       red19: "#C01919", // در صفحه محصول رنگ متن مشاهده نمونه
@@ -33,9 +33,9 @@ module.exports = {
       grayF9: "#F9F9F9", // رنگ پس زمینه قیمت محصول و گارنتی و فلان در سبد خرید
       grayF4: "#DEFFF1", // در صفحه محصولات رنگ پس زمینه عکس کتاب
       grayF7: "#12cf7f",
-      greenDD: '#D5DDBC', // رنگ پس زمینه باکس اضافه کردن به سبد خرید در صفحه محصول
-      greenD8: '#F8F9FA',
-      greenF1 : '#9CF1FA',
+      greenDD: "#D5DDBC", // رنگ پس زمینه باکس اضافه کردن به سبد خرید در صفحه محصول
+      greenD8: "#F8F9FA",
+      greenF1: "#9CF1FA",
     }),
     textColor: (theme) => ({
       ...theme("colors"),
@@ -46,17 +46,17 @@ module.exports = {
       blue52: "#354F52", // در باکس اضافه کردن به سبد خرید رنگ متن با خرید این محصول فلان تومن سود کن
       blue5F: "#2F3E46", // رنگ لینکها در هدر بالای سایت
       blueB9: "#86A0B9", // در موبایل تب پایین صفحه رنگ متن صفحات
-      blue3D: '14213D',
+      blue3D: "14213D",
       green71: "#067182", // در دسکتاپ انیمیشن قسمت برگزاری آزمون تکست زمان بافیمانده
       greenBA: "#06BACE", // در سرچ اصلی سایت رنگ تکست تایتل محصولات و صفحات
       red5F: "#5F1A05", // در انیمیشن موبایل که میاد کد رو اسکن کنه نتیجه اسکن متن پی دی اف,
-      green4F: '#354F52',
+      green4F: "#354F52",
       red19: "#C01919", // در صفحه محصول رنگ متن مشاهده نمونه
       yellow1: "#5F5F05", // در انیمیشن موبایل که برای اسکن کد میاد نتیجه اسکن رنگ متن لینک ه
       gray1: "#333333", // رنگ متن سرچ در صفحه محصولات موبایل
       gray70: "#707070", // رنگ متن تایتل لیست لینک ها در فوتر سایت
       grayDB: "#DBDBDB", // در دراور موبایل رنگ متن شماره موبایل کاربر در حالت دارک
-      green7B: '#137B4F'
+      green7B: "#137B4F",
     }),
     // height: (theme) =>( {
     //   sm: '8px',
@@ -72,12 +72,11 @@ module.exports = {
       blueC01: "#1999C0",
       blueFE: "#E8FCFF",
       blueFF1: "#E9F0FF",
-      blueB9: '#86A0B9',
+      blueB9: "#86A0B9",
       grayDB: "#DBDBDB",
       gray45: "#454545",
       red19: "#C01919",
-      greenB9: '#80B918'
-
+      greenB9: "#80B918",
     }),
     fill: (theme) => ({
       ...theme("colors"),
@@ -86,19 +85,19 @@ module.exports = {
       greenBA: "#06BACE",
     }),
     fontSize: {
-      'xs': 'clamp(9px, 2.78vw, 11px)',
-      'sm': 'clamp(11px, 3.02vw , 13px)',
-      'tiny': 'clamp(13px,3.28vw, 15px)',
-      'base': 'clamp(15px, 3.52vw, 17px)',
-      'lg': 'clamp(17px, 3.76vw, 19px)',
-      'xl': 'clamp(19px, 4vw, 21px)',
-      '2xl': 'clamp(21px, 4.24vw, 23px)',
-      '3xl': 'clamp(23px, 4.48vw, 25px)',
-      '4xl': 'clamp(25px, 4.72vw, 27px)',
-      '5xl': 'clamp(27px, 4.96vw, 29px)',
-      '6xl': 'clamp(29px, 5.22vw, 31px)',
-      '7xl': 'clamp(31px, 4.46vw, 33px)',
-      'sm-1': '0.5rem'
+      xs: "clamp(9px, 2.78vw, 11px)",
+      sm: "clamp(11px, 3.02vw , 13px)",
+      tiny: "clamp(13px,3.28vw, 15px)",
+      base: "clamp(15px, 3.52vw, 17px)",
+      lg: "clamp(17px, 3.76vw, 19px)",
+      xl: "clamp(19px, 4vw, 21px)",
+      "2xl": "clamp(21px, 4.24vw, 23px)",
+      "3xl": "clamp(23px, 4.48vw, 25px)",
+      "4xl": "clamp(25px, 4.72vw, 27px)",
+      "5xl": "clamp(27px, 4.96vw, 29px)",
+      "6xl": "clamp(29px, 5.22vw, 31px)",
+      "7xl": "clamp(31px, 4.46vw, 33px)",
+      "sm-1": "0.5rem",
     },
     extend: {
       borderRadius: {