Product page UI refresh (#1070)

app/product/[handle]/page.tsx

@@ -2,16 +2,14 @@ import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { Suspense } from 'react';
 
-import Grid from 'components/grid';
+import { GridTileImage } from 'components/grid/tile';
 import Footer from 'components/layout/footer';
-import ProductGridItems from 'components/layout/product-grid-items';
-import { AddToCart } from 'components/cart/add-to-cart';
 import { Gallery } from 'components/product/gallery';
-import { VariantSelector } from 'components/product/variant-selector';
+import { ProductDescription } from 'components/product/product-description';
-import Prose from 'components/prose';
 import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
 import { getProduct, getProductRecommendations } from 'lib/shopify';
 import { Image } from 'lib/shopify/types';
+import Link from 'next/link';
 
 export const runtime = 'edge';
 
@@ -76,34 +74,27 @@ export default async function ProductPage({ params }: { params: { handle: string
   };
 
   return (
-    <div>
+    <>
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{
           __html: JSON.stringify(productJsonLd)
         }}
       />
-      <div className="lg:grid lg:grid-cols-6">
+      <div className="px-4">
-        <div className="lg:col-span-4">
+        <div className="rounded-lg border border-gray-200 bg-white p-8 px-4 dark:border-gray-700 dark:bg-black md:p-12 lg:grid lg:grid-cols-6">
-          <Gallery
+          <div className="lg:col-span-4">
-            title={product.title}
+            <Gallery
-            amount={product.priceRange.maxVariantPrice.amount}
+              images={product.images.map((image: Image) => ({
-            currencyCode={product.priceRange.maxVariantPrice.currencyCode}
+                src: image.url,
-            images={product.images.map((image: Image) => ({
+                altText: image.altText
-              src: image.url,
+              }))}
-              altText: image.altText
+            />
-            }))}
+          </div>
-          />
-        </div>
 
-        <div className="p-6 lg:col-span-2">
+          <div className="py-6 pr-8 md:pr-12 lg:col-span-2">
-          <VariantSelector options={product.options} variants={product.variants} />
+            <ProductDescription product={product} />
-
+          </div>
-          {product.descriptionHtml ? (
-            <Prose className="mb-6 text-sm leading-tight" html={product.descriptionHtml} />
-          ) : null}
-
-          <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
         </div>
       </div>
       <Suspense>
@@ -112,7 +103,7 @@ export default async function ProductPage({ params }: { params: { handle: string
           <Footer />
         </Suspense>
       </Suspense>
-    </div>
+    </>
   );
 }
 
@@ -124,9 +115,30 @@ async function RelatedProducts({ id }: { id: string }) {
   return (
     <div className="px-4 py-8">
       <div className="mb-4 text-3xl font-bold">Related Products</div>
-      <Grid className="grid-cols-2 lg:grid-cols-5">
+      <div className="flex flex-row space-x-4 overflow-auto">
-        <ProductGridItems products={relatedProducts} />
+        {relatedProducts.map((product, i) => {
-      </Grid>
+          return (
+            <Link
+              key={i}
+              className="h-full w-1/2 flex-none lg:w-1/5"
+              href={`/product/${product.handle}`}
+            >
+              <GridTileImage
+                alt={product.title}
+                labels={{
+                  isSmall: true,
+                  title: product.title,
+                  amount: product.priceRange.maxVariantPrice.amount,
+                  currencyCode: product.priceRange.maxVariantPrice.currencyCode
+                }}
+                src={product.featuredImage?.url}
+                width={600}
+                height={600}
+              />
+            </Link>
+          );
+        })}
+      </div>
     </div>
   );
 }

components/cart/add-to-cart.tsx

@@ -1,12 +1,12 @@
 'use client';
 
+import { PlusIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { addItem } from 'components/cart/actions';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, useState, useTransition } from 'react';
-
 import LoadingDots from 'components/loading-dots';
 import { ProductVariant } from 'lib/shopify/types';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useState, useTransition } from 'react';
 
 export function AddToCart({
   variants,
@@ -50,15 +50,17 @@ export function AddToCart({
         });
       }}
       className={clsx(
-        'flex w-full items-center justify-center bg-black p-4 text-sm uppercase tracking-wide text-white opacity-90 hover:opacity-100 dark:bg-white dark:text-black',
+        'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
         {
           'cursor-not-allowed opacity-60': !availableForSale,
           'cursor-not-allowed': isPending
         }
       )}
     >
+      <div className="absolute left-0 ml-4">
+        {!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
+      </div>
       <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
-      {isPending ? <LoadingDots className="bg-white dark:bg-black" /> : null}
     </button>
   );
 }

components/grid/tile.tsx

@@ -22,15 +22,15 @@ export function GridTileImage({
   return (
     <div
       className={clsx(
-        'relative flex h-full w-full items-center justify-center overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black',
+        'relative flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white dark:bg-black',
+        active !== undefined && active
+          ? 'border-2 border-blue-600'
+          : 'border-gray-200 dark:border-gray-800',
         {
           relative: labels
         }
       )}
     >
-      {active !== undefined && active ? (
-        <span className="absolute h-full w-full bg-white opacity-25"></span>
-      ) : null}
       {props.src ? (
         <Image
           className={clsx('relative h-full w-full object-contain', {
@@ -45,7 +45,7 @@ export function GridTileImage({
           title={labels.title}
           amount={labels.amount}
           currencyCode={labels.currencyCode}
-          size="large"
+          size={labels.isSmall ? 'small' : 'large'}
           position={labelPosition}
         />
       ) : null}

components/label.tsx

@@ -17,23 +17,32 @@ const Label = ({
   return (
     <div
       className={clsx(
-        'absolute bottom-0 left-0 flex items-center rounded-full border bg-white/80 p-1 text-black backdrop-blur-md dark:border-gray-800 dark:bg-black/80 dark:text-white',
+        'absolute bottom-0 left-0 flex w-full',
-        size === 'large' ? 'text-sm' : 'text-xs',
         position === 'center'
-          ? 'mb-4 ml-4 md:mb-8 md:ml-8 lg:mb-[35%] lg:ml-20'
+          ? 'px-4 pb-4 md:px-8 md:pb-8 lg:px-20 lg:pb-[35%]'
           : size === 'large'
-          ? 'mb-4 ml-4 md:mb-8 md:ml-8'
+          ? 'px-4 pb-4 md:px-8 md:pb-8'
-          : 'mb-4 ml-4'
+          : 'px-4 pb-4'
       )}
     >
-      <h3 data-testid="product-name" className="mr-6 inline pl-2 font-semibold">
+      <div
-        {title}
+        className={clsx(
-      </h3>
+          'flex items-center rounded-full border bg-white/80 p-1 text-black backdrop-blur-md dark:border-gray-800 dark:bg-black/80 dark:text-white',
-      <Price
+          size === 'large' ? 'text-sm' : 'text-xs'
-        className="flex-none rounded-full bg-blue-600 p-2 font-semibold text-white"
+        )}
-        amount={amount}
+      >
-        currencyCode={currencyCode}
+        <h3
-      />
+          data-testid="product-name"
+          className="mr-6 inline pl-2 font-semibold leading-none tracking-tight"
+        >
+          {title}
+        </h3>
+        <Price
+          className="flex-none rounded-full bg-blue-600 p-2 font-semibold text-white"
+          amount={amount}
+          currencyCode={currencyCode}
+        />
+      </div>
     </div>
   );
 };

components/product/gallery.tsx

@@ -1,22 +1,12 @@
 'use client';
 
-import { useState } from 'react';
+import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
-
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { GridTileImage } from 'components/grid/tile';
+import Image from 'next/image';
+import { useState } from 'react';
 
-export function Gallery({
+export function Gallery({ images }: { images: { src: string; altText: string }[] }) {
-  title,
-  amount,
-  currencyCode,
-  images
-}: {
-  title: string;
-  amount: string;
-  currencyCode: string;
-  images: { src: string; altText: string }[];
-}) {
   const [currentImage, setCurrentImage] = useState(0);
 
   function handleNavigate(direction: 'next' | 'previous') {
@@ -28,56 +18,53 @@ export function Gallery({
   }
 
   const buttonClassName =
-    'px-9 cursor-pointer ease-in-and-out duration-200 transition-bg bg-[#7928ca] hover:bg-violetDark';
+    'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white';
 
   return (
-    <div className="h-full">
+    <div className="mr-8 h-full">
-      <div className="relative h-full max-h-[600px] overflow-hidden">
+      <div className="relative mb-12 h-full max-h-[550px] overflow-hidden">
         {images[currentImage] && (
-          <GridTileImage
+          <Image
-            src={images[currentImage]?.src as string}
+            className="relative h-full w-full object-contain"
-            alt={images[currentImage]?.altText as string}
-            width={600}
             height={600}
-            isInteractive={false}
+            width={600}
-            priority={true}
+            alt={images[currentImage]?.altText as string}
-            labels={{
+            src={images[currentImage]?.src as string}
-              title,
-              amount,
-              currencyCode
-            }}
           />
         )}
 
         {images.length > 1 ? (
-          <div className="absolute bottom-10 right-10 flex h-12 flex-row border border-white text-white shadow-xl dark:border-black dark:text-black">
+          <div className="absolute bottom-[15%] flex w-full justify-center">
-            <button
+            <div className="mx-auto flex h-11 items-center rounded-full border border-white bg-light/80 text-gray-500 backdrop-blur dark:border-black dark:bg-dark/80">
-              aria-label="Previous product image"
+              <button
-              className={clsx(buttonClassName, 'border-r border-white dark:border-black')}
+                aria-label="Previous product image"
-              onClick={() => handleNavigate('previous')}
+                onClick={() => handleNavigate('previous')}
-            >
+                className={buttonClassName}
-              <ChevronLeftIcon className="h-6" />
+              >
-            </button>
+                <ArrowLeftIcon className="h-5" />
-            <button
+              </button>
-              aria-label="Next product image"
+              <div className="mx-1 h-6 w-px bg-gray-500"></div>
-              className={clsx(buttonClassName)}
+              <button
-              onClick={() => handleNavigate('next')}
+                aria-label="Next product image"
-            >
+                onClick={() => handleNavigate('next')}
-              <ChevronRightIcon className="h-6" />
+                className={buttonClassName}
-            </button>
+              >
+                <ArrowRightIcon className="h-5" />
+              </button>
+            </div>
           </div>
         ) : null}
       </div>
 
       {images.length > 1 ? (
-        <div className="flex">
+        <div className="flex items-center justify-center space-x-2 overflow-auto">
           {images.map((image, index) => {
             const isActive = index === currentImage;
             return (
               <button
                 aria-label="Enlarge product image"
                 key={image.src}
-                className="h-full w-1/4"
+                className={clsx('h-auto w-20')}
                 onClick={() => setCurrentImage(index)}
               >
                 <GridTileImage

components/product/product-description.tsx

@@ -0,0 +1,31 @@
+import { AddToCart } from 'components/cart/add-to-cart';
+import Price from 'components/price';
+import Prose from 'components/prose';
+import { Product } from 'lib/shopify/types';
+import { VariantSelector } from './variant-selector';
+
+export function ProductDescription({ product }: { product: Product }) {
+  return (
+    <>
+      <div className="mb-6 flex flex-col border-b pb-6 dark:border-gray-700">
+        <h1 className="mb-2 text-5xl font-medium">{product.title}</h1>
+        <div className="mr-auto w-auto rounded-full bg-blue-600 p-2 text-sm text-white">
+          <Price
+            amount={product.priceRange.maxVariantPrice.amount}
+            currencyCode={product.priceRange.maxVariantPrice.currencyCode}
+          />
+        </div>
+      </div>
+      <VariantSelector options={product.options} variants={product.variants} />
+
+      {product.descriptionHtml ? (
+        <Prose
+          className="mb-6 text-sm leading-tight dark:text-white/[60%]"
+          html={product.descriptionHtml}
+        />
+      ) : null}
+
+      <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
+    </>
+  );
+}

components/product/variant-selector.tsx

@@ -114,10 +114,10 @@ export function VariantSelector({
               href={optionUrl}
               title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
               className={clsx(
-                'flex h-12 min-w-[48px] items-center justify-center rounded-full px-2 text-sm',
+                'flex min-w-[48px] items-center justify-center rounded-full border bg-gray-100 px-2 py-1 text-sm dark:border-gray-900 dark:bg-gray-900',
                 {
-                  'cursor-default ring-2 ring-black dark:ring-white': isActive,
+                  'cursor-default ring-2 ring-blue-600': isActive,
-                  'ring-1 ring-gray-300 transition duration-300 ease-in-out hover:scale-110 hover:bg-gray-100 hover:ring-black dark:ring-gray-700 dark:hover:bg-transparent dark:hover:ring-white':
+                  'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-blue-600 ':
                     !isActive && isAvailableForSale,
                   'relative z-10 cursor-not-allowed overflow-hidden bg-gray-100 ring-1 ring-gray-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-gray-300 before:transition-transform dark:bg-gray-900 dark:ring-gray-700 before:dark:bg-gray-700':
                     !isAvailableForSale