From 7b6db0a6f0667bcb3721f0e945f42c3a18713e37 Mon Sep 17 00:00:00 2001
From: Catalin Pinte <1243434+cond0r@users.noreply.github.com>
Date: Tue, 8 Nov 2022 09:37:04 +0200
Subject: [PATCH] Use next/image & fixes

---
 site/components/cart/CartItem/CartItem.tsx    |  4 +-
 .../common/I18nWidget/I18nWidget.tsx          |  2 +-
 .../ProductCard/ProductCard.module.css        | 11 +---
 .../product/ProductCard/ProductCard.tsx       | 63 ++++++++-----------
 .../ProductSidebar/ProductSidebar.module.css  |  2 +-
 .../ProductSlider/ProductSlider.module.css    |  9 ++-
 .../ProductView/ProductView.module.css        |  8 +--
 .../product/ProductView/ProductView.tsx       |  3 +-
 site/components/search.tsx                    | 11 +++-
 site/pages/index.tsx                          |  2 +
 10 files changed, 54 insertions(+), 61 deletions(-)

diff --git a/site/components/cart/CartItem/CartItem.tsx b/site/components/cart/CartItem/CartItem.tsx
index c2fc92ff9..c85d04bf7 100644
--- a/site/components/cart/CartItem/CartItem.tsx
+++ b/site/components/cart/CartItem/CartItem.tsx
@@ -1,6 +1,6 @@
-import { ChangeEvent, FocusEventHandler, useEffect, useState } from 'react'
+import { ChangeEvent, useEffect, useState } from 'react'
 import cn from 'clsx'
-import Image from 'next/legacy/image'
+import Image from 'next/image'
 import Link from 'next/link'
 import s from './CartItem.module.css'
 import { useUI } from '@components/ui/context'
diff --git a/site/components/common/I18nWidget/I18nWidget.tsx b/site/components/common/I18nWidget/I18nWidget.tsx
index 1cd9a13e1..11d0c8f1a 100644
--- a/site/components/common/I18nWidget/I18nWidget.tsx
+++ b/site/components/common/I18nWidget/I18nWidget.tsx
@@ -5,7 +5,7 @@ import { useRouter } from 'next/router'
 import s from './I18nWidget.module.css'
 import { Cross, ChevronUp } from '@components/icons'
 import ClickOutside from '@lib/click-outside'
