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