Inna/NightSpire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Inna Hoover Brown
2026-07-13 00:13:22 +00:00
parent c9ba6c35e3
commit 3e47a3d240
21 changed files with 40 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-next/app/[locale]/account/page.tsx
+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">
web-next/app/[locale]/change-email/ChangeEmailForm.tsx
+2 -2
View File
@@ -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>
web-next/app/[locale]/change-password/ChangePasswordForm.tsx
+2 -2
View File
@@ -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>
web-next/app/[locale]/forum/topic/[topicId]/page.tsx
+1 -1
View File
@@ -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 && (
web-next/app/[locale]/login/LoginForm.tsx
+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>
web-next/app/[locale]/recover/RecoverForm.tsx
+2 -2
View File
@@ -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>
web-next/app/[locale]/register/RegisterForm.tsx
+2 -2
View File
@@ -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>
web-next/app/[locale]/reset-password/ResetForm.tsx
+2 -2
View File
@@ -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>
web-next/app/[locale]/security-token/SecurityTokenForm.tsx
+1 -1
View File
@@ -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>
web-next/app/[locale]/select-account/SelectAccountForm.tsx
+1 -1
View File
@@ -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>
web-next/app/api/character/rename/checkout/route.ts
-41
View File
@@ -1,41 +0,0 @@
import { getSession } from '@/lib/session'
import { getGameCharacters } from '@/lib/characters'
import { getRenamePrice } from '@/lib/prices'
import { createCheckoutSession } from '@/lib/stripe'
export async function POST(request: Request) {
const session = await getSession()
if (!session.accountId) return Response.json({ success: false, error: 'notAuthenticated' }, { status: 401 })
let character = ''
try {
const body = await request.json()
character = String(body.character ?? '')
} catch {
return Response.json({ success: false, error: 'invalidRequest' }, { status: 400 })
}
if (!character) return Response.json({ success: false, error: 'invalidCharacter' })
const chars = await getGameCharacters(session.accountId)
if (!chars.find((c) => c.name === character)) {
return Response.json({ success: false, error: 'invalidCharacter' })
}
const price = await getRenamePrice()
const site = process.env.SITE_URL || ''
const ip = (request.headers.get('x-forwarded-for') || '').split(',')[0].trim() || '0.0.0.0'
const r = await createCheckoutSession({
accountId: session.accountId,
username: session.username || '',
email: session.bnetEmail || '',
acoreIp: ip,
amount: price,
characterName: character,
productName: `Renombrar personaje: ${character}`,
successUrl: `${site}/rename/success`,
cancelUrl: `${site}/rename`,
})
if (!r.success || !r.url) return Response.json({ success: false, error: 'stripeError' })
return Response.json({ success: true, url: r.url })
}
web-next/app/globals.css
+3
View File
@@ -39,6 +39,9 @@ body {
.nw-heading {
@apply bg-gradient-to-b from-nw-gold-light to-nw-gold bg-clip-text font-extrabold tracking-wide text-transparent;
}
.nw-input {
@apply w-full rounded-md border border-nw-border bg-nw-panel-2 px-3 py-2 text-nw-text outline-none transition focus:border-nw-gold;
}
}
/* Contenido HTML de noticias/foro */