From 90bed9b8a119d31ec011670be62e167f6b87acb6 Mon Sep 17 00:00:00 2001
From: Anton Yupko <antonyupkodm@gmail.com>
Date: Fri, 14 Jun 2024 13:02:49 +0300
Subject: [PATCH 1/2] add emphasizing selected color

---
 src/components/ProductDetails/ProductDetails.scss | 5 +++++
 src/components/ProductDetails/ProductDetails.tsx  | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/ProductDetails/ProductDetails.scss b/src/components/ProductDetails/ProductDetails.scss
index 468033b..8203bfb 100644
--- a/src/components/ProductDetails/ProductDetails.scss
+++ b/src/components/ProductDetails/ProductDetails.scss
@@ -134,6 +134,11 @@
 
     @include hover(border, 2px solid var(--color-icons));
     @include active(border, 2px solid var(--color-primary));
+
+    &--active {
+      outline: 2px solid var(--color-secondary);
+      cursor: auto;
+    }
   }
 
   &__available-capacity {
diff --git a/src/components/ProductDetails/ProductDetails.tsx b/src/components/ProductDetails/ProductDetails.tsx
index 434fd10..579fe6a 100644
--- a/src/components/ProductDetails/ProductDetails.tsx
+++ b/src/components/ProductDetails/ProductDetails.tsx
@@ -61,7 +61,7 @@ export const ProductDetails: React.FC<Props> = ({
                 key={color}
                 style={{ backgroundColor: colorHexMap[color] }}
                 className={cn('short-params__available-color', {
-                  'short-params__available-color--active': false,
+                  'short-params__available-color--active': color === productDetailed.color,
                 })}
                 onClick={() => updateColor(color)}
               ></p>

From 0d1756117be2892118995f3622df3fe34a3278e9 Mon Sep 17 00:00:00 2001
From: Anton Yupko <antonyupkodm@gmail.com>
Date: Fri, 14 Jun 2024 14:47:58 +0300
Subject: [PATCH 2/2] final version

---
 src/components/ProductDetails/ProductDetails.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/ProductDetails/ProductDetails.scss b/src/components/ProductDetails/ProductDetails.scss
index 8203bfb..f02ad28 100644
--- a/src/components/ProductDetails/ProductDetails.scss
+++ b/src/components/ProductDetails/ProductDetails.scss
@@ -138,6 +138,7 @@
     &--active {
       outline: 2px solid var(--color-secondary);
       cursor: auto;
+      pointer-events: none;
     }
   }
 
@@ -157,6 +158,8 @@
       color: var(--color-white);
       border: 1px solid var(--color-primary);
       background-color: var(--color-primary);
+      pointer-events: none;
+      cursor: auto;
     }
   }