localadministrator/avbeat-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AV: precise recolor to spec — warm dark backgrounds (#1c1815/#231d18/#26201a/#15110e) + gold #F0A623 / orange #D85A30 accents + warm text (#FBEFE0/#C9BBA8/#8a7e6e). 138 component files + 36 token swaps.

Browse Source
This commit is contained in:
Ryan Salazar
2026-06-02 23:46:00 +00:00
parent 01c1abf99d
commit 2876ac6ecd
141 changed files with 2020 additions and 2020 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/app/forum/[slug]/page.tsx
View File

@@ -74,27 +74,27 @@ function TopThreadsWidget({ categoryId }: { categoryId: string }) {
const getMetricValue = (thread: ForumThread) => {
if (activeMetric === 'upvotes') return { value: thread.upvotes ?? 0, label: 'votes', color: 'text-[#22c55e]' };
if (activeMetric === 'replies') return { value: thread.reply_count, label: 'replies', color: 'text-[#ffb800]' };
if (activeMetric === 'replies') return { value: thread.reply_count, label: 'replies', color: 'text-[#F0A623]' };
return { value: thread.view_count, label: 'views', color: 'text-[#f59e0b]' };
};
return (
<div className="bg-[#1a1a1a] border border-[#252525] rounded-xl overflow-hidden mb-6">
<div className="bg-[#231d18] border border-[#3a322b] rounded-xl overflow-hidden mb-6">
{/* Header */}
<div className="flex items-center justify-between px-5 py-4 border-b border-[#252525]">
<div className="flex items-center justify-between px-5 py-4 border-b border-[#3a322b]">
<div className="flex items-center gap-2">
<span className="text-lg">🏆</span>
<h2 className="text-white font-heading font-bold text-base">Top Performing Threads</h2>
</div>
{/* Metric Tabs */}
<div className="flex gap-1 bg-[#111] border border-[#2a2a2a] rounded-lg p-1">
<div className="flex gap-1 bg-[#111] border border-[#3a322b] rounded-lg p-1">
{metrics.map(m => (
<button
key={m.value}
onClick={() => setActiveMetric(m.value)}
className={`px-3 py-1 rounded-md text-xs font-body font-semibold transition-colors whitespace-nowrap ${
activeMetric === m.value
? 'bg-[#ffb800] text-white'
? 'bg-[#F0A623] text-white'
: 'text-[#666] hover:text-[#aaa]'
}`}
>
@@ -111,12 +111,12 @@ function TopThreadsWidget({ categoryId }: { categoryId: string }) {
<>
{[...Array(5)].map((_, i) => (
<div key={i} className="flex items-center gap-3 px-5 py-3">
<div className="w-6 h-6 bg-[#252525] rounded animate-pulse flex-shrink-0" />
<div className="w-6 h-6 bg-[#3a322b] rounded animate-pulse flex-shrink-0" />
<div className="flex-1 space-y-1.5">
<div className="h-3.5 bg-[#252525] rounded animate-pulse w-3/4" />
<div className="h-3.5 bg-[#3a322b] rounded animate-pulse w-3/4" />
<div className="h-2.5 bg-[#1e1e1e] rounded animate-pulse w-1/3" />
</div>
<div className="w-10 h-8 bg-[#252525] rounded animate-pulse flex-shrink-0" />
<div className="w-10 h-8 bg-[#3a322b] rounded animate-pulse flex-shrink-0" />
</div>
))}
</>
@@ -142,11 +142,11 @@ function TopThreadsWidget({ categoryId }: { categoryId: string }) {
</span>
{/* Thread info */}
<div className="flex-1 min-w-0">
<p className="text-white font-body text-sm font-semibold group-hover:text-[#ffb800] transition-colors truncate leading-snug">
<p className="text-white font-body text-sm font-semibold group-hover:text-[#F0A623] transition-colors truncate leading-snug">
{thread.title}
</p>
<p className="text-[#555] font-body text-xs mt-0.5">
<Link href={`/forum/user/${encodeURIComponent(thread.author_name)}`} className="text-[#666] hover:text-[#ffb800] hover:underline" onClick={(e) => e.stopPropagation()}>{thread.author_name}</Link>
<Link href={`/forum/user/${encodeURIComponent(thread.author_name)}`} className="text-[#666] hover:text-[#F0A623] hover:underline" onClick={(e) => e.stopPropagation()}>{thread.author_name}</Link>
{' · '}{timeAgo(thread.created_at)}
</p>
</div>
@@ -277,12 +277,12 @@ export default function ForumCategoryPage() {
return (
<>
<Header />
<main className="min-h-screen bg-[#111111]">
<main className="min-h-screen bg-[#1c1815]">
{/* Breadcrumb + Header */}
<div className="bg-[#1a1208] border-b border-[#2a3a50]">
<div className="bg-[#231d18] border-b border-[#2a3a50]">
<div className="max-w-container mx-auto px-4 py-8">
<nav className="text-sm font-body text-[#666] mb-3">
<Link href="/forum" className="hover:text-[#ffb800] transition-colors">Forum</Link>
<Link href="/forum" className="hover:text-[#F0A623] transition-colors">Forum</Link>
<span className="mx-2">›</span>
<span className="text-[#aab4c4]">{category?.name || slug}</span>
</nav>
@@ -299,14 +299,14 @@ export default function ForumCategoryPage() {
{isAuthenticated ? (
<button
onClick={() => setShowNewThread(!showNewThread)}
className="flex-shrink-0 bg-[#ffb800] hover:bg-[#d99700] text-white font-body font-semibold text-sm px-4 py-2 rounded-lg transition-colors"
className="flex-shrink-0 bg-[#F0A623] hover:bg-[#BA7517] text-white font-body font-semibold text-sm px-4 py-2 rounded-lg transition-colors"
>
+ New Thread
</button>
) : (
<Link
href={`/forum/login?next=${typeof window === 'undefined' ? '/forum' : encodeURIComponent(window.location.pathname)}`}
className="flex-shrink-0 bg-[#ffb800] hover:bg-[#d99700] text-white font-body font-semibold text-sm px-4 py-2 rounded-lg transition-colors"
className="flex-shrink-0 bg-[#F0A623] hover:bg-[#BA7517] text-white font-body font-semibold text-sm px-4 py-2 rounded-lg transition-colors"
>
Sign in to post
</Link>
@@ -318,7 +318,7 @@ export default function ForumCategoryPage() {
<div className="max-w-container mx-auto px-4 py-6">
{/* New Thread Form — auth-gated */}
{showNewThread && isAuthenticated && (
<form onSubmit={handleNewThread} className="bg-[#1a1208] border border-[#2a3a50] rounded-lg p-5 mb-6">
<form onSubmit={handleNewThread} className="bg-[#231d18] border border-[#2a3a50] rounded-lg p-5 mb-6">
<h3 className="text-white font-heading font-semibold mb-4">Start a New Thread</h3>
<div className="space-y-3">
<input
@@ -327,7 +327,7 @@ export default function ForumCategoryPage() {
value={newTitle}
onChange={e => setNewTitle(e.target.value)}
required
className="w-full bg-[#111] border border-[#333] rounded-lg px-3 py-2 text-white font-body text-sm placeholder-[#555] focus:outline-none focus:border-[#ffb800]"
className="w-full bg-[#111] border border-[#333] rounded-lg px-3 py-2 text-white font-body text-sm placeholder-[#555] focus:outline-none focus:border-[#F0A623]"
/>
<textarea
placeholder="What would you like to discuss? *"
@@ -335,14 +335,14 @@ export default function ForumCategoryPage() {
onChange={e => setNewBody(e.target.value)}
required
rows={5}
className="w-full bg-[#111] border border-[#333] rounded-lg px-3 py-2 text-white font-body text-sm placeholder-[#555] focus:outline-none focus:border-[#ffb800] resize-none"
className="w-full bg-[#111] border border-[#333] rounded-lg px-3 py-2 text-white font-body text-sm placeholder-[#555] focus:outline-none focus:border-[#F0A623] resize-none"
/>
<div className="flex items-center gap-3">
<ImageAttachButton onInsert={(md) => setNewBody((b) => (b || "") + md)} />
<span className="text-[10px] text-[#666]">Auto-optimized, never &gt; 20 MB</span>
</div>
{newError && (
<div className="bg-[#2a0a0a] border border-[#d60701] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
<div className="bg-[#2a0a0a] border border-[#D85A30] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
{newError}
</div>
)}
@@ -350,14 +350,14 @@ export default function ForumCategoryPage() {
<button
type="submit"
disabled={submitting}
className="bg-[#ffb800] hover:bg-[#d99700] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-2 rounded-lg transition-colors"
className="bg-[#F0A623] hover:bg-[#BA7517] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-2 rounded-lg transition-colors"
>
{submitting ? 'Posting...' : 'Post Thread'}
</button>
<button
type="button"
onClick={() => setShowNewThread(false)}
className="bg-[#252525] hover:bg-[#333] text-[#aaa] font-body text-sm px-5 py-2 rounded-lg transition-colors"
className="bg-[#3a322b] hover:bg-[#333] text-[#aaa] font-body text-sm px-5 py-2 rounded-lg transition-colors"
>
Cancel
</button>
@@ -378,7 +378,7 @@ export default function ForumCategoryPage() {
placeholder="Search threads in this category..."
value={search}
onChange={e => setSearch(e.target.value)}
className="w-full bg-[#1a1a1a] border border-[#2a2a2a] focus:border-[#ffb800] rounded-lg pl-9 pr-4 py-2.5 text-white font-body text-sm placeholder-[#555] focus:outline-none transition-colors"
className="w-full bg-[#231d18] border border-[#3a322b] focus:border-[#F0A623] rounded-lg pl-9 pr-4 py-2.5 text-white font-body text-sm placeholder-[#555] focus:outline-none transition-colors"
/>
{search && (
<button
@@ -394,14 +394,14 @@ export default function ForumCategoryPage() {
</div>
{/* Sort Options */}
<div className="flex gap-1 bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg p-1 flex-shrink-0">
<div className="flex gap-1 bg-[#231d18] border border-[#3a322b] rounded-lg p-1 flex-shrink-0">
{sortOptions.map(opt => (
<button
key={opt.value}
onClick={() => setSort(opt.value)}
className={`px-3 py-1.5 rounded-md text-xs font-body font-semibold transition-colors whitespace-nowrap ${
sort === opt.value
? 'bg-[#ffb800] text-white'
? 'bg-[#F0A623] text-white'
: 'text-[#888] hover:text-white'
}`}
>
@@ -414,7 +414,7 @@ export default function ForumCategoryPage() {
{(loading || threadsLoading) && (
<div className="space-y-2">
{[...Array(10)].map((_, i) => (
<div key={i} className="bg-[#1a1a1a] rounded-lg h-16 animate-pulse border border-[#252525]" />
<div key={i} className="bg-[#231d18] rounded-lg h-16 animate-pulse border border-[#3a322b]" />
))}
</div>
)}
@@ -445,12 +445,12 @@ export default function ForumCategoryPage() {
<Link
key={thread.id}
href={`/forum/thread/${thread.id}`}
className="flex items-center gap-4 bg-[#1a1a1a] hover:bg-[#1e2a3a] border border-[#252525] hover:border-[#ffb800] rounded-lg px-4 py-3 transition-all group"
className="flex items-center gap-4 bg-[#231d18] hover:bg-[#1e2a3a] border border-[#3a322b] hover:border-[#F0A623] rounded-lg px-4 py-3 transition-all group"
>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap">
{thread.status === 'pinned' && (
<span className="text-xs bg-[#ffb800]/20 text-[#ffb800] px-2 py-0.5 rounded font-body font-semibold">PINNED</span>
<span className="text-xs bg-[#F0A623]/20 text-[#F0A623] px-2 py-0.5 rounded font-body font-semibold">PINNED</span>
)}
{thread.status === 'closed' && (
<span className="text-xs bg-[#555]/20 text-[#888] px-2 py-0.5 rounded font-body">CLOSED</span>
@@ -458,12 +458,12 @@ export default function ForumCategoryPage() {
{thread.reply_count === 0 && (
<span className="text-xs bg-[#f59e0b]/10 text-[#f59e0b] px-2 py-0.5 rounded font-body">UNANSWERED</span>
)}
<h3 className="text-white font-body font-semibold text-sm group-hover:text-[#ffb800] transition-colors truncate">
<h3 className="text-white font-body font-semibold text-sm group-hover:text-[#F0A623] transition-colors truncate">
{thread.title}
</h3>
</div>
<p className="text-[#666] font-body text-xs mt-0.5">
by <Link href={`/forum/user/${encodeURIComponent(thread.author_name)}`} className="text-[#888] hover:text-[#ffb800] hover:underline" onClick={(e) => e.stopPropagation()}>{thread.author_name}</Link>
by <Link href={`/forum/user/${encodeURIComponent(thread.author_name)}`} className="text-[#888] hover:text-[#F0A623] hover:underline" onClick={(e) => e.stopPropagation()}>{thread.author_name}</Link>
{' · '}{timeAgo(thread.created_at)}
</p>
</div>

16
src/app/forum/forgot-password/page.tsx
View File

@@ -30,10 +30,10 @@ function ForgotInner() {
return (
<>
<Header />
<main className="min-h-screen bg-gradient-to-b from-[#0d0d0d] via-[#111111] to-[#0d0d0d]">
<main className="min-h-screen bg-gradient-to-b from-[#1c1815] via-[#1c1815] to-[#1c1815]">
<div className="max-w-md mx-auto px-4 py-16">
<div className="text-center mb-6">
<div className="text-[10px] uppercase tracking-widest text-[#ffb800] font-mono mb-2">Account recovery</div>
<div className="text-[10px] uppercase tracking-widest text-[#F0A623] font-mono mb-2">Account recovery</div>
<h1 className="text-3xl font-heading font-bold text-white">Reset your password</h1>
<p className="text-[#888] font-body text-sm mt-2">
Enter your email — we&rsquo;ll send a link to set a new password.
@@ -41,10 +41,10 @@ function ForgotInner() {
</div>
<form
onSubmit={submit}
className="bg-[#1a1a1a] border border-[#252525] rounded-lg p-6 space-y-4 shadow-2xl"
className="bg-[#231d18] border border-[#3a322b] rounded-lg p-6 space-y-4 shadow-2xl"
>
{err && (
<div className="bg-[#2a0a0a] border border-[#d60701] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
<div className="bg-[#2a0a0a] border border-[#D85A30] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
{err}
</div>
)}
@@ -63,19 +63,19 @@ function ForgotInner() {
onChange={(e) => setEmail(e.target.value)}
autoComplete="email"
required
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#ffb800]"
className="w-full bg-[#1c1815] border border-[#3a322b] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#F0A623]"
/>
</div>
<button
type="submit"
disabled={busy || !email.trim()}
className="w-full bg-[#ffb800] hover:bg-[#d99700] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-3 rounded-lg transition-colors"
className="w-full bg-[#F0A623] hover:bg-[#BA7517] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-3 rounded-lg transition-colors"
>
{busy ? "Sending…" : "Send reset link"}
</button>
<div className="text-center text-xs font-body text-[#888] pt-2 border-t border-[#252525]">
<div className="text-center text-xs font-body text-[#888] pt-2 border-t border-[#3a322b]">
Remembered it?{" "}
<Link href="/forum/login" className="text-[#ffb800] hover:underline font-semibold">
<Link href="/forum/login" className="text-[#F0A623] hover:underline font-semibold">
Back to sign in
</Link>
</div>

18
src/app/forum/login/page.tsx
View File

@@ -51,10 +51,10 @@ function ForumLoginInner() {
return (
<>
<Header />
<main className="min-h-screen bg-gradient-to-b from-[#0d0d0d] via-[#111111] to-[#0d0d0d]">
<main className="min-h-screen bg-gradient-to-b from-[#1c1815] via-[#1c1815] to-[#1c1815]">
<div className="max-w-md mx-auto px-4 py-16">
<div className="text-center mb-6">
<div className="text-[10px] uppercase tracking-widest text-[#ffb800] font-mono mb-2">Welcome back</div>
<div className="text-[10px] uppercase tracking-widest text-[#F0A623] font-mono mb-2">Welcome back</div>
<h1 className="text-3xl font-heading font-bold text-white">Sign in to AV Beat</h1>
<p className="text-[#888] font-body text-sm mt-2">
Your account covers the forum, newsletter preferences, and saved articles.
@@ -62,10 +62,10 @@ function ForumLoginInner() {
</div>
<form
onSubmit={handleSubmit}
className="bg-[#1a1a1a] border border-[#252525] rounded-lg p-6 space-y-4 shadow-2xl"
className="bg-[#231d18] border border-[#3a322b] rounded-lg p-6 space-y-4 shadow-2xl"
>
{error && (
<div className="bg-[#2a0a0a] border border-[#d60701] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
<div className="bg-[#2a0a0a] border border-[#D85A30] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
{error}
</div>
)}
@@ -79,7 +79,7 @@ function ForumLoginInner() {
onChange={(e) => setEmail(e.target.value)}
autoComplete="email"
required
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#ffb800]"
className="w-full bg-[#1c1815] border border-[#3a322b] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#F0A623]"
/>
</div>
<div>
@@ -92,20 +92,20 @@ function ForumLoginInner() {
onChange={(e) => setPassword(e.target.value)}
autoComplete="current-password"
required
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#ffb800]"
className="w-full bg-[#1c1815] border border-[#3a322b] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#F0A623]"
/>
</div>
<button
type="submit"
disabled={loading}
className="w-full bg-[#ffb800] hover:bg-[#d99700] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors"
className="w-full bg-[#F0A623] hover:bg-[#BA7517] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors"
>
{loading ? 'Signing in…' : 'Sign In'}
</button>
<div className="text-right text-xs font-body">
<Link
href={`/forum/forgot-password?email=${encodeURIComponent(email)}`}
className="text-[#888] hover:text-[#ffb800] hover:underline"
className="text-[#888] hover:text-[#F0A623] hover:underline"
>
Forgot password?
</Link>
@@ -115,7 +115,7 @@ function ForumLoginInner() {
No account yet?{' '}
<Link
href={`/forum/register?next=${encodeURIComponent(next)}`}
className="text-[#ffb800] hover:underline"
className="text-[#F0A623] hover:underline"
>
Create one
</Link>

82
src/app/forum/page.tsx
View File

@@ -103,27 +103,27 @@ function TopThreadsWidget({ categoryId }: { categoryId?: string }) {
const getMetricValue = (thread: ForumThread) => {
if (activeMetric === 'upvotes') return { value: thread.upvotes ?? 0, label: 'votes', color: 'text-[#22c55e]' };
if (activeMetric === 'replies') return { value: thread.reply_count, label: 'replies', color: 'text-[#ffb800]' };
if (activeMetric === 'replies') return { value: thread.reply_count, label: 'replies', color: 'text-[#F0A623]' };
return { value: thread.view_count, label: 'views', color: 'text-[#f59e0b]' };
};
return (
<div className="bg-[#1a1a1a] border border-[#252525] rounded-xl overflow-hidden mb-8">
<div className="bg-[#231d18] border border-[#3a322b] rounded-xl overflow-hidden mb-8">
{/* Header */}
<div className="flex items-center justify-between px-5 py-4 border-b border-[#252525]">
<div className="flex items-center justify-between px-5 py-4 border-b border-[#3a322b]">
<div className="flex items-center gap-2">
<span className="text-lg">🏆</span>
<h2 className="text-white font-heading font-bold text-base">Top Performing Threads</h2>
</div>
{/* Metric Tabs */}
<div className="flex gap-1 bg-[#111] border border-[#2a2a2a] rounded-lg p-1">
<div className="flex gap-1 bg-[#111] border border-[#3a322b] rounded-lg p-1">
{metrics.map(m => (
<button
key={m.value}
onClick={() => setActiveMetric(m.value)}
className={`px-3 py-1 rounded-md text-xs font-body font-semibold transition-colors whitespace-nowrap ${
activeMetric === m.value
? 'bg-[#ffb800] text-white'
? 'bg-[#F0A623] text-white'
: 'text-[#666] hover:text-[#aaa]'
}`}
>
@@ -140,12 +140,12 @@ function TopThreadsWidget({ categoryId }: { categoryId?: string }) {
<>
{[...Array(5)].map((_, i) => (
<div key={i} className="flex items-center gap-3 px-5 py-3">
<div className="w-6 h-6 bg-[#252525] rounded animate-pulse flex-shrink-0" />
<div className="w-6 h-6 bg-[#3a322b] rounded animate-pulse flex-shrink-0" />
<div className="flex-1 space-y-1.5">
<div className="h-3.5 bg-[#252525] rounded animate-pulse w-3/4" />
<div className="h-3.5 bg-[#3a322b] rounded animate-pulse w-3/4" />
<div className="h-2.5 bg-[#1e1e1e] rounded animate-pulse w-1/3" />
</div>
<div className="w-10 h-8 bg-[#252525] rounded animate-pulse flex-shrink-0" />
<div className="w-10 h-8 bg-[#3a322b] rounded animate-pulse flex-shrink-0" />
</div>
))}
</>
@@ -171,13 +171,13 @@ function TopThreadsWidget({ categoryId }: { categoryId?: string }) {
</span>
{/* Thread info */}
<div className="flex-1 min-w-0">
<p className="text-white font-body text-sm font-semibold group-hover:text-[#ffb800] transition-colors truncate leading-snug">
<p className="text-white font-body text-sm font-semibold group-hover:text-[#F0A623] transition-colors truncate leading-snug">
{thread.title}
</p>
<p className="text-[#555] font-body text-xs mt-0.5">
<Link href={`/forum/user/${encodeURIComponent(thread.author_name)}`} className="text-[#666] hover:text-[#ffb800] hover:underline" onClick={(e) => e.stopPropagation()}>{thread.author_name}</Link>
<Link href={`/forum/user/${encodeURIComponent(thread.author_name)}`} className="text-[#666] hover:text-[#F0A623] hover:underline" onClick={(e) => e.stopPropagation()}>{thread.author_name}</Link>
{thread.forum_categories && (
<> · <span className="text-[#ffb800]">{thread.forum_categories.name}</span></>
<> · <span className="text-[#F0A623]">{thread.forum_categories.name}</span></>
)}
{' · '}{timeAgo(thread.created_at)}
</p>
@@ -283,10 +283,10 @@ export default function ForumIndexPage() {
return (
<>
<Header />
<main className="min-h-screen bg-[#111111]">
<main className="min-h-screen bg-[#1c1815]">
{/* Hero — width-aligned with content below + featured-box pattern */}
<div className="max-w-container mx-auto px-4">
<div className="bg-[#1a1208] border-b border-[#2a3a50] py-5 px-4">
<div className="bg-[#231d18] border-b border-[#2a3a50] py-5 px-4">
<div className="flex items-start justify-between gap-4 flex-wrap">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-3 mb-1">
@@ -301,7 +301,7 @@ export default function ForumIndexPage() {
{currentUserId ? (
<Link
href="/forum/new"
className="inline-flex items-center gap-2 bg-[#ffb800] hover:bg-[#d99700] text-white font-body font-semibold text-sm rounded-lg px-5 py-2.5 transition-colors"
className="inline-flex items-center gap-2 bg-[#F0A623] hover:bg-[#BA7517] text-white font-body font-semibold text-sm rounded-lg px-5 py-2.5 transition-colors"
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
<path d="M12 5v14M5 12h14" />
@@ -311,7 +311,7 @@ export default function ForumIndexPage() {
) : (
<Link
href="/forum/login?next=/forum"
className="inline-flex items-center gap-2 bg-[#ffb800] hover:bg-[#d99700] text-white font-body font-semibold text-sm rounded-lg px-5 py-2.5 transition-colors"
className="inline-flex items-center gap-2 bg-[#F0A623] hover:bg-[#BA7517] text-white font-body font-semibold text-sm rounded-lg px-5 py-2.5 transition-colors"
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3" />
@@ -329,11 +329,11 @@ export default function ForumIndexPage() {
<div>
{/* Feed Mode Tabs */}
<div className="flex items-center gap-1 bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg p-1 mb-6 w-fit">
<div className="flex items-center gap-1 bg-[#231d18] border border-[#3a322b] rounded-lg p-1 mb-6 w-fit">
<button
onClick={() => setFeedMode('discover')}
className={`px-4 py-2 rounded-md text-sm font-body font-semibold transition-colors flex items-center gap-2 ${
feedMode === 'discover' ? 'bg-[#ffb800] text-white' : 'text-[#888] hover:text-white'
feedMode === 'discover' ? 'bg-[#F0A623] text-white' : 'text-[#888] hover:text-white'
}`}
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
@@ -344,7 +344,7 @@ export default function ForumIndexPage() {
<button
onClick={() => setFeedMode('following')}
className={`px-4 py-2 rounded-md text-sm font-body font-semibold transition-colors flex items-center gap-2 ${
feedMode === 'following' ? 'bg-[#ffb800] text-white' : 'text-[#888] hover:text-white'
feedMode === 'following' ? 'bg-[#F0A623] text-white' : 'text-[#888] hover:text-white'
}`}
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
@@ -359,11 +359,11 @@ export default function ForumIndexPage() {
{feedMode === 'following' && (
<div className="mb-8">
{!currentUserId && (
<div className="bg-[#1a1208] border border-[#2a3a50] rounded-lg p-8 text-center">
<div className="bg-[#231d18] border border-[#2a3a50] rounded-lg p-8 text-center">
<p className="text-[#aab4c4] font-body text-sm mb-3">Sign in to see threads from people you follow.</p>
<Link
href="/login"
className="inline-block bg-[#ffb800] text-white font-body text-sm font-bold px-5 py-2 rounded-lg hover:bg-[#d99700] transition-colors"
className="inline-block bg-[#F0A623] text-white font-body text-sm font-bold px-5 py-2 rounded-lg hover:bg-[#BA7517] transition-colors"
>
Sign In
</Link>
@@ -372,19 +372,19 @@ export default function ForumIndexPage() {
{currentUserId && followingLoading && (
<div className="space-y-2">
{[...Array(6)].map((_, i) => (
<div key={i} className="bg-[#1a1a1a] rounded-lg h-16 animate-pulse border border-[#252525]" />
<div key={i} className="bg-[#231d18] rounded-lg h-16 animate-pulse border border-[#3a322b]" />
))}
</div>
)}
{currentUserId && !followingLoading && followingThreads.length === 0 && (
<div className="bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg p-10 text-center">
<div className="bg-[#231d18] border border-[#3a322b] rounded-lg p-10 text-center">
<div className="text-3xl mb-3">👥</div>
<p className="text-[#aaa] font-body text-sm font-semibold mb-1">Your following feed is empty</p>
<p className="text-[#555] font-body text-sm mb-4">Follow other members to see their threads here.</p>
<Link
href="/forum"
onClick={() => setFeedMode('discover')}
className="inline-block bg-[#ffb800] text-white font-body text-sm font-bold px-5 py-2 rounded-lg hover:bg-[#d99700] transition-colors"
className="inline-block bg-[#F0A623] text-white font-body text-sm font-bold px-5 py-2 rounded-lg hover:bg-[#BA7517] transition-colors"
>
Discover Members
</Link>
@@ -398,10 +398,10 @@ export default function ForumIndexPage() {
<Link
key={thread.id}
href={`/forum/thread/${thread.id}`}
className="flex items-center gap-4 bg-[#1a1a1a] hover:bg-[#1e2a3a] border border-[#252525] hover:border-[#ffb800] rounded-lg px-4 py-3 transition-all group"
className="flex items-center gap-4 bg-[#231d18] hover:bg-[#1e2a3a] border border-[#3a322b] hover:border-[#F0A623] rounded-lg px-4 py-3 transition-all group"
>
<div className="flex-1 min-w-0">
<h3 className="text-white font-body font-semibold text-sm group-hover:text-[#ffb800] transition-colors truncate">
<h3 className="text-white font-body font-semibold text-sm group-hover:text-[#F0A623] transition-colors truncate">
{thread.title}
</h3>
<p className="text-[#666] font-body text-xs mt-0.5">
@@ -409,7 +409,7 @@ export default function ForumIndexPage() {
<Link
href={`/profile/${thread.author_id}`}
onClick={e => e.stopPropagation()}
className="text-[#ffb800] hover:underline"
className="text-[#F0A623] hover:underline"
>
{thread.author_name}
</Link>
@@ -450,7 +450,7 @@ export default function ForumIndexPage() {
placeholder="Search threads..."
value={search}
onChange={e => setSearch(e.target.value)}
className="w-full bg-[#1a1a1a] border border-[#2a2a2a] focus:border-[#ffb800] rounded-lg pl-9 pr-4 py-2.5 text-white font-body text-sm placeholder-[#555] focus:outline-none transition-colors"
className="w-full bg-[#231d18] border border-[#3a322b] focus:border-[#F0A623] rounded-lg pl-9 pr-4 py-2.5 text-white font-body text-sm placeholder-[#555] focus:outline-none transition-colors"
/>
{search && (
<button
@@ -470,7 +470,7 @@ export default function ForumIndexPage() {
<select
value={selectedCategory}
onChange={e => setSelectedCategory(e.target.value)}
className="appearance-none bg-[#1a1a1a] border border-[#2a2a2a] focus:border-[#ffb800] rounded-lg pl-3 pr-8 py-2.5 text-sm font-body text-white focus:outline-none transition-colors cursor-pointer min-w-[160px]"
className="appearance-none bg-[#231d18] border border-[#3a322b] focus:border-[#F0A623] rounded-lg pl-3 pr-8 py-2.5 text-sm font-body text-white focus:outline-none transition-colors cursor-pointer min-w-[160px]"
>
<option value="">All Categories</option>
{categories.map(cat => (
@@ -483,14 +483,14 @@ export default function ForumIndexPage() {
</div>
{/* Sort Options */}
<div className="flex gap-1 bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg p-1">
<div className="flex gap-1 bg-[#231d18] border border-[#3a322b] rounded-lg p-1">
{sortOptions.map(opt => (
<button
key={opt.value}
onClick={() => setSort(opt.value)}
className={`px-3 py-1.5 rounded-md text-xs font-body font-semibold transition-colors whitespace-nowrap ${
sort === opt.value
? 'bg-[#ffb800] text-white'
? 'bg-[#F0A623] text-white'
: 'text-[#888] hover:text-white'
}`}
>
@@ -506,7 +506,7 @@ export default function ForumIndexPage() {
{threadsLoading && (
<div className="space-y-2">
{[...Array(6)].map((_, i) => (
<div key={i} className="bg-[#1a1a1a] rounded-lg h-14 animate-pulse border border-[#252525]" />
<div key={i} className="bg-[#231d18] rounded-lg h-14 animate-pulse border border-[#3a322b]" />
))}
</div>
)}
@@ -523,16 +523,16 @@ export default function ForumIndexPage() {
<Link
key={thread.id}
href={`/forum/thread/${thread.id}`}
className="flex items-center gap-4 bg-[#1a1a1a] hover:bg-[#1e2a3a] border border-[#252525] hover:border-[#ffb800] rounded-lg px-4 py-3 transition-all group"
className="flex items-center gap-4 bg-[#231d18] hover:bg-[#1e2a3a] border border-[#3a322b] hover:border-[#F0A623] rounded-lg px-4 py-3 transition-all group"
>
<div className="flex-1 min-w-0">
<h3 className="text-white font-body font-semibold text-sm group-hover:text-[#ffb800] transition-colors truncate">
<h3 className="text-white font-body font-semibold text-sm group-hover:text-[#F0A623] transition-colors truncate">
{thread.title}
</h3>
<p className="text-[#666] font-body text-xs mt-0.5">
by <Link href={`/forum/user/${encodeURIComponent(thread.author_name)}`} className="text-[#888] hover:text-[#ffb800] hover:underline" onClick={(e) => e.stopPropagation()}>{thread.author_name}</Link>
by <Link href={`/forum/user/${encodeURIComponent(thread.author_name)}`} className="text-[#888] hover:text-[#F0A623] hover:underline" onClick={(e) => e.stopPropagation()}>{thread.author_name}</Link>
{thread.forum_categories && (
<> · <span className="text-[#ffb800]">{thread.forum_categories.name}</span></>
<> · <span className="text-[#F0A623]">{thread.forum_categories.name}</span></>
)}
{' · '}{timeAgo(thread.created_at)}
</p>
@@ -560,7 +560,7 @@ export default function ForumIndexPage() {
{loading && (
<div className="space-y-3 mb-8">
{[...Array(8)].map((_, i) => (
<div key={i} className="bg-[#1a1a1a] rounded-lg h-20 animate-pulse border border-[#252525]" />
<div key={i} className="bg-[#231d18] rounded-lg h-20 animate-pulse border border-[#3a322b]" />
))}
</div>
)}
@@ -584,11 +584,11 @@ export default function ForumIndexPage() {
<Link
key={cat.id}
href={`/forum/${cat.slug}`}
className="flex items-center gap-4 bg-[#1a1a1a] hover:bg-[#1e2a3a] border border-[#252525] hover:border-[#ffb800] rounded-lg p-4 transition-all group"
className="flex items-center gap-4 bg-[#231d18] hover:bg-[#1e2a3a] border border-[#3a322b] hover:border-[#F0A623] rounded-lg p-4 transition-all group"
>
<span className="text-3xl flex-shrink-0 w-10 text-center">{cat.icon}</span>
<div className="flex-1 min-w-0">
<h2 className="text-white font-heading font-semibold text-lg group-hover:text-[#ffb800] transition-colors">
<h2 className="text-white font-heading font-semibold text-lg group-hover:text-[#F0A623] transition-colors">
{cat.name}
</h2>
<p className="text-[#888] font-body text-sm mt-0.5 truncate">{cat.description}</p>
@@ -610,7 +610,7 @@ export default function ForumIndexPage() {
<div className="text-white font-body font-semibold text-sm">{cat.post_count}</div>
<div className="text-[#666] font-body text-xs">posts</div>
</div>
<svg className="w-4 h-4 text-[#555] group-hover:text-[#ffb800] flex-shrink-0 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 text-[#555] group-hover:text-[#F0A623] flex-shrink-0 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</Link>
@@ -624,12 +624,12 @@ export default function ForumIndexPage() {
)}
{/* Forum guidelines */}
<div className="mt-8 bg-[#1a1208] border border-[#2a3a50] rounded-lg p-5">
<div className="mt-8 bg-[#231d18] border border-[#2a3a50] rounded-lg p-5">
<h3 className="text-white font-heading font-semibold mb-2">Community Guidelines</h3>
<ul className="text-[#aab4c4] font-body text-sm space-y-1">
<li>• Be respectful and professional — this is a community of peers</li>
<li>• Share real-world experience and cite sources when possible</li>
<li>• The <span className="text-[#ffb800]">AV Beat AI</span> assistant is available in threads to help answer questions — it is clearly labeled</li>
<li>• The <span className="text-[#F0A623]">AV Beat AI</span> assistant is available in threads to help answer questions — it is clearly labeled</li>
<li>• No spam, self-promotion, or vendor pitches without disclosure</li>
</ul>
</div>

30
src/app/forum/profile/edit/page.tsx
View File

@@ -73,7 +73,7 @@ export default function EditForumProfilePage() {
return (
<>
<Header />
<main className="min-h-screen bg-[#111111]">
<main className="min-h-screen bg-[#1c1815]">
<div className="max-w-2xl mx-auto px-4 py-12 text-[#666] font-body text-sm">Loading…</div>
</main>
<Footer />
@@ -85,7 +85,7 @@ export default function EditForumProfilePage() {
return (
<>
<Header />
<main className="min-h-screen bg-[#111111]">
<main className="min-h-screen bg-[#1c1815]">
<div className="max-w-2xl mx-auto px-4 py-12 text-[#888] font-body text-sm">
Profile unavailable.
</div>
@@ -98,13 +98,13 @@ export default function EditForumProfilePage() {
return (
<>
<Header />
<main className="min-h-screen bg-[#111111]">
<main className="min-h-screen bg-[#1c1815]">
<div className="max-w-2xl mx-auto px-4 py-8">
<div className="flex items-center justify-between mb-4">
<h1 className="text-2xl font-heading font-bold text-white">Edit Profile</h1>
<Link
href={`/forum/user/${profile.username}`}
className="text-xs font-body text-[#ffb800] hover:underline"
className="text-xs font-body text-[#F0A623] hover:underline"
>
View public profile →
</Link>
@@ -112,10 +112,10 @@ export default function EditForumProfilePage() {
<form
onSubmit={handleSubmit}
className="bg-[#1a1a1a] border border-[#252525] rounded-lg p-6 space-y-4"
className="bg-[#231d18] border border-[#3a322b] rounded-lg p-6 space-y-4"
>
{error && (
<div className="bg-[#2a0a0a] border border-[#d60701] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
<div className="bg-[#2a0a0a] border border-[#D85A30] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
{error}
</div>
)}
@@ -132,7 +132,7 @@ export default function EditForumProfilePage() {
onChange={(e) => update('username', e.target.value)}
pattern="[A-Za-z0-9_]{3,24}"
required
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#ffb800]"
className="w-full bg-[#1c1815] border border-[#3a322b] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#F0A623]"
/>
<p className="text-[11px] font-body text-[#666] mt-1">
3-24 characters. Letters, numbers, underscore.
@@ -145,7 +145,7 @@ export default function EditForumProfilePage() {
value={profile.display_name}
onChange={(e) => update('display_name', e.target.value)}
required
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#ffb800]"
className="w-full bg-[#1c1815] border border-[#3a322b] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#F0A623]"
/>
</Field>
@@ -154,7 +154,7 @@ export default function EditForumProfilePage() {
value={profile.bio || ''}
onChange={(e) => update('bio', e.target.value)}
rows={4}
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#ffb800] resize-none"
className="w-full bg-[#1c1815] border border-[#3a322b] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#F0A623] resize-none"
/>
</Field>
@@ -164,7 +164,7 @@ export default function EditForumProfilePage() {
type="text"
value={profile.role_title || ''}
onChange={(e) => update('role_title', e.target.value)}
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#ffb800]"
className="w-full bg-[#1c1815] border border-[#3a322b] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#F0A623]"
/>
</Field>
<Field label="Company">
@@ -172,7 +172,7 @@ export default function EditForumProfilePage() {
type="text"
value={profile.company || ''}
onChange={(e) => update('company', e.target.value)}
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#ffb800]"
className="w-full bg-[#1c1815] border border-[#3a322b] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#F0A623]"
/>
</Field>
</div>
@@ -183,7 +183,7 @@ export default function EditForumProfilePage() {
type="text"
value={profile.location_city || ''}
onChange={(e) => update('location_city', e.target.value)}
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#ffb800]"
className="w-full bg-[#1c1815] border border-[#3a322b] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#F0A623]"
/>
</Field>
<Field label="Country">
@@ -191,7 +191,7 @@ export default function EditForumProfilePage() {
type="text"
value={profile.location_country || ''}
onChange={(e) => update('location_country', e.target.value)}
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#ffb800]"
className="w-full bg-[#1c1815] border border-[#3a322b] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#F0A623]"
/>
</Field>
</div>
@@ -202,14 +202,14 @@ export default function EditForumProfilePage() {
value={profile.avatar_url || ''}
onChange={(e) => update('avatar_url', e.target.value)}
placeholder="https://…"
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#ffb800]"
className="w-full bg-[#1c1815] border border-[#3a322b] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#F0A623]"
/>
</Field>
<button
type="submit"
disabled={saving}
className="bg-[#ffb800] hover:bg-[#d99700] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors"
className="bg-[#F0A623] hover:bg-[#BA7517] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors"
>
{saving ? 'Saving…' : 'Save Profile'}
</button>

32
src/app/forum/register/page.tsx
View File

@@ -101,11 +101,11 @@ function ForumRegisterInner() {
return (
<>
<Header />
<main className="min-h-screen bg-gradient-to-b from-[#0d0d0d] via-[#111111] to-[#0d0d0d]">
<main className="min-h-screen bg-gradient-to-b from-[#1c1815] via-[#1c1815] to-[#1c1815]">
<div className="max-w-5xl mx-auto px-4 py-12 grid grid-cols-1 lg:grid-cols-[1fr_440px] gap-10 items-start">
{/* Left rail — what membership gets you */}
<aside className="hidden lg:block">
<div className="text-[10px] uppercase tracking-widest text-[#ffb800] font-mono mb-3">Membership</div>
<div className="text-[10px] uppercase tracking-widest text-[#F0A623] font-mono mb-3">Membership</div>
<h1 className="font-heading text-white text-4xl xl:text-5xl font-bold leading-tight mb-4">
Join AV Beat
</h1>
@@ -128,10 +128,10 @@ function ForumRegisterInner() {
</li>
))}
</ul>
<div className="mt-6 text-[11px] text-[#666] leading-relaxed max-w-md border-t border-[#252525] pt-4">
<div className="mt-6 text-[11px] text-[#666] leading-relaxed max-w-md border-t border-[#3a322b] pt-4">
<strong className="text-[#888]">PR firms &amp; contributors:</strong> a separate contributor application is required to submit press releases.
{" "}
<Link href="/about/advertise" className="text-[#ffb800] hover:underline">Contact us</Link> if you represent a manufacturer or agency.
<Link href="/about/advertise" className="text-[#F0A623] hover:underline">Contact us</Link> if you represent a manufacturer or agency.
</div>
</aside>
@@ -145,14 +145,14 @@ function ForumRegisterInner() {
<form
onSubmit={handleSubmit}
className="bg-[#1a1a1a] border border-[#252525] rounded-lg p-6 space-y-4 shadow-2xl"
className="bg-[#231d18] border border-[#3a322b] rounded-lg p-6 space-y-4 shadow-2xl"
>
<div className="hidden lg:block mb-2">
<div className="text-[10px] uppercase tracking-widest text-[#ffb800] font-mono mb-1">Create your account</div>
<div className="text-[10px] uppercase tracking-widest text-[#F0A623] font-mono mb-1">Create your account</div>
<div className="text-[#888] text-xs">Takes 30 seconds. Free, no card needed.</div>
</div>
{error && (
<div className="bg-[#2a0a0a] border border-[#d60701] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
<div className="bg-[#2a0a0a] border border-[#D85A30] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
{error}
</div>
)}
@@ -171,7 +171,7 @@ function ForumRegisterInner() {
onChange={(e) => setFullName(e.target.value)}
autoComplete="name"
required
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#ffb800]"
className="w-full bg-[#1c1815] border border-[#3a322b] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#F0A623]"
/>
</div>
<div>
@@ -184,7 +184,7 @@ function ForumRegisterInner() {
onChange={(e) => setEmail(e.target.value)}
autoComplete="email"
required
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#ffb800]"
className="w-full bg-[#1c1815] border border-[#3a322b] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#F0A623]"
/>
</div>
<div>
@@ -198,7 +198,7 @@ function ForumRegisterInner() {
autoComplete="new-password"
required
minLength={6}
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#ffb800]"
className="w-full bg-[#1c1815] border border-[#3a322b] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#F0A623]"
/>
</div>
<div>
@@ -211,29 +211,29 @@ function ForumRegisterInner() {
onChange={(e) => setConfirm(e.target.value)}
autoComplete="new-password"
required
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#ffb800]"
className="w-full bg-[#1c1815] border border-[#3a322b] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#F0A623]"
/>
</div>
<button
type="submit"
disabled={loading}
className="w-full bg-[#ffb800] hover:bg-[#d99700] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-3 rounded-lg transition-colors"
className="w-full bg-[#F0A623] hover:bg-[#BA7517] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-3 rounded-lg transition-colors"
>
{loading ? 'Creating account…' : 'Create Free Account'}
</button>
<p className="text-[10px] text-[#666] leading-relaxed text-center px-2">
By creating an account you agree to our{' '}
<Link href="/terms" className="text-[#888] hover:text-[#ffb800] underline">terms</Link>
<Link href="/terms" className="text-[#888] hover:text-[#F0A623] underline">terms</Link>
{' '}and{' '}
<Link href="/privacy" className="text-[#888] hover:text-[#ffb800] underline">privacy policy</Link>.
<Link href="/privacy" className="text-[#888] hover:text-[#F0A623] underline">privacy policy</Link>.
We&rsquo;ll never sell your email.
</p>
<SocialAuthButtons next={next} />
<div className="text-center text-xs font-body text-[#888] pt-2 border-t border-[#252525]">
<div className="text-center text-xs font-body text-[#888] pt-2 border-t border-[#3a322b]">
Already have an account?{' '}
<Link
href={`/forum/login?next=${encodeURIComponent(next)}`}
className="text-[#ffb800] hover:underline font-semibold"
className="text-[#F0A623] hover:underline font-semibold"
>
Sign in
</Link>

18
src/app/forum/reset-password/page.tsx
View File

@@ -40,20 +40,20 @@ function ResetInner() {
return (
<>
<Header />
<main className="min-h-screen bg-gradient-to-b from-[#0d0d0d] via-[#111111] to-[#0d0d0d]">
<main className="min-h-screen bg-gradient-to-b from-[#1c1815] via-[#1c1815] to-[#1c1815]">
<div className="max-w-md mx-auto px-4 py-16">
<div className="text-center mb-6">
<div className="text-[10px] uppercase tracking-widest text-[#ffb800] font-mono mb-2">Reset password</div>
<div className="text-[10px] uppercase tracking-widest text-[#F0A623] font-mono mb-2">Reset password</div>
<h1 className="text-3xl font-heading font-bold text-white">Set a new password</h1>
</div>
{hasSession === false ? (
<div className="bg-[#1a1a1a] border border-[#252525] rounded-lg p-6 text-center">
<div className="bg-[#231d18] border border-[#3a322b] rounded-lg p-6 text-center">
<p className="text-[#cbd5e1] mb-4 text-sm">
This reset link is expired or invalid.
</p>
<Link
href="/forum/forgot-password"
className="inline-block bg-[#ffb800] hover:bg-[#d99700] text-white font-semibold text-sm px-5 py-2 rounded"
className="inline-block bg-[#F0A623] hover:bg-[#BA7517] text-white font-semibold text-sm px-5 py-2 rounded"
>
Request a new link
</Link>
@@ -61,10 +61,10 @@ function ResetInner() {
) : (
<form
onSubmit={submit}
className="bg-[#1a1a1a] border border-[#252525] rounded-lg p-6 space-y-4 shadow-2xl"
className="bg-[#231d18] border border-[#3a322b] rounded-lg p-6 space-y-4 shadow-2xl"
>
{err && (
<div className="bg-[#2a0a0a] border border-[#d60701] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
<div className="bg-[#2a0a0a] border border-[#D85A30] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
{err}
</div>
)}
@@ -84,7 +84,7 @@ function ResetInner() {
autoComplete="new-password"
minLength={8}
required
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-[#ffb800]"
className="w-full bg-[#1c1815] border border-[#3a322b] rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-[#F0A623]"
/>
</div>
<div>
@@ -97,13 +97,13 @@ function ResetInner() {
onChange={(e) => setConfirm(e.target.value)}
autoComplete="new-password"
required
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-[#ffb800]"
className="w-full bg-[#1c1815] border border-[#3a322b] rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-[#F0A623]"
/>
</div>
<button
type="submit"
disabled={busy}
className="w-full bg-[#ffb800] hover:bg-[#d99700] disabled:opacity-50 text-white font-semibold text-sm px-5 py-3 rounded-lg"
className="w-full bg-[#F0A623] hover:bg-[#BA7517] disabled:opacity-50 text-white font-semibold text-sm px-5 py-3 rounded-lg"
>
{busy ? "Saving…" : "Update password"}
</button>

76
src/app/forum/thread/[id]/page.tsx
View File

@@ -67,13 +67,13 @@ function timeAgo(dateStr: string): string {
function Avatar({ name, isAI }: { name: string; isAI: boolean }) {
if (isAI) {
return (
<div className="w-9 h-9 rounded-full bg-[#4a3500] border border-[#ffb800] flex items-center justify-center flex-shrink-0">
<span className="text-[#ffb800] text-xs font-bold">AI</span>
<div className="w-9 h-9 rounded-full bg-[#412402] border border-[#F0A623] flex items-center justify-center flex-shrink-0">
<span className="text-[#F0A623] text-xs font-bold">AI</span>
</div>
);
}
const initials = name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
const colors = ['#4a3500', '#1a3a2a', '#3a1a1a', '#2a1a3a', '#1a2a3a'];
const colors = ['#412402', '#1a3a2a', '#3a1a1a', '#2a1a3a', '#1a2a3a'];
const colorIdx = name.charCodeAt(0) % colors.length;
return (
<div
@@ -133,7 +133,7 @@ function VoteButtons({ targetType, targetId, upvotes, downvotes, voteScore, isAI
}
};
const scoreColor = counts.vote_score > 0 ? 'text-[#ffb800]' : counts.vote_score < 0 ? 'text-red-400' : 'text-[#666]';
const scoreColor = counts.vote_score > 0 ? 'text-[#F0A623]' : counts.vote_score < 0 ? 'text-red-400' : 'text-[#666]';
return (
<div className="flex items-center gap-1 mt-2">
@@ -144,8 +144,8 @@ function VoteButtons({ targetType, targetId, upvotes, downvotes, voteScore, isAI
title={!isAuthenticated ? 'Sign in to vote' : isAI ? 'Cannot vote on AI responses' : 'Upvote'}
className={`flex items-center gap-1 px-2 py-1 rounded text-xs font-body font-semibold transition-colors border ${
currentVote === 1
? 'bg-[#ffb800]/20 border-[#ffb800] text-[#ffb800]'
: 'bg-transparent border-[#2a2a2a] text-[#666] hover:border-[#ffb800] hover:text-[#ffb800]'
? 'bg-[#F0A623]/20 border-[#F0A623] text-[#F0A623]'
: 'bg-transparent border-[#3a322b] text-[#666] hover:border-[#F0A623] hover:text-[#F0A623]'
} disabled:opacity-40 disabled:cursor-not-allowed`}
aria-label="Upvote"
>
@@ -167,7 +167,7 @@ function VoteButtons({ targetType, targetId, upvotes, downvotes, voteScore, isAI
title={!isAuthenticated ? 'Sign in to vote' : isAI ? 'Cannot vote on AI responses' : 'Downvote'}
className={`flex items-center gap-1 px-2 py-1 rounded text-xs font-body font-semibold transition-colors border ${
currentVote === -1
? 'bg-red-900/30 border-red-700 text-red-400' :'bg-transparent border-[#2a2a2a] text-[#666] hover:border-red-700 hover:text-red-400'
? 'bg-red-900/30 border-red-700 text-red-400' :'bg-transparent border-[#3a322b] text-[#666] hover:border-red-700 hover:text-red-400'
} disabled:opacity-40 disabled:cursor-not-allowed`}
aria-label="Downvote"
>
@@ -178,7 +178,7 @@ function VoteButtons({ targetType, targetId, upvotes, downvotes, voteScore, isAI
</button>
{!isAuthenticated && (
<Link href="/login" className="text-xs font-body text-[#555] hover:text-[#ffb800] ml-1 transition-colors">
<Link href="/login" className="text-xs font-body text-[#555] hover:text-[#F0A623] ml-1 transition-colors">
Sign in to vote
</Link>
)}
@@ -300,12 +300,12 @@ export default function ForumThreadPage() {
return (
<>
<Header />
<main className="min-h-screen bg-[#111111]">
<main className="min-h-screen bg-[#1c1815]">
<aside className="float-right ml-6 mb-6 hidden lg:block max-w-[300px]"><SidebarAdStack /></aside>
<div className="max-w-container mx-auto px-4 py-10 space-y-4">
<div className="h-8 bg-[#1a1a1a] rounded animate-pulse w-2/3" />
<div className="h-32 bg-[#1a1a1a] rounded animate-pulse" />
<div className="h-20 bg-[#1a1a1a] rounded animate-pulse" />
<div className="h-8 bg-[#231d18] rounded animate-pulse w-2/3" />
<div className="h-32 bg-[#231d18] rounded animate-pulse" />
<div className="h-20 bg-[#231d18] rounded animate-pulse" />
</div>
</main>
<Footer />
@@ -317,12 +317,12 @@ export default function ForumThreadPage() {
return (
<>
<Header />
<main className="min-h-screen bg-[#111111]">
<main className="min-h-screen bg-[#1c1815]">
<div className="max-w-container mx-auto px-4 py-10">
<div className="bg-red-900/20 border border-red-800 rounded-lg p-4 text-red-400 font-body">
{error || 'Thread not found.'}
</div>
<Link href="/forum" className="mt-4 inline-block text-[#ffb800] hover:underline font-body text-sm">
<Link href="/forum" className="mt-4 inline-block text-[#F0A623] hover:underline font-body text-sm">
← Back to Forum
</Link>
</div>
@@ -337,16 +337,16 @@ export default function ForumThreadPage() {
return (
<>
<Header />
<main className="min-h-screen bg-[#111111]">
<main className="min-h-screen bg-[#1c1815]">
{/* Breadcrumb */}
<div className="bg-[#1a1208] border-b border-[#2a3a50]">
<div className="bg-[#231d18] border-b border-[#2a3a50]">
<div className="max-w-container mx-auto px-4 py-4">
<nav className="text-sm font-body text-[#666]">
<Link href="/forum" className="hover:text-[#ffb800] transition-colors">Forum</Link>
<Link href="/forum" className="hover:text-[#F0A623] transition-colors">Forum</Link>
<span className="mx-2">›</span>
{category && (
<>
<Link href={`/forum/${category.slug}`} className="hover:text-[#ffb800] transition-colors">{category.name}</Link>
<Link href={`/forum/${category.slug}`} className="hover:text-[#F0A623] transition-colors">{category.name}</Link>
<span className="mx-2">›</span>
</>
)}
@@ -361,12 +361,12 @@ export default function ForumThreadPage() {
<h1 className="text-2xl font-heading font-bold text-white mb-6 leading-snug">{thread.title}</h1>
{/* Original Post */}
<div className="bg-[#1a1a1a] border border-[#252525] rounded-lg p-5 mb-4">
<div className="bg-[#231d18] border border-[#3a322b] rounded-lg p-5 mb-4">
<div className="flex items-start gap-3">
<Avatar name={thread.author_name} isAI={false} />
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-2">
<Link href={`/forum/user/${encodeURIComponent(thread.author_name)}`} className="text-white font-body font-semibold text-sm hover:text-[#ffb800] hover:underline">{thread.author_name}</Link>
<Link href={`/forum/user/${encodeURIComponent(thread.author_name)}`} className="text-white font-body font-semibold text-sm hover:text-[#F0A623] hover:underline">{thread.author_name}</Link>
<span className="text-[#555] font-body text-xs">·</span>
<span className="text-[#555] font-body text-xs">{timeAgo(thread.created_at)}</span>
<span className="text-[#555] font-body text-xs">·</span>
@@ -395,17 +395,17 @@ export default function ForumThreadPage() {
<div
className={`border rounded-lg p-5 ${
reply.is_ai_response
? 'bg-[#0d1f35] border-[#4a3500]'
: 'bg-[#1a1a1a] border-[#252525]'
? 'bg-[#0d1f35] border-[#412402]'
: 'bg-[#231d18] border-[#3a322b]'
}`}
>
<div className="flex items-start gap-3">
<Avatar name={reply.author_name} isAI={reply.is_ai_response} />
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-2 flex-wrap">
<Link href={`/forum/user/${encodeURIComponent(reply.author_name)}`} className="text-white font-body font-semibold text-sm hover:text-[#ffb800] hover:underline">{reply.author_name}</Link>
<Link href={`/forum/user/${encodeURIComponent(reply.author_name)}`} className="text-white font-body font-semibold text-sm hover:text-[#F0A623] hover:underline">{reply.author_name}</Link>
{reply.is_ai_response && (
<span className="text-xs bg-[#ffb800]/20 text-[#ffb800] border border-[#ffb800]/30 px-2 py-0.5 rounded font-body font-semibold">
<span className="text-xs bg-[#F0A623]/20 text-[#F0A623] border border-[#F0A623]/30 px-2 py-0.5 rounded font-body font-semibold">
AI Assistant
</span>
)}
@@ -441,14 +441,14 @@ export default function ForumThreadPage() {
)}
{/* AI Assistant Panel */}
<div className="bg-[#0d1f35] border border-[#4a3500] rounded-lg p-5 mb-6">
<div className="bg-[#0d1f35] border border-[#412402] rounded-lg p-5 mb-6">
<div className="flex items-center gap-2 mb-3">
<div className="w-7 h-7 rounded-full bg-[#4a3500] border border-[#ffb800] flex items-center justify-center">
<span className="text-[#ffb800] text-xs font-bold">AI</span>
<div className="w-7 h-7 rounded-full bg-[#412402] border border-[#F0A623] flex items-center justify-center">
<span className="text-[#F0A623] text-xs font-bold">AI</span>
</div>
<div>
<span className="text-white font-body font-semibold text-sm">AV Beat AI Assistant</span>
<span className="ml-2 text-xs bg-[#ffb800]/20 text-[#ffb800] border border-[#ffb800]/30 px-2 py-0.5 rounded font-body">AI — Not a human</span>
<span className="ml-2 text-xs bg-[#F0A623]/20 text-[#F0A623] border border-[#F0A623]/30 px-2 py-0.5 rounded font-body">AI — Not a human</span>
</div>
</div>
<p className="text-[#7a9ab8] font-body text-xs mb-3">
@@ -461,12 +461,12 @@ export default function ForumThreadPage() {
value={aiQuestion}
onChange={e => setAiQuestion(e.target.value)}
disabled={aiLoading}
className="flex-1 bg-[#111] border border-[#2a3a50] rounded-lg px-3 py-2 text-white font-body text-sm placeholder-[#3a5a7a] focus:outline-none focus:border-[#ffb800] disabled:opacity-50"
className="flex-1 bg-[#111] border border-[#2a3a50] rounded-lg px-3 py-2 text-white font-body text-sm placeholder-[#3a5a7a] focus:outline-none focus:border-[#F0A623] disabled:opacity-50"
/>
<button
type="submit"
disabled={aiLoading || !aiQuestion.trim()}
className="bg-[#ffb800] hover:bg-[#d99700] disabled:opacity-50 text-white font-body font-semibold text-sm px-4 py-2 rounded-lg transition-colors flex-shrink-0"
className="bg-[#F0A623] hover:bg-[#BA7517] disabled:opacity-50 text-white font-body font-semibold text-sm px-4 py-2 rounded-lg transition-colors flex-shrink-0"
>
{aiLoading ? (
<span className="flex items-center gap-1">
@@ -486,7 +486,7 @@ export default function ForumThreadPage() {
{/* Reply Form — auth-gated */}
{thread.status !== 'closed' && isAuthenticated && (
<div className="bg-[#1a1a1a] border border-[#252525] rounded-lg p-5">
<div className="bg-[#231d18] border border-[#3a322b] rounded-lg p-5">
<h3 className="text-white font-heading font-semibold mb-4">Post a Reply</h3>
<form onSubmit={handleReply} className="space-y-3">
<textarea
@@ -495,21 +495,21 @@ export default function ForumThreadPage() {
onChange={e => setReplyBody(e.target.value)}
required
rows={5}
className="w-full bg-[#111] border border-[#333] rounded-lg px-3 py-2 text-white font-body text-sm placeholder-[#555] focus:outline-none focus:border-[#ffb800] resize-none"
className="w-full bg-[#111] border border-[#333] rounded-lg px-3 py-2 text-white font-body text-sm placeholder-[#555] focus:outline-none focus:border-[#F0A623] resize-none"
/>
<div className="flex items-center gap-3">
<ImageAttachButton onInsert={(md) => setReplyBody((b) => (b || "") + md)} />
<span className="text-[10px] text-[#666]">Auto-optimized, never &gt; 20 MB</span>
</div>
{replyError && (
<div className="bg-[#2a0a0a] border border-[#d60701] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
<div className="bg-[#2a0a0a] border border-[#D85A30] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
{replyError}
</div>
)}
<button
type="submit"
disabled={submitting || !replyBody.trim()}
className="bg-[#ffb800] hover:bg-[#d99700] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-2 rounded-lg transition-colors"
className="bg-[#F0A623] hover:bg-[#BA7517] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-2 rounded-lg transition-colors"
>
{submitting ? 'Posting...' : 'Post Reply'}
</button>
@@ -518,7 +518,7 @@ export default function ForumThreadPage() {
)}
{thread.status !== 'closed' && !isAuthenticated && (
<div className="bg-[#0d1f35] border border-[#4a3500] rounded-lg p-5 text-center">
<div className="bg-[#0d1f35] border border-[#412402] rounded-lg p-5 text-center">
<h3 className="text-white font-heading font-semibold mb-1">Join the discussion</h3>
<p className="text-[#7a9ab8] font-body text-sm mb-4">
Sign in or create a free account to post replies.
@@ -526,13 +526,13 @@ export default function ForumThreadPage() {
<div className="flex items-center justify-center gap-3">
<Link
href={`/forum/login?next=${encodeURIComponent(`/forum/thread/${threadId}`)}`}
className="bg-[#ffb800] hover:bg-[#d99700] text-white font-body font-semibold text-sm px-5 py-2 rounded-lg transition-colors"
className="bg-[#F0A623] hover:bg-[#BA7517] text-white font-body font-semibold text-sm px-5 py-2 rounded-lg transition-colors"
>
Sign In
</Link>
<Link
href={`/forum/register?next=${encodeURIComponent(`/forum/thread/${threadId}`)}`}
className="border border-[#ffb800] text-[#ffb800] hover:bg-[#ffb800]/10 font-body font-semibold text-sm px-5 py-2 rounded-lg transition-colors"
className="border border-[#F0A623] text-[#F0A623] hover:bg-[#F0A623]/10 font-body font-semibold text-sm px-5 py-2 rounded-lg transition-colors"
>
Register
</Link>
@@ -541,7 +541,7 @@ export default function ForumThreadPage() {
)}
{thread.status === 'closed' && (
<div className="bg-[#1a1a1a] border border-[#333] rounded-lg p-4 text-center text-[#666] font-body text-sm">
<div className="bg-[#231d18] border border-[#333] rounded-lg p-4 text-center text-[#666] font-body text-sm">
This thread is closed to new replies.
</div>
)}

40
src/app/forum/user/[username]/page.tsx
View File

@@ -107,7 +107,7 @@ export default function ForumUserPage() {
return (
<>
<Header />
<main className="bg-[#111111] min-h-screen">
<main className="bg-[#1c1815] min-h-screen">
<div className="max-w-container mx-auto px-4 py-12">
<p className="font-body text-sm text-[#666]">Loading profile…</p>
</div>
@@ -120,11 +120,11 @@ export default function ForumUserPage() {
return (
<>
<Header />
<main className="bg-[#111111] min-h-screen">
<main className="bg-[#1c1815] min-h-screen">
<div className="max-w-container mx-auto px-4 py-12">
<h1 className="font-heading text-2xl font-bold text-[#e8e8e8] mb-2">User not found</h1>
<h1 className="font-heading text-2xl font-bold text-[#FBEFE0] mb-2">User not found</h1>
<p className="font-body text-sm text-[#888]">No forum member with username "{username}".</p>
<Link href="/forum" className="font-body text-sm text-[#ffb800] hover:underline mt-4 inline-block">← Back to The Crew Lounge</Link>
<Link href="/forum" className="font-body text-sm text-[#F0A623] hover:underline mt-4 inline-block">← Back to The Crew Lounge</Link>
</div>
</main>
<Footer />
@@ -139,16 +139,16 @@ export default function ForumUserPage() {
return (
<>
<Header />
<main className="bg-[#111111] min-h-screen">
<main className="bg-[#1c1815] min-h-screen">
<div className="max-w-container mx-auto px-4 py-8">
{/* Header card */}
<div className="bg-[#1a1a1a] border border-[#2a2a2a] rounded-sm p-6 mb-6">
<div className="bg-[#231d18] border border-[#3a322b] rounded-sm p-6 mb-6">
<div className="flex flex-col sm:flex-row sm:items-start gap-5">
<div className="w-20 h-20 sm:w-24 sm:h-24 rounded-full overflow-hidden border-2 border-[#2a2a2a] flex-shrink-0 bg-[#111111] flex items-center justify-center">
<div className="w-20 h-20 sm:w-24 sm:h-24 rounded-full overflow-hidden border-2 border-[#3a322b] flex-shrink-0 bg-[#1c1815] flex items-center justify-center">
{profile.avatar_url ? (
<AppImage src={profile.avatar_url} alt={profile.display_name} width={96} height={96} className="w-full h-full object-cover" />
) : (
<span className="font-heading text-2xl font-bold text-[#ffb800]">
<span className="font-heading text-2xl font-bold text-[#F0A623]">
{profile.display_name.charAt(0).toUpperCase()}
</span>
)}
@@ -156,19 +156,19 @@ export default function ForumUserPage() {
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between gap-3 flex-wrap">
<h1 className="font-heading text-2xl md:text-3xl font-bold text-[#e8e8e8] leading-tight">
<h1 className="font-heading text-2xl md:text-3xl font-bold text-[#FBEFE0] leading-tight">
{profile.display_name}
</h1>
{isOwnProfile && (
<Link
href="/forum/profile/edit"
className="text-xs font-body font-bold uppercase tracking-wider bg-[#ffb800] hover:bg-[#d99700] text-white px-3 py-1.5 rounded-sm transition-colors"
className="text-xs font-body font-bold uppercase tracking-wider bg-[#F0A623] hover:bg-[#BA7517] text-white px-3 py-1.5 rounded-sm transition-colors"
>
Edit Profile
</Link>
)}
</div>
<p className="font-body text-sm text-[#ffb800] mt-0.5">@{profile.username}</p>
<p className="font-body text-sm text-[#F0A623] mt-0.5">@{profile.username}</p>
<div className="flex flex-wrap items-center gap-2 mt-3">
{archetypeLabel && (
@@ -198,7 +198,7 @@ export default function ForumUserPage() {
</div>
{profile.bio && (
<p className="font-body text-sm text-[#bfbfbf] leading-relaxed mt-5 pt-5 border-t border-[#2a2a2a]">
<p className="font-body text-sm text-[#bfbfbf] leading-relaxed mt-5 pt-5 border-t border-[#3a322b]">
{profile.bio}
</p>
)}
@@ -206,7 +206,7 @@ export default function ForumUserPage() {
{profile.expertise_tags && profile.expertise_tags.length > 0 && (
<div className="flex flex-wrap gap-2 mt-4">
{profile.expertise_tags.map((tag) => (
<span key={tag} className="font-body text-[11px] text-[#9ca3af] bg-[#222] border border-[#2a2a2a] px-2 py-0.5 rounded-sm">
<span key={tag} className="font-body text-[11px] text-[#9ca3af] bg-[#222] border border-[#3a322b] px-2 py-0.5 rounded-sm">
#{tag}
</span>
))}
@@ -217,7 +217,7 @@ export default function ForumUserPage() {
{/* Activity grid */}
<div className="grid grid-cols-1 lg:grid-cols-[2fr,1fr] gap-6">
<div>
<h2 className="font-heading text-lg font-bold text-[#e8e8e8] mb-3">
<h2 className="font-heading text-lg font-bold text-[#FBEFE0] mb-3">
Threads started ({profile.thread_count})
</h2>
{threads.length === 0 ? (
@@ -225,8 +225,8 @@ export default function ForumUserPage() {
) : (
<ul className="space-y-2 mb-8">
{threads.map((t) => (
<li key={t.id} className="bg-[#1a1a1a] border border-[#2a2a2a] rounded-sm p-3 hover:border-[#ffb800]/50 transition-colors">
<Link href={`/forum/thread/${t.id}`} className="font-body text-sm font-semibold text-[#e0e0e0] hover:text-[#ffb800] block">
<li key={t.id} className="bg-[#231d18] border border-[#3a322b] rounded-sm p-3 hover:border-[#F0A623]/50 transition-colors">
<Link href={`/forum/thread/${t.id}`} className="font-body text-sm font-semibold text-[#e0e0e0] hover:text-[#F0A623] block">
{t.title}
</Link>
<div className="flex items-center gap-3 mt-1 text-[11px] text-[#666]">
@@ -243,7 +243,7 @@ export default function ForumUserPage() {
</ul>
)}
<h2 className="font-heading text-lg font-bold text-[#e8e8e8] mb-3">
<h2 className="font-heading text-lg font-bold text-[#FBEFE0] mb-3">
Recent replies
</h2>
{replies.length === 0 ? (
@@ -251,8 +251,8 @@ export default function ForumUserPage() {
) : (
<ul className="space-y-2">
{replies.map((r) => (
<li key={r.id} className="bg-[#1a1a1a] border border-[#2a2a2a] rounded-sm p-3">
<Link href={`/forum/thread/${r.thread_id}`} className="font-body text-xs font-semibold text-[#ffb800] hover:underline">
<li key={r.id} className="bg-[#231d18] border border-[#3a322b] rounded-sm p-3">
<Link href={`/forum/thread/${r.thread_id}`} className="font-body text-xs font-semibold text-[#F0A623] hover:underline">
{r.forum_threads?.title || "(thread)"}
</Link>
<p className="font-body text-sm text-[#bfbfbf] leading-relaxed mt-1 line-clamp-3">{r.body}</p>
@@ -266,7 +266,7 @@ export default function ForumUserPage() {
</div>
<aside>
<div className="bg-[#1a1a1a] border border-[#2a2a2a] rounded-sm p-4 sticky top-4">
<div className="bg-[#231d18] border border-[#3a322b] rounded-sm p-4 sticky top-4">
<h3 className="font-body text-xs font-bold uppercase tracking-wider text-[#888] mb-2">Profile facts</h3>
<dl className="text-sm space-y-2">
<div><dt className="text-[#666] text-[11px] uppercase tracking-wider">Role</dt><dd className="text-[#cccccc]">{profile.role_title || "—"}</dd></div>