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:
@@ -98,7 +98,7 @@ export function AdminRouteDetail() {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<nav className="text-sm mb-4 text-gray-500 dark:text-gray-400">
|
||||
<nav className="text-sm mb-4 text-text-tertiary">
|
||||
<Link to="/admin/games" className="hover:underline">
|
||||
Games
|
||||
</Link>
|
||||
@@ -108,7 +108,7 @@ export function AdminRouteDetail() {
|
||||
</Link>
|
||||
{' / '}
|
||||
<select
|
||||
className="text-gray-900 dark:text-gray-100 bg-transparent font-medium cursor-pointer hover:underline border-none p-0 text-sm"
|
||||
className="text-text-primary bg-transparent font-medium cursor-pointer hover:underline border-none p-0 text-sm"
|
||||
value={rId}
|
||||
onChange={(e) => navigate(`/admin/games/${gId}/routes/${e.target.value}`)}
|
||||
>
|
||||
@@ -129,26 +129,26 @@ export function AdminRouteDetail() {
|
||||
{prevRoute ? (
|
||||
<Link
|
||||
to={`/admin/games/${gId}/routes/${prevRoute.id}`}
|
||||
className="px-2 py-1 text-sm rounded border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
className="px-2 py-1 text-sm rounded border border-border-default hover:bg-surface-2"
|
||||
title={prevRoute.name}
|
||||
>
|
||||
← Prev
|
||||
</Link>
|
||||
) : (
|
||||
<span className="px-2 py-1 text-sm rounded border border-gray-200 dark:border-gray-700 text-gray-300 dark:text-gray-600 cursor-not-allowed">
|
||||
<span className="px-2 py-1 text-sm rounded border border-border-default text-text-muted cursor-not-allowed">
|
||||
← Prev
|
||||
</span>
|
||||
)}
|
||||
{nextRoute ? (
|
||||
<Link
|
||||
to={`/admin/games/${gId}/routes/${nextRoute.id}`}
|
||||
className="px-2 py-1 text-sm rounded border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
className="px-2 py-1 text-sm rounded border border-border-default hover:bg-surface-2"
|
||||
title={nextRoute.name}
|
||||
>
|
||||
Next →
|
||||
</Link>
|
||||
) : (
|
||||
<span className="px-2 py-1 text-sm rounded border border-gray-200 dark:border-gray-700 text-gray-300 dark:text-gray-600 cursor-not-allowed">
|
||||
<span className="px-2 py-1 text-sm rounded border border-border-default text-text-muted cursor-not-allowed">
|
||||
Next →
|
||||
</span>
|
||||
)}
|
||||
@@ -156,7 +156,7 @@ export function AdminRouteDetail() {
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCreate(true)}
|
||||
className="px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700"
|
||||
className="px-4 py-2 text-sm font-medium rounded-md bg-accent-600 text-white hover:bg-accent-500"
|
||||
>
|
||||
Add Pokemon
|
||||
</button>
|
||||
@@ -212,26 +212,26 @@ export function AdminRouteDetail() {
|
||||
<h3 className="text-lg font-semibold">Sub-areas ({childRoutes.length})</h3>
|
||||
<button
|
||||
onClick={() => setShowCreateChild(true)}
|
||||
className="px-3 py-1.5 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700"
|
||||
className="px-3 py-1.5 text-sm font-medium rounded-md bg-accent-600 text-white hover:bg-accent-500"
|
||||
>
|
||||
Add Sub-area
|
||||
</button>
|
||||
</div>
|
||||
{childRoutes.length === 0 ? (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">No sub-areas for this route.</p>
|
||||
<p className="text-sm text-text-tertiary">No sub-areas for this route.</p>
|
||||
) : (
|
||||
<div className="border rounded-md dark:border-gray-700 divide-y dark:divide-gray-700">
|
||||
<div className="border border-border-default rounded-md divide-y divide-border-default">
|
||||
{childRoutes.map((child) => (
|
||||
<div key={child.id} className="flex items-center justify-between px-4 py-2">
|
||||
<Link
|
||||
to={`/admin/games/${gId}/routes/${child.id}`}
|
||||
className="text-blue-600 dark:text-blue-400 hover:underline"
|
||||
className="text-text-link hover:underline"
|
||||
>
|
||||
{child.name}
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setDeletingChild(child)}
|
||||
className="text-sm text-red-600 dark:text-red-400 hover:underline"
|
||||
className="text-sm text-status-failed hover:underline"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user