wmj/falah-mobile
1
0
Fork 0
Code Issues 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/profile/page.tsx
+13 -13
View File
@@ -187,7 +187,7 @@ export default function ProfilePage() {
}`}>
{tier === "pro" ? "Pro Member" : "Premium Member"}
</p>
<p className="text-[10px] text-gray-500 mt-0.5">
<p className="text-xs text-gray-500 mt-0.5">
{tier === "pro"
? "Unlimited everything + 0% marketplace fees"
: "Enhanced AI + marketplace access"}
@@ -253,7 +253,7 @@ export default function ProfilePage() {
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
className="w-full bg-[#1a1a24] border border-gray-800/60 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/50 focus:ring-1 focus:ring-[#D4AF37]/30 transition"
className="w-full bg-[#1a1a24] border border-gray-800/60 rounded-xl px-4 py-4 text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/50 focus:ring-1 focus:ring-[#D4AF37]/30 transition min-h-[48px]"
/>
</div>
@@ -267,7 +267,7 @@ export default function ProfilePage() {
value={preferredName}
onChange={(e) => setPreferredName(e.target.value)}
placeholder="How Nur AI should address you"
className="w-full bg-[#1a1a24] border border-gray-800/60 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/50 focus:ring-1 focus:ring-[#D4AF37]/30 transition"
className="w-full bg-[#1a1a24] border border-gray-800/60 rounded-xl px-4 py-4 text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/50 focus:ring-1 focus:ring-[#D4AF37]/30 transition min-h-[48px]"
/>
</div>
@@ -279,7 +279,7 @@ export default function ProfilePage() {
<select
value={coachPersona}
onChange={(e) => setCoachPersona(e.target.value)}
className="w-full bg-[#1a1a24] border border-gray-800/60 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-[#D4AF37]/50 focus:ring-1 focus:ring-[#D4AF37]/30 transition appearance-none"
className="w-full bg-[#1a1a24] border border-gray-800/60 rounded-xl px-4 py-4 text-white focus:outline-none focus:border-[#D4AF37]/50 focus:ring-1 focus:ring-[#D4AF37]/30 transition appearance-none min-h-[48px]"
>
<option value="">Default</option>
{PERSONAS.map((p) => (
@@ -298,7 +298,7 @@ export default function ProfilePage() {
<select
value={madhab}
onChange={(e) => setMadhab(e.target.value)}
className="w-full bg-[#1a1a24] border border-gray-800/60 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-[#D4AF37]/50 focus:ring-1 focus:ring-[#D4AF37]/30 transition appearance-none"
className="w-full bg-[#1a1a24] border border-gray-800/60 rounded-xl px-4 py-4 text-white focus:outline-none focus:border-[#D4AF37]/50 focus:ring-1 focus:ring-[#D4AF37]/30 transition appearance-none min-h-[48px]"
>
<option value="">Not specified</option>
{VALID_MADHABS.map((m) => (
@@ -319,14 +319,14 @@ export default function ProfilePage() {
onChange={(e) => setCoachingGoals(e.target.value)}
placeholder="What would you like to work on?"
rows={3}
className="w-full bg-[#1a1a24] border border-gray-800/60 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/50 focus:ring-1 focus:ring-[#D4AF37]/30 transition resize-none"
className="w-full bg-[#1a1a24] border border-gray-800/60 rounded-xl px-4 py-4 text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/50 focus:ring-1 focus:ring-[#D4AF37]/30 transition resize-none min-h-[48px]"
/>
</div>
<button
type="submit"
disabled={saving}
className="w-full flex items-center justify-center gap-2 py-3 rounded-xl bg-[#D4AF37] text-[#0a0a0f] font-semibold text-sm active:opacity-80 disabled:opacity-50 transition"
className="w-full flex items-center justify-center gap-2 py-4 rounded-xl bg-[#D4AF37] text-[#0a0a0f] font-semibold text-sm active:opacity-80 disabled:opacity-50 transition min-h-[48px]"
>
{saving ? (
<>
@@ -384,7 +384,7 @@ export default function ProfilePage() {
<div className="mt-4 pt-3 border-t border-gray-800/60">
<Link
href="/upgrade"
className="flex items-center justify-between py-2 px-3 rounded-xl bg-[#D4AF37]/10 border border-[#D4AF37]/20 active:bg-[#D4AF37]/20 transition"
className="flex items-center justify-between py-3 px-4 rounded-xl bg-[#D4AF37]/10 border border-[#D4AF37]/20 active:bg-[#D4AF37]/20 transition"
>
<div className="flex items-center gap-2">
<ExternalLink size={14} className="text-[#D4AF37]" />
@@ -395,16 +395,16 @@ export default function ProfilePage() {
<ChevronRight size={14} className="text-[#D4AF37]" />
</Link>
{user.trialEndsAt && (
<div className="mt-2 flex items-center gap-1.5 px-3 py-1.5">
<span className="text-[10px] text-gray-600">
<div className="mt-2 flex items-center gap-2 px-3 py-2.5">
<span className="text-xs text-gray-600">
Trial ends{" "}
{new Date(user.trialEndsAt).toLocaleDateString("en-MY", {
month: "short",
day: "numeric",
})}
</span>
<span className="text-[10px] text-gray-700">·</span>
<span className="text-[10px] text-amber-400 font-medium">
<span className="text-xs text-gray-700">·</span>
<span className="text-xs text-amber-400 font-medium">
{Math.max(0, Math.ceil((new Date(user.trialEndsAt).getTime() - Date.now()) / (1000 * 60 * 60 * 24)))} days remaining
</span>
</div>
@@ -416,7 +416,7 @@ export default function ProfilePage() {
{/* Logout */}
<button
onClick={handleLogout}
className="w-full flex items-center justify-between py-3.5 px-5 rounded-xl bg-red-900/10 border border-red-800/30 text-red-400 active:bg-red-900/20 transition"
className="w-full flex items-center justify-between py-3.5 px-5 rounded-xl bg-red-900/10 border border-red-800/30 text-red-400 active:bg-red-900/20 transition min-h-[48px]"
>
<div className="flex items-center gap-2">
<LogOut size={16} />