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

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"