From 857e4c948aad8bbbf204f2df778fc2e9f01303ef Mon Sep 17 00:00:00 2001 From: FalahMobile Date: Mon, 15 Jun 2026 09:42:26 +0100 Subject: [PATCH] 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 --- .gitignore | 51 +++++++ eslint.config.mjs | 13 ++ next-env.d.ts | 6 + postcss.config.mjs | 6 + src/app/dhikr/page.tsx | 213 +++++++++++++++------------- src/app/forum/page.tsx | 72 +++++----- src/app/globals.css | 15 +- src/app/home/page.tsx | 201 ++++++++++++++++++++++++++ src/app/login/page.tsx | 24 ++-- src/app/nur/page.tsx | 118 ++++++++-------- src/app/page.tsx | 2 +- src/app/prayer/page.tsx | 265 +++++++++++++++++++---------------- src/app/profile/page.tsx | 109 +++++++------- src/app/register/page.tsx | 32 ++--- src/app/souq/page.tsx | 90 ++++++------ src/app/upgrade/page.tsx | 67 ++++----- src/app/wallet/page.tsx | 66 ++++----- src/components/BottomNav.tsx | 48 +++++-- tsconfig.tsbuildinfo | 1 + 19 files changed, 878 insertions(+), 521 deletions(-) create mode 100644 .gitignore create mode 100644 eslint.config.mjs create mode 100644 next-env.d.ts create mode 100644 postcss.config.mjs create mode 100644 src/app/home/page.tsx create mode 100644 tsconfig.tsbuildinfo diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d812e88 --- /dev/null +++ b/.gitignore @@ -0,0 +1,51 @@ +# Dependencies +node_modules/ +package-lock.json +.opencode/memories.md + +# Build outputs +dist/ +.next/ +.netlify/ + +# Environment files +.env +.env.local +.env.production + +# IDE +.vscode/ +.idea/ +*.swp +*.swo + +# OS +.DS_Store +Thumbs.db + +# Logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Testing +coverage/ + +# Secrets (DO NOT COMMIT) +*.pem +*.key +*.crt +*.p12 + +# Backup files +*.bak +*.sql +!infrastructure/postgres/init.sql + +# Claude (workspace config, not project code) +.claude/* +!.claude/commands/ + +# Netlify +.functions/ \ No newline at end of file diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 0000000..c3da9f3 --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,13 @@ +import { dirname } from "path"; +import { fileURLToPath } from "url"; +import { FlatCompat } from "@eslint/eslintrc"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = dirname(__filename); + +const compat = new FlatCompat({ + baseDirectory: __dirname, +}); + +const eslintConfig = [...compat.extends("next/core-web-vitals")]; +export default eslintConfig; diff --git a/next-env.d.ts b/next-env.d.ts new file mode 100644 index 0000000..9edff1c --- /dev/null +++ b/next-env.d.ts @@ -0,0 +1,6 @@ +/// +/// +import "./.next/types/routes.d.ts"; + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/postcss.config.mjs b/postcss.config.mjs new file mode 100644 index 0000000..736723c --- /dev/null +++ b/postcss.config.mjs @@ -0,0 +1,6 @@ +const config = { + plugins: { + "@tailwindcss/postcss": {}, + }, +} +export default config diff --git a/src/app/dhikr/page.tsx b/src/app/dhikr/page.tsx index 28904d3..755b779 100644 --- a/src/app/dhikr/page.tsx +++ b/src/app/dhikr/page.tsx @@ -109,14 +109,14 @@ export default function DhikrPage() { if (!user) { return ( -
+
๐Ÿ“ฟ
-

Daily Dhikr

+

Daily Dhikr

Build a daily habit of remembrance. Sign in to track your streak.

