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
+8 -8
View File
@@ -214,7 +214,7 @@ function NurChat() {
<Bot size={16} className="text-[#D4AF37]" />
Nur AI
</h1>
<p className="text-[10px] text-gray-600">
<p className="text-xs text-gray-600">
{isPro ? "Pro Plan" : isPremium ? "Premium Plan" : "Free Plan"}
</p>
</div>
@@ -222,9 +222,9 @@ function NurChat() {
{!isPremium && (
<Link
href="/upgrade"
className="flex items-center gap-1.5 bg-[#D4AF37]/15 border border-[#D4AF37]/30 rounded-full px-3 py-1.5 text-[11px] font-semibold text-[#D4AF37] active:bg-[#D4AF37]/25 transition"
className="flex items-center gap-1.5 bg-[#D4AF37]/15 border border-[#D4AF37]/30 rounded-full px-4 py-2 min-h-[36px] text-xs font-semibold text-[#D4AF37] active:bg-[#D4AF37]/25 transition"
>
<Sparkles size={12} />
<Sparkles size={14} />
Upgrade
</Link>
)}
@@ -248,7 +248,7 @@ function NurChat() {
{/* ── Daily Cap Bar ── */}
<div className="px-4 mt-3">
<div className="flex items-center justify-between mb-1.5">
<span className="text-[11px] text-gray-500 font-medium">
<span className="text-xs text-gray-500 font-medium">
{isUnlimited ? (
<span className="text-emerald-400 flex items-center gap-1">
<CheckCircle2 size={12} />
@@ -259,7 +259,7 @@ function NurChat() {
)}
</span>
{!isUnlimited && remaining <= 3 && remaining > 0 && (
<span className="text-[10px] text-amber-400 font-medium">
<span className="text-xs text-amber-400 font-medium">
{remaining} left
</span>
)}
@@ -289,7 +289,7 @@ function NurChat() {
<p className="text-sm font-semibold text-white">
You've hit your daily limit
</p>
<p className="text-[11px] text-gray-500 mt-0.5">
<p className="text-xs text-gray-500 mt-0.5">
Upgrade to Premium for 100 messages/day or Pro for unlimited access.
</p>
<Link
@@ -448,7 +448,7 @@ function PersonaSelector({
>
{persona.name}
</span>
<span className="text-[8px] text-center leading-tight text-gray-600 max-w-[72px]">
<span className="text-[10px] text-center leading-tight text-gray-600 max-w-[72px]">
{persona.description}
</span>
{!accessible && (
@@ -494,7 +494,7 @@ function MessageBubble({ message, isPremium, isPro }: { message: ChatMessage; is
{message.content}
{message.createdAt && (
<div
className={`text-[10px] mt-2 ${
className={`text-xs mt-2 ${
isUser ? "text-[#0a0a0f]/50" : "text-gray-600"
}`}
>