From b2a3011ef1cec412d01384271bd282dc97b25a59 Mon Sep 17 00:00:00 2001
From: StephDietz <steph.dietz@vercel.com>
Date: Tue, 11 Jul 2023 09:34:38 -0500
Subject: [PATCH] update UI for product description

---
 app/product/[handle]/page.tsx           | 17 +++++++++++++++--
 components/cart/add-to-cart.tsx         | 13 ++++++++-----
 components/product/gallery.tsx          |  4 ++--
 components/product/variant-selector.tsx |  8 ++++----
 4 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx
index 45286cdbe..bff48f417 100644
--- a/app/product/[handle]/page.tsx
+++ b/app/product/[handle]/page.tsx
@@ -2,10 +2,11 @@ import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { Suspense } from 'react';
 
+import { AddToCart } from 'components/cart/add-to-cart';
 import Grid from 'components/grid';
 import Footer from 'components/layout/footer';
 import ProductGridItems from 'components/layout/product-grid-items';
-import { AddToCart } from 'components/cart/add-to-cart';
+import Price from 'components/price';
 import { Gallery } from 'components/product/gallery';
 import { VariantSelector } from 'components/product/variant-selector';
 import Prose from 'components/prose';
@@ -97,10 +98,22 @@ export default async function ProductPage({ params }: { params: { handle: string
         </div>
 
         <div className="p-6 lg:col-span-2">
+          <div className="flex flex-col pb-6 mb-6 border-b dark:border-gray-700">
+            <h1 className="mb-2 text-5xl font-medium">{product.title}</h1>
+            <div className="w-auto p-2 mr-auto text-sm text-white bg-blue-600 rounded-full">
+              <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" html={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} />
diff --git a/components/cart/add-to-cart.tsx b/components/cart/add-to-cart.tsx
index eecee848e..b145f57a2 100644
--- a/components/cart/add-to-cart.tsx
+++ b/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,18 @@ 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">
+        <PlusIcon className="h-5" />
+      </div>
       <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
-      {isPending ? <LoadingDots className="bg-white dark:bg-black" /> : null}
+      {isPending ? <LoadingDots className="bg-white" /> : null}
     </button>
   );
 }
diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
index 7ee154b57..be92d6498 100644
--- a/components/product/gallery.tsx
+++ b/components/product/gallery.tsx
@@ -51,7 +51,7 @@ export function Gallery({
         )}
 
         {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 flex flex-row h-12 text-white border border-white shadow-xl bottom-10 right-10 dark:border-black dark:text-black">
             <button
               aria-label="Previous product image"
               className={clsx(buttonClassName, 'border-r border-white dark:border-black')}
@@ -78,7 +78,7 @@ export function Gallery({
               <button
                 aria-label="Enlarge product image"
                 key={image.src}
-                className="h-full w-1/4"
+                className="w-1/4 h-full"
                 onClick={() => setCurrentImage(index)}
               >
                 <GridTileImage
diff --git a/components/product/variant-selector.tsx b/components/product/variant-selector.tsx
index 520818516..0b3e0b5a2 100644
--- a/components/product/variant-selector.tsx
+++ b/components/product/variant-selector.tsx
@@ -85,7 +85,7 @@ export function VariantSelector({
 
   return options.map((option) => (
     <dl className="mb-8" key={option.id}>
-      <dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
+      <dt className="mb-4 text-sm tracking-wide uppercase">{option.name}</dt>
       <dd className="flex flex-wrap gap-3">
         {option.values.map((value) => {
           // Base option params on selected variant params.
@@ -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,
-                  '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':
+                  'cursor-default ring-2 ring-blue-600': isActive,
+                  '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