@@ -125,53 +125,76 @@ export default function DhikrPage() { if (loading) { return ( -
-
+
+
) } return ( -
+
- {/* Header */} -
+ {/* Header gradient */} +

Daily Dhikr

-

100 remembrances ยท after prayer

+

100 remembrances ยท after prayer

-
- - {streak} + {/* Streak badge inside header */} +
+ + {streak}
- {/* Phase progress dots */} -
- {DHIKR_SEQUENCE.map((d, i) => ( -
- ))} + {/* Phase tabs โ€” below header */} +
+ {DHIKR_SEQUENCE.map((d, i) => { + const isActive = i === phase + const isDone = i < phase + return ( +
+
+ {d.transliteration} +
+
+
+ ) + })}
{/* Completed today (not just-finished) */} {todayCompleted && !justFinished ? (
-
- +
+
+ +
+

MashaAllah!

+

You've completed your daily dhikr

+
+ + {streak} day streak +
-

MashaAllah!

-

You've completed your daily dhikr

-
- - {streak} day streak -
-
@@ -180,91 +203,93 @@ export default function DhikrPage() { /* Completion screen */
โœจ
-

SubhanAllah!

-

100 remembrances complete

-
+

SubhanAllah!

+

100 remembrances complete

+
- {streak} day streak + {streak} day streak
-
+

“Whoever says SubhanAllah 33 times, Alhamdulillah 33 times, and Allahu Akbar 34 times after each prayerโ€ฆ”

-

โ€” Sahih Muslim

+

โ€” Sahih Muslim

-
) : ( /* Main counter */ -
- {/* Ring counter */} -
- + {/* Outer glow ring */} +
- {/* Dhikr text */} -
-

{current.arabic}

-

{current.transliteration}

-

{current.meaning}

+ {/* SVG progress ring */} + + {/* Track */} + + {/* Progress */} + + + + {/* Center content */} +
+ {count} + of {current.target} +
+ + + {/* Dhikr text below ring, inside card */} +
+

{current.arabic}

+

{current.transliteration}

+

{current.meaning}

+
-

Tap to count

+

Tap to count

)} - {/* Bottom progress */} + {/* Bottom progress bar */} {!justFinished && ( -
-
+
+
Total today {Math.min(totalCount, TOTAL)} / {TOTAL}
-
+
{ setToast(msg); setTimeout(() => setToast(''), 3000) } return ( -
+
{/* Header */} -
+
{view === 'threads' && ( - )}
-

{view === 'threads' && selectedCat ? selectedCat.name : 'Forum'}

-

+

{view === 'threads' && selectedCat ? selectedCat.name : 'Forum'}

+

{view === 'categories' ? 'Community discussions' : `${threads.length} threads`}

@@ -59,7 +59,7 @@ export default function ForumPage() { {token && ( @@ -68,36 +68,36 @@ export default function ForumPage() { {/* Loading */} {loading && ( -
+
{[...Array(4)].map((_, i) => ( -
+
))}
)} {/* Categories view */} {!loading && view === 'categories' && ( -
+
{categories.length === 0 ? (
๐Ÿ•Œ
-

No categories yet

+

No categories yet

) : categories.map(c => ( ))} @@ -106,25 +106,25 @@ export default function ForumPage() { {/* Threads view */} {!loading && view === 'threads' && ( -
+
{threads.length === 0 ? (
๐Ÿ’ฌ
-

No threads yet

-

Start the first discussion

+

No threads yet

+

Start the first discussion

) : threads.map(t => ( -
-

{t.title}

-

{t.content}

+
+

{t.title}

+

{t.content}

-
- {t.author.name[0]} +
+ {t.author.name[0]}
- {t.author.name} + {t.author.name}
-
+
{t._count.posts}
@@ -136,7 +136,7 @@ export default function ForumPage() { {/* Toast */} {toast && ( -
+
{toast}
)} @@ -182,38 +182,38 @@ function CreateThreadSheet({ token, categories, onClose, onCreated, showToast }: return (
-
+
e.stopPropagation()} >
-
-

New Thread

-
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" />