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/components/AdminNewsManager.tsx
+3 -3
View File
@@ -47,15 +47,15 @@ export function AdminNewsManager({ initialNews }: { initialNews: NewsItem[] }) {
if (data.success) setNews(news.filter((n) => n.id !== id))
}
const field = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
const field = 'nw-input'
return (
<div>
<form onSubmit={create} className="mb-8 space-y-3 rounded-lg border border-amber-900/60 bg-[#241812] p-4">
<form onSubmit={create} className="mb-8 space-y-3 nw-card">
<input value={titulo} onChange={(e) => setTitulo(e.target.value)} placeholder={t('newsTitle')} maxLength={200} className={field} />
<textarea value={contenido} onChange={(e) => setContenido(e.target.value)} placeholder={t('newsContent')} rows={5} className={field} />
<input value={enlace} onChange={(e) => setEnlace(e.target.value)} placeholder={t('newsLink')} className={field} />
<button type="submit" disabled={busy} className="rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
<button type="submit" disabled={busy} className="nw-btn disabled:opacity-60">
{busy ? t('creating') : t('create')}
</button>
{error && <p className="text-red-400">{error}</p>}
web-next/components/AdminVotesManager.tsx
+3 -3
View File
@@ -44,15 +44,15 @@ export function AdminVotesManager({ initial }: { initial: VoteSite[] }) {
if ((await res.json()).success) setSites(sites.filter((s) => s.id !== id))
}
const field = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
const field = 'nw-input'
return (
<div>
<form onSubmit={create} className="mb-8 space-y-3 rounded-lg border border-amber-900/60 bg-[#241812] p-4">
<form onSubmit={create} className="mb-8 space-y-3 nw-card">
<input value={form.name} onChange={(e) => upd('name', e.target.value)} placeholder={t('voteName')} className={field} />
<input value={form.url} onChange={(e) => upd('url', e.target.value)} placeholder={t('voteUrl')} className={field} />
<input value={form.imageUrl} onChange={(e) => upd('imageUrl', e.target.value)} placeholder={t('voteImage')} className={field} />
<input type="number" min="0" value={form.points} onChange={(e) => upd('points', e.target.value)} placeholder={t('votePoints')} className={field} />
<button type="submit" disabled={busy} className="rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
<button type="submit" disabled={busy} className="nw-btn disabled:opacity-60">
{busy ? t('creating') : t('create')}
</button>
</form>
web-next/components/CharacterActionForm.tsx
+2 -2
View File
@@ -54,7 +54,7 @@ export function CharacterActionForm({ characters, endpoint, actionLabel }: Props
value={character}
onChange={(e) => setCharacter(e.target.value)}
required
className="w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2"
className="nw-input"
>
<option value="" disabled>
{t('selectCharacter')}
@@ -68,7 +68,7 @@ export function CharacterActionForm({ characters, endpoint, actionLabel }: Props
<button
type="submit"
disabled={busy || !character}
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('processing') : actionLabel}
</button>
web-next/components/GoldForm.tsx
+2 -2
View File
@@ -36,7 +36,7 @@ export function GoldForm({ characters, options }: { characters: string[]; option
}
}
const field = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
const field = 'nw-input'
if (characters.length === 0) return <p className="text-amber-200/70">{t('noCharactersYet')}</p>
return (
@@ -54,7 +54,7 @@ export function GoldForm({ characters, options }: { characters: string[]; option
</option>
))}
</select>
<button type="submit" disabled={busy || !character || !amount} className="w-full rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
<button type="submit" disabled={busy || !character || !amount} className="w-full nw-btn disabled:opacity-60">
{busy ? t('processing') : tp('gold.buy')}
</button>
</form>
web-next/components/NewTopicForm.tsx
+3 -3
View File
@@ -36,13 +36,13 @@ export function NewTopicForm({ forumId }: { forumId: number }) {
}
}
const field = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
const field = 'nw-input'
return (
<form onSubmit={handleSubmit} className="mt-8 space-y-3 rounded-lg border border-amber-900/60 bg-[#241812] p-4">
<form onSubmit={handleSubmit} className="mt-8 space-y-3 nw-card">
<h3 className="font-semibold text-amber-400">{t('newTopic')}</h3>
<input value={name} onChange={(e) => setName(e.target.value)} placeholder={t('newTopicName')} maxLength={200} className={field} />
<textarea value={text} onChange={(e) => setText(e.target.value)} placeholder={t('newTopicText')} rows={4} className={field} />
<button type="submit" disabled={busy} className="rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
<button type="submit" disabled={busy} className="nw-btn disabled:opacity-60">
{busy ? t('publishing') : t('publish')}
</button>
{error && <p className="text-red-400">{error}</p>}
web-next/components/PaidServiceForm.tsx
+2 -2
View File
@@ -52,7 +52,7 @@ export function PaidServiceForm({ characters, checkoutEndpoint, payLabel }: Prop
value={character}
onChange={(e) => setCharacter(e.target.value)}
required
className="w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2"
className="nw-input"
>
<option value="" disabled>
{t('selectCharacter')}
@@ -66,7 +66,7 @@ export function PaidServiceForm({ characters, checkoutEndpoint, payLabel }: Prop
<button
type="submit"
disabled={busy || !character}
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('processing') : payLabel}
</button>
web-next/components/ReplyForm.tsx
+2 -2
View File
@@ -37,11 +37,11 @@ export function ReplyForm({ topicId }: { topicId: number }) {
}
}
const field = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
const field = 'nw-input'
return (
<form onSubmit={handleSubmit} className="mt-6 space-y-3">
<textarea value={text} onChange={(e) => setText(e.target.value)} placeholder={t('replyText')} rows={3} className={field} />
<button type="submit" disabled={busy} className="rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
<button type="submit" disabled={busy} className="nw-btn disabled:opacity-60">
{busy ? t('sending') : t('sendReply')}
</button>
{error && <p className="text-red-400">{error}</p>}
web-next/components/TransferForm.tsx
+2 -2
View File
@@ -35,7 +35,7 @@ export function TransferForm({ characters, price }: { characters: string[]; pric
}
}
const field = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
const field = 'nw-input'
if (characters.length === 0) return <p className="text-amber-200/70">{t('noCharactersYet')}</p>
return (
@@ -46,7 +46,7 @@ export function TransferForm({ characters, price }: { characters: string[]; pric
{characters.map((c) => <option key={c} value={c}>{c}</option>)}
</select>
<input type="text" placeholder={tp('transfer.destination')} value={destination} onChange={(e) => setDestination(e.target.value)} required className={field} />
<button type="submit" disabled={busy || !character || !destination.trim()} className="w-full rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
<button type="submit" disabled={busy || !character || !destination.trim()} className="w-full nw-btn disabled:opacity-60">
{busy ? t('processing') : tp('transfer.pay', { price })}
</button>
</form>
web-next/components/VotePanel.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ export function VotePanel({ sites, canVote }: { sites: VoteSite[]; canVote: bool
<>
<div className="flex flex-wrap justify-center gap-4">
{sites.map((s) => (
<div key={s.id} className="w-40 rounded-lg border border-amber-900/60 bg-[#241812] p-3 text-center">
<div key={s.id} className="w-40 nw-card p-3 text-center">
{s.image_url && <img src={s.image_url} alt={s.name} className="mx-auto mb-2 max-h-16" />}
<p className="font-semibold text-amber-300">{s.name}</p>
<p className="mb-2 text-xs text-amber-200/60">