Merge pull request #47 from fs-mar24-codemafia/fix/emphasize-selected…

…-color add emphasizing selected color
fs-mar24-codemafia · Jun 14, 2024 · e3d5943 · e3d5943
2 parents f3a932d + 0d17561
commit e3d5943
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/components/ProductDetails/ProductDetails.scss b/src/components/ProductDetails/ProductDetails.scss
@@ -134,6 +134,12 @@
 
     @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;
+      pointer-events: none;
+    }
   }
 
   &__available-capacity {
@@ -152,6 +158,8 @@
       color: var(--color-white);
       border: 1px solid var(--color-primary);
       background-color: var(--color-primary);
+      pointer-events: none;
+      cursor: auto;
     }
   }
 

diff --git 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>