mirror of
https://github.com/vercel/commerce.git
synced 2025-06-02 06:26:58 +00:00
fix: update brand color for PDP
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
parent
41b6ab5df9
commit
649a54891c
@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { PlusIcon } from '@heroicons/react/24/outline';
|
||||
import { ShoppingCartIcon } from '@heroicons/react/24/outline';
|
||||
import clsx from 'clsx';
|
||||
import { addItem } from 'components/cart/actions';
|
||||
import LoadingDots from 'components/loading-dots';
|
||||
@ -17,7 +17,7 @@ function SubmitButton({
|
||||
}) {
|
||||
const { pending } = useFormStatus();
|
||||
const buttonClasses =
|
||||
'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white';
|
||||
'relative flex w-full items-center justify-center rounded bg-secondary p-4 tracking-wide text-white gap-3';
|
||||
const disabledClasses = 'cursor-not-allowed opacity-60 hover:opacity-60';
|
||||
|
||||
if (!availableForSale) {
|
||||
@ -35,9 +35,7 @@ function SubmitButton({
|
||||
aria-disabled
|
||||
className={clsx(buttonClasses, disabledClasses)}
|
||||
>
|
||||
<div className="absolute left-0 ml-4">
|
||||
<PlusIcon className="h-5" />
|
||||
</div>
|
||||
<ShoppingCartIcon className="h-5" />
|
||||
Add To Cart
|
||||
</button>
|
||||
);
|
||||
@ -55,9 +53,7 @@ function SubmitButton({
|
||||
disabledClasses: pending
|
||||
})}
|
||||
>
|
||||
<div className="absolute left-0 ml-4">
|
||||
{pending ? <LoadingDots className="mb-3 bg-white" /> : <PlusIcon className="h-5" />}
|
||||
</div>
|
||||
{pending ? <LoadingDots className="bg-white" /> : <ShoppingCartIcon className="h-5" />}
|
||||
Add To Cart
|
||||
</button>
|
||||
);
|
||||
|
@ -20,10 +20,10 @@ export function GridTileImage({
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'group flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white hover:border-blue-600 dark:bg-black',
|
||||
'group flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white hover:border-secondary dark:bg-black',
|
||||
{
|
||||
relative: label,
|
||||
'border-2 border-blue-600': active,
|
||||
'border-2 border-secondary': active,
|
||||
'border-neutral-200 dark:border-neutral-800': !active
|
||||
}
|
||||
)}
|
||||
|
@ -4,12 +4,14 @@ const Price = ({
|
||||
amount,
|
||||
className,
|
||||
currencyCode = 'USD',
|
||||
currencyCodeClassName
|
||||
currencyCodeClassName,
|
||||
showCurrency = false
|
||||
}: {
|
||||
amount: string;
|
||||
className?: string;
|
||||
currencyCode: string;
|
||||
currencyCodeClassName?: string;
|
||||
showCurrency?: boolean;
|
||||
} & React.ComponentProps<'p'>) => (
|
||||
<p suppressHydrationWarning={true} className={className}>
|
||||
{`${new Intl.NumberFormat(undefined, {
|
||||
@ -17,7 +19,9 @@ const Price = ({
|
||||
currency: currencyCode,
|
||||
currencyDisplay: 'narrowSymbol'
|
||||
}).format(parseFloat(amount))}`}
|
||||
<span className={clsx('ml-1 inline', currencyCodeClassName)}>{`${currencyCode}`}</span>
|
||||
{showCurrency && (
|
||||
<span className={clsx('ml-1 inline', currencyCodeClassName)}>{`${currencyCode}`}</span>
|
||||
)}
|
||||
</p>
|
||||
);
|
||||
|
||||
|
@ -9,11 +9,12 @@ export function ProductDescription({ product }: { product: Product }) {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-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">
|
||||
<h1 className="mb-2 text-4xl font-bold">{product.title}</h1>
|
||||
<div className="mr-auto w-auto text-sm">
|
||||
<Price
|
||||
amount={product.priceRange.maxVariantPrice.amount}
|
||||
currencyCode={product.priceRange.maxVariantPrice.currencyCode}
|
||||
amount={product.priceRange.minVariantPrice.amount}
|
||||
currencyCode={product.priceRange.minVariantPrice.currencyCode}
|
||||
className="text-base font-semibold"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -88,8 +88,8 @@ export function VariantSelector({
|
||||
className={clsx(
|
||||
'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
|
||||
{
|
||||
'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 ':
|
||||
'cursor-default ring-2 ring-secondary': isActive,
|
||||
'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-secondary ':
|
||||
!isActive && isAvailableForSale,
|
||||
'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform dark:bg-neutral-900 dark:text-neutral-400 dark:ring-neutral-700 before:dark:bg-neutral-700':
|
||||
!isAvailableForSale
|
||||
|
Loading…
x
Reference in New Issue
Block a user