fix: design issues fixed
This commit is contained in:
Afra
parent
9a2d315046
commit
716164ce96
4 changed files with 64 additions and 52 deletions
BIN
public/satelliet.png
Normal file
BIN
public/satelliet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9 KiB |
|
|
@ -37,16 +37,15 @@ function LocationErrorPageInner() {
|
|||
|
||||
return (
|
||||
<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>
|
||||
<p className="text-body-large text-gray-700">مشکلی در دریافت موقعیت شما پیش آمد. لطفاً محله خود را دستی انتخاب کنید.</p>
|
||||
<p className="text-body-large text-gray-700 leading-6">مشکلی در دریافت موقعیت شما پیش آمد. لطفاً محله خود را دستی انتخاب کنید.</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto flex w-full flex-col gap-4">
|
||||
<div className="mt-[50%] flex w-full flex-col gap-8">
|
||||
<Button
|
||||
size="lg"
|
||||
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">
|
||||
{retrying ? "در حال تلاش..." : "تلاش مجدد"}
|
||||
</button>
|
||||
<span className="text-body-medium text-gray-500">پشتیبانی</span>
|
||||
<span className="text-body-medium text-primary-action mt-8">پشتیبانی</span>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -12,8 +12,7 @@ const BENEFITS = [
|
|||
{ icon: Store, text: "کشف بازارچههای اطراف" },
|
||||
];
|
||||
|
||||
// L01 — winofyfrontenddoc (1).md §4.1. No illustration asset was provided;
|
||||
// approximated with a simple icon badge rather than the isometric map graphic.
|
||||
// L01 — winofyfrontenddoc (1).md §4.1.
|
||||
export default function LocationPermissionPage() {
|
||||
return (
|
||||
<Suspense fallback={null}>
|
||||
|
|
@ -32,7 +31,11 @@ function LocationPermissionPageInner() {
|
|||
setLoading(true);
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(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.refresh();
|
||||
},
|
||||
|
|
@ -45,26 +48,33 @@ function LocationPermissionPageInner() {
|
|||
}
|
||||
|
||||
return (
|
||||
<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-primary-action/10 text-primary-action">
|
||||
<MapPin className="h-14 w-14" />
|
||||
</span>
|
||||
<main className="flex min-h-full flex-1 flex-col bg-surface">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src="/Rectangle.png" alt="" className="h-auto w-full" width={390} height={296} />
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-headline-medium font-extrabold text-foreground">بازارچه محلی شما</h1>
|
||||
<p className="text-body-large text-gray-700">برای نمایش فروشگاههای نزدیک، به موقعیت مکانی شما نیاز داریم</p>
|
||||
<div className="flex flex-1 flex-col items-center gap-8 px-6 py-10 text-start">
|
||||
<div className="flex flex-col gap-8">
|
||||
<h1 className="text-headline-medium font-extrabold text-foreground">
|
||||
بازارچه محلی شما
|
||||
</h1>
|
||||
<p className="text-body-large text-gray-700 leading-6">
|
||||
برای نمایش فروشگاههای نزدیک، به موقعیت مکانی شما نیاز داریم
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full flex-col gap-3 text-right">
|
||||
{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
|
||||
key={text}
|
||||
className="flex items-center gap-3 mb-3 mr-2"
|
||||
>
|
||||
<Icon className="h-5 w-5 shrink-0 text-primary-action" />
|
||||
<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
|
||||
size="lg"
|
||||
className="w-full bg-primary-action hover:bg-primary-action/90 text-primary-foreground"
|
||||
|
|
@ -75,12 +85,15 @@ function LocationPermissionPageInner() {
|
|||
</Button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push(`/location/search?next=${encodeURIComponent(next)}`)}
|
||||
onClick={() =>
|
||||
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>
|
||||
<span className="text-body-medium text-primary-action text-center mt-6">پشتیبانی</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -55,9 +55,9 @@ export function NeighborhoodSearch({
|
|||
<button
|
||||
type="button"
|
||||
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"}>
|
||||
{n.city.name}، {n.name}
|
||||
</span>
|
||||
|
|
@ -67,12 +67,12 @@ export function NeighborhoodSearch({
|
|||
}
|
||||
|
||||
return (
|
||||
<main className="flex min-h-full flex-1 flex-col bg-surface px-4 py-4">
|
||||
<div className="mb-4 flex items-center gap-3">
|
||||
<main className="flex min-h-full flex-1 flex-col bg-surface px-4 py-12">
|
||||
<div className="mb-8 flex items-center gap-3">
|
||||
<button type="button" onClick={() => router.back()} aria-label="بازگشت">
|
||||
<ArrowRight className="h-5 w-5 text-foreground" />
|
||||
</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
|
||||
|
|
@ -82,15 +82,15 @@ export function NeighborhoodSearch({
|
|||
: "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
|
||||
type="search"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
onFocus={() => setFocused(true)}
|
||||
onBlur={() => setFocused(false)}
|
||||
placeholder="با نام محله خود را جستجو کنید"
|
||||
className="h-full flex-1 bg-transparent text-body-medium text-foreground placeholder:text-gray-500 focus:outline-none"
|
||||
placeholder="شهر یا محله خود را جستجو کنید"
|
||||
className="h-full flex-1 bg-transparent text-body-medium text-foreground placeholder:text-gray-600 focus:outline-none"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -125,7 +125,7 @@ export function NeighborhoodSearch({
|
|||
|
||||
{(state === "idle" || state === "empty") && (
|
||||
<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) => (
|
||||
<NeighborhoodRow key={n.uuid} n={n} />
|
||||
))}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue