Aplica el sistema de diseño (nw-input/nw-btn/nw-card) a todas las páginas

Reemplazo masivo de los estilos sueltos repetidos por las clases del sistema visual
en ~20 componentes/páginas (auth, cuenta, servicios de personaje, foro, admin, voto):
- inputs -> .nw-input, botones primarios -> .nw-btn, tarjetas -> .nw-card.
Cohesión visual completa con la home y la cabecera.

Verificado: build OK, páginas clave 200/redirect correctos, clases aplicadas.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-13 00:13:22 +00:00
parent c9ba6c35e3
commit 3e47a3d240
21 changed files with 40 additions and 78 deletions
+1 -1
View File
@@ -17,7 +17,7 @@ export default async function AccountPage({ params }: { params: Promise<{ locale
const data = await getAccountDashboard(session)
const card = 'rounded-lg border border-amber-900/60 bg-[#241812] p-4'
const card = 'nw-card'
return (
<main className="mx-auto max-w-3xl px-4 py-8">
@@ -40,7 +40,7 @@ export function ChangeEmailForm() {
}
}
const field = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
const field = 'nw-input'
return (
<div className="mx-auto max-w-sm">
@@ -51,7 +51,7 @@ export function ChangeEmailForm() {
<input type="email" placeholder={t('newEmail')} value={form.newEmail} onChange={(e) => upd('newEmail', e.target.value)} className={field} />
<input type="email" placeholder={t('confEmail')} value={form.confEmail} onChange={(e) => upd('confEmail', e.target.value)} className={field} />
<input type="text" maxLength={6} placeholder={t('token')} value={form.token} onChange={(e) => upd('token', e.target.value)} className={field} />
<button type="submit" disabled={busy} className="w-full rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
<button type="submit" disabled={busy} className="w-full nw-btn disabled:opacity-60">
{busy ? t('sending') : t('submit')}
</button>
</form>
@@ -56,7 +56,7 @@ export function ChangePasswordForm() {
}
}
const field = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
const field = 'nw-input'
return (
<div className="mx-auto max-w-sm">
@@ -66,7 +66,7 @@ export function ChangePasswordForm() {
<input type="password" maxLength={16} placeholder={t('newPassword')} value={form.newPassword} onChange={(e) => upd('newPassword', e.target.value)} className={field} />
<input type="password" maxLength={16} placeholder={t('confPassword')} value={form.confPassword} onChange={(e) => upd('confPassword', e.target.value)} className={field} />
<input type="text" maxLength={6} placeholder={t('token')} value={form.token} onChange={(e) => upd('token', e.target.value)} className={field} />
<button type="submit" disabled={busy || done} className="w-full rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
<button type="submit" disabled={busy || done} className="w-full nw-btn disabled:opacity-60">
{busy ? t('changing') : t('submit')}
</button>
</form>
@@ -37,7 +37,7 @@ export default async function TopicPage({
<div className="space-y-4">
{posts.map((post) => (
<article key={post.id} className="rounded-lg border border-amber-900/60 bg-[#241812] p-4">
<article key={post.id} className="nw-card">
<div className="mb-2 flex items-center justify-between border-b border-amber-900/40 pb-2 text-sm">
<span className="font-semibold text-amber-400">{post.poster}</span>
{post.time && (
+3 -3
View File
@@ -59,7 +59,7 @@ export function LoginForm() {
placeholder={t('email')}
autoFocus
required
className="w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2"
className="nw-input"
/>
<div className="relative">
<input
@@ -69,7 +69,7 @@ export function LoginForm() {
placeholder={t('password')}
maxLength={16}
required
className="w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2 pr-10"
className="nw-input pr-10"
/>
<button
type="button"
@@ -84,7 +84,7 @@ export function LoginForm() {
<button
type="submit"
disabled={busy || (!!SITE_KEY && !captcha)}
className="w-full rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60"
className="w-full nw-btn disabled:opacity-60"
>
{busy ? t('connecting') : t('submit')}
</button>
@@ -39,7 +39,7 @@ export function RecoverForm() {
}
}
const field = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
const field = 'nw-input'
return (
<div className="mx-auto max-w-sm">
@@ -52,7 +52,7 @@ export function RecoverForm() {
</select>
<input type="email" placeholder={t('email')} value={email} onChange={(e) => setEmail(e.target.value)} required className={field} />
<Turnstile onVerify={setCaptcha} />
<button type="submit" disabled={busy || (!!SITE_KEY && !captcha)} className="w-full rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
<button type="submit" disabled={busy || (!!SITE_KEY && !captcha)} className="w-full nw-btn disabled:opacity-60">
{busy ? t('sending') : t('submit')}
</button>
</form>
@@ -53,7 +53,7 @@ export function RegisterForm() {
}
}
const input = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
const input = 'nw-input'
return (
<div className="mx-auto max-w-sm">
@@ -69,7 +69,7 @@ export function RegisterForm() {
<span>{t('terms')}</span>
</label>
<Turnstile onVerify={setCaptcha} />
<button type="submit" disabled={busy || !accepted || (!!SITE_KEY && !captcha)} className="w-full rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
<button type="submit" disabled={busy || !accepted || (!!SITE_KEY && !captcha)} className="w-full nw-btn disabled:opacity-60">
{busy ? t('creating') : t('submit')}
</button>
</form>
@@ -42,14 +42,14 @@ export function ResetForm({ token }: { token: string }) {
}
}
const field = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
const field = 'nw-input'
return (
<div className="mx-auto max-w-sm text-center">
<form onSubmit={handleSubmit} className="space-y-3">
<input type="password" maxLength={16} placeholder={t('password')} value={password} onChange={(e) => setPassword(e.target.value)} required className={field} />
<input type="password" maxLength={16} placeholder={t('confPassword')} value={confPassword} onChange={(e) => setConfPassword(e.target.value)} required className={field} />
<button type="submit" disabled={busy || done} className="w-full rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
<button type="submit" disabled={busy || done} className="w-full nw-btn disabled:opacity-60">
{busy ? t('saving') : t('submit')}
</button>
</form>
@@ -43,7 +43,7 @@ export function SecurityTokenForm({ initialDate }: { initialDate: string | null
<button
onClick={request}
disabled={busy}
className="rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60"
className="nw-btn disabled:opacity-60"
>
{busy ? t('requesting') : t('request')}
</button>
@@ -45,7 +45,7 @@ export function SelectAccountForm({ accounts }: { accounts: GameAccount[] }) {
key={a.id}
onClick={() => select(a.id)}
disabled={busy !== null}
className="w-full rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60"
className="w-full nw-btn disabled:opacity-60"
>
{busy === a.id ? t('entering') : a.username}
</button>