-import Image from 'next/legacy/image'
+import Image from 'next/image'
 interface LOCALE_DATA {
   name: string
   img: {
diff --git a/site/components/product/ProductCard/ProductCard.module.css b/site/components/product/ProductCard/ProductCard.module.css
index d5d441fea..fe92766ce 100644
--- a/site/components/product/ProductCard/ProductCard.module.css
+++ b/site/components/product/ProductCard/ProductCard.module.css
@@ -7,7 +7,7 @@
 
 .root:hover {
   & .productImage {
-    transform: scale(1.2625);
+    transform: scale(1.1);
   }
 
   & .header .name span,
@@ -69,16 +69,11 @@
 }
 
 .imageContainer {
-  @apply flex items-center justify-center overflow-hidden;
-}
-
-.imageContainer > div {
-  min-width: 100%;
+  @apply flex items-center justify-center overflow-hidden w-full h-full;
 }
 
 .imageContainer .productImage {
-  @apply transform transition-transform duration-500
-  object-cover scale-120;
+  @apply transform transition-transform duration-500 object-cover w-auto h-full;
 }
 
 .root .wishlistButton {
diff --git a/site/components/product/ProductCard/ProductCard.tsx b/site/components/product/ProductCard/ProductCard.tsx
index dcaff07ef..6902a6ee8 100644
--- a/site/components/product/ProductCard/ProductCard.tsx
+++ b/site/components/product/ProductCard/ProductCard.tsx
@@ -3,7 +3,7 @@ import cn from 'clsx'
 import Link from 'next/link'
 import type { Product } from '@commerce/types/product'
 import s from './ProductCard.module.css'
-import Image, { ImageProps } from 'next/legacy/image'
+import Image, { ImageProps } from 'next/image'
 import WishlistButton from '@components/wishlist/WishlistButton'
 import usePrice from '@framework/product/use-price'
 import ProductTag from '../ProductTag'
@@ -49,17 +49,14 @@ const ProductCard: FC<Props> = ({
             <span>{product.name}</span>
           </div>
           {product?.images && (
-            <div>
-              <Image
-                quality="85"
-                src={product.images[0]?.url || placeholderImg}
-                alt={product.name || 'Product Image'}
-                height={320}
-                width={320}
-                layout="fixed"
-                {...imgProps}
-              />
-            </div>
+            <Image
+              quality="85"
+              src={product.images[0]?.url || placeholderImg}
+              alt={product.name || 'Product Image'}
+              height={320}
+              width={320}
+              {...imgProps}
+            />
           )}
         </>
       )}
@@ -85,18 +82,15 @@ const ProductCard: FC<Props> = ({
           )}
           <div className={s.imageContainer}>
             {product?.images && (
-              <div>
-                <Image
-                  alt={product.name || 'Product Image'}
-                  className={s.productImage}
-                  src={product.images[0]?.url || placeholderImg}
-                  height={540}
-                  width={540}
-                  quality="85"
-                  layout="responsive"
-                  {...imgProps}
-                />
-              </div>
+              <Image
+                alt={product.name || 'Product Image'}
+                className={s.productImage}
+                src={product.images[0]?.url || placeholderImg}
+                height={540}
+                width={540}
+                quality="85"
+                {...imgProps}
+              />
             )}
           </div>
         </>
@@ -117,18 +111,15 @@ const ProductCard: FC<Props> = ({
           />
           <div className={s.imageContainer}>
             {product?.images && (
-              <div>
-                <Image
-                  alt={product.name || 'Product Image'}
-                  className={s.productImage}
-                  src={product.images[0]?.url || placeholderImg}
-                  height={540}
-                  width={540}
-                  quality="85"
-                  layout="responsive"
-                  {...imgProps}
-                />
-              </div>
+              <Image
+                alt={product.name || 'Product Image'}
+                className={s.productImage}
+                src={product.images[0]?.url || placeholderImg}
+                height={540}
+                width={540}
+                quality="85"
+                {...imgProps}
+              />
             )}
           </div>
         </>
diff --git a/site/components/product/ProductSidebar/ProductSidebar.module.css b/site/components/product/ProductSidebar/ProductSidebar.module.css
index b6ecc2b77..fb1bcfd45 100644
--- a/site/components/product/ProductSidebar/ProductSidebar.module.css
+++ b/site/components/product/ProductSidebar/ProductSidebar.module.css
@@ -50,7 +50,7 @@
 }
 
 .sliderContainer .img {
-  @apply w-full h-auto max-h-full object-cover;
+  @apply w-auto h-full max-h-full object-cover;
 }
 
 .button {
diff --git a/site/components/product/ProductSlider/ProductSlider.module.css b/site/components/product/ProductSlider/ProductSlider.module.css
index b95bffdd0..543fe5d30 100644
--- a/site/components/product/ProductSlider/ProductSlider.module.css
+++ b/site/components/product/ProductSlider/ProductSlider.module.css
@@ -19,11 +19,11 @@
 }
 
 .thumb.selected {
-  @apply bg-white;
+  @apply bg-white/30;
 }
 
 .thumb img {
-  height: 85% !important;
+  @apply h-full w-full object-cover transition duration-500;
 }
 
 .album {
@@ -44,10 +44,9 @@
 }
 
 @screen md {
-  .thumb:hover {
-    transform: scale(1.02);
+  .thumb:hover img {
+    @apply scale-110;
   }
-
   .album {
     height: 182px;
   }
diff --git a/site/components/product/ProductView/ProductView.module.css b/site/components/product/ProductView/ProductView.module.css
index e68c76f21..91e8bf4ed 100644
--- a/site/components/product/ProductView/ProductView.module.css
+++ b/site/components/product/ProductView/ProductView.module.css
@@ -17,15 +17,11 @@
 }
 
 .imageContainer {
-  @apply text-center h-full relative;
-}
-
-.imageContainer > span {
-  height: 100% !important;
+  @apply flex items-center justify-center w-full h-full relative;
 }
 
 .sliderContainer .img {
-  @apply w-full h-full max-h-full object-cover;
+  @apply object-cover h-full;
 }
 
 .button {
diff --git a/site/components/product/ProductView/ProductView.tsx b/site/components/product/ProductView/ProductView.tsx
index 5905aac6a..0c81072ea 100644
--- a/site/components/product/ProductView/ProductView.tsx
+++ b/site/components/product/ProductView/ProductView.tsx
@@ -1,5 +1,5 @@
 import cn from 'clsx'
-import Image from 'next/legacy/image'
+import Image from 'next/image'
 import s from './ProductView.module.css'
 import { FC } from 'react'
 import type { Product } from '@commerce/types/product'
@@ -80,6 +80,7 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
                   variant="simple"
                   className="animated fadeIn"
                   imgProps={{
+                    alt: p.name,
                     width: 300,
                     height: 300,
                   }}
diff --git a/site/components/search.tsx b/site/components/search.tsx
index 92146628c..d960bb5e0 100644
--- a/site/components/search.tsx
+++ b/site/components/search.tsx
@@ -125,6 +125,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
                     >
                       <Link
                         href={{ pathname: getCategoryPath('', brand), query }}
+                        legacyBehavior
                       >
                         <a
                           onClick={(e) => handleClick(e, 'categories')}
@@ -151,6 +152,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
                             pathname: getCategoryPath(cat.path, brand),
                             query,
                           }}
+                          legacyBehavior
                         >
                           <a
                             onClick={(e) => handleClick(e, 'categories')}
@@ -226,6 +228,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
                           pathname: getDesignerPath('', category),
                           query,
                         }}
+                        legacyBehavior
                       >
                         <a
                           onClick={(e) => handleClick(e, 'brands')}
@@ -252,6 +255,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
                             pathname: getDesignerPath(path, category),
                             query,
                           }}
