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

fix: mobile-first UI redesign - bump all text to 12px+, 44px+ touch targets, reduced content density

Browse Source
This commit is contained in:
root
2026-06-15 11:07:41 +02:00
parent e479df82e2
commit 8f0ff9d47a
16 changed files with 192 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/forum/[threadId]/page.tsx
+7 -7
View File
@@ -248,7 +248,7 @@ export default function ThreadDetailPage() {
<Star size={12} className="text-[#D4AF37]" />
)}
</div>
<div className="flex items-center gap-1.5 text-[10px] text-gray-600">
<div className="flex items-center gap-1.5 text-xs text-gray-600">
<span className="text-gray-500">{thread.category.name}</span>
<span>·</span>
<span>{timeAgo(thread.createdAt)}</span>
@@ -259,7 +259,7 @@ export default function ThreadDetailPage() {
const Icon = SHARIAH_LABELS[thread.shariahStatus].icon;
return <Icon size={9} />;
})()}
<span className="text-[9px]">{SHARIAH_LABELS[thread.shariahStatus].label}</span>
<span className="text-[10px]">{SHARIAH_LABELS[thread.shariahStatus].label}</span>
</div>
</div>
</div>
@@ -310,7 +310,7 @@ export default function ThreadDetailPage() {
)}
</div>
</div>
<div className="flex items-center gap-1 text-[10px] text-gray-600">
<div className="flex items-center gap-1 text-xs text-gray-600">
<Clock size={9} />
<span>{timeAgo(post.createdAt)}</span>
</div>
@@ -324,7 +324,7 @@ export default function ThreadDetailPage() {
{/* Shariah compliance label */}
<div className={`flex items-center gap-0.5 ${shariahInfo.color}`}>
<ShariahIcon size={9} />
<span className="text-[9px]">{shariahInfo.label}</span>
<span className="text-[10px]">{shariahInfo.label}</span>
</div>
</div>
);
@@ -342,7 +342,7 @@ export default function ThreadDetailPage() {
</p>
<button
onClick={() => router.push("/profile")}
className="inline-flex items-center gap-1.5 bg-[#D4AF37]/15 border border-[#D4AF37]/30 rounded-xl px-4 py-2 text-xs font-medium text-[#D4AF37] active:bg-[#D4AF37]/25 transition"
className="inline-flex items-center gap-1.5 bg-[#D4AF37]/15 border border-[#D4AF37]/30 rounded-xl px-4 py-3 text-xs font-medium text-[#D4AF37] active:bg-[#D4AF37]/25 transition"
>
<Crown size={12} />
Upgrade Now
@@ -360,13 +360,13 @@ export default function ThreadDetailPage() {
className="w-full bg-transparent px-4 py-3 text-sm text-white placeholder-gray-600 focus:outline-none resize-none"
/>
<div className="flex items-center justify-between px-4 pb-3">
<span className="text-[10px] text-gray-600">
<span className="text-xs text-gray-600">
{replyContent.length}/5000
</span>
<button
type="submit"
disabled={submitting || !replyContent.trim()}
className="flex items-center gap-1.5 bg-[#D4AF37] text-[#0a0a0f] rounded-xl px-4 py-2 text-xs font-semibold transition active:bg-[#c5a233] disabled:opacity-50"
className="flex items-center gap-1.5 bg-[#D4AF37] text-[#0a0a0f] rounded-xl px-4 py-3 text-xs font-semibold transition active:bg-[#c5a233] disabled:opacity-50"
>
{submitting ? (
<>
src/app/forum/page.tsx
+14 -14
View File
@@ -222,7 +222,7 @@ export default function ForumPage() {
</div>
<div>
<h1 className="text-lg font-bold text-white">Forum</h1>
<p className="text-[10px] text-gray-500">Community Discussions</p>
<p className="text-xs text-gray-500">Community Discussions</p>
</div>
</div>
<div className="flex items-center gap-2">
@@ -237,7 +237,7 @@ export default function ForumPage() {
setCreateError(null);
setShowCreateModal(true);
}}
className="flex items-center gap-1.5 bg-[#D4AF37]/15 border border-[#D4AF37]/30 rounded-xl px-3 py-2 active:bg-[#D4AF37]/25 transition"
className="flex items-center gap-1.5 bg-[#D4AF37]/15 border border-[#D4AF37]/30 rounded-xl px-3 py-3 active:bg-[#D4AF37]/25 transition"
>
<Plus size={14} className="text-[#D4AF37]" />
<span className="text-xs font-medium text-[#D4AF37]">New Thread</span>
@@ -253,7 +253,7 @@ export default function ForumPage() {
<div className="flex items-center gap-2">
<Lock size={14} className="text-[#D4AF37] shrink-0" />
<div className="flex-1">
<p className="text-[11px] text-amber-300/90">
<p className="text-xs text-amber-300/90">
<span className="font-semibold">Free</span> members can browse.{" "}
<span className="text-[#D4AF37] font-semibold">Premium</span> or{" "}
<span className="text-purple-400 font-semibold">Pro</span> required to post.
@@ -261,7 +261,7 @@ export default function ForumPage() {
</div>
<button
onClick={() => router.push("/profile")}
className="text-[10px] font-semibold text-[#D4AF37] bg-[#D4AF37]/15 border border-[#D4AF37]/30 rounded-lg px-2.5 py-1.5 active:bg-[#D4AF37]/25 transition"
className="text-xs font-semibold text-[#D4AF37] bg-[#D4AF37]/15 border border-[#D4AF37]/30 rounded-lg px-2.5 py-3 active:bg-[#D4AF37]/25 transition"
>
Upgrade
</button>
@@ -278,7 +278,7 @@ export default function ForumPage() {
placeholder="Search threads..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full bg-[#111118] border border-gray-800/60 rounded-xl pl-10 pr-4 py-2.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/40 transition"
className="w-full bg-[#111118] border border-gray-800/60 rounded-xl pl-10 pr-4 py-3 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/40 transition"
/>
</div>
</div>
@@ -363,7 +363,7 @@ export default function ForumPage() {
setCreateError(null);
setShowCreateModal(true);
}}
className="mt-4 flex items-center gap-2 bg-[#D4AF37]/15 border border-[#D4AF37]/30 rounded-xl px-4 py-2.5 active:bg-[#D4AF37]/25 transition"
className="mt-4 flex items-center gap-2 bg-[#D4AF37]/15 border border-[#D4AF37]/30 rounded-xl px-4 py-3 active:bg-[#D4AF37]/25 transition"
>
<Plus size={16} className="text-[#D4AF37]" />
<span className="text-sm font-medium text-[#D4AF37]">Start Discussion</span>
@@ -395,7 +395,7 @@ export default function ForumPage() {
</div>
{/* Meta row */}
<div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-[10px] text-gray-600">
<div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-gray-600">
<div className="flex items-center gap-1">
<span className="text-gray-500">by</span>
<span className={`font-medium ${
@@ -431,12 +431,12 @@ export default function ForumPage() {
<div className="flex items-center gap-2 mt-1.5">
<div className={`flex items-center gap-0.5 ${shariahInfo.color}`}>
<ShariahIcon size={9} />
<span className="text-[9px]">{shariahInfo.label}</span>
<span className="text-[10px]">{shariahInfo.label}</span>
</div>
<span className="text-gray-700">·</span>
<div className="flex items-center gap-0.5 text-gray-600">
<Clock size={9} />
<span className="text-[9px]">{timeAgo(thread.createdAt)}</span>
<span className="text-xs">{timeAgo(thread.createdAt)}</span>
</div>
</div>
</div>
@@ -480,7 +480,7 @@ export default function ForumPage() {
setCreateForm((f) => ({ ...f, categoryId: e.target.value }))
}
required
className="w-full bg-[#0a0a0f] border border-gray-800/60 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-[#D4AF37]/40 transition appearance-none"
className="w-full bg-[#0a0a0f] border border-gray-800/60 rounded-xl px-3.5 py-3 text-sm text-white focus:outline-none focus:border-[#D4AF37]/40 transition appearance-none"
style={{
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")`,
backgroundRepeat: "no-repeat",
@@ -508,7 +508,7 @@ export default function ForumPage() {
placeholder="What's on your mind?"
required
maxLength={200}
className="w-full bg-[#0a0a0f] border border-gray-800/60 rounded-xl px-3.5 py-2.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/40 transition"
className="w-full bg-[#0a0a0f] border border-gray-800/60 rounded-xl px-3.5 py-3 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/40 transition"
/>
</div>
@@ -525,7 +525,7 @@ export default function ForumPage() {
required
maxLength={10000}
rows={5}
className="w-full bg-[#0a0a0f] border border-gray-800/60 rounded-xl px-3.5 py-2.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/40 transition resize-none"
className="w-full bg-[#0a0a0f] border border-gray-800/60 rounded-xl px-3.5 py-3 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/40 transition resize-none"
/>
</div>
@@ -539,14 +539,14 @@ export default function ForumPage() {
<button
type="button"
onClick={() => setShowCreateModal(false)}
className="flex-1 py-2.5 rounded-xl text-sm font-medium text-gray-500 bg-gray-800/40 border border-gray-800/60 active:bg-gray-700/40 transition"
className="flex-1 py-3 rounded-xl text-sm font-medium text-gray-500 bg-gray-800/40 border border-gray-800/60 active:bg-gray-700/40 transition"
>
Cancel
</button>
<button
type="submit"
disabled={creating}
className="flex-1 py-2.5 rounded-xl text-sm font-semibold text-[#0a0a0f] bg-[#D4AF37] active:bg-[#c5a233] transition flex items-center justify-center gap-2 disabled:opacity-60"
className="flex-1 py-3 rounded-xl text-sm font-semibold text-[#0a0a0f] bg-[#D4AF37] active:bg-[#c5a233] transition flex items-center justify-center gap-2 disabled:opacity-60"
>
{creating ? (
<>