From 3a3ff3798f02cf284a6ab86af9414e4220b90956 Mon Sep 17 00:00:00 2001
From: Chloe <pinkcloudvnn@gmail.com>
Date: Thu, 25 Apr 2024 15:29:44 +0700
Subject: [PATCH] fix: update dark text color and fix responsive issues

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
---
 app/product/[handle]/page.tsx            |  4 +++-
 components/product/gallery.tsx           |  2 +-
 components/product/special-offer.tsx     | 14 ++++++++------
 components/product/warranty-selector.tsx |  2 +-
 components/product/warranty.tsx          |  4 ++--
 5 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx
index 4adbfa0e3..b75d2b6fb 100644
--- a/app/product/[handle]/page.tsx
+++ b/app/product/[handle]/page.tsx
@@ -83,7 +83,9 @@ export default async function ProductPage({ params }: { params: { handle: string
         }}
       />
       <div className="mx-auto max-w-screen-2xl px-4">
-        <BreadcrumbComponent type="product" handle={product.handle} />
+        <div className="hidden lg:block">
+          <BreadcrumbComponent type="product" handle={product.handle} />
+        </div>
         <div className="my-3 flex flex-col space-x-0 rounded-lg border border-neutral-200 bg-white p-8 md:p-10 lg:flex-row lg:gap-8 lg:space-x-3 dark:border-neutral-800 dark:bg-black">
           <div className="h-full w-full basis-full lg:basis-7/12">
             <Suspense
diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
index a9f19cf4a..165466183 100644
--- a/components/product/gallery.tsx
+++ b/components/product/gallery.tsx
@@ -62,7 +62,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
                 </Link>
               </div>
             </div>
-            <p className="absolute bottom-[5%] flex w-full justify-center text-sm text-neutral-500">
+            <p className="absolute bottom-[5%] flex w-full justify-center text-xs text-neutral-500">
               Representative Image
             </p>
           </>
diff --git a/components/product/special-offer.tsx b/components/product/special-offer.tsx
index 2ce75a3ef..1cdb9a2e7 100644
--- a/components/product/special-offer.tsx
+++ b/components/product/special-offer.tsx
@@ -5,19 +5,21 @@ const SpecialOffer = () => {
   return (
     <>
       <div className="mb-3 text-base font-medium tracking-tight">Special Offers</div>
-      <div className="flex flex-col space-y-2 pl-2 tracking-normal text-neutral-800">
+      <div className="flex flex-col space-y-2 pl-2 text-sm tracking-normal text-neutral-800 lg:text-base dark:text-white">
         <p className="flex items-center gap-3">
-          <TruckIcon className="h-5 w-5 text-secondary" /> Flat Rate Shipping (Commercial Address)
+          <TruckIcon className="h-4 w-4 text-secondary lg:h-5 lg:w-5" /> Flat Rate Shipping
+          (Commercial Address)
         </p>
         <p className="flex items-center gap-3">
-          <ShieldCheckIcon className="h-5 w-5 text-secondary" /> Up to 5 Years Unlimited Miles
-          Warranty
+          <ShieldCheckIcon className="h-4 w-4 text-secondary lg:h-5 lg:w-5" /> Up to 5 Years
+          Unlimited Miles Warranty
         </p>
         <p className="flex items-center gap-3">
-          <UsersIcon className="h-5 w-5 text-secondary" /> Excellent Customer Support
+          <UsersIcon className="h-4 w-4 text-secondary lg:h-5 lg:w-5" /> Excellent Customer Support
         </p>
         <p className="flex items-center gap-3">
-          <CurrencyDollarIcon className="h-5 w-5 text-secondary" /> No Core Charge for 30 days
+          <CurrencyDollarIcon className="h-4 w-4 text-secondary lg:h-5 lg:w-5" /> No Core Charge for
+          30 days
         </p>
       </div>
     </>
diff --git a/components/product/warranty-selector.tsx b/components/product/warranty-selector.tsx
index 87302a200..3beaa5559 100644
--- a/components/product/warranty-selector.tsx
+++ b/components/product/warranty-selector.tsx
@@ -42,7 +42,7 @@ const WarrantySelector = () => {
           key={plan.key}
           onClick={() => setSelectedOptions(plan.key)}
           className={cn(
-            'flex  w-32 cursor-pointer flex-col items-center justify-center space-y-2 rounded-md border p-2 text-xs font-medium',
+            'flex  w-32 cursor-pointer flex-col items-center justify-center space-y-2 rounded-md border p-2 text-center text-xs font-medium',
             { 'ring-2 ring-secondary': plan.key === selectedOptions }
           )}
         >
diff --git a/components/product/warranty.tsx b/components/product/warranty.tsx
index 284c46378..83b8f7ec8 100644
--- a/components/product/warranty.tsx
+++ b/components/product/warranty.tsx
@@ -8,12 +8,12 @@ type WarrantyProps = {
 
 const Warranty = ({ productType }: WarrantyProps) => {
   return (
-    <div className="flex flex-col text-sm">
+    <div className="flex flex-col text-xs lg:text-sm">
       <div className="mb-3 flex flex-row items-center space-x-2 text-base font-medium">
         <ShieldCheckIcon className="h-7 w-7" />
         <span> Protect your {productType ?? 'product'}</span>
       </div>
-      <div className="mb-1 flex flex-row items-center space-x-3 divide-x divide-gray-400 leading-none">
+      <div className="mb-1 flex flex-row items-center space-x-1 divide-x divide-gray-400 leading-none lg:space-x-3">
         <span>Extended Warranty</span>
         <Link href="#" className="pl-2 text-blue-800 hover:underline">
           What&apos;s Included