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

Fix remaining dark theme pages: thread detail and halal monitor

Browse Source 
forum/[threadId]/page.tsx and halal-monitor/page.tsx were missed in
the initial light theme pass — now fully converted to white cards,
emerald buttons, and light backgrounds.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
FalahMobile
2026-06-15 09:58:20 +01:00
parent 8ce5fae25c
commit 32dfc7b892
2 changed files with 141 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/forum/[threadId]/page.tsx
+64 -39
View File
@@ -74,12 +74,12 @@ export default function ThreadDetailPage() {
if (loading) { if (loading) {
return ( return (
<div className="max-w-3xl mx-auto p-4 sm:p-6"> <div className="min-h-dvh bg-[#f5f4f0] pb-24 px-4 pt-6">
<div className="animate-pulse space-y-4"> <div className="animate-pulse space-y-4 max-w-3xl mx-auto">
<div className="h-4 bg-gray-800 rounded w-24" /> <div className="h-4 bg-gray-200 rounded w-24" />
<div className="h-8 bg-gray-800 rounded w-3/4" /> <div className="h-8 bg-gray-200 rounded w-3/4" />
<div className="h-4 bg-gray-800 rounded w-1/3" /> <div className="h-4 bg-gray-200 rounded w-1/3" />
<div className="h-32 bg-gray-800 rounded" /> <div className="h-32 bg-gray-200 rounded-2xl" />
</div> </div>
</div> </div>
) )
@@ -87,60 +87,80 @@ export default function ThreadDetailPage() {
if (error || !thread) { if (error || !thread) {
return ( return (
<div className="max-w-3xl mx-auto p-4 sm:p-6"> <div className="min-h-dvh bg-[#f5f4f0] pb-24 px-4 pt-6 max-w-3xl mx-auto">
<button onClick={() => router.push('/forum')} className="flex items-center gap-1 text-[#D4AF37] hover:underline mb-4 text-sm"> <button
onClick={() => router.push('/forum')}
className="flex items-center gap-1 text-emerald-600 text-sm mb-4 active:opacity-70 transition"
>
<ArrowLeft size={16} /> Back to Forum <ArrowLeft size={16} /> Back to Forum
</button> </button>
<div className="bg-[#111118] border border-gray-800 rounded-lg p-8 text-center"> <div className="bg-white border border-gray-100 shadow-sm rounded-2xl p-8 text-center">
<MessageCircle size={40} className="mx-auto text-gray-600 mb-3" /> <MessageCircle size={40} className="mx-auto text-gray-300 mb-3" />
<p className="text-gray-400">{error || 'Thread not found'}</p> <p className="text-gray-500">{error || 'Thread not found'}</p>
</div> </div>
</div> </div>
) )
} }
return ( return (
<div className="max-w-3xl mx-auto p-4 sm:p-6 space-y-6"> <div className="min-h-dvh bg-[#f5f4f0] pb-24">
<button onClick={() => router.push('/forum')} className="flex items-center gap-1 text-[#D4AF37] hover:underline text-sm"> <div className="max-w-3xl mx-auto px-4 pt-6 space-y-4">
<button
onClick={() => router.push('/forum')}
className="flex items-center gap-1 text-emerald-600 text-sm active:opacity-70 transition"
>
<ArrowLeft size={16} /> Back to Forum <ArrowLeft size={16} /> Back to Forum
</button> </button>
<div className="bg-[#111118] border border-gray-800 rounded-lg p-5 space-y-3"> {/* Thread card */}
<div className="bg-white border border-gray-100 shadow-sm rounded-2xl p-5 space-y-3">
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
<span className="bg-[#D4AF37]/10 text-[#D4AF37] text-xs font-semibold px-2 py-0.5 rounded">{thread.category.name}</span> <span className="bg-emerald-50 text-emerald-700 text-xs font-semibold px-2.5 py-1 rounded-lg">
{thread.category.name}
</span>
{thread.shariahStatus === 'approved' ? ( {thread.shariahStatus === 'approved' ? (
<span className="flex items-center gap-1 text-green-500 text-xs"><ShieldCheck size={14} /> Shariah Approved</span> <span className="flex items-center gap-1 text-green-600 text-xs">
<ShieldCheck size={13} /> Shariah Approved
</span>
) : ( ) : (
<span className="flex items-center gap-1 text-yellow-500 text-xs"><ShieldAlert size={14} /> {thread.shariahStatus === 'pending' ? 'Pending Review' : 'Flagged'}</span> <span className="flex items-center gap-1 text-yellow-600 text-xs">
<ShieldAlert size={13} /> {thread.shariahStatus === 'pending' ? 'Pending Review' : 'Flagged'}
</span>
)} )}
</div> </div>
<h1 className="text-xl font-bold">{thread.title}</h1> <h1 className="text-lg font-bold text-gray-900">{thread.title}</h1>
<div className="text-sm text-gray-500"> <p className="text-xs text-gray-400">
By <span className="text-gray-300">{thread.author.name}</span> &middot; {new Date(thread.createdAt).toLocaleDateString()} By <span className="text-gray-600 font-medium">{thread.author.name}</span> &middot; {new Date(thread.createdAt).toLocaleDateString()}
</div> </p>
<p className="text-sm text-gray-300 whitespace-pre-wrap leading-relaxed">{thread.content}</p> <p className="text-sm text-gray-700 whitespace-pre-wrap leading-relaxed">{thread.content}</p>
</div> </div>
<div className="space-y-4"> {/* Replies section */}
<h2 className="text-lg font-semibold flex items-center gap-2"> <div className="space-y-3">
<MessageCircle size={18} className="text-[#D4AF37]" /> <h2 className="text-base font-semibold text-gray-900 flex items-center gap-2">
<MessageCircle size={16} className="text-emerald-600" />
Replies ({posts.length}) Replies ({posts.length})
</h2> </h2>
{posts.length === 0 ? ( {posts.length === 0 ? (
<div className="bg-[#111118] border border-gray-800 rounded-lg p-6 text-center"> <div className="bg-white border border-gray-100 shadow-sm rounded-2xl p-6 text-center">
<p className="text-gray-500 text-sm">No replies yet. Be the first to respond.</p> <p className="text-gray-400 text-sm">No replies yet. Be the first to respond.</p>
</div> </div>
) : ( ) : (
posts.map(post => ( posts.map(post => (
<div key={post.id} className="bg-[#111118] border border-gray-800 rounded-lg p-4 space-y-2"> <div key={post.id} className="bg-white border border-gray-100 shadow-sm rounded-2xl p-4 space-y-2">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-sm font-semibold">{post.author.name}</span> <div className="flex items-center gap-2">
<span className="text-xs text-gray-500">{new Date(post.createdAt).toLocaleDateString()}</span> <div className="w-7 h-7 rounded-xl bg-emerald-100 flex items-center justify-center">
<span className="text-xs font-bold text-emerald-700">{post.author.name[0]?.toUpperCase()}</span>
</div> </div>
<p className="text-sm text-gray-300 whitespace-pre-wrap">{post.content}</p> <span className="text-sm font-semibold text-gray-900">{post.author.name}</span>
</div>
<span className="text-xs text-gray-400">{new Date(post.createdAt).toLocaleDateString()}</span>
</div>
<p className="text-sm text-gray-700 whitespace-pre-wrap">{post.content}</p>
{post.shariahStatus !== 'approved' && ( {post.shariahStatus !== 'approved' && (
<div className="flex items-center gap-1 text-yellow-500 text-xs pt-1"> <div className="flex items-center gap-1 text-yellow-600 text-xs pt-1">
<ShieldAlert size={12} /> Pending shariah review <ShieldAlert size={12} /> Pending shariah review
</div> </div>
)} )}
@@ -149,29 +169,34 @@ export default function ThreadDetailPage() {
)} )}
</div> </div>
{/* Reply form */}
{token ? ( {token ? (
<form onSubmit={handleReply} className="bg-[#111118] border border-gray-800 rounded-lg p-4 space-y-3"> <form onSubmit={handleReply} className="bg-white border border-gray-100 shadow-sm rounded-2xl p-4 space-y-3">
<textarea <textarea
placeholder="Write your reply..." placeholder="Write your reply..."
value={reply} value={reply}
onChange={e => setReply(e.target.value)} onChange={e => setReply(e.target.value)}
required required
rows={3} rows={3}
className="w-full bg-[#0a0a0f] border border-gray-700 rounded px-3 py-2 text-sm focus:border-[#D4AF37] outline-none resize-none" className="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-sm text-gray-900 placeholder-gray-400 focus:border-emerald-400 outline-none resize-none"
/> />
{replyError && <p className="text-red-500 text-xs">{replyError}</p>} {replyError && <p className="text-red-500 text-xs">{replyError}</p>}
<button type="submit" disabled={submitting || !reply.trim()} <button
className="flex items-center gap-1 bg-[#D4AF37] text-[#0a0a0f] px-4 py-2 rounded text-sm font-semibold disabled:opacity-50 hover:bg-[#C9A84C] transition"> type="submit"
<Send size={16} /> {submitting ? 'Posting...' : 'Post Reply'} disabled={submitting || !reply.trim()}
className="flex items-center gap-1.5 bg-emerald-600 text-white px-4 py-2.5 rounded-xl text-sm font-semibold disabled:opacity-50 active:scale-[0.97] transition-transform"
>
<Send size={15} /> {submitting ? 'Posting...' : 'Post Reply'}
</button> </button>
</form> </form>
) : ( ) : (
<div className="bg-[#111118] border border-gray-800 rounded-lg p-4 text-center"> <div className="bg-white border border-gray-100 shadow-sm rounded-2xl p-4 text-center">
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500">
<a href="/login" className="text-[#D4AF37] hover:underline font-semibold">Sign in</a> to reply to this thread. <a href="/login" className="text-emerald-600 font-semibold">Sign in</a> to reply to this thread.
</p> </p>
</div> </div>
)} )}
</div> </div>
</div>
) )
} }
src/app/halal-monitor/page.tsx
+41 -35
View File
@@ -27,24 +27,24 @@ interface MapCenter {
function UpgradeCTA() { function UpgradeCTA() {
return ( return (
<div className="max-w-6xl mx-auto p-8 flex flex-col items-center justify-center min-h-[60vh] text-center space-y-4"> <div className="min-h-dvh bg-[#f5f4f0] pb-24 flex flex-col items-center justify-center px-6 text-center space-y-4">
<Crown size={48} className="text-[#D4AF37]" /> <div className="w-16 h-16 rounded-2xl bg-amber-50 flex items-center justify-center">
<h1 className="text-2xl font-bold text-[#D4AF37]">Halal Monitor</h1> <Crown size={32} className="text-amber-500" />
<p className="text-gray-400 max-w-md"> </div>
<h1 className="text-2xl font-bold text-gray-900">Halal Monitor</h1>
<p className="text-gray-500 max-w-md text-sm">
Find mosques and halal restaurants anywhere in the world. Available to Premium members. Find mosques and halal restaurants anywhere in the world. Available to Premium members.
</p> </p>
<div className="bg-[#111118] border border-gray-800 rounded-lg p-6 max-w-sm w-full space-y-3"> <div className="bg-white border border-gray-100 shadow-md rounded-3xl p-6 max-w-sm w-full space-y-3">
<Crown size={32} className="text-[#D4AF37] mx-auto" /> <ul className="text-sm text-gray-500 space-y-2 text-left">
<h2 className="font-bold">Upgrade to Premium</h2> <li className="flex items-center gap-2"><span className="text-emerald-500">✓</span> Mosques and prayer spaces worldwide</li>
<ul className="text-sm text-gray-400 space-y-1 text-left"> <li className="flex items-center gap-2"><span className="text-emerald-500">✓</span> Halal restaurants near you</li>
<li>• Mosques and prayer spaces worldwide</li> <li className="flex items-center gap-2"><span className="text-emerald-500">✓</span> Bookmark favourite places</li>
<li>• Halal restaurants near you</li> <li className="flex items-center gap-2"><span className="text-emerald-500">✓</span> City search anywhere in the world</li>
<li>• Bookmark favourite places</li>
<li>• City search anywhere in the world</li>
</ul> </ul>
<a <a
href="/upgrade" href="/upgrade"
className="block w-full bg-[#D4AF37] text-[#0a0a0f] py-2 rounded font-semibold hover:bg-[#C9A84C] transition text-center" className="block w-full bg-emerald-600 text-white py-3.5 rounded-2xl font-bold active:scale-[0.97] transition-transform text-center"
> >
Upgrade Now Upgrade Now
</a> </a>
@@ -55,15 +55,17 @@ function UpgradeCTA() {
function LoginGate() { function LoginGate() {
return ( return (
<div className="max-w-6xl mx-auto p-8 flex flex-col items-center justify-center min-h-[60vh] text-center space-y-4"> <div className="min-h-dvh bg-[#f5f4f0] pb-24 flex flex-col items-center justify-center px-6 text-center space-y-4">
<Lock size={48} className="text-gray-600" /> <div className="w-16 h-16 rounded-2xl bg-gray-100 flex items-center justify-center">
<h1 className="text-2xl font-bold text-[#D4AF37]">Halal Monitor</h1> <Lock size={32} className="text-gray-400" />
<p className="text-gray-400 max-w-md"> </div>
<h1 className="text-2xl font-bold text-gray-900">Halal Monitor</h1>
<p className="text-gray-500 max-w-md text-sm">
Sign in to access the global halal map — mosques, prayer spaces, and halal restaurants near you. Sign in to access the global halal map — mosques, prayer spaces, and halal restaurants near you.
</p> </p>
<a <a
href="/login" href="/login"
className="inline-flex items-center gap-2 bg-[#D4AF37] text-[#0a0a0f] px-6 py-2 rounded font-semibold hover:bg-[#C9A84C] transition" className="inline-flex items-center gap-2 bg-emerald-600 text-white px-8 py-4 rounded-2xl font-bold active:scale-[0.97] transition-transform"
> >
Sign In Sign In
</a> </a>
@@ -190,7 +192,11 @@ export default function HalalMonitorPage() {
} }
if (authLoading) { if (authLoading) {
return <div className="p-8 text-center text-gray-500 animate-pulse">Loading...</div> return (
<div className="min-h-dvh bg-[#f5f4f0] pb-24 flex items-center justify-center">
<div className="w-8 h-8 rounded-full border-2 border-emerald-300 border-t-emerald-600 animate-spin" />
</div>
)
} }
if (!token || !user) return <LoginGate /> if (!token || !user) return <LoginGate />
if (!user.isPremium && !user.isPro) return <UpgradeCTA /> if (!user.isPremium && !user.isPro) return <UpgradeCTA />
@@ -201,35 +207,35 @@ export default function HalalMonitorPage() {
return ( return (
<div className="flex flex-col h-[calc(100vh-3.5rem)]"> <div className="flex flex-col h-[calc(100vh-3.5rem)]">
{/* Toolbar */} {/* Toolbar */}
<div className="bg-[#111118] border-b border-gray-800 px-4 py-2 flex items-center gap-3 shrink-0 flex-wrap"> <div className="bg-white border-b border-gray-100 px-4 py-2.5 flex items-center gap-3 shrink-0 flex-wrap">
<div className="flex items-center gap-2"> <div className="flex items-center gap-1.5">
<Crown size={16} className="text-[#D4AF37]" /> <Crown size={15} className="text-amber-500" />
<span className="text-sm font-semibold text-[#D4AF37]">Halal Monitor</span> <span className="text-sm font-semibold text-gray-900">Halal Monitor</span>
</div> </div>
<form onSubmit={handleCitySearch} className="flex gap-2 flex-1 max-w-sm"> <form onSubmit={handleCitySearch} className="flex gap-2 flex-1 max-w-sm">
<div className="relative flex-1"> <div className="relative flex-1">
<Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-500" /> <Search size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-400" />
<input <input
type="text" type="text"
placeholder="Search city..." placeholder="Search city..."
value={citySearch} value={citySearch}
onChange={e => setCitySearch(e.target.value)} onChange={e => setCitySearch(e.target.value)}
className="w-full bg-[#0a0a0f] border border-gray-700 rounded pl-8 pr-3 py-1.5 text-xs focus:border-[#D4AF37] outline-none" className="w-full bg-gray-50 border border-gray-200 rounded-xl pl-8 pr-3 py-1.5 text-xs text-gray-900 placeholder-gray-400 focus:border-emerald-400 outline-none"
/> />
</div> </div>
<button type="submit" className="bg-[#D4AF37] text-[#0a0a0f] px-3 py-1.5 rounded text-xs font-semibold hover:bg-[#C9A84C] transition"> <button type="submit" className="bg-emerald-600 text-white px-3 py-1.5 rounded-xl text-xs font-semibold active:scale-[0.97] transition-transform">
Go Go
</button> </button>
</form> </form>
<button <button
onClick={handleGeolocate} onClick={handleGeolocate}
className="flex items-center gap-1 text-xs text-gray-400 hover:text-[#D4AF37] transition" className="flex items-center gap-1 text-xs text-gray-500 active:text-emerald-600 transition"
> >
<Navigation size={14} /> Near me <Navigation size={13} /> Near me
</button> </button>
{loading && <Loader2 size={14} className="animate-spin text-[#D4AF37]" />} {loading && <Loader2 size={14} className="animate-spin text-emerald-600" />}
{places.length > 0 && ( {places.length > 0 && (
<span className="text-xs text-gray-500 ml-auto"> <span className="text-xs text-gray-400 ml-auto">
{mosques.length} mosques · {restaurants.length} restaurants {mosques.length} mosques · {restaurants.length} restaurants
</span> </span>
)} )}
@@ -237,8 +243,8 @@ export default function HalalMonitorPage() {
{/* Error bar */} {/* Error bar */}
{error && ( {error && (
<div className="bg-red-900/20 border-b border-red-800 px-4 py-2 flex items-center justify-between shrink-0"> <div className="bg-red-50 border-b border-red-100 px-4 py-2 flex items-center justify-between shrink-0">
<span className="text-xs text-red-400">{error}</span> <span className="text-xs text-red-600">{error}</span>
<button onClick={() => setError(null)}><X size={14} className="text-red-400" /></button> <button onClick={() => setError(null)}><X size={14} className="text-red-400" /></button>
</div> </div>
)} )}
@@ -246,12 +252,12 @@ export default function HalalMonitorPage() {
{/* Map */} {/* Map */}
<div className="flex-1 relative"> <div className="flex-1 relative">
{!center ? ( {!center ? (
<div className="absolute inset-0 flex flex-col items-center justify-center text-center space-y-4"> <div className="absolute inset-0 flex flex-col items-center justify-center text-center space-y-4 bg-[#f5f4f0]">
<MapPin size={40} className="text-gray-700" /> <MapPin size={40} className="text-gray-300" />
<p className="text-gray-500 text-sm">Search a city or use your location to find halal places.</p> <p className="text-gray-500 text-sm">Search a city or use your location to find halal places.</p>
<button <button
onClick={handleGeolocate} onClick={handleGeolocate}
className="flex items-center gap-2 bg-[#D4AF37] text-[#0a0a0f] px-4 py-2 rounded text-sm font-semibold hover:bg-[#C9A84C] transition" className="flex items-center gap-2 bg-emerald-600 text-white px-5 py-3 rounded-2xl text-sm font-semibold active:scale-[0.97] transition-transform"
> >
<Navigation size={16} /> Use My Location <Navigation size={16} /> Use My Location
</button> </button>