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

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 ? (