fix: update brand color for PDP

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

components/cart/add-to-cart.tsx

@@ -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">
+        <ShoppingCartIcon className="h-5" />
-          <PlusIcon className="h-5" />
-        </div>
         Add To Cart
       </button>
     );
@@ -55,9 +53,7 @@ function SubmitButton({
         disabledClasses: pending
       })}
     >
-      <div className="absolute left-0 ml-4">
+      {pending ? <LoadingDots className="bg-white" /> : <ShoppingCartIcon className="h-5" />}
-        {pending ? <LoadingDots className="mb-3 bg-white" /> : <PlusIcon className="h-5" />}
-      </div>
       Add To Cart
     </button>
   );

components/grid/tile.tsx

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

components/price.tsx

@@ -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))}`}
+    {showCurrency && (
       <span className={clsx('ml-1 inline', currencyCodeClassName)}>{`${currencyCode}`}</span>
+    )}
   </p>
 );
 

components/product/product-description.tsx

@@ -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>
+        <h1 className="mb-2 text-4xl font-bold">{product.title}</h1>
-        <div className="mr-auto w-auto rounded-full bg-blue-600 p-2 text-sm text-white">
+        <div className="mr-auto w-auto text-sm">
           <Price
-            amount={product.priceRange.maxVariantPrice.amount}
+            amount={product.priceRange.minVariantPrice.amount}
-            currencyCode={product.priceRange.maxVariantPrice.currencyCode}
+            currencyCode={product.priceRange.minVariantPrice.currencyCode}
+            className="text-base font-semibold"
           />
         </div>
       </div>

components/product/variant-selector.tsx

@@ -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,
+                  'cursor-default ring-2 ring-secondary': isActive,
-                  'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-blue-600 ':
+                  '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