pokemon/nuzlocke-tracker
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Simplify modal, badge, and remaining component styles to dark-first
All checks were successful
CI / backend-lint (pull_request) Successful in 9s
Details
CI / actions-lint (pull_request) Successful in 14s
Details
CI / frontend-lint (pull_request) Successful in 20s
Details

Browse Source 
Remove all dark: prefix pairs across modals, badges, and 20 remaining
components. Simplify EncounterMethodBadge, ConditionBadge, and
RuleBadges to dark-only color values. Replace stray text-gray-400/500
with theme tokens (text-tertiary/secondary). Replace blue-600 accent
colors with theme accent tokens in modals and interactive elements.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Julian Tabel
2026-02-17 21:02:18 +01:00
parent 42b66ee9a2
commit 3065b84856
32 changed files with 163 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/BossDefeatModal.tsx
View File

@@ -84,7 +84,7 @@ export function BossDefeatModal({
onClick={() => setSelectedVariant(label)}
className={`px-2 py-0.5 text-xs font-medium rounded-full transition-colors ${
selectedVariant === label
? 'bg-blue-600 text-white'
? 'bg-accent-600 text-white'
: 'bg-surface-2 text-text-secondary hover:bg-surface-3'
}`}
>

20
frontend/src/components/ConditionBadge.tsx
View File

@@ -1,20 +1,8 @@
const CONDITION_CONFIG: Record<string, { label: string; color: string }> = {
'Mega Evolution': {
label: 'Mega',
color: 'bg-fuchsia-100 text-fuchsia-800 dark:bg-fuchsia-900/40 dark:text-fuchsia-300',
},
Gigantamax: {
label: 'G-Max',
color: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
},
Dynamax: {
label: 'D-Max',
color: 'bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-300',
},
Terastallize: {
label: 'Tera',
color: 'bg-teal-100 text-teal-800 dark:bg-teal-900/40 dark:text-teal-300',
},
'Mega Evolution': { label: 'Mega', color: 'bg-fuchsia-900/40 text-fuchsia-300' },
Gigantamax: { label: 'G-Max', color: 'bg-red-900/40 text-red-300' },
Dynamax: { label: 'D-Max', color: 'bg-rose-900/40 text-rose-300' },
Terastallize: { label: 'Tera', color: 'bg-teal-900/40 text-teal-300' },
}
export function ConditionBadge({

10
frontend/src/components/EggEncounterModal.tsx
View File

@@ -77,13 +77,13 @@ export function EggEncounterModal({
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<div className="fixed inset-0 bg-black/50" onClick={onClose} />
<div className="relative bg-surface-1 rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
<div className="sticky top-0 bg-surface-1 border-b border-green-300 dark:border-green-600 px-6 py-4 rounded-t-xl">
<div className="sticky top-0 bg-surface-1 border-b border-green-600 px-6 py-4 rounded-t-xl">
<div className="flex items-center justify-between">
<h2 className="text-lg font-semibold text-text-primary flex items-center gap-2">
<span className="text-green-500">&#x1F95A;</span>
Log Egg Hatch
</h2>
<button onClick={onClose} className="text-gray-400 hover:text-text-primary">
<button onClick={onClose} className="text-text-tertiary hover:text-text-primary">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
@@ -123,7 +123,7 @@ export function EggEncounterModal({
<div>
<label className="block text-sm font-medium text-text-secondary mb-1">Pokemon</label>
{selectedPokemon ? (
<div className="flex items-center gap-3 p-3 rounded-lg border border-green-300 dark:border-green-600 bg-green-50 dark:bg-green-900/20">
<div className="flex items-center gap-3 p-3 rounded-lg border border-green-600 bg-green-900/20">
{selectedPokemon.spriteUrl ? (
<img
src={selectedPokemon.spriteUrl}
@@ -144,7 +144,7 @@ export function EggEncounterModal({
setSearch('')
setSearchResults([])
}}
className="ml-auto text-sm text-gray-500 hover:text-text-secondary"
className="ml-auto text-sm text-text-tertiary hover:text-text-secondary"
>
Change
</button>
@@ -170,7 +170,7 @@ export function EggEncounterModal({
key={p.id}
type="button"
onClick={() => setSelectedPokemon(p)}
className="flex flex-col items-center p-2 rounded-lg border border-border-default hover:border-green-400 dark:hover:border-green-600 text-center transition-colors"
className="flex flex-col items-center p-2 rounded-lg border border-border-default hover:border-green-600 text-center transition-colors"
>
{p.spriteUrl ? (
<img src={p.spriteUrl} alt={p.name} className="w-10 h-10" />

69
frontend/src/components/EncounterMethodBadge.tsx
View File

@@ -1,56 +1,17 @@
export const METHOD_CONFIG: Record<string, { label: string; color: string }> = {
starter: {
label: 'Starter',
color: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300',
},
gift: {
label: 'Gift',
color: 'bg-pink-100 text-pink-800 dark:bg-pink-900/40 dark:text-pink-300',
},
fossil: {
label: 'Fossil',
color: 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300',
},
trade: {
label: 'Trade',
color: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300',
},
walk: {
label: 'Grass',
color: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
},
headbutt: {
label: 'Headbutt',
color: 'bg-lime-100 text-lime-800 dark:bg-lime-900/40 dark:text-lime-300',
},
surf: {
label: 'Surfing',
color: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
},
'rock-smash': {
label: 'Rock Smash',
color: 'bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300',
},
'old-rod': {
label: 'Old Rod',
color: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900/40 dark:text-cyan-300',
},
'good-rod': {
label: 'Good Rod',
color: 'bg-sky-100 text-sky-800 dark:bg-sky-900/40 dark:text-sky-300',
},
'super-rod': {
label: 'Super Rod',
color: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/40 dark:text-indigo-300',
},
horde: {
label: 'Horde',
color: 'bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-300',
},
sos: {
label: 'SOS',
color: 'bg-violet-100 text-violet-800 dark:bg-violet-900/40 dark:text-violet-300',
},
starter: { label: 'Starter', color: 'bg-yellow-900/40 text-yellow-300' },
gift: { label: 'Gift', color: 'bg-pink-900/40 text-pink-300' },
fossil: { label: 'Fossil', color: 'bg-amber-900/40 text-amber-300' },
trade: { label: 'Trade', color: 'bg-emerald-900/40 text-emerald-300' },
walk: { label: 'Grass', color: 'bg-green-900/40 text-green-300' },
headbutt: { label: 'Headbutt', color: 'bg-lime-900/40 text-lime-300' },
surf: { label: 'Surfing', color: 'bg-blue-900/40 text-blue-300' },
'rock-smash': { label: 'Rock Smash', color: 'bg-orange-900/40 text-orange-300' },
'old-rod': { label: 'Old Rod', color: 'bg-cyan-900/40 text-cyan-300' },
'good-rod': { label: 'Good Rod', color: 'bg-sky-900/40 text-sky-300' },
'super-rod': { label: 'Super Rod', color: 'bg-indigo-900/40 text-indigo-300' },
horde: { label: 'Horde', color: 'bg-rose-900/40 text-rose-300' },
sos: { label: 'SOS', color: 'bg-violet-900/40 text-violet-300' },
}
/** Display order for encounter method groups */
@@ -78,9 +39,7 @@ export function getMethodLabel(method: string): string {
}
export function getMethodColor(method: string): string {
return (
METHOD_CONFIG[method]?.color ?? 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
)
return METHOD_CONFIG[method]?.color ?? 'bg-surface-3 text-text-secondary'
}
export function EncounterMethodBadge({

46
frontend/src/components/EncounterModal.tsx
View File

@@ -43,14 +43,12 @@ const statusOptions: {
{
value: 'caught',
label: 'Caught',
color:
'bg-green-100 text-green-800 border-green-300 dark:bg-green-900/40 dark:text-green-300 dark:border-green-700',
color: 'bg-green-900/40 text-green-300 border-green-700',
},
{
value: 'fainted',
label: 'Fainted',
color:
'bg-red-100 text-red-800 border-red-300 dark:bg-red-900/40 dark:text-red-300 dark:border-red-700',
color: 'bg-red-900/40 text-red-300 border-red-700',
},
{
value: 'missed',
@@ -266,7 +264,7 @@ export function EncounterModal({
<h2 className="text-lg font-semibold text-text-primary">
{isEditing ? 'Edit Encounter' : 'Log Encounter'}
</h2>
<button onClick={onClose} className="text-gray-400 hover:text-text-primary">
<button onClick={onClose} className="text-text-tertiary hover:text-text-primary">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
@@ -301,7 +299,7 @@ export function EncounterModal({
setSelectedPokemon(pickRandomPokemon(routePokemon, dupedPokemonIds))
}
}}
className="px-2.5 py-1 text-xs font-medium rounded-lg border border-purple-300 dark:border-purple-600 text-purple-600 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
className="px-2.5 py-1 text-xs font-medium rounded-lg border border-purple-600 text-purple-400 hover:bg-purple-900/20 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
>
{selectedPokemon ? 'Re-roll' : 'Randomize'}
</button>
@@ -309,7 +307,7 @@ export function EncounterModal({
</div>
{loadingPokemon ? (
<div className="flex items-center justify-center py-4">
<div className="w-10 h-10 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
<div className="w-10 h-10 border-2 border-accent-400 border-t-transparent rounded-full animate-spin" />
</div>
) : filteredPokemon && filteredPokemon.length > 0 ? (
<>
@@ -329,8 +327,8 @@ export function EncounterModal({
onClick={() => setSelectedCondition(null)}
className={`px-2.5 py-1 text-xs font-medium rounded-full border transition-colors ${
selectedCondition === null
? 'bg-purple-100 border-purple-300 text-purple-800 dark:bg-purple-900/40 dark:border-purple-600 dark:text-purple-300'
: 'border-border-default text-text-tertiary hover:border-purple-300 dark:hover:border-purple-600'
? 'bg-purple-900/40 border-purple-600 text-purple-300'
: 'border-border-default text-text-tertiary hover:border-purple-600'
}`}
>
All
@@ -342,8 +340,8 @@ export function EncounterModal({
onClick={() => setSelectedCondition(cond)}
className={`px-2.5 py-1 text-xs font-medium rounded-full border transition-colors capitalize ${
selectedCondition === cond
? 'bg-purple-100 border-purple-300 text-purple-800 dark:bg-purple-900/40 dark:border-purple-600 dark:text-purple-300'
: 'border-border-default text-text-tertiary hover:border-purple-300 dark:hover:border-purple-600'
? 'bg-purple-900/40 border-purple-600 text-purple-300'
: 'border-border-default text-text-tertiary hover:border-purple-600'
}`}
>
{cond}
@@ -376,7 +374,7 @@ export function EncounterModal({
isDuped
? 'opacity-40 cursor-not-allowed border-border-default'
: isSelected
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30'
? 'border-accent-400 bg-accent-900/30'
: 'border-border-default hover:border-border-default'
}`}
>
@@ -395,7 +393,7 @@ export function EncounterModal({
{rp.pokemon.name}
</span>
{isDuped && (
<span className="text-[10px] text-gray-400 italic">
<span className="text-[10px] text-text-tertiary italic">
{retiredPokemonIds?.has(rp.pokemonId)
? 'retired (HoF)'
: 'already caught'}
@@ -405,19 +403,19 @@ export function EncounterModal({
<EncounterMethodBadge method={rp.encounterMethod} />
)}
{!isDuped && displayRate !== null && displayRate !== undefined && (
<span className="text-[10px] text-purple-500 dark:text-purple-400 font-medium">
<span className="text-[10px] text-purple-400 font-medium">
{displayRate}%
</span>
)}
{!isDuped &&
selectedCondition === null &&
conditions.length > 0 && (
<span className="text-[10px] text-purple-500 dark:text-purple-400">
<span className="text-[10px] text-purple-400">
{conditions.join(', ')}
</span>
)}
{!isDuped && (
<span className="text-[10px] text-gray-400">
<span className="text-[10px] text-text-tertiary">
Lv. {rp.minLevel}
{rp.maxLevel !== rp.minLevel && `–${rp.maxLevel}`}
</span>
@@ -454,7 +452,7 @@ export function EncounterModal({
<div className="font-medium text-text-primary capitalize">
{existing.pokemon.name}
</div>
<div className="text-xs text-gray-500">
<div className="text-xs text-text-tertiary">
Caught at Lv. {existing.catchLevel ?? '?'}
</div>
</div>
@@ -473,7 +471,7 @@ export function EncounterModal({
className={`flex-1 px-3 py-2 rounded-lg border text-sm font-medium transition-colors ${
status === opt.value
? opt.color
: 'border-border-default text-text-tertiary hover:border-gray-300'
: 'border-border-default text-text-tertiary hover:border-border-accent'
}`}
>
{opt.label}
@@ -507,7 +505,7 @@ export function EncounterModal({
type="button"
onClick={() => regenerate()}
disabled={loadingSuggestions}
className="text-xs text-text-link hover:text-blue-700 dark:hover:text-blue-300 disabled:opacity-50 transition-colors"
className="text-xs text-text-link hover:text-accent-300 disabled:opacity-50 transition-colors"
>
{loadingSuggestions ? 'Loading...' : 'Regenerate'}
</button>
@@ -520,8 +518,8 @@ export function EncounterModal({
onClick={() => setNickname(name)}
className={`px-2.5 py-1 text-xs rounded-full border transition-colors ${
nickname === name
? 'bg-blue-100 border-blue-300 text-blue-800 dark:bg-blue-900/40 dark:border-blue-600 dark:text-blue-300'
: 'border-border-default text-text-secondary hover:border-blue-300 dark:hover:border-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20'
? 'bg-accent-900/40 border-accent-600 text-accent-300'
: 'border-border-default text-text-secondary hover:border-accent-600 hover:bg-accent-900/20'
}`}
>
{name}
@@ -567,7 +565,7 @@ export function EncounterModal({
htmlFor="faint-level"
className="block text-sm font-medium text-text-secondary mb-1"
>
Faint Level <span className="font-normal text-gray-400">(mark as dead)</span>
Faint Level <span className="font-normal text-text-tertiary">(mark as dead)</span>
</label>
<input
id="faint-level"
@@ -585,7 +583,7 @@ export function EncounterModal({
htmlFor="death-cause"
className="block text-sm font-medium text-text-secondary mb-1"
>
Cause of Death <span className="font-normal text-gray-400">(optional)</span>
Cause of Death <span className="font-normal text-text-tertiary">(optional)</span>
</label>
<input
id="death-cause"
@@ -613,7 +611,7 @@ export function EncounterModal({
type="button"
disabled={!canSubmit || isPending}
onClick={handleSubmit}
className="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
className="px-4 py-2 bg-accent-600 text-white rounded-lg font-medium hover:bg-accent-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
{isPending ? 'Saving...' : isEditing ? 'Update' : 'Log Encounter'}
</button>

4
frontend/src/components/EndRunModal.tsx
View File

@@ -31,7 +31,7 @@ export function EndRunModal({ onConfirm, onClose, isPending, genlockeContext }:
<button
onClick={() => onConfirm('completed')}
disabled={isPending}
className="w-full px-4 py-3 rounded-lg font-medium text-left border-2 border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 hover:border-blue-400 dark:hover:border-blue-600 disabled:opacity-50 transition-colors"
className="w-full px-4 py-3 rounded-lg font-medium text-left border-2 border-blue-800 bg-blue-900/20 text-blue-300 hover:border-blue-600 disabled:opacity-50 transition-colors"
>
<div className="font-semibold">Victory</div>
<div className="text-sm opacity-80">{victoryDescription}</div>
@@ -39,7 +39,7 @@ export function EndRunModal({ onConfirm, onClose, isPending, genlockeContext }:
<button
onClick={() => onConfirm('failed')}
disabled={isPending}
className="w-full px-4 py-3 rounded-lg font-medium text-left border-2 border-red-200 dark:border-red-800 bg-status-failed-bg text-red-700 dark:text-red-300 hover:border-red-400 dark:hover:border-red-600 disabled:opacity-50 transition-colors"
className="w-full px-4 py-3 rounded-lg font-medium text-left border-2 border-red-800 bg-status-failed-bg text-red-300 hover:border-red-600 disabled:opacity-50 transition-colors"
>
<div className="font-semibold">Defeat</div>
<div className="text-sm opacity-80">{defeatDescription}</div>

2
frontend/src/components/GameCard.tsx
View File

@@ -18,7 +18,7 @@ export function GameCard({ game, selected, onSelect }: GameCardProps) {
<button
type="button"
onClick={() => onSelect(game)}
className={`relative w-full rounded-lg overflow-hidden transition-all duration-200 hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 ${
className={`relative w-full rounded-lg overflow-hidden transition-all duration-200 hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:ring-offset-2 focus:ring-offset-surface-0 ${
selected ? 'ring-2 ring-accent-500 scale-105 shadow-lg' : 'shadow'
}`}
>

2
frontend/src/components/GenlockeGraveyard.tsx
View File

@@ -48,7 +48,7 @@ function GraveyardCard({ entry }: { entry: GraveyardEntry }) {
<div className="text-xs text-text-muted mt-0.5">{entry.routeName}</div>
<div className="text-[10px] text-purple-600 dark:text-purple-400 mt-0.5 font-medium">
<div className="text-[10px] text-purple-400 mt-0.5 font-medium">
Leg {entry.legOrder} &mdash; {entry.gameName}
</div>

6
frontend/src/components/GenlockeLineage.tsx
View File

@@ -29,7 +29,7 @@ function LegDot({ leg }: { leg: LineageLegEntry }) {
return (
<div className="group relative flex flex-col items-center">
<div
className={`w-4 h-4 rounded-full ${color} ring-2 ring-offset-1 ring-offset-white dark:ring-offset-gray-800 ring-gray-200 dark:ring-gray-600`}
className={`w-4 h-4 rounded-full ${color} ring-2 ring-offset-1 ring-offset-surface-1 ring-border-default`}
/>
{/* Tooltip */}
@@ -156,8 +156,8 @@ function LineageCard({ lineage, allLegOrders }: { lineage: LineageEntry; allLegO
<span
className={`px-2.5 py-1 rounded-full text-xs font-medium ${
lineage.status === 'alive'
? 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300'
: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300'
? 'bg-green-900/40 text-green-300'
: 'bg-red-900/40 text-red-300'
}`}
>
{lineage.status === 'alive' ? 'Alive' : 'Dead'}

6
frontend/src/components/HofTeamModal.tsx
View File

@@ -53,7 +53,7 @@ export function HofTeamModal({ alive, onSubmit, onSkip, isPending }: HofTeamModa
disabled={atMax}
className={`flex flex-col items-center p-3 rounded-lg border-2 text-center transition-colors ${
isSelected
? 'border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20'
? 'border-yellow-500 bg-yellow-900/20'
: atMax
? 'border-border-default opacity-40 cursor-not-allowed'
: 'border-border-default hover:border-border-default'
@@ -74,7 +74,7 @@ export function HofTeamModal({ alive, onSubmit, onSkip, isPending }: HofTeamModa
{enc.nickname || displayPokemon.name}
</span>
{enc.nickname && (
<span className="text-[10px] text-gray-400">{displayPokemon.name}</span>
<span className="text-[10px] text-text-tertiary">{displayPokemon.name}</span>
)}
</button>
)
@@ -97,7 +97,7 @@ export function HofTeamModal({ alive, onSubmit, onSkip, isPending }: HofTeamModa
type="button"
disabled={selected.size === 0 || isPending}
onClick={() => onSubmit([...selected])}
className="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
className="px-4 py-2 bg-accent-600 text-white rounded-lg font-medium hover:bg-accent-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
{isPending ? 'Saving...' : 'Confirm'}
</button>

6
frontend/src/components/RuleBadges.tsx
View File

@@ -20,10 +20,10 @@ export function RuleBadges({ rules }: RuleBadgesProps) {
title={def.description}
className={`px-2 py-0.5 rounded-full text-xs font-medium ${
def.category === 'core'
? 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300'
? 'bg-blue-900/40 text-blue-300'
: def.category === 'completion'
? 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300'
: 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300'
? 'bg-green-900/40 text-green-300'
: 'bg-amber-900/40 text-amber-300'
}`}
>
{def.name}

2
frontend/src/components/RuleToggle.tsx
View File

@@ -17,7 +17,7 @@ export function RuleToggle({ name, description, enabled, onChange }: RuleToggleP
<span className="font-medium text-text-primary">{name}</span>
<button
type="button"
className="text-gray-400 hover:text-text-secondary"
className="text-text-tertiary hover:text-text-secondary"
onMouseEnter={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}
onClick={() => setShowTooltip(!showTooltip)}

2
frontend/src/components/RulesConfiguration.tsx
View File

@@ -46,7 +46,7 @@ export function RulesConfiguration({
<button
type="button"
onClick={handleResetToDefault}
className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
className="text-sm text-text-link hover:text-accent-300"
>
Reset to Default
</button>

4
frontend/src/components/ShinyBox.tsx
View File

@@ -8,8 +8,8 @@ interface ShinyBoxProps {
export function ShinyBox({ encounters, onEncounterClick }: ShinyBoxProps) {
return (
<div className="border-2 border-yellow-400 dark:border-yellow-600 rounded-lg p-4">
<h3 className="text-sm font-semibold text-yellow-600 dark:text-yellow-400 mb-3 flex items-center gap-1.5">
<div className="border-2 border-yellow-600 rounded-lg p-4">
<h3 className="text-sm font-semibold text-yellow-400 mb-3 flex items-center gap-1.5">
<span>&#10022;</span>
Shiny Box
<span className="text-xs font-normal text-text-muted ml-1">

10
frontend/src/components/ShinyEncounterModal.tsx
View File

@@ -93,13 +93,13 @@ export function ShinyEncounterModal({
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<div className="fixed inset-0 bg-black/50" onClick={onClose} />
<div className="relative bg-surface-1 rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
<div className="sticky top-0 bg-surface-1 border-b border-yellow-300 dark:border-yellow-600 px-6 py-4 rounded-t-xl">
<div className="sticky top-0 bg-surface-1 border-b border-yellow-600 px-6 py-4 rounded-t-xl">
<div className="flex items-center justify-between">
<h2 className="text-lg font-semibold text-text-primary flex items-center gap-2">
<span className="text-yellow-500">&#10022;</span>
Log Shiny Encounter
</h2>
<button onClick={onClose} className="text-gray-400 hover:text-text-primary">
<button onClick={onClose} className="text-text-tertiary hover:text-text-primary">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
@@ -110,7 +110,7 @@ export function ShinyEncounterModal({
</svg>
</button>
</div>
<p className="text-sm text-yellow-600 dark:text-yellow-400 mt-1">
<p className="text-sm text-yellow-400 mt-1">
Shiny catches bypass the one-per-route rule
</p>
</div>
@@ -169,7 +169,7 @@ export function ShinyEncounterModal({
onClick={() => setSelectedPokemon(rp)}
className={`flex flex-col items-center p-2 rounded-lg border text-center transition-colors ${
selectedPokemon?.id === rp.id
? 'border-yellow-500 bg-yellow-50 dark:bg-yellow-900/30'
? 'border-yellow-500 bg-yellow-900/30'
: 'border-border-default hover:border-border-default'
}`}
>
@@ -190,7 +190,7 @@ export function ShinyEncounterModal({
{SPECIAL_METHODS.includes(rp.encounterMethod) && (
<EncounterMethodBadge method={rp.encounterMethod} />
)}
<span className="text-[10px] text-gray-400">
<span className="text-[10px] text-text-tertiary">
Lv. {rp.minLevel}
{rp.maxLevel !== rp.minLevel && `–${rp.maxLevel}`}
</span>

24
frontend/src/components/StatusChangeModal.tsx
View File

@@ -97,7 +97,7 @@ export function StatusChangeModal({
<h2 className="text-lg font-semibold text-text-primary">
{isDead ? 'Death Details' : 'Pokemon Status'}
</h2>
<button onClick={onClose} className="text-gray-400 hover:text-text-primary">
<button onClick={onClose} className="text-text-tertiary hover:text-text-primary">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
@@ -170,7 +170,7 @@ export function StatusChangeModal({
<button
type="button"
onClick={() => setShowEvolve(true)}
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
className="flex-1 px-4 py-2 bg-accent-600 text-white rounded-lg font-medium hover:bg-accent-500 transition-colors"
>
Evolve
</button>
@@ -201,7 +201,7 @@ export function StatusChangeModal({
<button
type="button"
onClick={() => setShowEvolve(false)}
className="text-xs text-gray-500 hover:text-text-secondary"
className="text-xs text-text-tertiary hover:text-text-secondary"
>
Back
</button>
@@ -220,7 +220,7 @@ export function StatusChangeModal({
type="button"
disabled={isPending}
onClick={() => handleEvolve(evo.toPokemon.id)}
className="w-full flex items-center gap-3 p-3 rounded-lg border border-border-default hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:border-blue-300 dark:hover:border-blue-600 transition-colors disabled:opacity-50"
className="w-full flex items-center gap-3 p-3 rounded-lg border border-border-default hover:bg-accent-900/20 hover:border-accent-600 transition-colors disabled:opacity-50"
>
{evo.toPokemon.spriteUrl ? (
<img
@@ -261,12 +261,12 @@ export function StatusChangeModal({
setShedNickname('')
setShowEvolve(true)
}}
className="text-xs text-gray-500 hover:text-text-secondary"
className="text-xs text-text-tertiary hover:text-text-secondary"
>
Back
</button>
</div>
<div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded-lg p-3">
<div className="bg-amber-900/20 border border-amber-700 rounded-lg p-3">
<div className="flex items-center gap-3">
{shedCompanion.toPokemon.spriteUrl ? (
<img
@@ -279,7 +279,7 @@ export function StatusChangeModal({
{shedCompanion.toPokemon.name[0]?.toUpperCase()}
</div>
)}
<p className="text-sm text-amber-800 dark:text-amber-300">
<p className="text-sm text-amber-300">
{displayPokemon.name} shed its shell! Would you also like to add{' '}
<span className="font-semibold">{shedCompanion.toPokemon.name}</span>?
</p>
@@ -290,7 +290,7 @@ export function StatusChangeModal({
htmlFor="shed-nickname"
className="block text-sm font-medium text-text-secondary mb-1"
>
Nickname <span className="font-normal text-gray-400">(optional)</span>
Nickname <span className="font-normal text-text-tertiary">(optional)</span>
</label>
<input
id="shed-nickname"
@@ -331,7 +331,7 @@ export function StatusChangeModal({
<button
type="button"
onClick={() => setShowFormChange(false)}
className="text-xs text-gray-500 hover:text-text-secondary"
className="text-xs text-text-tertiary hover:text-text-secondary"
>
Back
</button>
@@ -344,7 +344,7 @@ export function StatusChangeModal({
type="button"
disabled={isPending}
onClick={() => handleEvolve(form.id)}
className="w-full flex items-center gap-3 p-3 rounded-lg border border-border-default hover:bg-purple-50 dark:hover:bg-purple-900/20 hover:border-purple-300 dark:hover:border-purple-600 transition-colors disabled:opacity-50"
className="w-full flex items-center gap-3 p-3 rounded-lg border border-border-default hover:bg-purple-900/20 hover:border-purple-600 transition-colors disabled:opacity-50"
>
{form.spriteUrl ? (
<img src={form.spriteUrl} alt={form.name} className="w-10 h-10" />
@@ -382,7 +382,7 @@ export function StatusChangeModal({
htmlFor="death-level"
className="block text-sm font-medium text-text-secondary mb-1"
>
Level at Death <span className="font-normal text-gray-400">(optional)</span>
Level at Death <span className="font-normal text-text-tertiary">(optional)</span>
</label>
<input
id="death-level"
@@ -401,7 +401,7 @@ export function StatusChangeModal({
htmlFor="death-cause"
className="block text-sm font-medium text-text-secondary mb-1"
>
Cause of Death <span className="font-normal text-gray-400">(optional)</span>
Cause of Death <span className="font-normal text-text-tertiary">(optional)</span>
</label>
<input
id="death-cause"

4
frontend/src/components/StepIndicator.tsx
View File

@@ -27,7 +27,7 @@ export function StepIndicator({
disabled={!isCompleted}
className={`flex items-center gap-2 text-sm font-medium ${
isCompleted
? 'text-text-link cursor-pointer hover:text-blue-700 dark:hover:text-blue-300'
? 'text-text-link cursor-pointer hover:text-accent-300'
: isCurrent
? 'text-text-primary'
: 'text-text-muted cursor-default'
@@ -38,7 +38,7 @@ export function StepIndicator({
isCompleted
? 'bg-blue-600 text-white'
: isCurrent
? 'border-2 border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
? 'border-2 border-accent-400 text-accent-400'
: 'border-2 border-border-default text-text-muted'
}`}
>

6
frontend/src/components/TransferModal.tsx
View File

@@ -48,7 +48,7 @@ export function TransferModal({ hofTeam, onSubmit, onSkip, isPending }: Transfer
onClick={() => toggle(enc.id)}
className={`flex flex-col items-center p-3 rounded-lg border-2 text-center transition-colors ${
isSelected
? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20'
? 'border-indigo-500 bg-indigo-900/20'
: 'border-border-default hover:border-border-default'
}`}
>
@@ -67,9 +67,9 @@ export function TransferModal({ hofTeam, onSubmit, onSkip, isPending }: Transfer
{enc.nickname || displayPokemon.name}
</span>
{enc.nickname && (
<span className="text-[10px] text-gray-400">{displayPokemon.name}</span>
<span className="text-[10px] text-text-tertiary">{displayPokemon.name}</span>
)}
<span className="text-[10px] text-gray-400 mt-0.5">{enc.route.name}</span>
<span className="text-[10px] text-text-tertiary mt-0.5">{enc.route.name}</span>
</button>
)
})}

4
frontend/src/components/admin/AdminLayout.tsx
View File

@@ -21,9 +21,7 @@ export function AdminLayout() {
to={item.to}
className={({ isActive }) =>
`block px-3 py-2 rounded-md text-sm font-medium whitespace-nowrap ${
isActive
? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200'
: 'hover:bg-surface-2'
isActive ? 'bg-accent-900/40 text-accent-300' : 'hover:bg-surface-2'
}`
}
>

6
frontend/src/components/admin/BossTeamEditor.tsx
View File

@@ -175,7 +175,7 @@ export function BossTeamEditor({ boss, onSave, onClose, isSaving }: BossTeamEdit
e.stopPropagation()
removeVariant(i)
}}
className="ml-1.5 text-gray-400 hover:text-red-500 cursor-pointer"
className="ml-1.5 text-text-tertiary hover:text-red-500 cursor-pointer"
title="Remove variant"
>
&#10005;
@@ -187,7 +187,7 @@ export function BossTeamEditor({ boss, onSave, onClose, isSaving }: BossTeamEdit
<button
type="button"
onClick={() => setShowAddVariant(true)}
className="px-2 py-1.5 text-sm text-text-link hover:text-blue-700 dark:hover:text-blue-300"
className="px-2 py-1.5 text-sm text-text-link hover:text-accent-300"
title="Add variant"
>
+
@@ -219,7 +219,7 @@ export function BossTeamEditor({ boss, onSave, onClose, isSaving }: BossTeamEdit
<button
type="button"
onClick={() => setShowAddVariant(false)}
className="px-1 py-1 text-sm text-gray-400"
className="px-1 py-1 text-sm text-text-tertiary"
>
&#10005;
</button>

2
frontend/src/components/admin/BulkImportModal.tsx
View File

@@ -77,7 +77,7 @@ export function BulkImportModal({
)}
{result && (
<div className="p-3 bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-md text-sm">
<div className="p-3 bg-green-900/30 text-green-300 rounded-md text-sm">
<p>
{createdLabel}: {result.created}, {updatedLabel}: {result.updated}
</p>

2
frontend/src/components/admin/FormModal.tsx
View File

@@ -53,7 +53,7 @@ export function FormModal({
}
}}
onBlur={() => setConfirmingDelete(false)}
className="px-4 py-2 text-sm font-medium rounded-md text-status-failed border border-red-300 dark:border-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 disabled:opacity-50"
className="px-4 py-2 text-sm font-medium rounded-md text-status-failed border border-red-600 hover:bg-red-900/20 disabled:opacity-50"
>
{isDeleting ? 'Deleting...' : confirmingDelete ? 'Confirm?' : 'Delete'}
</button>

4
frontend/src/components/admin/PokemonFormModal.tsx
View File

@@ -85,7 +85,7 @@ export function PokemonFormModal({
const tabClass = (tab: Tab) =>
`px-3 py-1.5 text-sm font-medium rounded-t-md border-b-2 transition-colors ${
activeTab === tab
? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
? 'border-accent-400 text-accent-400'
: 'border-transparent text-text-tertiary hover:text-text-secondary'
}`
@@ -184,7 +184,7 @@ export function PokemonFormModal({
}
}}
onBlur={() => setConfirmingDelete(false)}
className="px-4 py-2 text-sm font-medium rounded-md text-status-failed border border-red-300 dark:border-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 disabled:opacity-50"
className="px-4 py-2 text-sm font-medium rounded-md text-status-failed border border-red-600 hover:bg-red-900/20 disabled:opacity-50"
>
{isDeleting ? 'Deleting...' : confirmingDelete ? 'Confirm?' : 'Delete'}
</button>

2
frontend/src/components/admin/PokemonSelector.tsx
View File

@@ -58,7 +58,7 @@ export function PokemonSelector({
setOpen(false)
}}
className={`px-3 py-2 cursor-pointer hover:bg-surface-2 text-sm flex items-center gap-2 ${
p.id === selectedId ? 'bg-blue-50 dark:bg-blue-900/30' : ''
p.id === selectedId ? 'bg-accent-900/30' : ''
}`}
>
{p.spriteUrl && <img src={p.spriteUrl} alt="" className="w-6 h-6" />}

10
frontend/src/pages/GenlockeDetail.tsx
View File

@@ -18,9 +18,9 @@ const statusRing: Record<RunStatus, string> = {
}
const statusStyles: Record<RunStatus, string> = {
active: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
completed: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
failed: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
active: 'bg-green-900/40 text-green-300',
completed: 'bg-blue-900/40 text-blue-300',
failed: 'bg-red-900/40 text-red-300',
}
function LegIndicator({ leg }: { leg: GenlockeLegDetail }) {
@@ -29,7 +29,7 @@ function LegIndicator({ leg }: { leg: GenlockeLegDetail }) {
const dot = status ? (
<div
className={`w-4 h-4 rounded-full ${statusColors[status]} ring-2 ring-offset-2 ring-offset-white dark:ring-offset-gray-900 ${statusRing[status]}`}
className={`w-4 h-4 rounded-full ${statusColors[status]} ring-2 ring-offset-2 ring-offset-surface-0 ${statusRing[status]}`}
/>
) : (
<div className="w-4 h-4 rounded-full bg-surface-3" />
@@ -213,7 +213,7 @@ export function GenlockeDetail() {
<h3 className="text-sm font-medium text-text-tertiary mb-2">Genlocke Rules</h3>
<div className="flex flex-wrap gap-1.5">
{genlocke.genlockeRules.retireHoF ? (
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300">
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-purple-900/40 text-purple-300">
Retire HoF Teams
</span>
) : (

6
frontend/src/pages/GenlockeList.tsx
View File

@@ -3,9 +3,9 @@ import { useGenlockes } from '../hooks/useGenlockes'
import type { RunStatus } from '../types'
const statusStyles: Record<RunStatus, string> = {
active: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
completed: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
failed: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
active: 'bg-green-900/40 text-green-300',
completed: 'bg-blue-900/40 text-blue-300',
failed: 'bg-red-900/40 text-red-300',
}
export function GenlockeList() {

10
frontend/src/pages/NewGenlocke.tsx
View File

@@ -183,7 +183,7 @@ export function NewGenlocke() {
onClick={() => handlePresetSelect(type)}
className={`flex-1 p-4 rounded-lg border-2 text-left transition-colors ${
isActive
? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20'
? 'border-accent-600 bg-accent-900/20'
: 'border-border-default hover:border-border-default'
}`}
>
@@ -498,7 +498,7 @@ function LegRow({
type="button"
disabled={index === 0}
onClick={() => onMove('up')}
className="p-1 text-gray-400 hover:text-text-secondary disabled:opacity-30 disabled:cursor-not-allowed"
className="p-1 text-text-tertiary hover:text-text-secondary disabled:opacity-30 disabled:cursor-not-allowed"
title="Move up"
>
<svg
@@ -515,7 +515,7 @@ function LegRow({
type="button"
disabled={index === total - 1}
onClick={() => onMove('down')}
className="p-1 text-gray-400 hover:text-text-secondary disabled:opacity-30 disabled:cursor-not-allowed"
className="p-1 text-text-tertiary hover:text-text-secondary disabled:opacity-30 disabled:cursor-not-allowed"
title="Move down"
>
<svg
@@ -531,7 +531,7 @@ function LegRow({
<button
type="button"
onClick={onRemove}
className="p-1 text-red-400 hover:text-red-600 dark:hover:text-red-300"
className="p-1 text-red-400 hover:text-red-300"
title="Remove leg"
>
<svg
@@ -563,7 +563,7 @@ function AddLegDropdown({
<button
type="button"
onClick={() => setOpen(true)}
className="flex items-center gap-2 text-sm text-text-link hover:text-blue-700 dark:hover:text-blue-300 font-medium"
className="flex items-center gap-2 text-sm text-text-link hover:text-accent-300 font-medium"
>
<svg
className="w-4 h-4"

14
frontend/src/pages/RunDashboard.tsx
View File

@@ -31,9 +31,9 @@ function sortEncounters(encounters: EncounterDetail[], key: TeamSortKey): Encoun
}
const statusStyles: Record<RunStatus, string> = {
active: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
completed: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
failed: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
active: 'bg-green-900/40 text-green-300',
completed: 'bg-blue-900/40 text-blue-300',
failed: 'bg-red-900/40 text-red-300',
}
function formatDuration(start: string, end: string) {
@@ -136,8 +136,8 @@ export function RunDashboard() {
<div
className={`rounded-lg p-4 mb-6 ${
run.status === 'completed'
? 'bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800'
: 'bg-status-failed-bg border border-red-200 dark:border-red-800'
? 'bg-blue-900/20 border border-blue-800'
: 'bg-status-failed-bg border border-red-800'
}`}
>
<div className="flex items-center gap-3">
@@ -147,9 +147,7 @@ export function RunDashboard() {
<div>
<p
className={`font-semibold ${
run.status === 'completed'
? 'text-blue-800 dark:text-blue-200'
: 'text-red-800 dark:text-red-200'
run.status === 'completed' ? 'text-blue-200' : 'text-red-200'
}`}
>
{run.status === 'completed' ? 'Victory!' : 'Defeat'}

68
frontend/src/pages/RunEncounters.tsx
View File

@@ -59,9 +59,9 @@ function sortEncounters(encounters: EncounterDetail[], key: TeamSortKey): Encoun
}
const statusStyles: Record<RunStatus, string> = {
active: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
completed: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
failed: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
active: 'bg-green-900/40 text-green-300',
completed: 'bg-blue-900/40 text-blue-300',
failed: 'bg-red-900/40 text-red-300',
}
function formatDuration(start: string, end: string) {
@@ -83,12 +83,12 @@ const statusIndicator: Record<RouteStatus, { dot: string; label: string; bg: str
caught: {
dot: 'bg-green-500',
label: 'Caught',
bg: 'bg-green-50 dark:bg-green-900/10',
bg: 'bg-green-900/10',
},
fainted: {
dot: 'bg-red-500',
label: 'Fainted',
bg: 'bg-red-50 dark:bg-red-900/10',
bg: 'bg-red-900/10',
},
missed: {
dot: 'bg-gray-400',
@@ -335,7 +335,7 @@ function RouteGroup({
</div>
<span className="text-xs text-text-muted shrink-0">{si.label}</span>
<svg
className={`w-4 h-4 text-gray-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
className={`w-4 h-4 text-text-tertiary transition-transform ${isExpanded ? 'rotate-180' : ''}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -801,7 +801,7 @@ export function RunEncounters() {
})}
</p>
{run.genlocke && (
<p className="text-sm text-purple-600 dark:text-purple-400 mt-1 font-medium">
<p className="text-sm text-purple-400 mt-1 font-medium">
Leg {run.genlocke.legOrder} of {run.genlocke.totalLegs} &mdash;{' '}
{run.genlocke.genlockeName}
</p>
@@ -811,7 +811,7 @@ export function RunEncounters() {
{isActive && run.rules?.shinyClause && (
<button
onClick={() => setShowShinyModal(true)}
className="px-3 py-1 text-sm border border-yellow-400 dark:border-yellow-600 text-yellow-600 dark:text-yellow-400 rounded-full font-medium hover:bg-yellow-50 dark:hover:bg-yellow-900/20 transition-colors"
className="px-3 py-1 text-sm border border-yellow-600 text-yellow-400 rounded-full font-medium hover:bg-yellow-900/20 transition-colors"
>
&#10022; Log Shiny
</button>
@@ -819,7 +819,7 @@ export function RunEncounters() {
{isActive && (
<button
onClick={() => setShowEggModal(true)}
className="px-3 py-1 text-sm border border-green-400 dark:border-green-600 text-status-active rounded-full font-medium hover:bg-green-50 dark:hover:bg-green-900/20 transition-colors"
className="px-3 py-1 text-sm border border-green-600 text-status-active rounded-full font-medium hover:bg-green-900/20 transition-colors"
>
&#x1F95A; Log Egg
</button>
@@ -846,8 +846,8 @@ export function RunEncounters() {
<div
className={`rounded-lg p-4 mb-6 ${
run.status === 'completed'
? 'bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800'
: 'bg-status-failed-bg border border-red-200 dark:border-red-800'
? 'bg-blue-900/20 border border-blue-800'
: 'bg-status-failed-bg border border-red-800'
}`}
>
<div className="flex items-center justify-between">
@@ -858,9 +858,7 @@ export function RunEncounters() {
<div>
<p
className={`font-semibold ${
run.status === 'completed'
? 'text-blue-800 dark:text-blue-200'
: 'text-red-800 dark:text-red-200'
run.status === 'completed' ? 'text-blue-200' : 'text-red-200'
}`}
>
{run.status === 'completed'
@@ -924,7 +922,7 @@ export function RunEncounters() {
</div>
{/* HoF Team Display */}
{run.status === 'completed' && (
<div className="mt-3 pt-3 border-t border-blue-200 dark:border-blue-800">
<div className="mt-3 pt-3 border-t border-blue-800">
<div className="flex items-center justify-between mb-2">
<span className="text-xs font-medium text-text-link uppercase tracking-wider">
Hall of Fame
@@ -932,7 +930,7 @@ export function RunEncounters() {
<button
type="button"
onClick={() => setShowHofModal(true)}
className="text-xs text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
className="text-xs text-blue-400 hover:text-accent-300"
>
{hofTeam ? 'Edit' : 'Select team'}
</button>
@@ -958,9 +956,7 @@ export function RunEncounters() {
})}
</div>
) : (
<p className="text-xs text-blue-500/60 dark:text-blue-400/60 italic">
No HoF team selected yet
</p>
<p className="text-xs text-blue-400/60 italic">No HoF team selected yet</p>
)}
</div>
)}
@@ -1017,8 +1013,8 @@ export function RunEncounters() {
<div
className={`w-6 h-6 rounded-full border-2 flex items-center justify-center text-xs font-bold ${
earned
? 'border-yellow-500 bg-yellow-100 dark:bg-yellow-900/40 text-yellow-700 dark:text-yellow-300'
: 'border-border-default text-gray-400'
? 'border-yellow-500 bg-yellow-900/40 text-yellow-300'
: 'border-border-default text-text-tertiary'
}`}
>
{boss.order}
@@ -1055,7 +1051,7 @@ export function RunEncounters() {
{dead.length > 0 ? `, ${dead.length} dead` : ''}
</span>
<svg
className={`w-4 h-4 text-gray-400 transition-transform ${showTeam ? 'rotate-180' : ''}`}
className={`w-4 h-4 text-text-tertiary transition-transform ${showTeam ? 'rotate-180' : ''}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -1127,9 +1123,7 @@ export function RunEncounters() {
{/* Transfer Encounters */}
{transferEncounters.length > 0 && (
<div className="mb-6">
<h2 className="text-sm font-medium text-indigo-600 dark:text-indigo-400 mb-2">
Transferred Pokemon
</h2>
<h2 className="text-sm font-medium text-indigo-400 mb-2">Transferred Pokemon</h2>
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
{transferEncounters.map((enc) => (
<PokemonCard
@@ -1159,7 +1153,7 @@ export function RunEncounters() {
bulkRandomize.mutate()
}
}}
className="px-2.5 py-1 text-xs font-medium rounded-lg border border-purple-300 dark:border-purple-600 text-purple-600 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
className="px-2.5 py-1 text-xs font-medium rounded-lg border border-purple-600 text-purple-400 hover:bg-purple-900/20 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
>
{bulkRandomize.isPending ? 'Randomizing...' : 'Randomize All'}
</button>
@@ -1303,14 +1297,14 @@ export function RunEncounters() {
other: 'Boss',
}
const bossTypeColors: Record<string, string> = {
gym_leader: 'border-yellow-400 dark:border-yellow-600',
elite_four: 'border-purple-400 dark:border-purple-600',
champion: 'border-red-400 dark:border-red-600',
rival: 'border-blue-400 dark:border-blue-600',
evil_team: 'border-gray-500 dark:border-gray-400',
kahuna: 'border-orange-400 dark:border-orange-600',
totem: 'border-teal-400 dark:border-teal-600',
other: 'border-gray-400 dark:border-gray-500',
gym_leader: 'border-yellow-600',
elite_four: 'border-purple-600',
champion: 'border-red-600',
rival: 'border-blue-600',
evil_team: 'border-gray-400',
kahuna: 'border-orange-600',
totem: 'border-teal-600',
other: 'border-gray-500',
}
const isBossExpanded = expandedBosses.has(boss.id)
@@ -1327,7 +1321,7 @@ export function RunEncounters() {
<div key={`boss-${boss.id}`}>
<div
className={`my-2 rounded-lg border-2 ${bossTypeColors[boss.bossType] ?? bossTypeColors['other']} ${
isDefeated ? 'bg-green-50/50 dark:bg-green-900/10' : 'bg-surface-1'
isDefeated ? 'bg-green-900/10' : 'bg-surface-1'
} px-4 py-3`}
>
<div
@@ -1336,7 +1330,7 @@ export function RunEncounters() {
>
<div className="flex items-center gap-3">
<svg
className={`w-4 h-4 text-gray-400 transition-transform ${isBossExpanded ? 'rotate-90' : ''}`}
className={`w-4 h-4 text-text-tertiary transition-transform ${isBossExpanded ? 'rotate-90' : ''}`}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -1364,7 +1358,7 @@ export function RunEncounters() {
</div>
<div onClick={(e) => e.stopPropagation()}>
{isDefeated ? (
<span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-full bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300">
<span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-full bg-green-900/40 text-green-300">
Defeated &#10003;
</span>
) : isActive ? (

16
frontend/src/pages/admin/AdminGameDetail.tsx
View File

@@ -95,7 +95,7 @@ function SortableRouteGroup({
<tbody
ref={setNodeRef}
style={style}
className={`${isDragging ? 'opacity-50 bg-blue-50 dark:bg-blue-900/20' : ''} divide-y divide-border-default`}
className={`${isDragging ? 'opacity-50 bg-accent-900/20' : ''} divide-y divide-border-default`}
>
<tr className="hover:bg-surface-2 cursor-pointer" onClick={() => onClick(group)}>
<td className="px-4 py-3 text-sm w-12">
@@ -103,7 +103,7 @@ function SortableRouteGroup({
{...attributes}
{...listeners}
onClick={(e) => e.stopPropagation()}
className="cursor-grab active:cursor-grabbing text-gray-400 hover:text-text-secondary touch-none"
className="cursor-grab active:cursor-grabbing text-text-tertiary hover:text-text-secondary touch-none"
title="Drag to reorder"
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
@@ -189,7 +189,7 @@ function SortableBossRow({
<tr
ref={setNodeRef}
style={style}
className={`${isDragging ? 'opacity-50 bg-blue-50 dark:bg-blue-900/20' : ''} hover:bg-surface-2 cursor-pointer`}
className={`${isDragging ? 'opacity-50 bg-accent-900/20' : ''} hover:bg-surface-2 cursor-pointer`}
onClick={() => onClick(boss)}
>
<td className="px-4 py-3 text-sm w-12">
@@ -197,7 +197,7 @@ function SortableBossRow({
{...attributes}
{...listeners}
onClick={(e) => e.stopPropagation()}
className="cursor-grab active:cursor-grabbing text-gray-400 hover:text-text-secondary touch-none"
className="cursor-grab active:cursor-grabbing text-text-tertiary hover:text-text-secondary touch-none"
title="Drag to reorder"
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
@@ -287,8 +287,8 @@ export function AdminGameDetail() {
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
)
if (isLoading) return <div className="py-8 text-center text-gray-500">Loading...</div>
if (!game) return <div className="py-8 text-center text-gray-500">Game not found</div>
if (isLoading) return <div className="py-8 text-center text-text-secondary">Loading...</div>
if (!game) return <div className="py-8 text-center text-text-secondary">Game not found</div>
const routes = game.routes ?? []
const routeGroups = organizeRoutes(routes)
@@ -362,7 +362,7 @@ export function AdminGameDetail() {
onClick={() => setTab('routes')}
className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
tab === 'routes'
? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
? 'border-accent-400 text-accent-400'
: 'border-transparent text-text-tertiary hover:text-text-secondary'
}`}
>
@@ -372,7 +372,7 @@ export function AdminGameDetail() {
onClick={() => setTab('bosses')}
className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
tab === 'bosses'
? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
? 'border-accent-400 text-accent-400'
: 'border-transparent text-text-tertiary hover:text-text-secondary'
}`}
>

13
frontend/src/pages/admin/AdminGenlockeDetail.tsx
View File

@@ -28,8 +28,9 @@ export function AdminGenlockeDetail() {
const [addingLeg, setAddingLeg] = useState(false)
const [selectedGameId, setSelectedGameId] = useState<number | ''>('')
if (isLoading) return <div className="py-8 text-center text-gray-500">Loading...</div>
if (!genlocke) return <div className="py-8 text-center text-gray-500">Genlocke not found</div>
if (isLoading) return <div className="py-8 text-center text-text-secondary">Loading...</div>
if (!genlocke)
return <div className="py-8 text-center text-text-secondary">Genlocke not found</div>
const editName = name ?? genlocke.name
const editStatus = status ?? genlocke.status
@@ -108,7 +109,7 @@ export function AdminGenlockeDetail() {
</button>
<button
onClick={() => setShowDelete(true)}
className="px-4 py-2 text-sm font-medium rounded-md border border-red-300 dark:border-red-600 text-status-failed hover:bg-red-50 dark:hover:bg-red-900/20"
className="px-4 py-2 text-sm font-medium rounded-md border border-red-600 text-status-failed hover:bg-red-900/20"
>
Delete
</button>
@@ -229,7 +230,7 @@ export function AdminGenlockeDetail() {
Run #{leg.runId}
</Link>
) : (
<span className="text-gray-400">&mdash;</span>
<span className="text-text-tertiary">&mdash;</span>
)}
</td>
<td className="px-4 py-3 text-sm whitespace-nowrap">
@@ -246,7 +247,7 @@ export function AdminGenlockeDetail() {
{leg.runStatus}
</span>
) : (
<span className="text-gray-400">&mdash;</span>
<span className="text-text-tertiary">&mdash;</span>
)}
</td>
<td className="px-4 py-3 text-sm whitespace-nowrap">{leg.encounterCount}</td>
@@ -260,7 +261,7 @@ export function AdminGenlockeDetail() {
? 'Cannot remove a leg with a linked run'
: 'Remove leg'
}
className="text-status-failed hover:text-red-800 dark:hover:text-red-300 disabled:opacity-30 disabled:cursor-not-allowed"
className="text-status-failed hover:text-red-300 disabled:opacity-30 disabled:cursor-not-allowed"
>
Remove
</button>