From 253a2ac186d2d0befd869da5d7a0800cf8acc5d9 Mon Sep 17 00:00:00 2001
From: mahdi <andalibmahdi45@gmail.com>
Date: Wed, 22 Dec 2021 11:11:48 +0330
Subject: [PATCH] update

---
 src/App.js                                  |   2 +-
 src/components/buttonDesign/ButtonDesign.js |  40 ++--
 src/components/productTags/ProductTags.js   | 198 ++++++--------------
 src/components/productTags/ProductTags.scss |   3 +
 tailwind.config.js                          |  31 ++-
 5 files changed, 98 insertions(+), 176 deletions(-)

diff --git a/src/App.js b/src/App.js
index b30fabe..5e53204 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,7 +7,7 @@ function App() {
   return (
     <div className="App">
       {/* <ProductDesign /> */}
-      {/* <ButtonDesign /> */}
+      <ButtonDesign />
       <ProductTags />
     </div>
   );
diff --git a/src/components/buttonDesign/ButtonDesign.js b/src/components/buttonDesign/ButtonDesign.js
index 1e832ce..48a9cd8 100644
--- a/src/components/buttonDesign/ButtonDesign.js
+++ b/src/components/buttonDesign/ButtonDesign.js
@@ -32,81 +32,81 @@ const ButtonDesign = () => {
         {/* Button UI Design */}
         <div className="flex flex-wrap justify-around items-center">
           <div>
-            <button className="bg-moreInfoButtonBg text-white text-sm md:text-base rounded px-6 py-2 border-b-4 border-moreInfoButtonBorderColor my-2 ">
+            <button className="bg-darkGreenBg text-white text-sm md:text-base rounded px-6 py-2 border-b-4 border-lightBlueBorderColor my-2 ">
               اطلاعات بیشتر
             </button>
             <br />
-            <button className="bg-moreInfoButtonBg text-white text-sm md:text-base rounded px-6 py-2 my-2">
+            <button className="bg-darkGreenBg text-white text-sm md:text-base rounded px-6 py-2 my-2">
               اطلاعات بیشتر
             </button>
             <br />
-            <button className="bg-moreInfoButtonBg text-white text-sm md:text-base rounded-full px-6 py-2 my-2">
+            <button className="bg-darkGreenBg text-white text-sm md:text-base rounded-full px-6 py-2 my-2">
               اطلاعات بیشتر
             </button>
             <br />
-            <button className="bg-moreInfoButtonBg text-white text-sm md:text-base rounded px-6 py-2 border-b-4 border-moreInfoButtonBorderColor my-2 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300">
+            <button className="bg-darkGreenBg text-white text-sm md:text-base rounded px-6 py-2 border-b-4 border-lightBlueBorderColor my-2 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300">
               Hover ME
             </button>
             <br />
-            <button className="flex items-center bg-moreInfoButtonBg text-white text-sm md:text-base rounded px-6 py-2 my-2">
+            <button className="flex items-center bg-darkGreenBg text-white text-sm md:text-base rounded px-6 py-2 my-2">
               اطلاعات بیشتر
               <img src={whiteLeftArrow} alt="" className="w-4 mr-1" />
             </button>
           </div>
           <div>
-            <button className="border-2 border-moreInfoButtonBorderColor text-moreInfoButtonTextColor text-sm md:text-base rounded px-6 py-2 my-2">
+            <button className="border-2 border-lightBlueBorderColor text-lightBlueTextColor text-sm md:text-base rounded px-6 py-2 my-2">
               اطلاعات بیشتر
             </button>
             <br />
-            <button className="border-2 border-moreInfoButtonBorderColor text-moreInfoButtonTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
+            <button className="border-2 border-lightBlueBorderColor text-lightBlueTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
               اطلاعات بیشتر
             </button>
             <br />
-            <button className="flex items-center border-2 border-moreInfoButtonBorderColor text-moreInfoButtonTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
+            <button className="flex items-center border-2 border-lightBlueBorderColor text-lightBlueTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
               اطلاعات بیشتر
               <img src={greenLeftArrow} alt="" className="w-4 mr-1" />
             </button>
-            <button className="flex items-center  text-moreInfoButtonTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
+            <button className="flex items-center  text-lightBlueTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
               اطلاعات بیشتر
               <img src={greenLeftArrow} alt="" className="w-4 mr-1" />
             </button>
-            <button className="flex items-center border-2 border-moreInfoButtonBorderColor text-moreInfoButtonTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
+            <button className="flex items-center border-2 border-lightBlueBorderColor text-lightBlueTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
               اطلاعات بیشتر
-              <span className="bg-moreInfoButtonBg rounded-full p-2 mr-2">
+              <span className="bg-darkGreenBg rounded-full p-2 mr-2">
                 <img src={whiteLeftArrow} alt="" className="w-4" />
               </span>
             </button>
           </div>
           <div>
-            <button className="bg-cancleButtonBg text-cancleButtonTextColor text-sm md:text-base rounded px-6 py-2 my-2">
+            <button className="bg-midGrayBgColor text-cancleButtonTextColor text-sm md:text-base rounded px-6 py-2 my-2">
               لغو کردن
             </button>
             <br />
-            <button className="bg-cancleButtonBg p-4 rounded-md">
+            <button className="bg-midGrayBgColor p-4 rounded-md">
               <img src={blackRightArrow} alt="" className="w-4" />
             </button>
-            <button className="bg-cancleButtonBg p-4 rounded-md mr-2">
+            <button className="bg-midGrayBgColor p-4 rounded-md mr-2">
               <img src={blackLeftArrow} alt="" className="w-4" />
             </button>
             <br />
-            <button className="bg-moreInfoButtonBg p-4 rounded-md my-2">
+            <button className="bg-darkGreenBg p-4 rounded-md my-2">
               <img src={whiteRightArrow} alt="" className="w-4" />
             </button>
-            <button className="bg-moreInfoButtonBg p-4 rounded-md mr-2">
+            <button className="bg-darkGreenBg p-4 rounded-md mr-2">
               <img src={whiteLeftArrow} alt="" className="w-4" />
             </button>
             <br />
-            <button className="bg-cancleButtonBg p-4 rounded-md">
+            <button className="bg-midGrayBgColor p-4 rounded-md">
               <img src={blackUpwardArrow} alt="" className="w-4" />
             </button>
-            <button className="bg-cancleButtonBg p-4 rounded-md mr-2">
+            <button className="bg-midGrayBgColor p-4 rounded-md mr-2">
               <img src={blackDownwardArrow} alt="" className="w-4" />
             </button>
             <br />
-            <button className="bg-moreInfoButtonBg p-4 rounded-full my-2">
+            <button className="bg-darkGreenBg p-4 rounded-full my-2">
               <img src={whiteUpwardArrow} alt="" className="w-4 h-4" />
             </button>
-            <button className="bg-moreInfoButtonBg p-4 rounded-full mr-2">
+            <button className="bg-darkGreenBg p-4 rounded-full mr-2">
               <img src={whiteDownwardArrow} alt="" className="w-4 h-4" />
             </button>
           </div>
diff --git a/src/components/productTags/ProductTags.js b/src/components/productTags/ProductTags.js
index e96e5db..c9c05be 100644
--- a/src/components/productTags/ProductTags.js
+++ b/src/components/productTags/ProductTags.js
@@ -1,10 +1,18 @@
 import React from "react";
+import "./ProductTags.scss";
 
 import blackCancleIcon from "../../assets/icons/black-cancle-icon.svg";
 import blackDeliveryIcon from "../../assets/icons/black-delivery-icon.svg";
 import blackRightIcon from "../../assets/icons/black-right-icon.svg";
 
-const ProductTags = ({ tagtitlecolor }) => {
+const ProductTags = ({
+  tagtitlecolor,
+  tagBgColor,
+  tagBorderColor,
+  deliveryIcon,
+  rightIcon,
+  cancleIcon,
+}) => {
   return (
     <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
       <div className="flex items-center justify-between mb-6">
@@ -15,152 +23,20 @@ const ProductTags = ({ tagtitlecolor }) => {
       {/* product UI Design */}
       <div className="flex flex-wrap items-center justify-around ">
         {/* 1 */}
-        <div className="mt-2 flex flex-wrap w-1/5	 ">
+        <div className="mt-2 flex flex-wrap w-1/5	">
           <button
-            className={`rounded  border border-productTagBorderColor1 m-1 px-4 py-1 text-xs ${tagtitlecolor}`}
+            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
           >
+            {deliveryIcon && (
+              <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
+            )}
+            {rightIcon && (
+              <img src={blackRightIcon} alt="" className="ml-1 w-3" />
+            )}
             ارسال رایگان
-          </button>
-          <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            برچسب های دیگر
-          </button>
-          <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            امتحان سخت
-          </button>
-          <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            بسته بندی به صورت کادو
-          </button>
-          <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            امتحان آسان
-          </button>
-          <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            بسته بندی به صورت کادو
-          </button>
-          <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            آزمون
-          </button>
-        </div>
-        {/* 2 */}
-        <div className="mt-2 flex flex-wrap w-1/5	">
-          <button className=" rounded text-moreInfoButtonTextColor border border-moreInfoButtonBorderColor m-1 px-4 py-1 text-xs">
-            ارسال رایگان
-          </button>
-          <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            برچسب های دیگر
-          </button>
-          <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            امتحان سخت
-          </button>
-          <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            بسته بندی به صورت کادو
-          </button>
-          <button className="rounded text-moreInfoButtonTextColor border border-moreInfoButtonBorderColor m-1 px-4 py-1 text-xs">
-            امتحان آسان
-          </button>
-          <button className="rounded text-moreInfoButtonTextColor border border-moreInfoButtonBorderColor m-1 px-4 py-1 text-xs">
-            بسته بندی به صورت کادو
-          </button>
-          <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            آزمون
-          </button>
-        </div>
-        {/* 3 */}
-        <div className="mt-2 flex flex-wrap w-1/5	">
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            ارسال رایگان
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            برچسب های دیگر
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            امتحان سخت
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            بسته بندی به صورت کادو
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            امتحان آسان
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            بسته بندی به صورت کادو
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            آزمون
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-        </div>
-        {/* 4 */}
-        <div className="mt-2 flex flex-wrap w-1/5	">
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            ارسال رایگان
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            برچسب های دیگر
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            امتحان سخت
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            بسته بندی به صورت کادو
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            امتحان آسان
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            بسته بندی به صورت کادو
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            آزمون
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-        </div>
-        {/* 5 */}
-        <div className="mt-2 flex flex-wrap w-1/5	">
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
-            ارسال رایگان
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            <img src={blackRightIcon} alt="" className="ml-1 w-3" />
-            ارسال رایگان
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            برچسب های دیگر
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            امتحان سخت
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            بسته بندی به صورت کادو
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            امتحان آسان
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            بسته بندی به صورت کادو
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
-          </button>
-          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
-            آزمون
-            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+            {cancleIcon && (
+              <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+            )}
           </button>
         </div>
       </div>
@@ -170,6 +46,38 @@ const ProductTags = ({ tagtitlecolor }) => {
 
 export default ProductTags;
 
+// color classes that i defined in tailwind.config.js and we can use for text color:
+// 1 ----> text-lightBlueTextColor
+// 2 ----> text-grayTextColor
+// 3 ----> text-lightOrangeTextColor
+// 4 ----> text-lightYellowTextColor
+// 4 ----> text-lightGreenTextColor
+// 4 ----> text-lightPurpleTextColor
+// 5 ----> text-darkBlueTextColor
+
+// color classes that i defined in tailwind.config.js and we can use for background color:
+// 1 ----> bg-productTagBg
+// 2 ----> bg-lightOrangeBgColor
+// 3 ----> bg-lightYellowBgColor
+// 4 ----> bg-lightBlueBgColor
+// 4 ----> bg-lightGreenBgColor
+// 4 ----> bg-lightPurpleBgColor
+
+// color classes that i defined in tailwind.config.js and we can use for border color:
+// 1 ----> border-lightBlueBorderColor
+// 2 ----> border-grayBorderColor
+// 3 ----> border-lightOrangeBorderColor
+// 4 ----> border-lightYellowBorderColor
+// 5 ----> border-lightGreenBorderColor
+// 5 ----> border-lightPurpleBorderColor
+// 6 ----> border-darkBlueBorderColor
+
 ProductTags.defaultProps = {
-  tagtitlecolor: "text-red-400",
+  tagtitlecolor: "text-lightPurpleTextColor",
+  tagBgColor: "bg-lightPurpleBgColor",
+  tagBorderColor: "border-lightPurpleBorderColor",
+  // for icons
+  deliveryIcon: true,
+  rightIcon: false,
+  cancleIcon: true,
 };
diff --git a/src/components/productTags/ProductTags.scss b/src/components/productTags/ProductTags.scss
index e69de29..391939f 100644
--- a/src/components/productTags/ProductTags.scss
+++ b/src/components/productTags/ProductTags.scss
@@ -0,0 +1,3 @@
+.product-tag-button {
+  @apply flex items-center rounded border-2  m-1 px-4 py-1 text-xs;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index a0fffb2..2a75263 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,9 +17,13 @@ module.exports = {
       selectColor2: "#89ECFF",
       selectColor3: "#FC5353",
       selectColor4: "#FCF653",
-      // used in ButtonDesign Component
-      moreInfoButtonTextColor: "#06BACE",
-      cancleButtonTextColor: "#646464",
+      lightBlueTextColor: "#06BACE",
+      grayTextColor: "#646464",
+      lightOrangeTextColor: "#F7B605",
+      lightYellowTextColor: "#C8EE49",
+      lightGreenTextColor: "#5DCE06",
+      lightPurpleTextColor: "#A680FF",
+      darkBlueTextColor: "#0615CE",
     }),
     backgroundColor: (theme) => ({
       ...theme("colors"),
@@ -29,18 +33,25 @@ module.exports = {
       discountPriceBg: "#F0FFF1",
       counterBg: "#66B1EB",
       incrementDecrementBg: "#2E7AB5",
-      // used in ButtonDesign Component
-      moreInfoButtonBg: "#038A99",
-      cancleButtonBg: "#DBDBDB",
+      darkGreenBg: "#038A99",
+      midGrayBgColor: "#DBDBDB",
+      lightOrangeBgColor: "#F7B605",
+      lightYellowBgColor: "#CEFE2D", //opacity should be 10 % instead of 100%
+      lightBlueBgColor: "#8891FC", //opacity should be 10 % instead of 100%
+      lightGreenBgColor: "#5DCE06", //opacity should be 3 % instead of 100%
+      lightPurpleBgColor: "#A680FF", //opacity should be 8 % instead of 100%
     }),
     borderColor: (theme) => ({
       ...theme("colors"),
       // used in ProductDesign Component
       productDesignBorderColor: "#F3F3F3",
-      // used in ButtonDesign Component
-      moreInfoButtonBorderColor: "#06BACE",
-      // used in ProductTags Component
-      productTagBorderColor1: "#C3C3C3",
+      lightBlueBorderColor: "#06BACE",
+      grayBorderColor: "#C3C3C3",
+      lightOrangeBorderColor: "#F7B605",
+      lightYellowBorderColor: "#CFFF2D",
+      lightGreenBorderColor: "#5DCE06",
+      lightPurpleBorderColor: "#A680FF",
+      darkBlueBorderColor: "#0615CE",
     }),
   },
   plugins: [],