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

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
+9 -9
View File
@@ -215,7 +215,7 @@ export default function WalletPage() {
</div>
<button
onClick={() => router.push("/upgrade")}
className="mt-2 text-[11px] text-[#D4AF37] underline underline-offset-2"
className="mt-2 text-xs text-[#D4AF37] underline underline-offset-2 py-1.5 px-2 -mx-2 rounded-lg"
>
Upgrade now
</button>
@@ -247,13 +247,13 @@ export default function WalletPage() {
<Zap size={16} className="text-[#D4AF37]" />
Top Up FLH
</h2>
<div className="grid grid-cols-3 gap-3">
<div className="grid grid-cols-3 gap-4">
{TOP_UP_OPTIONS.map((opt) => (
<button
key={opt.flh}
onClick={() => handleTopUp(opt.flh)}
disabled={topupLoading === opt.flh}
className="bg-[#111118] border border-gray-800/60 rounded-2xl p-4 text-center active:scale-95 transition hover:border-[#D4AF37]/30 disabled:opacity-60"
className="bg-[#111118] border border-gray-800/60 rounded-2xl p-5 text-center active:scale-95 transition hover:border-[#D4AF37]/30 disabled:opacity-60 min-h-[100px]"
>
{topupLoading === opt.flh ? (
<Loader2 size={20} className="animate-spin mx-auto text-[#D4AF37]" />
@@ -266,7 +266,7 @@ export default function WalletPage() {
${opt.usd.toFixed(2)}
</p>
{opt.bonus && (
<p className="text-[10px] text-emerald-400 mt-1 font-medium">
<p className="text-xs text-emerald-400 mt-1 font-medium">
{opt.bonus}
</p>
)}
@@ -295,13 +295,13 @@ export default function WalletPage() {
value={cashoutAmount}
onChange={(e) => setCashoutAmount(e.target.value)}
placeholder="Amount FLH"
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>
<button
type="submit"
disabled={cashoutLoading}
className="px-5 py-3 rounded-xl bg-[#D4AF37] text-[#0a0a0f] font-semibold text-sm disabled:opacity-50 active:opacity-80 transition flex items-center gap-2"
className="px-5 py-4 rounded-xl bg-[#D4AF37] text-[#0a0a0f] font-semibold text-sm disabled:opacity-50 active:opacity-80 transition flex items-center gap-2 min-h-[48px]"
>
{cashoutLoading ? (
<Loader2 size={16} className="animate-spin" />
@@ -364,7 +364,7 @@ export default function WalletPage() {
<p className="text-sm font-medium text-white">
{entry.amountFlh.toLocaleString()} FLH
</p>
<p className="text-[11px] text-gray-500">
<p className="text-xs text-gray-500">
${entry.fiatAmount.toFixed(2)} {" "}
{new Date(entry.createdAt).toLocaleDateString()}
</p>
@@ -395,8 +395,8 @@ export default function WalletPage() {
</h3>
<ul className="space-y-2">
{EARNING_TIPS.map((tip, i) => (
<li key={i} className="flex items-start gap-2 text-sm text-gray-400">
<Info size={12} className="text-[#D4AF37] mt-0.5 shrink-0" />
<li key={i} className="flex items-start gap-3 text-sm text-gray-400">
<Info size={16} className="text-[#D4AF37] mt-0.5 shrink-0" />
<span>{tip}</span>
</li>
))}