From 23bbfdad51149bceff11662127f818982c7f3c21 Mon Sep 17 00:00:00 2001
From: mahdi <andalibmahdi45@gmail.com>
Date: Sat, 25 Dec 2021 10:26:59 +0330
Subject: [PATCH] update

---
 src/assets/icons/lightBlueDotIcon.svg         |  3 +++
 src/assets/icons/purpleDotIcon.svg            |  3 +++
 src/assets/icons/redDotIcon.svg               |  3 +++
 src/assets/icons/yellowDotIcon.svg            |  3 +++
 src/components/productDesign/ProductDesign.js | 25 ++++++++-----------
 5 files changed, 22 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/icons/lightBlueDotIcon.svg
 create mode 100644 src/assets/icons/purpleDotIcon.svg
 create mode 100644 src/assets/icons/redDotIcon.svg
 create mode 100644 src/assets/icons/yellowDotIcon.svg

diff --git a/src/assets/icons/lightBlueDotIcon.svg b/src/assets/icons/lightBlueDotIcon.svg
new file mode 100644
index 0000000..fc3cc88
--- /dev/null
+++ b/src/assets/icons/lightBlueDotIcon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <circle id="Ellipse_18" data-name="Ellipse 18" cx="8" cy="8" r="8" fill="#89ecff"/>
+</svg>
diff --git a/src/assets/icons/purpleDotIcon.svg b/src/assets/icons/purpleDotIcon.svg
new file mode 100644
index 0000000..1859629
--- /dev/null
+++ b/src/assets/icons/purpleDotIcon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <circle id="Ellipse_17" data-name="Ellipse 17" cx="8" cy="8" r="8" fill="#924eeb"/>
+</svg>
diff --git a/src/assets/icons/redDotIcon.svg b/src/assets/icons/redDotIcon.svg
new file mode 100644
index 0000000..1c20427
--- /dev/null
+++ b/src/assets/icons/redDotIcon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <circle id="Ellipse_19" data-name="Ellipse 19" cx="8" cy="8" r="8" fill="#fc5353"/>
+</svg>
diff --git a/src/assets/icons/yellowDotIcon.svg b/src/assets/icons/yellowDotIcon.svg
new file mode 100644
index 0000000..bd9e33e
--- /dev/null
+++ b/src/assets/icons/yellowDotIcon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <circle id="Ellipse_20" data-name="Ellipse 20" cx="8" cy="8" r="8" fill="#fcf653"/>
+</svg>
diff --git a/src/components/productDesign/ProductDesign.js b/src/components/productDesign/ProductDesign.js
index 7175183..e224ef8 100644
--- a/src/components/productDesign/ProductDesign.js
+++ b/src/components/productDesign/ProductDesign.js
@@ -6,6 +6,11 @@ import book from "../../assets/images/goldon.png";
 import heart from "../../assets/icons/vuesax-linear-heart.svg";
 import discountImg from "../../assets/icons/discount.png";
 
+import YellowDotIcon from "../../assets/icons/yellowDotIcon.svg";
+import RedDotIcon from "../../assets/icons/redDotIcon.svg";
+import PurpleDotIcon from "../../assets/icons/purpleDotIcon.svg";
+import LightBlueDotIcon from "../../assets/icons/lightBlueDotIcon.svg";
+
 const ProductDesign = ({
   colors,
   likeBtn,
@@ -89,21 +94,11 @@ const ProductDesign = ({
               </div>
               {/* select Color */}
               {colors && (
-                <div className="absolute right-2 bottom-2">
-                  <ul className="flex ">
-                    <li className="ml-1 text-selectColor1">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                    <li className="ml-1 text-selectColor2">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                    <li className="ml-1 text-selectColor3">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                    <li className="ml-1 text-selectColor4">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                  </ul>
+                <div className="flex items-center absolute right-2 bottom-2">
+                  <img src={YellowDotIcon} alt="" />
+                  <img src={RedDotIcon} alt="" />
+                  <img src={PurpleDotIcon} alt="" />
+                  <img src={LightBlueDotIcon} alt="" />
                 </div>
               )}
             </div>