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

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>