+                          legacyBehavior
                         >
                           <a
                             onClick={(e) => handleClick(e, 'brands')}
@@ -326,6 +330,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
                   imgProps={{
                     width: 480,
                     height: 480,
+                    alt: product.name,
                   }}
                 />
               ))}
@@ -390,7 +395,10 @@ export default function Search({ categories, brands }: SearchPropsType) {
                         }
                       )}
                     >
-                      <Link href={{ pathname, query: filterQuery({ q }) }}>
+                      <Link
+                        href={{ pathname, query: filterQuery({ q }) }}
+                        legacyBehavior
+                      >
                         <a
                           onClick={(e) => handleClick(e, 'sort')}
                           className={
@@ -416,6 +424,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
                             pathname,
                             query: filterQuery({ q, sort: key }),
                           }}
+                          legacyBehavior
                         >
                           <a
                             onClick={(e) => handleClick(e, 'sort')}
diff --git a/site/pages/index.tsx b/site/pages/index.tsx
index 8db7fe589..64b8f4d09 100644
--- a/site/pages/index.tsx
+++ b/site/pages/index.tsx
@@ -46,6 +46,7 @@ export default function Home({
             key={product.id}
             product={product}
             imgProps={{
+              alt: product.name,
               width: i === 0 ? 1080 : 540,
               height: i === 0 ? 1080 : 540,
               priority: true,
@@ -68,6 +69,7 @@ export default function Home({
             key={product.id}
             product={product}
             imgProps={{
+              alt: product.name,
               width: i === 0 ? 1080 : 540,
               height: i === 0 ? 1080 : 540,
             }}