fix: update brand color for PDP

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe 2024-04-23 16:37:32 +07:00
parent 41b6ab5df9
commit 649a54891c
No known key found for this signature in database
GPG Key ID: CFD53CE570D42DF5
5 changed files with 19 additions and 18 deletions

View File

@ -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>
);

View File

@ -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
}
)}

View File

@ -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>
);

View File

@ -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>

View File

@ -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