Skip to content

Commit 339a92d

Browse files
NiallJoeMaherclaude
NiallJoeMaher
and
claude
committed
fix(relaunch): tokenize remaining live surfaces
Reader action bars (ArticleActionBar + ContentDetail ActionBar/MetaHeader/ SourceInfoCard/TypeBadge), the global ReportModal + PromptDialog, the source-feed + job detail pages, and the speaker/volunteer forms — swap light-mode neutral/ white/black + blue/red/green + dark: pairs for design tokens (bg-surface/inset/ elevated, text-fg/muted/faint, border-hairline/strong, mint accent, status washes). Helpful/upvote → success/accent, bookmark-active → accent, report/ destructive → danger. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 3bfe046 commit 339a92d

13 files changed

Lines changed: 173 additions & 185 deletions

File tree

‎app/(app)/feed/[sourceSlug]/[shortId]/_client.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -60,12 +60,12 @@ const FeedArticlePage = ({ sourceSlug, shortId }: Props) => {
6060
return (
6161
<div className="mx-auto max-w-3xl px-4 py-8">
6262
<div className="animate-pulse">
63-
<div className="mb-4 h-6 w-24 rounded bg-neutral-200 dark:bg-neutral-700" />
64-
<div className="mb-4 h-4 w-48 rounded bg-neutral-200 dark:bg-neutral-700" />
65-
<div className="mb-2 h-8 w-full rounded bg-neutral-200 dark:bg-neutral-700" />
66-
<div className="mb-4 h-8 w-3/4 rounded bg-neutral-200 dark:bg-neutral-700" />
67-
<div className="mb-6 h-20 w-full rounded bg-neutral-200 dark:bg-neutral-700" />
68-
<div className="h-12 w-full rounded bg-neutral-200 dark:bg-neutral-700" />
63+
<div className="mb-4 h-6 w-24 rounded bg-inset" />
64+
<div className="mb-4 h-4 w-48 rounded bg-inset" />
65+
<div className="mb-2 h-8 w-full rounded bg-inset" />
66+
<div className="mb-4 h-8 w-3/4 rounded bg-inset" />
67+
<div className="mb-6 h-20 w-full rounded bg-inset" />
68+
<div className="h-12 w-full rounded bg-inset" />
6969
</div>
7070
</div>
7171
);
@@ -76,15 +76,15 @@ const FeedArticlePage = ({ sourceSlug, shortId }: Props) => {
7676
<div className="mx-auto max-w-3xl px-4 py-8">
7777
<Link
7878
href="/feed"
79-
className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
79+
className="mb-4 inline-flex items-center gap-1 text-sm text-muted hover:text-fg"
8080
>
8181
Back to Feed
8282
</Link>
83-
<div className="rounded-lg border border-red-200 bg-red-50 p-6 text-center dark:border-red-800 dark:bg-red-950">
84-
<h1 className="text-lg font-semibold text-red-700 dark:text-red-300">
83+
<div className="rounded-lg border border-danger/30 bg-danger/12 p-6 text-center">
84+
<h1 className="text-lg font-semibold text-danger">
8585
Post Not Found
8686
</h1>
87-
<p className="mt-2 text-sm text-red-600 dark:text-red-400">
87+
<p className="mt-2 text-sm text-danger">
8888
This post may have been removed or the link is invalid.
8989
</p>
9090
</div>
@@ -158,13 +158,13 @@ const FeedArticlePage = ({ sourceSlug, shortId }: Props) => {
158158
/>
159159

160160
{/* Title */}
161-
<h1 className="mb-3 text-2xl font-bold leading-tight text-neutral-900 dark:text-neutral-100 md:text-3xl">
161+
<h1 className="mb-3 font-display text-2xl font-extrabold leading-tight tracking-tight text-fg md:text-3xl">
162162
{article.title}
163163
</h1>
164164

165165
{/* Excerpt */}
166166
{article.excerpt && (
167-
<p className="mb-4 text-neutral-600 dark:text-neutral-400">
167+
<p className="mb-4 text-muted">
168168
{article.excerpt}
169169
</p>
170170
)}
@@ -198,7 +198,7 @@ const FeedArticlePage = ({ sourceSlug, shortId }: Props) => {
198198
target="_blank"
199199
rel="noopener noreferrer"
200200
onClick={handleExternalClick}
201-
className="flex items-center justify-center gap-2 rounded-lg bg-accent px-6 py-3 font-medium text-white transition-colors hover:bg-accent"
201+
className="primary-button flex items-center justify-center gap-2"
202202
>
203203
<ArrowTopRightOnSquareIcon className="h-5 w-5" />
204204
Read Full Article at {hostname}

‎app/(app)/feed/[sourceSlug]/_client.tsx‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -60,14 +60,14 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
6060

6161
if (sourceStatus === "pending") {
6262
return (
63-
<div className="mx-auto max-w-2xl px-4 text-black dark:text-white">
63+
<div className="mx-auto max-w-2xl px-4 text-fg">
6464
<div className="pt-6 sm:flex">
6565
<div className="mr-4 flex-shrink-0 self-center">
66-
<div className="mb-2 h-20 w-20 animate-pulse rounded-full bg-neutral-200 dark:bg-neutral-700 sm:mb-0 sm:h-24 sm:w-24 lg:h-32 lg:w-32" />
66+
<div className="mb-2 h-20 w-20 animate-pulse rounded-full bg-inset sm:mb-0 sm:h-24 sm:w-24 lg:h-32 lg:w-32" />
6767
</div>
6868
<div className="flex flex-col justify-center">
69-
<div className="mb-2 h-6 w-48 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700" />
70-
<div className="h-4 w-32 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700" />
69+
<div className="mb-2 h-6 w-48 animate-pulse rounded bg-inset" />
70+
<div className="h-4 w-32 animate-pulse rounded bg-inset" />
7171
</div>
7272
</div>
7373
</div>
@@ -76,17 +76,17 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
7676

7777
if (sourceStatus === "error" || !source) {
7878
return (
79-
<div className="mx-auto max-w-2xl px-4 py-8 text-black dark:text-white">
80-
<div className="rounded-lg border border-red-200 bg-red-50 p-6 text-center dark:border-red-800 dark:bg-red-950">
81-
<h1 className="text-lg font-semibold text-red-700 dark:text-red-300">
79+
<div className="mx-auto max-w-2xl px-4 py-8 text-fg">
80+
<div className="rounded-lg border border-danger/30 bg-danger/12 p-6 text-center">
81+
<h1 className="text-lg font-semibold text-danger">
8282
Source Not Found
8383
</h1>
84-
<p className="mt-2 text-sm text-red-600 dark:text-red-400">
84+
<p className="mt-2 text-sm text-danger">
8585
This source may have been removed or the link is invalid.
8686
</p>
8787
<Link
8888
href="/feed"
89-
className="mt-4 inline-block text-sm text-blue-500 hover:underline"
89+
className="mt-4 inline-block text-sm text-accent-soft hover:text-accent"
9090
>
9191
Back to Feed
9292
</Link>
@@ -100,7 +100,7 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
100100

101101
return (
102102
<>
103-
<div className="text-900 mx-auto max-w-2xl px-4 text-black dark:text-white">
103+
<div className="mx-auto max-w-2xl px-4 text-fg">
104104
{/* Profile header - matching user profile pattern exactly */}
105105
<div className="pt-6 sm:flex">
106106
<div className="mr-4 flex-shrink-0 self-center">
@@ -117,16 +117,16 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
117117
src={faviconUrl}
118118
/>
119119
) : (
120-
<div className="mb-2 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-accent to-accent text-3xl font-bold text-white sm:mb-0 sm:h-24 sm:w-24 lg:h-32 lg:w-32 lg:text-4xl">
120+
<div className="mb-2 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-accent to-accent text-3xl font-bold text-on-accent sm:mb-0 sm:h-24 sm:w-24 lg:h-32 lg:w-32 lg:text-4xl">
121121
{source.name?.charAt(0).toUpperCase() || "?"}
122122
</div>
123123
)}
124124
</div>
125125
<div className="flex flex-col justify-center">
126-
<h1 className="mb-0 text-lg font-bold md:text-xl">{source.name}</h1>
127-
<h2 className="text-sm font-bold text-neutral-500 dark:text-neutral-400">
128-
@{sourceSlug}
129-
</h2>
126+
<h1 className="mb-0 font-display text-lg font-extrabold tracking-tight text-fg md:text-xl">
127+
{source.name}
128+
</h1>
129+
<h2 className="text-sm font-bold text-muted">@{sourceSlug}</h2>
130130
<p className="mt-1">{source.description || ""}</p>
131131
{source.websiteUrl && (
132132
<Link
@@ -135,8 +135,8 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
135135
target="_blank"
136136
rel="noopener noreferrer"
137137
>
138-
<LinkIcon className="mr-2 h-5 text-neutral-500 dark:text-neutral-400" />
139-
<p className="mt-1 text-blue-500">
138+
<LinkIcon className="mr-2 h-5 text-muted" />
139+
<p className="mt-1 text-accent-soft hover:text-accent">
140140
{getDomainFromUrl(source.websiteUrl)}
141141
</p>
142142
</Link>
@@ -156,11 +156,11 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
156156
{[...Array(5)].map((_, i) => (
157157
<div
158158
key={i}
159-
className="animate-pulse rounded-lg border border-neutral-200 p-3 dark:border-neutral-700"
159+
className="animate-pulse rounded-lg border border-hairline p-3"
160160
>
161-
<div className="mb-2 h-4 w-1/4 rounded bg-neutral-200 dark:bg-neutral-700" />
162-
<div className="mb-2 h-5 w-3/4 rounded bg-neutral-200 dark:bg-neutral-700" />
163-
<div className="h-4 w-1/2 rounded bg-neutral-200 dark:bg-neutral-700" />
161+
<div className="mb-2 h-4 w-1/4 rounded bg-inset" />
162+
<div className="mb-2 h-5 w-3/4 rounded bg-inset" />
163+
<div className="h-4 w-1/2 rounded bg-inset" />
164164
</div>
165165
))}
166166
</div>
@@ -202,12 +202,12 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
202202
{/* Load more trigger */}
203203
<div ref={loadMoreRef} className="py-4 text-center">
204204
{isFetchingNextPage && (
205-
<div className="text-sm text-neutral-500 dark:text-neutral-400">
205+
<div className="text-sm text-muted">
206206
Loading more articles...
207207
</div>
208208
)}
209209
{!hasNextPage && articles.length > 0 && (
210-
<div className="text-sm text-neutral-500 dark:text-neutral-400">
210+
<div className="text-sm text-muted">
211211
No more articles
212212
</div>
213213
)}

‎app/(app)/jobs/[slug]/_client.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default function JobDetailClient({ slug }: { slug: string }) {
2929
if (isLoading) {
3030
return (
3131
<div className="mx-auto max-w-3xl p-3 pt-8 sm:px-4">
32-
<p className="text-neutral-500 dark:text-neutral-400">Loading…</p>
32+
<p className="text-muted">Loading…</p>
3333
</div>
3434
);
3535
}
@@ -38,7 +38,7 @@ export default function JobDetailClient({ slug }: { slug: string }) {
3838
return (
3939
<div className="mx-auto max-w-3xl p-3 pt-8 text-center sm:px-4">
4040
<Heading level={1}>Job not found</Heading>
41-
<p className="mt-2 text-neutral-500 dark:text-neutral-400">
41+
<p className="mt-2 text-muted">
4242
This listing may have expired or been removed.
4343
</p>
4444
<Link href="/jobs" className="primary-button mt-6 inline-block">
@@ -52,7 +52,7 @@ export default function JobDetailClient({ slug }: { slug: string }) {
5252
<div className="mx-auto max-w-3xl p-3 pt-8 sm:px-4">
5353
<Link
5454
href="/jobs"
55-
className="text-sm text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
55+
className="text-sm text-muted hover:text-fg"
5656
>
5757
← All jobs
5858
</Link>
@@ -69,12 +69,12 @@ export default function JobDetailClient({ slug }: { slug: string }) {
6969
<div className="flex flex-wrap items-center gap-2">
7070
<Heading level={1}>{job.jobTitle}</Heading>
7171
{job.featured && (
72-
<span className="rounded-full bg-accent px-2 py-0.5 text-xs font-semibold text-white">
72+
<span className="rounded-full bg-accent px-2 py-0.5 text-xs font-semibold text-on-accent">
7373
Featured
7474
</span>
7575
)}
7676
</div>
77-
<p className="mt-1 text-neutral-600 dark:text-neutral-400">
77+
<p className="mt-1 text-muted">
7878
{job.companyName} · {job.jobLocation}
7979
{job.remote ? " · Remote" : ""}
8080
</p>
@@ -83,7 +83,7 @@ export default function JobDetailClient({ slug }: { slug: string }) {
8383

8484
{/* Meta badges */}
8585
<div className="mt-4 flex flex-wrap gap-2">
86-
<span className="rounded-full bg-neutral-100 px-3 py-1 text-sm text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300">
86+
<span className="rounded-full bg-inset px-3 py-1 text-sm text-muted">
8787
{TYPE_LABELS[job.type] ?? job.type}
8888
</span>
8989
{job.aiNative && (
@@ -92,19 +92,19 @@ export default function JobDetailClient({ slug }: { slug: string }) {
9292
</span>
9393
)}
9494
{job.relocation && (
95-
<span className="rounded-full bg-neutral-100 px-3 py-1 text-sm text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300">
95+
<span className="rounded-full bg-inset px-3 py-1 text-sm text-muted">
9696
Relocation
9797
</span>
9898
)}
9999
{job.visaSponsorship && (
100-
<span className="rounded-full bg-neutral-100 px-3 py-1 text-sm text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300">
100+
<span className="rounded-full bg-inset px-3 py-1 text-sm text-muted">
101101
Visa sponsorship
102102
</span>
103103
)}
104104
{job.tags.map((t) => (
105105
<span
106106
key={t}
107-
className="rounded-full bg-neutral-100 px-3 py-1 text-sm text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300"
107+
className="rounded-full bg-inset px-3 py-1 text-sm text-muted"
108108
>
109109
{t}
110110
</span>
@@ -127,7 +127,7 @@ export default function JobDetailClient({ slug }: { slug: string }) {
127127

128128
{/* Description */}
129129
{job.jobDescription && (
130-
<div className="mt-8 whitespace-pre-wrap leading-relaxed text-neutral-800 dark:text-neutral-200">
130+
<div className="mt-8 whitespace-pre-wrap leading-relaxed text-muted">
131131
{job.jobDescription}
132132
</div>
133133
)}

‎app/(app)/volunteer/_client.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@ import { VolunteerForm } from "@/components/Volunteer/VolunteerForm";
22

33
export function VolunteerClient() {
44
return (
5-
<div className="bg-black">
5+
<div className="bg-canvas">
66
<div className="mx-auto max-w-3xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
77
<header className="mb-10">
88
<p className="mb-4 inline-block rounded-full bg-gradient-to-r from-accent/20 to-accent/20 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-accent">
99
Volunteer with Codú
1010
</p>
11-
<h1 className="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
11+
<h1 className="font-display text-3xl text-fg sm:text-4xl">
1212
Help us build Ireland&apos;s largest web dev community
1313
</h1>
14-
<p className="mt-4 text-lg leading-relaxed text-neutral-300">
14+
<p className="mt-4 text-lg leading-relaxed text-muted">
1515
Codú is Ireland&apos;s largest web dev community — thousands of
1616
developers, regular meetups, and a newsletter across the Irish tech
1717
ecosystem. We&apos;re opening volunteer spots for people interested
@@ -21,7 +21,7 @@ export function VolunteerClient() {
2121

2222
<VolunteerForm />
2323

24-
<p className="mt-6 text-center text-sm text-neutral-400">
24+
<p className="mt-6 text-center text-sm text-faint">
2525
Takes about 3 minutes. We read every application and reply within 2
2626
weeks.
2727
</p>

0 commit comments

Comments
 (0)