addwin/winofy-front
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: design issues fixed

Browse source
This commit is contained in:
Afra ‌ 2026-08-19 17:49:43 +03:30
parent 9a2d315046
commit 716164ce96
4 changed files with 64 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/satelliet.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9 KiB

13
src/app/(customer)/location/error/page.tsx
View file

@ -37,16 +37,15 @@ function LocationErrorPageInner() {
return ( return (
<main className="flex min-h-full flex-1 flex-col items-center gap-8 bg-surface px-6 py-10 text-center"> <main className="flex min-h-full flex-1 flex-col items-center gap-8 bg-surface px-6 py-10 text-center">
<span className="flex h-28 w-28 items-center justify-center rounded-full bg-error/10 text-error">
<MapPinOff className="h-14 w-14" />
</span>
<div className="flex flex-col gap-2"> <img src="/satelliet.png" alt="" className="w-auto h-full my-4" width={390} height={296}/>
<div className="flex flex-col gap-6 my-4">
<h1 className="text-headline-medium font-extrabold text-foreground">موقعیت مکانی شناسایی نشد</h1> <h1 className="text-headline-medium font-extrabold text-foreground">موقعیت مکانی شناسایی نشد</h1>
<p className="text-body-large text-gray-700">مشکلی در دریافت موقعیت شما پیش آمد. لطفاً محله خود را دستی انتخاب کنید.</p> <p className="text-body-large text-gray-700 leading-6">مشکلی در دریافت موقعیت شما پیش آمد. لطفاً محله خود را دستی انتخاب کنید.</p>
</div> </div>
<div className="mt-auto flex w-full flex-col gap-4"> <div className="mt-[50%] flex w-full flex-col gap-8">
<Button <Button
size="lg" size="lg"
className="w-full bg-primary-action hover:bg-primary-action/90 text-primary-foreground" className="w-full bg-primary-action hover:bg-primary-action/90 text-primary-foreground"
@ -57,7 +56,7 @@ function LocationErrorPageInner() {
<button type="button" onClick={retry} disabled={retrying} className="text-body-medium font-semibold text-primary-action"> <button type="button" onClick={retry} disabled={retrying} className="text-body-medium font-semibold text-primary-action">
{retrying ? "در حال تلاش..." : "تلاش مجدد"} {retrying ? "در حال تلاش..." : "تلاش مجدد"}
</button> </button>
<span className="text-body-medium text-gray-500">پشتیبانی</span> <span className="text-body-medium text-primary-action mt-8">پشتیبانی</span>
</div> </div>
</main> </main>
); );

85
src/app/(customer)/location/permission/page.tsx
View file

@ -12,8 +12,7 @@ const BENEFITS = [
{ icon: Store, text: "کشف بازارچه‌های اطراف" }, { icon: Store, text: "کشف بازارچه‌های اطراف" },
]; ];
// L01 — winofyfrontenddoc (1).md §4.1. No illustration asset was provided; // L01 — winofyfrontenddoc (1).md §4.1.
// approximated with a simple icon badge rather than the isometric map graphic.
export default function LocationPermissionPage() { export default function LocationPermissionPage() {
return ( return (
<Suspense fallback={null}> <Suspense fallback={null}>
@ -32,7 +31,11 @@ function LocationPermissionPageInner() {
setLoading(true); setLoading(true);
navigator.geolocation.getCurrentPosition( navigator.geolocation.getCurrentPosition(
(position) => { (position) => {
setLocation({ mode: "geo", lat: position.coords.latitude, lng: position.coords.longitude }); setLocation({
mode: "geo",
lat: position.coords.latitude,
lng: position.coords.longitude,
});
router.push(next); router.push(next);
router.refresh(); router.refresh();
}, },
@ -45,42 +48,52 @@ function LocationPermissionPageInner() {
} }
return ( return (
<main className="flex min-h-full flex-1 flex-col items-center gap-8 bg-surface px-6 py-10 text-center"> <main className="flex min-h-full flex-1 flex-col bg-surface">
<span className="flex h-28 w-28 items-center justify-center rounded-full bg-primary-action/10 text-primary-action"> {/* eslint-disable-next-line @next/next/no-img-element */}
<MapPin className="h-14 w-14" /> <img src="/Rectangle.png" alt="" className="h-auto w-full" width={390} height={296} />
</span>
<div className="flex flex-col gap-2"> <div className="flex flex-1 flex-col items-center gap-8 px-6 py-10 text-start">
<h1 className="text-headline-medium font-extrabold text-foreground">بازارچه محلی شما</h1> <div className="flex flex-col gap-8">
<p className="text-body-large text-gray-700">برای نمایش فروشگاه‌های نزدیک، به موقعیت مکانی شما نیاز داریم</p> <h1 className="text-headline-medium font-extrabold text-foreground">
</div> بازارچه محلی شما
</h1>
<p className="text-body-large text-gray-700 leading-6">
برای نمایش فروشگاه‌های نزدیک، به موقعیت مکانی شما نیاز داریم
</p>
</div>
<div className="flex w-full flex-col gap-3 text-right"> <div className="flex w-full flex-col gap-3 text-right">
{BENEFITS.map(({ icon: Icon, text }) => ( {BENEFITS.map(({ icon: Icon, text }) => (
<div key={text} className="flex items-center gap-3 rounded-xl border border-gray-300 bg-white p-3"> <div
<Icon className="h-5 w-5 shrink-0 text-primary-action" /> key={text}
<span className="text-body-medium text-foreground">{text}</span> className="flex items-center gap-3 mb-3 mr-2"
</div> >
))} <Icon className="h-5 w-5 shrink-0 text-primary-action" />
</div> <span className="text-body-medium text-foreground">{text}</span>
</div>
))}
</div>
<div className="mt-auto flex w-full flex-col gap-4"> <div className="flex w-full flex-col gap-6">
<Button <Button
size="lg" size="lg"
className="w-full bg-primary-action hover:bg-primary-action/90 text-primary-foreground" className="w-full bg-primary-action hover:bg-primary-action/90 text-primary-foreground"
disabled={loading} disabled={loading}
onClick={allowLocation} onClick={allowLocation}
> >
{loading ? "در حال دریافت موقعیت..." : "اجازه دسترسی به موقعیت مکانی"} {loading ? "در حال دریافت موقعیت..." : "اجازه دسترسی به موقعیت مکانی"}
</Button> </Button>
<button <button
type="button" type="button"
onClick={() => router.push(`/location/search?next=${encodeURIComponent(next)}`)} onClick={() =>
className="text-body-medium font-semibold text-primary-action" router.push(`/location/search?next=${encodeURIComponent(next)}`)
> }
انتخاب دستی محله className="text-body-medium font-semibold text-primary-action"
</button> >
<span className="text-body-medium text-gray-500">پشتیبانی</span> انتخاب دستی محله
</button>
<span className="text-body-medium text-primary-action text-center mt-6">پشتیبانی</span>
</div>
</div> </div>
</main> </main>
); );

18
src/components/location/neighborhood-search.tsx
View file

@ -55,9 +55,9 @@ export function NeighborhoodSearch({
<button <button
type="button" type="button"
onClick={() => selectNeighborhood(n)} onClick={() => selectNeighborhood(n)}
className="flex w-full items-center gap-3 border-b border-gray-300 py-4 text-right" className="flex max-w-full items-center gap-3 border-t border-gray-300 py-4 text-right mx-4"
> >
<MapPin className={isSelected ? "h-5 w-5 shrink-0 text-primary-action" : "h-5 w-5 shrink-0 text-gray-500"} /> <MapPin className={isSelected ? "h-5 w-5 shrink-0 text-primary-action" : "h-5 w-5 shrink-0 text-gray-700"} />
<span className={isSelected ? "flex-1 text-body-large font-semibold text-primary-action" : "flex-1 text-body-large text-foreground"}> <span className={isSelected ? "flex-1 text-body-large font-semibold text-primary-action" : "flex-1 text-body-large text-foreground"}>
{n.city.name}، {n.name} {n.city.name}، {n.name}
</span> </span>
@ -67,12 +67,12 @@ export function NeighborhoodSearch({
} }
return ( return (
<main className="flex min-h-full flex-1 flex-col bg-surface px-4 py-4"> <main className="flex min-h-full flex-1 flex-col bg-surface px-4 py-12">
<div className="mb-4 flex items-center gap-3"> <div className="mb-8 flex items-center gap-3">
<button type="button" onClick={() => router.back()} aria-label="بازگشت"> <button type="button" onClick={() => router.back()} aria-label="بازگشت">
<ArrowRight className="h-5 w-5 text-foreground" /> <ArrowRight className="h-5 w-5 text-foreground" />
</button> </button>
<h1 className="text-title-large font-extrabold text-foreground">انتخاب محله</h1> <h1 className="text-title-large font-extrabold text-foreground mr-24">انتخاب محله</h1>
</div> </div>
<div <div
@ -82,15 +82,15 @@ export function NeighborhoodSearch({
: "flex h-12 items-center gap-2 rounded-3xl border border-gray-300 bg-white px-4" : "flex h-12 items-center gap-2 rounded-3xl border border-gray-300 bg-white px-4"
} }
> >
<Search className="h-5 w-5 shrink-0 text-gray-500" /> <Search className="h-5 w-5 shrink-0 text-primary-action" />
<input <input
type="search" type="search"
value={query} value={query}
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
onFocus={() => setFocused(true)} onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)} onBlur={() => setFocused(false)}
placeholder="با نام محله خود را جستجو کنید" placeholder="شهر یا محله خود را جستجو کنید"
className="h-full flex-1 bg-transparent text-body-medium text-foreground placeholder:text-gray-500 focus:outline-none" className="h-full flex-1 bg-transparent text-body-medium text-foreground placeholder:text-gray-600 focus:outline-none"
autoFocus autoFocus
/> />
</div> </div>
@ -125,7 +125,7 @@ export function NeighborhoodSearch({
{(state === "idle" || state === "empty") && ( {(state === "idle" || state === "empty") && (
<div className="mt-4 flex flex-col"> <div className="mt-4 flex flex-col">
<h2 className="pb-2 text-label text-gray-600">محله‌های پیشنهادی</h2> <h2 className="text-label min-w-fit font-bold size-3.5 text-gray-700 mx-4 py-6 flex items-center">محله‌های پیشنهادی</h2>
{suggestions.map((n) => ( {suggestions.map((n) => (
<NeighborhoodRow key={n.uuid} n={n} /> <NeighborhoodRow key={n.uuid} n={n} />
))} ))}