images are fixed

mate-academy · Jun 16, 2023 · 39e6feb · 39e6feb
1 parent d3df461
commit 39e6feb
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/src/components/Cart/Cart.tsx b/src/components/Cart/Cart.tsx
@@ -11,7 +11,7 @@ export const Cart: React.FC = () => {
   const [totalItems, setTotalItems] = useState(0);
   const [cartPhones, setCartPhones] = useState<Product []>([]);
   const [checkout, setCheckout] = useState(false);
-  let timeoutId: any = null;
+  let timeoutId: NodeJS.Timeout | null = null;
 
   useEffect(() => {
     const retrievedData = localStorage.getItem('cart');

diff --git a/src/components/ProductDetailsPage/ProductDetailsPage.scss b/src/components/ProductDetailsPage/ProductDetailsPage.scss
@@ -41,9 +41,14 @@
     justify-content: center;
   }
 
+  &__main-image-link {
+    height: 100%;
+  }
+
   &__main-img {
-    max-height: 100%;
-    max-width: 100%;
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
   }
 }
 
@@ -69,14 +74,19 @@
     display: flex;
     justify-content: center;
     align-items: center;
+
+    &:hover {
+      cursor: pointer;
+    }
+
   }
 
   &__small-image-link {
     height: 100%;
   }
 
   &__small-img {
-    width: 66px;
+    width: 100%;
     height: 66px;
     object-fit: cover;
   }

diff --git a/src/components/ProductInfoDetails/ProductInfoDetails.tsx b/src/components/ProductInfoDetails/ProductInfoDetails.tsx
@@ -121,14 +121,18 @@ export const ProductInfoDetails: React.FC<Props> = ({
         "
       >
         {productInfo.images.map(item => (
-          <div key={item} className="product-details__image">
+          // eslint-disable-next-line
+          <div
+            key={item}
+            className="product-details__image"
+            onClick={(event) => handleChangeMainImage(
+              event,
+              API_PRODUCT_URL + item,
+            )}
+          >
             <button
-              type="button"
               className="product-details__image-link"
-              onClick={(event) => handleChangeMainImage(
-                event,
-                API_PRODUCT_URL + item,
-              )}
+              type="button"
             >
               <img
                 src={API_PRODUCT_URL + item}
@@ -166,7 +170,7 @@ export const ProductInfoDetails: React.FC<Props> = ({
                 'active-color': selectedColor === color,
               })}
               style={{
-                backgroundColor: color,
+                backgroundColor: color === 'midnightgreen' ? '#004953' : color,
               }}
               onClick={() => setSelectedColor(color)}
             />

diff --git a/src/helpers/useDebounce.tsx b/src/helpers/useDebounce.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-export function useDebounce(value: any, delay: number) {
+export function useDebounce<T>(value: T, delay: number): T {
   const [debouncedValue, setDebouncedValue] = useState(value);
 
   useEffect(