From fee79b47cfc43a36a0b3d4454678699efe3654dd Mon Sep 17 00:00:00 2001
From: Bel Curcio <curciobel@gmail.com>
Date: Sun, 6 Jun 2021 20:46:37 -0300
Subject: [PATCH] General UI Improvements

---
 .../SidebarLayout/SidebarLayout.module.css    |  10 +-
 .../common/SidebarLayout/SidebarLayout.tsx    |  14 +-
 .../ProductCard/ProductCard.module.css        | 173 +++++++--------
 .../product/ProductCard/ProductCard.tsx       | 202 +++++++++---------
 .../ProductView/ProductView.module.css        |  33 +--
 .../product/ProductView/ProductView.tsx       |   6 +-
 components/ui/Modal/Modal.module.css          |   4 +
 components/ui/Modal/Modal.tsx                 |   2 +-
 8 files changed, 228 insertions(+), 216 deletions(-)

diff --git a/components/common/SidebarLayout/SidebarLayout.module.css b/components/common/SidebarLayout/SidebarLayout.module.css
index 58fdf6c24..235d6a6b2 100644
--- a/components/common/SidebarLayout/SidebarLayout.module.css
+++ b/components/common/SidebarLayout/SidebarLayout.module.css
@@ -1,8 +1,16 @@
 .root {
   @apply relative h-full flex flex-col w-full;
+  min-height: 100vh;
 }
 
 .header {
-  @apply pl-4 pr-6 pt-4 pb-4 lg:pt-5 flex items-center justify-between space-x-3;
+  @apply sticky top-0 pl-4 pr-6 pt-4 pb-4 lg:pt-5
+  flex items-center justify-between space-x-3
+  bg-accent-0 border-b border-accent-2 z-50;
   margin-top: 1px;
 }
+
+.container,
+.container > *:first-child {
+  min-height: calc(100vh - 70px);
+}
diff --git a/components/common/SidebarLayout/SidebarLayout.tsx b/components/common/SidebarLayout/SidebarLayout.tsx
index 6b95481b7..c643f53a6 100644
--- a/components/common/SidebarLayout/SidebarLayout.tsx
+++ b/components/common/SidebarLayout/SidebarLayout.tsx
@@ -24,10 +24,8 @@ const SidebarLayout: FC<ComponentProps> = ({
             aria-label="Close"
             className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none"
           >
-            <Cross className="h-6 w-6" />
-            <span className="ml-2 text-accent-7 text-sm hover:text-gray-500">
-              Close
-            </span>
+            <Cross className="h-6 w-6 hover:text-accent-3" />
+            <span className="ml-2 text-accent-7 text-sm ">Close</span>
           </button>
         )}
 
@@ -37,15 +35,13 @@ const SidebarLayout: FC<ComponentProps> = ({
             aria-label="Go back"
             className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none"
           >
-            <ChevronLeft className="h-6 w-6" />
-            <span className="ml-2 text-accent-7 text-xs hover:text-gray-500">
-              Back
-            </span>
+            <ChevronLeft className="h-6 w-6 hover:text-accent-3" />
+            <span className="ml-2 text-accent-7 text-xs ">Back</span>
           </button>
         )}
         <UserNav />
       </header>
-      {children}
+      <div className={s.container}>{children}</div>
     </div>
   )
 }
diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index dbf81cc17..b18182916 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -3,108 +3,109 @@
   bg-no-repeat bg-center bg-cover transition-transform
   ease-linear cursor-pointer inline-block bg-accent-1;
   height: 100% !important;
+}
 
