Implement dark-first design system with Geist typography (#28)
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 #28.
This commit is contained in:
@@ -91,16 +91,13 @@ export function StatusChangeModal({
|
||||
return (
|
||||
<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-white dark:bg-gray-800 rounded-xl shadow-xl max-w-sm w-full">
|
||||
<div className="relative bg-surface-1 rounded-xl shadow-xl max-w-sm w-full">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-border-default">
|
||||
<h2 className="text-lg font-semibold text-text-primary">
|
||||
{isDead ? 'Death Details' : 'Pokemon Status'}
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
|
||||
>
|
||||
<button onClick={onClose} className="text-gray-400 hover:text-text-primary">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
@@ -122,51 +119,46 @@ export function StatusChangeModal({
|
||||
className={`w-16 h-16 ${isDead ? 'grayscale opacity-60' : ''}`}
|
||||
/>
|
||||
) : (
|
||||
<div className="w-16 h-16 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-xl font-bold text-gray-600 dark:text-gray-300">
|
||||
<div className="w-16 h-16 rounded-full bg-surface-3 flex items-center justify-center text-xl font-bold text-text-secondary">
|
||||
{displayPokemon.name[0]?.toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900 dark:text-gray-100">
|
||||
<div className="font-semibold text-text-primary">
|
||||
{nickname || displayPokemon.name}
|
||||
</div>
|
||||
{nickname && (
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 capitalize">
|
||||
{displayPokemon.name}
|
||||
</div>
|
||||
<div className="text-xs text-text-tertiary capitalize">{displayPokemon.name}</div>
|
||||
)}
|
||||
<div className="flex flex-col items-start gap-0.5 mt-1">
|
||||
{displayPokemon.types.map((type) => (
|
||||
<TypeBadge key={type} type={type} />
|
||||
))}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
<div className="text-xs text-text-tertiary mt-1">
|
||||
Lv. {catchLevel ?? '?'} · {route.name}
|
||||
</div>
|
||||
{currentPokemon && (
|
||||
<div className="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5">
|
||||
Originally: {pokemon.name}
|
||||
</div>
|
||||
<div className="text-[10px] text-text-muted mt-0.5">Originally: {pokemon.name}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dead pokemon: view-only details */}
|
||||
{isDead && (
|
||||
<div className="bg-red-50 dark:bg-red-900/20 rounded-lg p-4 space-y-2">
|
||||
<div className="flex items-center gap-2 text-red-700 dark:text-red-400 font-medium text-sm">
|
||||
<div className="bg-status-failed-bg rounded-lg p-4 space-y-2">
|
||||
<div className="flex items-center gap-2 text-status-failed font-medium text-sm">
|
||||
<span className="w-2 h-2 rounded-full bg-red-500" />
|
||||
Deceased
|
||||
</div>
|
||||
{faintLevel !== null && (
|
||||
<div className="text-sm text-gray-700 dark:text-gray-300">
|
||||
<span className="text-gray-500 dark:text-gray-400">Level at death:</span>{' '}
|
||||
{faintLevel}
|
||||
<div className="text-sm text-text-secondary">
|
||||
<span className="text-text-tertiary">Level at death:</span> {faintLevel}
|
||||
</div>
|
||||
)}
|
||||
{deathCause && (
|
||||
<div className="text-sm text-gray-700 dark:text-gray-300">
|
||||
<span className="text-gray-500 dark:text-gray-400">Cause:</span> {deathCause}
|
||||
<div className="text-sm text-text-secondary">
|
||||
<span className="text-text-tertiary">Cause:</span> {deathCause}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -205,22 +197,20 @@ export function StatusChangeModal({
|
||||
{!isDead && showEvolve && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Evolve into:
|
||||
</h3>
|
||||
<h3 className="text-sm font-medium text-text-secondary">Evolve into:</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowEvolve(false)}
|
||||
className="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
|
||||
className="text-xs text-gray-500 hover:text-text-secondary"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
{evolutionsLoading && (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Loading evolutions...</p>
|
||||
<p className="text-sm text-text-tertiary">Loading evolutions...</p>
|
||||
)}
|
||||
{!evolutionsLoading && normalEvolutions.length === 0 && (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">No evolutions available</p>
|
||||
<p className="text-sm text-text-tertiary">No evolutions available</p>
|
||||
)}
|
||||
{!evolutionsLoading && normalEvolutions.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
@@ -230,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-gray-200 dark:border-gray-600 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-blue-50 dark:hover:bg-blue-900/20 hover:border-blue-300 dark:hover:border-blue-600 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{evo.toPokemon.spriteUrl ? (
|
||||
<img
|
||||
@@ -239,15 +229,15 @@ export function StatusChangeModal({
|
||||
className="w-10 h-10"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-sm font-bold text-gray-600 dark:text-gray-300">
|
||||
<div className="w-10 h-10 rounded-full bg-surface-3 flex items-center justify-center text-sm font-bold text-text-secondary">
|
||||
{evo.toPokemon.name[0]?.toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-left">
|
||||
<div className="font-medium text-gray-900 dark:text-gray-100 text-sm">
|
||||
<div className="font-medium text-text-primary text-sm">
|
||||
{evo.toPokemon.name}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
<div className="text-xs text-text-tertiary">
|
||||
{formatEvolutionMethod(evo)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -262,9 +252,7 @@ export function StatusChangeModal({
|
||||
{!isDead && showShedConfirm && shedCompanion && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Shed Evolution
|
||||
</h3>
|
||||
<h3 className="text-sm font-medium text-text-secondary">Shed Evolution</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
@@ -273,7 +261,7 @@ export function StatusChangeModal({
|
||||
setShedNickname('')
|
||||
setShowEvolve(true)
|
||||
}}
|
||||
className="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
|
||||
className="text-xs text-gray-500 hover:text-text-secondary"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
@@ -287,7 +275,7 @@ export function StatusChangeModal({
|
||||
className="w-12 h-12"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-12 h-12 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-sm font-bold text-gray-600 dark:text-gray-300">
|
||||
<div className="w-12 h-12 rounded-full bg-surface-3 flex items-center justify-center text-sm font-bold text-text-secondary">
|
||||
{shedCompanion.toPokemon.name[0]?.toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
@@ -300,7 +288,7 @@ export function StatusChangeModal({
|
||||
<div>
|
||||
<label
|
||||
htmlFor="shed-nickname"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
|
||||
className="block text-sm font-medium text-text-secondary mb-1"
|
||||
>
|
||||
Nickname <span className="font-normal text-gray-400">(optional)</span>
|
||||
</label>
|
||||
@@ -311,7 +299,7 @@ export function StatusChangeModal({
|
||||
value={shedNickname}
|
||||
onChange={(e) => setShedNickname(e.target.value)}
|
||||
placeholder={shedCompanion.toPokemon.name}
|
||||
className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-amber-500"
|
||||
className="w-full px-3 py-2 rounded-lg border border-border-default bg-surface-2 text-text-primary focus:outline-none focus:ring-2 focus:ring-amber-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-3 pt-1">
|
||||
@@ -319,7 +307,7 @@ export function StatusChangeModal({
|
||||
type="button"
|
||||
disabled={isPending}
|
||||
onClick={() => applyEvolution(false)}
|
||||
className="flex-1 px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-50 transition-colors"
|
||||
className="flex-1 px-4 py-2 bg-surface-2 text-text-secondary rounded-lg font-medium hover:bg-surface-3 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
Skip
|
||||
</button>
|
||||
@@ -339,13 +327,11 @@ export function StatusChangeModal({
|
||||
{!isDead && showFormChange && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Change form to:
|
||||
</h3>
|
||||
<h3 className="text-sm font-medium text-text-secondary">Change form to:</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowFormChange(false)}
|
||||
className="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
|
||||
className="text-xs text-gray-500 hover:text-text-secondary"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
@@ -358,19 +344,17 @@ 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-gray-200 dark:border-gray-600 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-50 dark:hover:bg-purple-900/20 hover:border-purple-300 dark:hover:border-purple-600 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{form.spriteUrl ? (
|
||||
<img src={form.spriteUrl} alt={form.name} className="w-10 h-10" />
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-sm font-bold text-gray-600 dark:text-gray-300">
|
||||
<div className="w-10 h-10 rounded-full bg-surface-3 flex items-center justify-center text-sm font-bold text-text-secondary">
|
||||
{form.name[0]?.toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-left">
|
||||
<div className="font-medium text-gray-900 dark:text-gray-100 text-sm">
|
||||
{form.name}
|
||||
</div>
|
||||
<div className="font-medium text-text-primary text-sm">{form.name}</div>
|
||||
<div className="flex gap-1">
|
||||
{form.types.map((type) => (
|
||||
<TypeBadge key={type} type={type} />
|
||||
@@ -387,8 +371,8 @@ export function StatusChangeModal({
|
||||
{/* Confirmation form */}
|
||||
{!isDead && showConfirm && (
|
||||
<div className="space-y-3">
|
||||
<div className="bg-red-50 dark:bg-red-900/20 rounded-lg p-3">
|
||||
<p className="text-sm text-red-700 dark:text-red-400 font-medium">
|
||||
<div className="bg-status-failed-bg rounded-lg p-3">
|
||||
<p className="text-sm text-status-failed font-medium">
|
||||
This cannot be undone (Nuzlocke rules).
|
||||
</p>
|
||||
</div>
|
||||
@@ -396,7 +380,7 @@ export function StatusChangeModal({
|
||||
<div>
|
||||
<label
|
||||
htmlFor="death-level"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
|
||||
className="block text-sm font-medium text-text-secondary mb-1"
|
||||
>
|
||||
Level at Death <span className="font-normal text-gray-400">(optional)</span>
|
||||
</label>
|
||||
@@ -408,14 +392,14 @@ export function StatusChangeModal({
|
||||
value={deathLevel}
|
||||
onChange={(e) => setDeathLevel(e.target.value)}
|
||||
placeholder="Level"
|
||||
className="w-24 px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-red-500"
|
||||
className="w-24 px-3 py-2 rounded-lg border border-border-default bg-surface-2 text-text-primary focus:outline-none focus:ring-2 focus:ring-red-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="death-cause"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
|
||||
className="block text-sm font-medium text-text-secondary mb-1"
|
||||
>
|
||||
Cause of Death <span className="font-normal text-gray-400">(optional)</span>
|
||||
</label>
|
||||
@@ -426,7 +410,7 @@ export function StatusChangeModal({
|
||||
value={cause}
|
||||
onChange={(e) => setCause(e.target.value)}
|
||||
placeholder="e.g. Crit from rival's Charizard"
|
||||
className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-red-500"
|
||||
className="w-full px-3 py-2 rounded-lg border border-border-default bg-surface-2 text-text-primary focus:outline-none focus:ring-2 focus:ring-red-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -434,7 +418,7 @@ export function StatusChangeModal({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowConfirm(false)}
|
||||
className="flex-1 px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
|
||||
className="flex-1 px-4 py-2 bg-surface-2 text-text-secondary rounded-lg font-medium hover:bg-surface-3 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
@@ -454,11 +438,11 @@ export function StatusChangeModal({
|
||||
{/* Footer for dead/no-confirm/no-evolve views */}
|
||||
{(isDead ||
|
||||
(!isDead && !showConfirm && !showEvolve && !showFormChange && !showShedConfirm)) && (
|
||||
<div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end">
|
||||
<div className="px-6 py-4 border-t border-border-default flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
|
||||
className="px-4 py-2 bg-surface-2 text-text-secondary rounded-lg font-medium hover:bg-surface-3 transition-colors"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user