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:
@@ -14,10 +14,10 @@ export function GenlockeList() {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto p-8">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">Your Genlockes</h1>
|
||||
<h1 className="text-3xl font-bold text-text-primary">Your Genlockes</h1>
|
||||
<Link
|
||||
to="/genlockes/new"
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-accent-400 focus:ring-offset-2 transition-colors"
|
||||
>
|
||||
Start New Genlocke
|
||||
</Link>
|
||||
@@ -30,14 +30,14 @@ export function GenlockeList() {
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="rounded-lg bg-red-50 dark:bg-red-900/20 p-4 text-red-700 dark:text-red-400">
|
||||
<div className="rounded-lg bg-status-failed-bg p-4 text-status-failed">
|
||||
Failed to load genlockes. Please try again.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{genlockes && genlockes.length === 0 && (
|
||||
<div className="text-center py-16">
|
||||
<p className="text-lg text-gray-500 dark:text-gray-400 mb-4">
|
||||
<p className="text-lg text-text-tertiary mb-4">
|
||||
No genlockes yet. Start your first Generation Locke!
|
||||
</p>
|
||||
<Link
|
||||
@@ -55,14 +55,12 @@ export function GenlockeList() {
|
||||
<Link
|
||||
key={g.id}
|
||||
to={`/genlockes/${g.id}`}
|
||||
className="block bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-shadow p-4"
|
||||
className="block bg-surface-1 rounded-lg shadow hover:shadow-md transition-shadow p-4"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||||
{g.name}
|
||||
</h2>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
<h2 className="text-lg font-semibold text-text-primary">{g.name}</h2>
|
||||
<p className="text-sm text-text-tertiary">
|
||||
{g.currentLegOrder !== null
|
||||
? `Leg ${g.currentLegOrder} / ${g.totalLegs}`
|
||||
: `${g.completedLegs} / ${g.totalLegs} legs completed`}
|
||||
|
||||
Reference in New Issue
Block a user