Redesign all pages to light theme (Qalby-inspired mobile UI)
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
+60
-49
@@ -56,63 +56,69 @@ export default function ProfilePage() {
|
||||
}
|
||||
|
||||
const tier = user?.isPro ? 'Pro' : user?.isPremium ? 'Premium' : 'Free'
|
||||
const tierColor = user?.isPro ? 'text-purple-400' : user?.isPremium ? 'text-[#D4AF37]' : 'text-gray-500'
|
||||
const tierBg = user?.isPro ? 'bg-purple-400/10 border-purple-400/20' : user?.isPremium ? 'bg-[#D4AF37]/10 border-[#D4AF37]/20' : 'bg-gray-800/50 border-gray-700/50'
|
||||
const tierColor = user?.isPro ? 'text-purple-600' : user?.isPremium ? 'text-[#D4AF37]' : 'text-gray-500'
|
||||
const tierBg = user?.isPro ? 'bg-purple-50 border-purple-200' : user?.isPremium ? 'bg-amber-50 border-amber-200' : 'bg-gray-100 border-gray-200'
|
||||
|
||||
if (authLoading) return <ProfileSkeleton />
|
||||
if (!token) return null
|
||||
|
||||
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-5">
|
||||
<h1 className="text-xl font-bold text-white">Profile</h1>
|
||||
</div>
|
||||
|
||||
{/* Avatar + info card */}
|
||||
<div className="mx-4 bg-[#111118] border border-gray-800/60 rounded-3xl p-5 mb-4">
|
||||
{/* Avatar / Hero Card */}
|
||||
<div className="bg-gradient-to-br from-emerald-700 to-teal-600 px-5 pt-12 pb-8 mb-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-16 h-16 rounded-2xl bg-[#D4AF37]/10 border border-[#D4AF37]/20 flex items-center justify-center shrink-0">
|
||||
<User size={28} className="text-[#D4AF37]" />
|
||||
{/* Avatar circle */}
|
||||
<div className="w-16 h-16 rounded-full bg-white/20 border-2 border-white flex items-center justify-center shrink-0">
|
||||
<User size={28} className="text-white" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h2 className="text-lg font-bold text-white truncate">{user?.name || 'User'}</h2>
|
||||
<p className="text-sm text-gray-500 truncate">{user?.email || ''}</p>
|
||||
<p className="text-sm text-white/70 truncate">{user?.email || ''}</p>
|
||||
{/* Tier badge */}
|
||||
<div className={`inline-flex items-center gap-1.5 mt-2 border rounded-full px-2.5 py-1 ${tierBg}`}>
|
||||
<Star size={11} className={tierColor} />
|
||||
<span className={`text-xs font-semibold ${tierColor}`}>{tier}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Gold premium badge for paid users */}
|
||||
{(user?.isPremium || user?.isPro) && (
|
||||
<div className="shrink-0 bg-gradient-to-br from-[#D4AF37] to-amber-500 rounded-xl px-3 py-1.5">
|
||||
<Crown size={14} className="text-white" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 gap-3 mx-4 mb-4">
|
||||
<div className="bg-[#111118] border border-gray-800/60 rounded-2xl p-4">
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-4">
|
||||
<Wallet size={20} className="text-[#D4AF37] mb-2" />
|
||||
<p className="text-2xl font-bold text-white">{user?.flhBalance?.toLocaleString() || 0}</p>
|
||||
<p className="text-xs text-gray-600 mt-0.5">FLH Balance</p>
|
||||
<p className="text-2xl font-bold text-gray-900">{user?.flhBalance?.toLocaleString() || 0}</p>
|
||||
<p className="text-xs text-gray-500 mt-0.5">FLH Balance</p>
|
||||
</div>
|
||||
<div className="bg-[#111118] border border-gray-800/60 rounded-2xl p-4">
|
||||
<ShoppingBag size={20} className="text-blue-400 mb-2" />
|
||||
<p className="text-2xl font-bold text-white">0</p>
|
||||
<p className="text-xs text-gray-600 mt-0.5">Purchases</p>
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-4">
|
||||
<ShoppingBag size={20} className="text-emerald-500 mb-2" />
|
||||
<p className="text-2xl font-bold text-gray-900">0</p>
|
||||
<p className="text-xs text-gray-500 mt-0.5">Purchases</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Upgrade CTA — only for free users */}
|
||||
{!user?.isPremium && !user?.isPro && (
|
||||
<div className="mx-4 mb-4">
|
||||
<Link href="/upgrade" className="block bg-gradient-to-r from-[#D4AF37]/15 to-[#D4AF37]/5 border border-[#D4AF37]/25 rounded-3xl p-5">
|
||||
<Link
|
||||
href="/upgrade"
|
||||
className="block bg-gradient-to-r from-amber-50 to-yellow-50 border border-[#D4AF37]/30 rounded-3xl p-5 active:scale-[0.97] transition-all"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-2xl bg-[#D4AF37]/15 flex items-center justify-center">
|
||||
<Crown size={20} className="text-[#D4AF37]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold text-[#D4AF37] text-sm">Go Premium</p>
|
||||
<p className="text-xs text-gray-500">Unlock scholars & unlimited chat</p>
|
||||
<p className="font-bold text-gray-900 text-sm">Go Premium</p>
|
||||
<p className="text-xs text-gray-500">Unlock scholars & unlimited chat</p>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight size={18} className="text-[#D4AF37]" />
|
||||
@@ -122,29 +128,29 @@ export default function ProfilePage() {
|
||||
)}
|
||||
|
||||
{/* Edit Profile Form */}
|
||||
<div className="mx-4 bg-[#111118] border border-gray-800/60 rounded-3xl p-5 mb-4 space-y-4">
|
||||
<div className="mx-4 bg-white rounded-2xl shadow-sm border border-gray-100 p-5 mb-4 space-y-4">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Shield size={15} className="text-[#D4AF37]" />
|
||||
<h2 className="font-bold text-white text-sm">Edit Profile</h2>
|
||||
<Shield size={15} className="text-emerald-600" />
|
||||
<h2 className="font-bold text-gray-900 text-sm">Edit Profile</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-semibold text-gray-600 uppercase tracking-widest">Preferred Name</label>
|
||||
<label className="text-xs font-semibold text-gray-500 uppercase tracking-widest">Preferred Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={profile.preferredName}
|
||||
onChange={e => setProfile(p => ({ ...p, preferredName: e.target.value }))}
|
||||
placeholder="How Nur addresses you"
|
||||
className="w-full bg-[#0d0d14] border border-gray-800 rounded-xl px-4 py-3 text-sm text-white placeholder-gray-700 focus:border-[#D4AF37]/50 focus:outline-none"
|
||||
className="w-full bg-[#f5f4f0] 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 transition"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-semibold text-gray-600 uppercase tracking-widest">Experience Level</label>
|
||||
<label className="text-xs font-semibold text-gray-500 uppercase tracking-widest">Experience Level</label>
|
||||
<select
|
||||
value={profile.experienceLevel}
|
||||
onChange={e => setProfile(p => ({ ...p, experienceLevel: e.target.value }))}
|
||||
className="w-full bg-[#0d0d14] border border-gray-800 rounded-xl px-4 py-3 text-sm text-white focus:border-[#D4AF37]/50 focus:outline-none"
|
||||
className="w-full bg-[#f5f4f0] border border-gray-200 rounded-xl px-4 py-3 text-sm text-gray-900 focus:border-emerald-400 focus:outline-none transition"
|
||||
>
|
||||
<option value="new">New to Islam</option>
|
||||
<option value="growing">Growing in Faith</option>
|
||||
@@ -153,11 +159,11 @@ export default function ProfilePage() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-semibold text-gray-600 uppercase tracking-widest">Madhab</label>
|
||||
<label className="text-xs font-semibold text-gray-500 uppercase tracking-widest">Madhab</label>
|
||||
<select
|
||||
value={profile.madhab}
|
||||
onChange={e => setProfile(p => ({ ...p, madhab: e.target.value }))}
|
||||
className="w-full bg-[#0d0d14] border border-gray-800 rounded-xl px-4 py-3 text-sm text-white focus:border-[#D4AF37]/50 focus:outline-none"
|
||||
className="w-full bg-[#f5f4f0] border border-gray-200 rounded-xl px-4 py-3 text-sm text-gray-900 focus:border-emerald-400 focus:outline-none transition"
|
||||
>
|
||||
<option value="unspecified">Madhab Neutral</option>
|
||||
<option value="hanafi">Hanafi</option>
|
||||
@@ -170,7 +176,7 @@ export default function ProfilePage() {
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className="w-full flex items-center justify-center gap-2 bg-[#D4AF37] text-[#0a0a0f] py-4 rounded-xl font-bold text-sm disabled:opacity-50 active:scale-[0.98] transition-all"
|
||||
className="w-full flex items-center justify-center gap-2 bg-emerald-600 text-white py-4 rounded-xl font-bold text-sm disabled:opacity-50 active:scale-[0.97] transition-all"
|
||||
>
|
||||
<Save size={16} /> {saving ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
@@ -178,15 +184,18 @@ export default function ProfilePage() {
|
||||
|
||||
{/* Halal Monitor link */}
|
||||
<div className="mx-4 mb-4">
|
||||
<Link href="/halal-monitor" className="flex items-center gap-3 bg-[#111118] border border-gray-800/60 rounded-2xl px-5 py-4">
|
||||
<div className="w-9 h-9 rounded-xl bg-emerald-500/10 flex items-center justify-center">
|
||||
<Sparkles size={17} className="text-emerald-400" />
|
||||
<Link
|
||||
href="/halal-monitor"
|
||||
className="flex items-center gap-3 bg-white rounded-2xl shadow-sm border border-gray-100 px-5 py-4 active:scale-[0.97] transition-all"
|
||||
>
|
||||
<div className="w-9 h-9 rounded-xl bg-emerald-50 flex items-center justify-center">
|
||||
<Sparkles size={17} className="text-emerald-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-white">Halal Monitor</p>
|
||||
<p className="text-xs text-gray-600">Find mosques & halal food near you</p>
|
||||
<p className="text-sm font-semibold text-gray-900">Halal Monitor</p>
|
||||
<p className="text-xs text-gray-500">Find mosques & halal food near you</p>
|
||||
</div>
|
||||
<ChevronRight size={16} className="text-gray-600" />
|
||||
<ChevronRight size={16} className="text-gray-400" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -200,7 +209,7 @@ export default function ProfilePage() {
|
||||
}
|
||||
router.push('/login')
|
||||
}}
|
||||
className="w-full flex items-center justify-center gap-2 border border-red-900/50 text-red-500 bg-red-500/5 rounded-2xl py-4 text-sm font-semibold active:bg-red-500/10 transition"
|
||||
className="w-full flex items-center justify-center gap-2 border border-red-200 text-red-500 bg-red-50 rounded-2xl py-4 text-sm font-semibold active:scale-[0.97] transition-all"
|
||||
>
|
||||
<LogOut size={16} /> Sign Out
|
||||
</button>
|
||||
@@ -211,22 +220,24 @@ export default function ProfilePage() {
|
||||
|
||||
function ProfileSkeleton() {
|
||||
return (
|
||||
<div className="min-h-dvh bg-[#0a0a0f] pb-24 animate-pulse">
|
||||
<div className="px-5 pt-6 pb-5"><div className="h-7 w-20 bg-gray-800 rounded-xl" /></div>
|
||||
<div className="mx-4 bg-[#111118] border border-gray-800/60 rounded-3xl p-5 mb-4">
|
||||
<div className="min-h-dvh bg-[#f5f4f0] pb-24 animate-pulse">
|
||||
{/* Hero skeleton */}
|
||||
<div className="bg-gradient-to-br from-emerald-700 to-teal-600 px-5 pt-12 pb-8 mb-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-16 h-16 rounded-2xl bg-gray-800" />
|
||||
<div className="w-16 h-16 rounded-full bg-white/30" />
|
||||
<div className="space-y-2 flex-1">
|
||||
<div className="h-5 w-32 bg-gray-800 rounded-lg" />
|
||||
<div className="h-4 w-48 bg-gray-800 rounded-lg" />
|
||||
<div className="h-6 w-20 bg-gray-800 rounded-full" />
|
||||
<div className="h-5 w-32 bg-white/30 rounded-lg" />
|
||||
<div className="h-4 w-48 bg-white/20 rounded-lg" />
|
||||
<div className="h-6 w-20 bg-white/20 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3 mx-4 mb-4">
|
||||
{[...Array(2)].map((_, i) => <div key={i} className="bg-[#111118] border border-gray-800/60 rounded-2xl p-4 h-24" />)}
|
||||
{[...Array(2)].map((_, i) => (
|
||||
<div key={i} className="bg-white rounded-2xl border border-gray-100 p-4 h-24" />
|
||||
))}
|
||||
</div>
|
||||
<div className="mx-4 bg-[#111118] border border-gray-800/60 rounded-3xl p-5 h-64" />
|
||||
<div className="mx-4 bg-white rounded-2xl border border-gray-100 p-5 h-64" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user