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

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

Browse Source 
Co-authored-by: Julian Tabel <juliantabel.jt@gmail.com>
Co-committed-by: Julian Tabel <juliantabel.jt@gmail.com>
This commit was merged in pull request #29.
This commit is contained in:
Julian Tabel
2026-02-17 21:08:53 +01:00
committed by TheFurya
parent 42b66ee9a2
commit 92dad22981
32 changed files with 163 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>