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

Redesign all pages to light theme (Qalby-inspired mobile UI)

Browse Source 
Complete UI overhaul replacing dark gold theme with a clean mobile-first
light theme: gradient emerald headers, white card components, light backgrounds,
emerald/amber CTAs, and a new home dashboard with feature grid navigation.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
FalahMobile
2026-06-15 09:42:26 +01:00
parent 1834370e40
commit 857e4c948a
19 changed files with 878 additions and 521 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/forum/page.tsx
+36 -36
View File
@@ -39,19 +39,19 @@ export default function ForumPage() {
const showToast = (msg: string) => { setToast(msg); setTimeout(() => setToast(''), 3000) }
return (
<div className="min-h-dvh bg-[#0a0a0f] pb-24">
<div className="min-h-dvh bg-[#f5f4f0] pb-24">
{/* Header */}
<div className="px-5 pt-6 pb-4 flex items-center justify-between">
<div className="px-5 pt-8 pb-4 bg-white flex items-center justify-between">
<div className="flex items-center gap-3">
{view === 'threads' && (
<button onClick={() => { setView('categories'); setSelectedCat(null) }} className="w-9 h-9 flex items-center justify-center rounded-xl bg-gray-800/60 active:opacity-60">
<ArrowLeft size={18} className="text-gray-400" />
<button onClick={() => { setView('categories'); setSelectedCat(null) }} className="w-9 h-9 flex items-center justify-center rounded-xl bg-gray-100 active:opacity-60">
<ArrowLeft size={18} className="text-gray-500" />
</button>
)}
<div>
<h1 className="text-xl font-bold text-white">{view === 'threads' && selectedCat ? selectedCat.name : 'Forum'}</h1>
<p className="text-[11px] text-gray-600 mt-0.5">
<h1 className="text-xl font-bold text-gray-900">{view === 'threads' && selectedCat ? selectedCat.name : 'Forum'}</h1>
<p className="text-[11px] text-gray-400 mt-0.5">
{view === 'categories' ? 'Community discussions' : `${threads.length} threads`}
</p>
</div>
@@ -59,7 +59,7 @@ export default function ForumPage() {
{token && (
<button
onClick={() => setShowCreate(true)}
className="flex items-center gap-1.5 bg-[#D4AF37] text-[#0a0a0f] px-4 py-2.5 rounded-xl font-bold text-sm active:scale-[0.96] transition-transform"
className="flex items-center gap-1.5 bg-emerald-600 text-white px-4 py-2.5 rounded-xl font-bold text-sm active:scale-[0.97] transition-transform"
>
<Plus size={16} /> Post
</button>
@@ -68,36 +68,36 @@ export default function ForumPage() {
{/* Loading */}
{loading && (
<div className="px-5 space-y-3">
<div className="px-5 pt-4 space-y-3">
{[...Array(4)].map((_, i) => (
<div key={i} className="h-20 rounded-2xl bg-gray-900/60 animate-pulse" />
<div key={i} className="h-20 rounded-2xl bg-gray-200 animate-pulse" />
))}
</div>
)}
{/* Categories view */}
{!loading && view === 'categories' && (
<div className="px-5 space-y-3">
<div className="px-5 pt-4 space-y-3">
{categories.length === 0 ? (
<div className="text-center py-16">
<div className="text-4xl mb-3">🕌</div>
<p className="text-gray-500 text-sm">No categories yet</p>
<p className="text-gray-400 text-sm">No categories yet</p>
</div>
) : categories.map(c => (
<button
key={c.id}
onClick={() => { setSelectedCat(c); setView('threads'); loadThreads(c.id) }}
className="w-full text-left bg-[#111118] border border-gray-800/60 rounded-2xl p-4 active:scale-[0.99] transition-transform"
className="w-full text-left bg-white rounded-2xl shadow-sm border border-gray-100 p-4 active:scale-[0.97] transition-transform"
>
<div className="flex items-center gap-3">
<span className="text-2xl w-10 h-10 flex items-center justify-center bg-gray-800/60 rounded-xl shrink-0">
<span className="text-2xl w-10 h-10 flex items-center justify-center bg-emerald-50 rounded-xl shrink-0">
{c.icon || '💬'}
</span>
<div className="flex-1 min-w-0">
<h3 className="font-semibold text-white text-sm">{c.name}</h3>
<p className="text-xs text-gray-500 mt-0.5 line-clamp-1">{c.description}</p>
<h3 className="font-semibold text-gray-900 text-sm">{c.name}</h3>
<p className="text-xs text-gray-400 mt-0.5 line-clamp-1">{c.description}</p>
</div>
<ChevronRight size={16} className="text-gray-700 shrink-0" />
<ChevronRight size={16} className="text-gray-300 shrink-0" />
</div>
</button>
))}
@@ -106,25 +106,25 @@ export default function ForumPage() {
{/* Threads view */}
{!loading && view === 'threads' && (
<div className="px-5 space-y-3">
<div className="px-5 pt-4 space-y-3">
{threads.length === 0 ? (
<div className="text-center py-16">
<div className="text-4xl mb-3">💬</div>
<p className="text-white font-semibold mb-1">No threads yet</p>
<p className="text-gray-500 text-sm">Start the first discussion</p>
<p className="text-gray-900 font-semibold mb-1">No threads yet</p>
<p className="text-gray-400 text-sm">Start the first discussion</p>
</div>
) : threads.map(t => (
<div key={t.id} className="bg-[#111118] border border-gray-800/60 rounded-2xl p-4">
<h3 className="font-semibold text-white text-sm leading-snug mb-1">{t.title}</h3>
<p className="text-xs text-gray-500 line-clamp-2 mb-3">{t.content}</p>
<div key={t.id} className="bg-white rounded-2xl shadow-sm border border-gray-100 p-4">
<h3 className="font-semibold text-gray-900 text-sm leading-snug mb-1">{t.title}</h3>
<p className="text-xs text-gray-400 line-clamp-2 mb-3">{t.content}</p>
<div className="flex items-center justify-between">
<div className="flex items-center gap-1.5">
<div className="w-5 h-5 rounded-full bg-[#D4AF37]/15 flex items-center justify-center">
<span className="text-[9px] text-[#D4AF37] font-bold">{t.author.name[0]}</span>
<div className="w-5 h-5 rounded-full bg-emerald-100 flex items-center justify-center">
<span className="text-[9px] text-emerald-700 font-bold">{t.author.name[0]}</span>
</div>
<span className="text-[11px] text-gray-600">{t.author.name}</span>
<span className="text-[11px] text-gray-400">{t.author.name}</span>
</div>
<div className="flex items-center gap-1 text-[11px] text-gray-700">
<div className="flex items-center gap-1 text-[11px] text-gray-400">
<MessageCircle size={12} />
{t._count.posts}
</div>
@@ -136,7 +136,7 @@ export default function ForumPage() {
{/* Toast */}
{toast && (
<div className="fixed bottom-24 left-5 right-5 bg-[#1a1a26] border border-gray-700 rounded-2xl px-4 py-3 text-sm text-white text-center z-50 shadow-xl">
<div className="fixed bottom-24 left-5 right-5 bg-gray-900 text-white rounded-2xl px-4 py-3 text-sm text-center z-50 shadow-xl">
{toast}
</div>
)}
@@ -182,38 +182,38 @@ function CreateThreadSheet({ token, categories, onClose, onCreated, showToast }:
return (
<div className="fixed inset-0 z-50 flex flex-col justify-end" onClick={onClose}>
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
<div className="absolute inset-0 bg-black/40 backdrop-blur-sm" />
<form
onSubmit={handleSubmit}
className="relative bg-[#0f0f18] border border-gray-800/60 rounded-t-3xl p-6 pb-10 space-y-4"
className="relative bg-white rounded-t-3xl p-6 pb-10 space-y-4"
onClick={e => e.stopPropagation()}
>
<div className="flex items-center justify-between mb-1">
<div className="w-10 h-1 bg-gray-700 rounded-full mx-auto absolute left-1/2 -translate-x-1/2 top-3" />
<h2 className="text-lg font-bold text-white mt-2">New Thread</h2>
<button type="button" onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-full bg-gray-800 mt-2">
<div className="w-10 h-1 bg-gray-200 rounded-full mx-auto absolute left-1/2 -translate-x-1/2 top-3" />
<h2 className="text-lg font-bold text-gray-900 mt-2">New Thread</h2>
<button type="button" onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 mt-2">
<X size={15} className="text-gray-400" />
</button>
</div>
<select
value={categoryId} onChange={e => setCategoryId(e.target.value)}
className="w-full bg-[#0a0a0f] border border-gray-800 rounded-2xl px-4 py-4 text-sm text-white focus:border-[#D4AF37]/50 focus:outline-none"
className="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-3.5 text-sm text-gray-900 focus:border-emerald-400 focus:outline-none"
>
{categories.map(c => <option key={c.id} value={c.id}>{c.icon} {c.name}</option>)}
</select>
<input
type="text" placeholder="Thread title" value={title} onChange={e => setTitle(e.target.value)} required
className="w-full bg-[#0a0a0f] border border-gray-800 rounded-2xl px-4 py-4 text-sm text-white placeholder-gray-600 focus:border-[#D4AF37]/50 focus:outline-none"
className="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-4 text-sm text-gray-900 placeholder-gray-400 focus:border-emerald-400 focus:outline-none"
/>
<textarea
placeholder="Share your thoughts…" value={content} onChange={e => setContent(e.target.value)} required rows={4}
className="w-full bg-[#0a0a0f] border border-gray-800 rounded-2xl px-4 py-3 text-sm text-white placeholder-gray-600 focus:border-[#D4AF37]/50 focus: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 focus:outline-none resize-none"
/>
<button
type="submit" disabled={loading}
className="w-full bg-[#D4AF37] text-[#0a0a0f] py-4 rounded-2xl font-bold disabled:opacity-50 active:scale-[0.98] transition-transform"
className="w-full bg-emerald-600 text-white py-4 rounded-2xl font-bold disabled:opacity-50 active:scale-[0.97] transition-transform"
>
{loading ? 'Posting…' : 'Post Thread'}
</button>