pi-agent/falah-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile-first UI redesign - bump all text to 12px+, 44px+ touch targets, reduced content density

Browse Source
This commit is contained in:
root
2026-06-15 11:07:41 +02:00
parent e479df82e2
commit 8f0ff9d47a
16 changed files with 192 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/halal-monitor/page.tsx
+9 -9
View File
@@ -277,7 +277,7 @@ export default function HalalMonitorPage() {
{usage && (
<div className="flex items-center gap-2">
<div className="text-right">
<p className="text-[10px] text-gray-500">Today</p>
<p className="text-xs text-gray-500">Today</p>
<p className="text-xs font-semibold text-gray-300">
{usage.remaining}/{usage.queriesLimit}
</p>
@@ -313,7 +313,7 @@ export default function HalalMonitorPage() {
<p className="text-sm font-semibold text-emerald-400">
Upgrade for Unlimited
</p>
<p className="text-[11px] text-gray-500">
<p className="text-xs text-gray-500">
Unlock restaurants + cafes & unlimited queries
</p>
</div>
@@ -324,7 +324,7 @@ export default function HalalMonitorPage() {
{/* Free user scope notice */}
{isFree && (
<div className="mt-2 flex items-center gap-1.5 text-[11px] text-amber-400/70">
<div className="mt-2 flex items-center gap-1.5 text-xs text-amber-400/70">
<Crown size={12} />
Free tier: mosques only &bull; 10 queries/day
</div>
@@ -333,7 +333,7 @@ export default function HalalMonitorPage() {
{/* ── Search Bar ─────────────────────────────────────────────────── */}
<div className="px-4 mb-3">
<div className="flex items-center gap-2 bg-[#111118] border border-gray-800/60 rounded-2xl px-4 py-2.5">
<div className="flex items-center gap-2 bg-[#111118] border border-gray-800/60 rounded-2xl px-4 py-3">
<Search size={16} className="text-gray-500 shrink-0" />
<input
type="text"
@@ -397,7 +397,7 @@ export default function HalalMonitorPage() {
<div className="w-10 h-10 rounded-full bg-emerald-500/20 border-2 border-emerald-500/40 flex items-center justify-center animate-pulse">
<MapPin size={18} className="text-emerald-400" />
</div>
<span className="text-[10px] text-emerald-500/60 font-medium">
<span className="text-xs text-emerald-500/60 font-medium">
{visiblePlaces.length} places found
</span>
</div>
@@ -460,7 +460,7 @@ export default function HalalMonitorPage() {
{place.name}
</h3>
<span
className={`text-[10px] font-medium px-2 py-0.5 rounded-full shrink-0 ${
className={`text-xs font-medium px-2 py-0.5 rounded-full shrink-0 ${
place.type === "mosque"
? "bg-emerald-500/15 text-emerald-300 border border-emerald-500/30"
: "bg-amber-500/15 text-amber-300 border border-amber-500/30"
@@ -480,7 +480,7 @@ export default function HalalMonitorPage() {
{/* Halal badge */}
{place.halal_certified && (
<span className="inline-flex items-center gap-1 text-[10px] font-medium text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-full">
<span className="inline-flex items-center gap-1 text-xs font-medium text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-full">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
Halal Certified
</span>
@@ -584,13 +584,13 @@ export default function HalalMonitorPage() {
{/* Coords */}
<div className="grid grid-cols-2 gap-3 mb-5">
<div className="bg-[#0a0a0f] rounded-xl p-3 text-center">
<p className="text-[10px] text-gray-600">Latitude</p>
<p className="text-xs text-gray-600">Latitude</p>
<p className="text-xs text-gray-300 font-mono">
{selectedPlace.lat.toFixed(4)}
</p>
</div>
<div className="bg-[#0a0a0f] rounded-xl p-3 text-center">
<p className="text-[10px] text-gray-600">Longitude</p>
<p className="text-xs text-gray-600">Longitude</p>
<p className="text-xs text-gray-300 font-mono">
{selectedPlace.lng.toFixed(4)}
</p>