danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

add: checkout, track and address map pages dark theme

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-08-12 20:35:24 +03:30
parent a67711b075
commit de7a782562
5 changed files with 39 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[name]/(Dialogs)/order/checkout/[id]/page.tsx
+8 -8
View File
@@ -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'>
src/app/[name]/(Dialogs)/order/track/[id]/page.tsx
+3 -2
View File
@@ -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'
/>
src/components/map/CustomMap.css
+8 -4
View File
@@ -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);
}
src/components/map/CustomMap.tsx
+18 -14
View File
@@ -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) => {
src/components/utils/Prompt.tsx
+2 -2
View File
@@ -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>