-  &:hover {
-    & .productImage {
-      transform: scale(1.2625);
-    }
-
-    & .productTitle > span,
-    & .productPrice,
-    & .wishlistButton {
-      @apply bg-secondary text-secondary;
-    }
-
-    &:nth-child(6n + 1) .productTitle > span,
-    &:nth-child(6n + 1) .productPrice,
-    &:nth-child(6n + 1) .wishlistButton {
-      @apply bg-violet text-white;
-    }
-
-    &:nth-child(6n + 5) .productTitle > span,
-    &:nth-child(6n + 5) .productPrice,
-    &:nth-child(6n + 5) .wishlistButton {
-      @apply bg-blue text-white;
-    }
-
-    &:nth-child(6n + 3) .productTitle > span,
-    &:nth-child(6n + 3) .productPrice,
-    &:nth-child(6n + 3) .wishlistButton {
-      @apply bg-pink text-white;
-    }
-
-    &:nth-child(6n + 6) .productTitle > span,
-    &:nth-child(6n + 6) .productPrice,
-    &:nth-child(6n + 6) .wishlistButton {
-      @apply bg-cyan text-white;
-    }
+.root:hover {
+  & .productImage {
+    transform: scale(1.2625);
   }
+
+  & .header .name span,
+  & .header .price,
+  & .wishlistButton {
+    @apply bg-secondary text-secondary;
+  }
+
+  &:nth-child(6n + 1) .header .name span,
+  &:nth-child(6n + 1) .header .price,
+  &:nth-child(6n + 1) .wishlistButton {
+    @apply bg-violet text-white;
+  }
+
+  &:nth-child(6n + 5) .header .name span,
+  &:nth-child(6n + 5) .header .price,
+  &:nth-child(6n + 5) .wishlistButton {
+    @apply bg-blue text-white;
+  }
+
+  &:nth-child(6n + 3) .header .name span,
+  &:nth-child(6n + 3) .header .price,
+  &:nth-child(6n + 3) .wishlistButton {
+    @apply bg-pink text-white;
+  }
+
+  &:nth-child(6n + 6) .header .name span,
+  &:nth-child(6n + 6) .header .price,
+  &:nth-child(6n + 6) .wishlistButton {
+    @apply bg-cyan text-white;
+  }
+}
+
+.header {
+  @apply transition-colors ease-in-out duration-500
+  absolute top-0 left-0 z-20 pr-16;
+}
+
+.header .name {
+  @apply pt-0 max-w-full w-full leading-extra-loose;
+  font-size: 2rem;
+  letter-spacing: 0.4px;
+}
+
+.header .name span {
+  @apply py-4 px-6 bg-primary text-primary font-bold;
+  font-size: inherit;
+  letter-spacing: inherit;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+.header .price {
+  @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9
+  font-semibold inline-block tracking-wide;
+}
+
+.imageContainer {
+  @apply flex items-center justify-center overflow-hidden;
+}
+
+.imageContainer > div {
+  min-width: 100%;
+}
+
+.imageContainer .productImage {
+  @apply transform transition-transform duration-500
+  object-cover scale-120;
 }
 
 .root .wishlistButton {
   @apply top-0 right-0 z-30 absolute;
 }
 
-.productTitle > span,
-.productPrice {
-  @apply transition-colors ease-in-out duration-500;
+/* Variant Simple */
+.simple .header .name {
+  @apply pt-2 text-lg leading-10 -mt-1;
 }
 
-.simple {
-  & .productTitle {
-    @apply pt-2;
-    font-size: 1rem;
-
-    & span {
-      @apply leading-extra-loose;
-    }
-  }
-
-  & .productPrice {
-    @apply text-sm;
-  }
-}
-
-.productTitle {
-  @apply pt-0 max-w-full w-full leading-extra-loose;
-  font-size: 2rem;
-  letter-spacing: 0.4px;
-
-  & span {
-    @apply py-4 px-6 bg-primary text-primary font-bold;
-    font-size: inherit;
-    letter-spacing: inherit;
-    box-decoration-break: clone;
-    -webkit-box-decoration-break: clone;
-  }
-}
-
-.productPrice {
-  @apply py-4 px-6 bg-primary text-primary font-semibold inline-block text-sm leading-6;
-  letter-spacing: 0.4px;
-}
-
-.imageContainer {
-  @apply flex items-center justify-center;
-  overflow: hidden;
-
-  & > div {
-    min-width: 100%;
-  }
-}
-
-.productImage {
-  @apply transform transition-transform duration-500 object-cover scale-120;
+.simple .header .price {
+  @apply text-sm;
 }
 
+/* Variant Slim */
 .slim {
-  @apply bg-transparent relative overflow-hidden box-border;
+  @apply bg-transparent relative overflow-hidden
+  box-border;
 }
 
-.slim .tag {
-  @apply bg-accent-9 text-accent-0 inline-block p-3 font-bold text-xl break-words;
+.slim .header {
+  @apply absolute inset-0 flex items-center justify-end mr-8 z-20;
 }
 
-.root:global(.secondary) .tag {
+.slim span {
+  @apply bg-accent-9 text-accent-0 inline-block p-3
+  font-bold text-xl break-words;
+}
+
+.root:global(.secondary) .header span {
   @apply bg-accent-0 text-accent-9;
 }
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 14d2e0030..bca7861c9 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -5,132 +5,132 @@ import type { Product } from '@commerce/types/product'
 import s from './ProductCard.module.css'
 import Image, { ImageProps } from 'next/image'
 import WishlistButton from '@components/wishlist/WishlistButton'
+import usePrice from '@framework/product/use-price'
 
 interface Props {
   className?: string
   product: Product
-  variant?: 'default' | 'slim' | 'simple'
-  imgProps?: Omit<ImageProps, 'src'>
   noNameTag?: boolean
+  imgProps?: Omit<ImageProps, 'src'>
+  variant?: 'default' | 'slim' | 'simple'
 }
 
 const placeholderImg = '/product-img-placeholder.svg'
 
 const ProductCard: FC<Props> = ({
-  className,
   product,
   imgProps,
-  variant = 'default',
+  className,
   noNameTag = false,
+  variant = 'default',
   ...props
-}) => (
-  <Link href={`/product/${product.slug}`} {...props}>
-    <a
-      className={cn(
-        s.root,
-        { [s.slim]: variant === 'slim', [s.simple]: variant === 'simple' },
-        className
-      )}
-    >
-      {variant === 'slim' && (
-        <>
-          <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
-            <span className={s.tag}>{product.name}</span>
-          </div>
-          {product?.images && (
-            <Image
-              quality="85"
-              src={product.images[0].url || placeholderImg}
-              alt={product.name || 'Product Image'}
-              height={320}
-              width={320}
-              layout="fixed"
-              {...imgProps}
-            />
-          )}
-        </>
-      )}
+}) => {
+  const { price } = usePrice({
+    amount: product.price.value,
+    baseAmount: product.price.retailPrice,
+    currencyCode: product.price.currencyCode!,
+  })
 
-      {variant === 'simple' && (
-        <>
-          {process.env.COMMERCE_WISHLIST_ENABLED && (
-            <WishlistButton
-              className={s.wishlistButton}
-              productId={product.id}
-              variant={product.variants[0] as any}
-            />
-          )}
+  const rootClassName = cn(
+    s.root,
+    { [s.slim]: variant === 'slim', [s.simple]: variant === 'simple' },
+    className
+  )
 
-          <div className="flex flex-row justify-between box-border w-full z-20 absolute ">
+  return (
+    <Link href={`/product/${product.slug}`} {...props}>
+      <a className={rootClassName}>
+        {variant === 'slim' && (
+          <>
+            <div className={s.header}>
+              <span>{product.name}</span>
+            </div>
+            {product?.images && (
+              <Image
+                quality="85"
+                src={product.images[0].url || placeholderImg}
+                alt={product.name || 'Product Image'}
+                height={320}
+                width={320}
+                layout="fixed"
+                {...imgProps}
+              />
+            )}
+          </>
+        )}
+
+        {variant === 'simple' && (
+          <>
+            {process.env.COMMERCE_WISHLIST_ENABLED && (
+              <WishlistButton
+                className={s.wishlistButton}
+                productId={product.id}
+                variant={product.variants[0]}
+              />
+            )}
             {!noNameTag && (
-              <div className="absolute top-0 left-0 pr-16 max-w-full">
-                <h3 className={s.productTitle}>
+              <div className={s.header}>
+                <h3 className={s.name}>
                   <span>{product.name}</span>
                 </h3>
-                <span className={s.productPrice}>
-                  {product.price.value}
-                  &nbsp;
-                  {product.price.currencyCode}
-                </span>
+                <div className={s.price}>
+                  {`${price} ${product.price?.currencyCode}`}
+                </div>
               </div>
             )}
-          </div>
-          <div className={s.imageContainer}>
-            {product?.images && (
-              <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 className={s.imageContainer}>
+              {product?.images && (
+                <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>
+          </>
+        )}
+
+        {variant === 'default' && (
+          <>
+            {process.env.COMMERCE_WISHLIST_ENABLED && (
+              <WishlistButton
+                className={s.wishlistButton}
+                productId={product.id}
+                variant={product.variants[0] as any}
               />
             )}
-          </div>
-        </>
-      )}
-
-      {variant === 'default' && (
-        <>
-          {process.env.COMMERCE_WISHLIST_ENABLED && (
-            <WishlistButton
-              className={s.wishlistButton}
-              productId={product.id}
-              variant={product.variants[0] as any}
-            />
-          )}
-          <div className="flex flex-row justify-between box-border w-full z-20 absolute ">
-            <div className="absolute top-0 left-0 pr-16 max-w-full">
-              <h3 className={s.productTitle}>
+            <div className={s.header}>
+              <h3 className={s.name}>
                 <span>{product.name}</span>
               </h3>
-              <span className={s.productPrice}>
-                {product.price.value}
-                &nbsp;
-                {product.price.currencyCode}
-              </span>
+              <div className={s.price}>
+                {`${price} ${product.price?.currencyCode}`}
+              </div>
             </div>
-          </div>
-          <div className={s.imageContainer}>
-            {product?.images && (
-              <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>
-        </>
-      )}
-    </a>
-  </Link>
-)
+            <div className={s.imageContainer}>
+              {product?.images && (
+                <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>
+          </>
+        )}
+      </a>
+    </Link>
+  )
+}
 
 export default ProductCard
diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css
index 80c534924..be86c687f 100644
--- a/components/product/ProductView/ProductView.module.css
+++ b/components/product/ProductView/ProductView.module.css
@@ -7,18 +7,28 @@
   min-height: 500px;
 }
 
-.nameBox {
-  @apply absolute top-0 left-0 z-20 pr-16;
+.header {
+  @apply transition-colors ease-in-out duration-500
+  absolute top-0 left-0 z-20 pr-16;
 }
 
-.nameBox .name {
-  @apply px-6 py-2 bg-primary text-primary font-bold;
-  font-size: 1.8rem;
+.header .name {
+  @apply pt-0 max-w-full w-full leading-extra-loose;
+  font-size: 2rem;
   letter-spacing: 0.4px;
 }
 
-.nameBox .price {
-  @apply px-6 py-2 pb-4 bg-primary text-primary font-bold inline-block tracking-wide;
+.header .name span {
+  @apply py-4 px-6 bg-primary text-primary font-bold;
+  font-size: inherit;
+  letter-spacing: inherit;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+.header .price {
+  @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9
+  font-semibold inline-block tracking-wide;
 }
 
 .sidebar {
@@ -60,15 +70,6 @@
     @apply mx-0 col-span-8;
   }
 
-  .nameBox {
-    @apply left-0 pr-16;
-  }
-
-  .nameBox .name,
-  .nameBox .price {
-    @apply bg-accent-0 text-accent-9;
-  }
-
   .sidebar {
     @apply col-span-4 py-6;
   }
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index 81a62396f..8fb88d2a7 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -80,8 +80,10 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
       />
       <div className={cn(s.root, 'fit')}>
         <div className={cn(s.main, 'fit')}>
-          <div className={s.nameBox}>
-            <h1 className={s.name}>{product.name}</h1>
+          <div className={s.header}>
+            <h3 className={s.name}>
+              <span>{product.name}</span>
+            </h3>
             <div className={s.price}>
               {`${price} ${product.price?.currencyCode}`}
             </div>
diff --git a/components/ui/Modal/Modal.module.css b/components/ui/Modal/Modal.module.css
index 2ff999649..638917d85 100644
--- a/components/ui/Modal/Modal.module.css
+++ b/components/ui/Modal/Modal.module.css
@@ -11,3 +11,7 @@
 .modal:focus {
   @apply outline-none;
 }
+
+.close {
+  @apply hover:text-gray-500 transition ease-in-out duration-150 focus:outline-none absolute right-0 top-0 m-6;
+}
diff --git a/components/ui/Modal/Modal.tsx b/components/ui/Modal/Modal.tsx
index 523e1f4bd..e594bf180 100644
--- a/components/ui/Modal/Modal.tsx
+++ b/components/ui/Modal/Modal.tsx
@@ -39,7 +39,7 @@ const Modal: FC<ModalProps> = ({ children, onClose }) => {
         <button
           onClick={() => onClose()}
           aria-label="Close panel"
-          className="hover:text-gray-500 transition ease-in-out duration-150 focus:outline-none absolute right-0 top-0 m-6"
+          className={s.close}
         >
           <Cross className="h-6 w-6" />
         </button>