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/login/page.tsx
+12 -12
View File
@@ -30,13 +30,13 @@ export default function LoginPage() {
}
return (
<div className="min-h-dvh flex flex-col bg-[#0a0a0f] px-6">
<div className="min-h-dvh flex flex-col bg-white px-6">
{/* Brand */}
<div className="flex flex-col items-center pt-16 pb-10">
<div className="w-20 h-20 rounded-3xl bg-[#D4AF37]/10 border border-[#D4AF37]/25 flex items-center justify-center mb-5">
<span className="text-3xl font-bold text-[#D4AF37]">ف</span>
<div className="w-20 h-20 rounded-3xl bg-gradient-to-br from-emerald-600 to-teal-500 flex items-center justify-center mb-5 shadow-lg shadow-emerald-200">
<span className="text-3xl font-bold text-white">ف</span>
</div>
<h1 className="text-2xl font-bold text-white tracking-tight">Welcome back</h1>
<h1 className="text-2xl font-bold text-gray-900 tracking-tight">Welcome back</h1>
<p className="text-gray-500 text-sm mt-1">Sign in to your Falah account</p>
</div>
@@ -52,7 +52,7 @@ export default function LoginPage() {
required
autoComplete="email"
inputMode="email"
className="w-full bg-[#111118] border border-gray-800 rounded-2xl px-4 py-4 text-white placeholder-gray-700 focus:border-[#D4AF37]/60 focus:outline-none transition"
className="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-4 text-gray-900 placeholder-gray-400 focus:border-emerald-400 focus:outline-none transition"
/>
</div>
@@ -66,12 +66,12 @@ export default function LoginPage() {
onChange={e => setPassword(e.target.value)}
required
autoComplete="current-password"
className="w-full bg-[#111118] border border-gray-800 rounded-2xl px-4 py-4 pr-14 text-white placeholder-gray-700 focus:border-[#D4AF37]/60 focus:outline-none transition"
className="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-4 pr-14 text-gray-900 placeholder-gray-400 focus:border-emerald-400 focus:outline-none transition"
/>
<button
type="button"
onClick={() => setShowPass(v => !v)}
className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-600 p-1"
className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 p-1"
>
{showPass ? <EyeOff size={20} /> : <Eye size={20} />}
</button>
@@ -79,15 +79,15 @@ export default function LoginPage() {
</div>
{error && (
<div className="bg-red-500/10 border border-red-500/20 rounded-2xl px-4 py-3">
<p className="text-red-400 text-sm">{error}</p>
<div className="bg-red-50 border border-red-200 rounded-xl px-4 py-3">
<p className="text-red-500 text-sm">{error}</p>
</div>
)}
<button
type="submit"
disabled={loading}
className="w-full bg-[#D4AF37] text-[#0a0a0f] py-4 rounded-2xl font-bold text-base disabled:opacity-50 active:scale-[0.98] transition-all mt-2"
className="w-full bg-emerald-600 text-white py-4 rounded-2xl font-bold text-base disabled:opacity-50 active:scale-[0.97] transition-all mt-2 shadow-sm shadow-emerald-200"
>
{loading ? 'Signing in...' : 'Sign In'}
</button>
@@ -96,11 +96,11 @@ export default function LoginPage() {
<div className="py-8 space-y-4 text-center">
<p className="text-sm text-gray-500">
No account?{' '}
<Link href="/register" className="text-[#D4AF37] font-semibold">
<Link href="/register" className="text-emerald-600 font-semibold">
Create one free
</Link>
</p>
<p className="text-xs text-gray-800">بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ</p>
<p className="text-xs text-gray-300">بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ</p>
</div>
</div>
)