From de7a782562a164f14ae516f6c040732f4151e7d7 Mon Sep 17 00:00:00 2001
From: Mahyar Khanbolooki <mahyarkhn@proton.me>
Date: Tue, 12 Aug 2025 20:35:24 +0330
Subject: [PATCH] add: checkout, track and address map pages dark theme

---
 .../(Dialogs)/order/checkout/[id]/page.tsx    | 16 +++++-----
 .../(Dialogs)/order/track/[id]/page.tsx       |  5 +--
 src/components/map/CustomMap.css              | 12 ++++---
 src/components/map/CustomMap.tsx              | 32 +++++++++++--------
 src/components/utils/Prompt.tsx               |  4 +--
 5 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/src/app/[name]/(Dialogs)/order/checkout/[id]/page.tsx b/src/app/[name]/(Dialogs)/order/checkout/[id]/page.tsx
index 7afc0c9..42bac58 100644
--- a/src/app/[name]/(Dialogs)/order/checkout/[id]/page.tsx
+++ b/src/app/[name]/(Dialogs)/order/checkout/[id]/page.tsx
@@ -90,11 +90,11 @@ function OrderDetailInex() {
                         <h3 className="text-sm2 font-medium leading-5 inline-block">{t("SectionAddress.Title")}</h3>
                         <Link href={`/${params.name}/profile/address?redirect=/${params.name}/order/checkout/${params.id}`}>
                             <button
-                                className='text-sm2 text-primary cursor-pointer'
+                                className='text-sm2 text-primary dark:text-foreground cursor-pointer'
                                 onClick={() => { /* Handle address change */ }}
                             >
                                 {t("SectionAddress.ButtonChangeAddress")}
-                                <ChevronLeft className='inline-block mr-1 mb-0.5 stroke-primary' size='16' />
+                                <ChevronLeft className='inline-block mr-1 mb-0.5 stroke-primary dark:stroke-foreground' size='16' />
                             </button>
                         </Link>
                     </div>
@@ -124,7 +124,7 @@ function OrderDetailInex() {
                             >
                                 <button
                                     onClick={() => incrementTableNumber()}
-                                    className="bg-white hover:bg-white/60 size-6 place-items-center active:bg-white/30 rounded-sm"
+                                    className="bg-container hover:bg-container/60 size-6 place-items-center active:bg-container/30 rounded-sm"
                                 >
                                     <PlusIcon size={16} />
                                 </button>
@@ -139,7 +139,7 @@ function OrderDetailInex() {
                                 </motion.div>
                                 <button
                                     onClick={() => decrementTableNumber()}
-                                    className="bg-white hover:bg-white/60 size-6 place-items-center active:bg-white/30 rounded-sm"
+                                    className="bg-container hover:bg-container/60 size-6 place-items-center active:bg-container/30 rounded-sm"
                                 >
                                     <MinusIcon size={16} />
                                 </button>
@@ -222,7 +222,6 @@ function OrderDetailInex() {
                     <div className='flex flex-col gap-5 mt-6'>
                         {couponOptions.map(({ id, label, icon: Icon }) => (
                             <div key={id} className='flex items-center'>
-
                                 <label className='flex items-center gap-2 w-full' htmlFor={`couponType${id}`}>
                                     <Icon
                                         size={16}
@@ -231,6 +230,7 @@ function OrderDetailInex() {
                                     />
                                     <span className='text-xs mt-0.5'>{label}</span>
                                 </label>
+                                
                                 <input
                                     checked={couponType === id}
                                     onChange={() => changeCouponType(id)}
@@ -246,7 +246,7 @@ function OrderDetailInex() {
                         className={clsx(
                             'relative mt-6',
                             couponType === '0' ? 'block' : 'hidden',
-                            couponCode.length === 0 && 'text-border **:stroke-border'
+                            couponCode.length === 0 && 'text-border **:stroke-border dark:text-neutral-500 dark:**:stroke-neutral-500'
                         )}
                         icon={TicketDiscount}
                         placeholder={t("SectionCoupon.InputCouponCode.Placeholder")}
@@ -279,11 +279,11 @@ function OrderDetailInex() {
                     <div className='w-full flex justify-between items-center gap-2'>
                         <h3 className="text-sm2 font-medium leading-5 inline-block">{t("SectionSummary.Title")}</h3>
                         <button
-                            className='text-sm2 text-primary cursor-pointer'
+                            className='text-sm2 text-primary cursor-pointer dark:text-foreground'
                             onClick={toggleCartModal}
                         >
                             {t("SectionSummary.ButtonViewCart")}
-                            <ChevronLeft className='inline-block mr-1 mb-0.5 stroke-primary' size='16' />
+                            <ChevronLeft className='inline-block mr-1 mb-0.5 stroke-primary dark:stroke-foreground' size='16' />
                         </button>
                     </div>
                     <div className='mt-6 text-sm2 grid grid-cols-2 gap-4'>
diff --git a/src/app/[name]/(Dialogs)/order/track/[id]/page.tsx b/src/app/[name]/(Dialogs)/order/track/[id]/page.tsx
index 8d5960a..708762d 100644
--- a/src/app/[name]/(Dialogs)/order/track/[id]/page.tsx
+++ b/src/app/[name]/(Dialogs)/order/track/[id]/page.tsx
@@ -83,6 +83,7 @@ function OrderTrackingPage() {
                     onZoomChange={handleZoomChange}
                     onClick={handleMapClick}
                     markerActive={false}
+                    searchEnabled={false}
                 />
             </div>
 
@@ -103,7 +104,7 @@ function OrderTrackingPage() {
                     >
                         <div className='px-4'>
                             <div className='px-4 mt-2 bg-container flex flex-col gap-6'>
-                                <div className='w-[35px] place-self-center border-2 border-border rounded'></div>
+                                <div className='w-[35px] place-self-center border-2 border-border dark:border-disabled rounded'></div>
                                 <h1 className='text-base font-medium text-center'>ارسال توسط پیک رستوران</h1>
                                 <hr className='border border-border ' />
                                 <div className='text-sm'>
@@ -123,7 +124,7 @@ function OrderTrackingPage() {
                                     />
                                 </div>
                                 <div className='text-sm2 flex gap-2 items-center'>
-                                    <Clock className='stroke-primary size-5' />
+                                    <Clock className='stroke-primary dark:stroke-neutral-300 size-5' />
                                     <Skeleton
                                         className='h-6 w-full'
                                     />
diff --git a/src/components/map/CustomMap.css b/src/components/map/CustomMap.css
index a68bdfd..c8b1095 100644
--- a/src/components/map/CustomMap.css
+++ b/src/components/map/CustomMap.css
@@ -1,5 +1,5 @@
 .map-google-style {
-    background-color: #f8f9fa;
+    background-color: var(--background);
     font-family: 'irancell', system-ui, -apple-system, sans-serif;
 }
 
@@ -98,7 +98,7 @@
     position: absolute;
     right: 20px;
     bottom: 40px;
-    background: rgba(255, 255, 255, 0.95);
+    background: var(--background);
     border-radius: 16px;
     box-shadow: 0 4px 16px rgba(0,0,0,0.08),
                 0 2px 4px rgba(0,0,0,0.05);
@@ -233,7 +233,7 @@
 
 .map-search-results {
     margin-top: 12px;
-    background: rgba(255, 255, 255, 0.95);
+    background: var(--container);
     border-radius: 16px;
     box-shadow: 0 4px 20px rgba(0,0,0,0.1),
                 0 2px 8px rgba(0,0,0,0.05);
@@ -248,7 +248,7 @@
     border-bottom: 1px solid rgba(0,0,0,0.05);
     font-size: 13px;
     font-weight: 400;
-    color: #1f2937;
+    color: var(--foreground);
     cursor: pointer;
     display: block;
     width: 100%;
@@ -264,6 +264,10 @@
     color: #2563eb;
 }
 
+[data-theme="dark"] .map-search-result-item:hover {
+    color: var(--disabled-text);
+}
+
 .map-search-result-item:active {
     background-color: rgba(59, 130, 246, 0.1);
 }
diff --git a/src/components/map/CustomMap.tsx b/src/components/map/CustomMap.tsx
index 9ffdcc7..53cbf76 100644
--- a/src/components/map/CustomMap.tsx
+++ b/src/components/map/CustomMap.tsx
@@ -20,6 +20,7 @@ interface CustomMapProps {
   onPositionSelect?: (position: [number, number]) => void;
   onZoomChange?: (zoom: number) => void;
   onClick?: (event: L.LeafletMouseEvent) => void;
+  searchEnabled?: boolean
   markerActive?: boolean
 }
 
@@ -85,7 +86,8 @@ const CustomMap: React.FC<CustomMapProps> = ({
   onPositionSelect,
   onZoomChange,
   onClick,
-  markerActive = true
+  markerActive = true,
+  searchEnabled = true,
 }) => {
   const [selectedPosition, setSelectedPosition] = useState<[number, number] | null>(null);
   const [mapInstance, setMapInstance] = useState<L.Map | null>(null);
@@ -208,19 +210,21 @@ const CustomMap: React.FC<CustomMapProps> = ({
 
   return (
     <div className="w-full h-full relative">
-      <ActiveSearchbox
-        placeholder="جستجو"
-        onSearch={handleSearch}
-        isLoading={isSearching}
-        results={searchResults}
-        onResultSelect={(v) => {
-          // Find the full result object with position
-          const result = searchResults.find(r => r.id === v.id && r.title === v.title);
-          if (result) {
-            handleSearchResultSelect(result);
-          }
-        }}
-      />
+      {searchEnabled &&
+        <ActiveSearchbox
+          placeholder="جستجو"
+          onSearch={handleSearch}
+          isLoading={isSearching}
+          results={searchResults}
+          onResultSelect={(v) => {
+            // Find the full result object with position
+            const result = searchResults.find(r => r.id === v.id && r.title === v.title);
+            if (result) {
+              handleSearchResultSelect(result);
+            }
+          }}
+        />
+      }
       <div className="map-zoom-controls">
         <button
           onClick={(e) => {
diff --git a/src/components/utils/Prompt.tsx b/src/components/utils/Prompt.tsx
index 5551a77..beaffed 100644
--- a/src/components/utils/Prompt.tsx
+++ b/src/components/utils/Prompt.tsx
@@ -35,10 +35,10 @@ function Prompt({ title, description, textConfirm, textCancel, onConfirm, onCanc
             </p>
             {children}
             <div className="grid grid-cols-2 gap-5.5 mt-8">
-                <Button onClick={onConfirm} className="text-sm h-11 font-normal cursor-pointer">
+                <Button onClick={onConfirm} className="rounded-normal text-sm h-11 font-normal cursor-pointer">
                     {textConfirm ?? t('ButtonOk')}
                 </Button>
-                <Button onClick={onCancel} className="bg-disabled! h-11 cursor-pointer text-disabled2! dark:text-disabled-text! active:brightness-95 hover:brightness-105 text-sm font-normal">
+                <Button onClick={onCancel} className="rounded-normal bg-disabled! h-11 cursor-pointer text-disabled2! dark:text-disabled-text! active:brightness-95 hover:brightness-105 text-sm font-normal">
                     {textCancel ?? t('ButtonCancel')}
                 </Button>
             </div>