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

AV launch: global color scheme to match logo — gold #ffb800 primary, red #d60701 secondary, warm dark bars (1a1208 / 161310) replacing the inherited BB blue palette. Swapped 21 root tokens + 112 component files.

Browse Source
This commit is contained in:
Ryan Salazar
2026-06-02 23:24:54 +00:00
parent 54117c34d3
commit 10ecf723dc
115 changed files with 1082 additions and 1082 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -74,7 +74,7 @@ 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-[#3b82f6]' };
if (activeMetric === 'replies') return { value: thread.reply_count, label: 'replies', color: 'text-[#ffb800]' };
return { value: thread.view_count, label: 'views', color: 'text-[#f59e0b]' };
};
@@ -94,7 +94,7 @@ function TopThreadsWidget({ categoryId }: { categoryId: string }) {
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-[#3b82f6] text-white'
? 'bg-[#ffb800] text-white'
: 'text-[#666] hover:text-[#aaa]'
}`}
>
@@ -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-[#3b82f6] transition-colors truncate leading-snug">
<p className="text-white font-body text-sm font-semibold group-hover:text-[#ffb800] 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-[#3b82f6] hover:underline" onClick={(e) => e.stopPropagation()}>{thread.author_name}</Link>
<Link href={`/forum/user/${encodeURIComponent(thread.author_name)}`} className="text-[#666] hover:text-[#ffb800] hover:underline" onClick={(e) => e.stopPropagation()}>{thread.author_name}</Link>
{' · '}{timeAgo(thread.created_at)}
</p>
</div>
@@ -279,10 +279,10 @@ export default function ForumCategoryPage() {
<Header />
<main className="min-h-screen bg-[#111111]">
{/* Breadcrumb + Header */}
<div className="bg-[#1a2535] border-b border-[#2a3a50]">
<div className="bg-[#1a1208] 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-[#3b82f6] transition-colors">Forum</Link>
<Link href="/forum" className="hover:text-[#ffb800] 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-[#3b82f6] hover:bg-[#2563eb] text-white font-body font-semibold text-sm px-4 py-2 rounded-lg transition-colors"
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"
>
+ New Thread
</button>
) : (
<Link
href={`/forum/login?next=${typeof window === 'undefined' ? '/forum' : encodeURIComponent(window.location.pathname)}`}
className="flex-shrink-0 bg-[#3b82f6] hover:bg-[#2563eb] text-white font-body font-semibold text-sm px-4 py-2 rounded-lg transition-colors"
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"
>
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-[#1a2535] border border-[#2a3a50] rounded-lg p-5 mb-6">
<form onSubmit={handleNewThread} className="bg-[#1a1208] 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-[#3b82f6]"
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]"
/>
<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-[#3b82f6] 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-[#ffb800] 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-[#cc0000] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
<div className="bg-[#2a0a0a] border border-[#d60701] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
{newError}
</div>
)}
@@ -350,7 +350,7 @@ export default function ForumCategoryPage() {
<button
type="submit"
disabled={submitting}
className="bg-[#3b82f6] hover:bg-[#2563eb] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-2 rounded-lg transition-colors"
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"
>
{submitting ? 'Posting...' : 'Post Thread'}
</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-[#3b82f6] 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-[#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"
/>
{search && (
<button
@@ -401,7 +401,7 @@ export default function ForumCategoryPage() {
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-[#3b82f6] text-white'
? 'bg-[#ffb800] text-white'
: 'text-[#888] hover:text-white'
}`}
>
@@ -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-[#3b82f6] rounded-lg px-4 py-3 transition-all group"
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"
>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap">
{thread.status === 'pinned' && (
<span className="text-xs bg-[#3b82f6]/20 text-[#3b82f6] px-2 py-0.5 rounded font-body font-semibold">PINNED</span>
<span className="text-xs bg-[#ffb800]/20 text-[#ffb800] 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-[#3b82f6] transition-colors truncate">
<h3 className="text-white font-body font-semibold text-sm group-hover:text-[#ffb800] 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-[#3b82f6] hover:underline" onClick={(e) => e.stopPropagation()}>{thread.author_name}</Link>
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>
{' · '}{timeAgo(thread.created_at)}
</p>
</div>

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

@@ -33,7 +33,7 @@ function ForgotInner() {
<main className="min-h-screen bg-gradient-to-b from-[#0d0d0d] via-[#111111] to-[#0d0d0d]">
<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-[#3b82f6] font-mono mb-2">Account recovery</div>
<div className="text-[10px] uppercase tracking-widest text-[#ffb800] 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.
@@ -44,7 +44,7 @@ function ForgotInner() {
className="bg-[#1a1a1a] border border-[#252525] rounded-lg p-6 space-y-4 shadow-2xl"
>
{err && (
<div className="bg-[#2a0a0a] border border-[#cc0000] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
<div className="bg-[#2a0a0a] border border-[#d60701] 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-[#3b82f6]"
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]"
/>
</div>
<button
type="submit"
disabled={busy || !email.trim()}
className="w-full bg-[#3b82f6] hover:bg-[#2563eb] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-3 rounded-lg transition-colors"
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"
>
{busy ? "Sending…" : "Send reset link"}
</button>
<div className="text-center text-xs font-body text-[#888] pt-2 border-t border-[#252525]">
Remembered it?{" "}
<Link href="/forum/login" className="text-[#3b82f6] hover:underline font-semibold">
<Link href="/forum/login" className="text-[#ffb800] hover:underline font-semibold">
Back to sign in
</Link>
</div>

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

@@ -54,7 +54,7 @@ function ForumLoginInner() {
<main className="min-h-screen bg-gradient-to-b from-[#0d0d0d] via-[#111111] to-[#0d0d0d]">
<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-[#3b82f6] font-mono mb-2">Welcome back</div>
<div className="text-[10px] uppercase tracking-widest text-[#ffb800] 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.
@@ -65,7 +65,7 @@ function ForumLoginInner() {
className="bg-[#1a1a1a] border border-[#252525] rounded-lg p-6 space-y-4 shadow-2xl"
>
{error && (
<div className="bg-[#2a0a0a] border border-[#cc0000] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
<div className="bg-[#2a0a0a] border border-[#d60701] 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-[#3b82f6]"
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]"
/>
</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-[#3b82f6]"
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]"
/>
</div>
<button
type="submit"
disabled={loading}
className="w-full bg-[#3b82f6] hover:bg-[#2563eb] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors"
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"
>
{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-[#3b82f6] hover:underline"
className="text-[#888] hover:text-[#ffb800] hover:underline"
>
Forgot password?
</Link>
@@ -115,7 +115,7 @@ function ForumLoginInner() {
No account yet?{' '}
<Link
href={`/forum/register?next=${encodeURIComponent(next)}`}
className="text-[#3b82f6] hover:underline"
className="text-[#ffb800] hover:underline"
>
Create one
</Link>

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

@@ -103,7 +103,7 @@ 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-[#3b82f6]' };
if (activeMetric === 'replies') return { value: thread.reply_count, label: 'replies', color: 'text-[#ffb800]' };
return { value: thread.view_count, label: 'views', color: 'text-[#f59e0b]' };
};
@@ -123,7 +123,7 @@ function TopThreadsWidget({ categoryId }: { categoryId?: string }) {
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-[#3b82f6] text-white'
? 'bg-[#ffb800] text-white'
: 'text-[#666] hover:text-[#aaa]'
}`}
>
@@ -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-[#3b82f6] transition-colors truncate leading-snug">
<p className="text-white font-body text-sm font-semibold group-hover:text-[#ffb800] 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-[#3b82f6] hover:underline" onClick={(e) => e.stopPropagation()}>{thread.author_name}</Link>
<Link href={`/forum/user/${encodeURIComponent(thread.author_name)}`} className="text-[#666] hover:text-[#ffb800] hover:underline" onClick={(e) => e.stopPropagation()}>{thread.author_name}</Link>
{thread.forum_categories && (
<> · <span className="text-[#3b82f6]">{thread.forum_categories.name}</span></>
<> · <span className="text-[#ffb800]">{thread.forum_categories.name}</span></>
)}
{' · '}{timeAgo(thread.created_at)}
</p>
@@ -286,7 +286,7 @@ export default function ForumIndexPage() {
<main className="min-h-screen bg-[#111111]">
{/* Hero — width-aligned with content below + featured-box pattern */}
<div className="max-w-container mx-auto px-4">
<div className="bg-[#1a2535] border-b border-[#2a3a50] py-5 px-4">
<div className="bg-[#1a1208] 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-[#3b82f6] hover:bg-[#2563eb] 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-[#ffb800] hover:bg-[#d99700] 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-[#3b82f6] hover:bg-[#2563eb] 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-[#ffb800] hover:bg-[#d99700] 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" />
@@ -333,7 +333,7 @@ export default function ForumIndexPage() {
<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-[#3b82f6] text-white' : 'text-[#888] hover:text-white'
feedMode === 'discover' ? 'bg-[#ffb800] 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-[#3b82f6] text-white' : 'text-[#888] hover:text-white'
feedMode === 'following' ? 'bg-[#ffb800] 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-[#1a2535] border border-[#2a3a50] rounded-lg p-8 text-center">
<div className="bg-[#1a1208] 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-[#3b82f6] text-white font-body text-sm font-bold px-5 py-2 rounded-lg hover:bg-[#2563eb] transition-colors"
className="inline-block bg-[#ffb800] text-white font-body text-sm font-bold px-5 py-2 rounded-lg hover:bg-[#d99700] transition-colors"
>
Sign In
</Link>
@@ -384,7 +384,7 @@ export default function ForumIndexPage() {
<Link
href="/forum"
onClick={() => setFeedMode('discover')}
className="inline-block bg-[#3b82f6] text-white font-body text-sm font-bold px-5 py-2 rounded-lg hover:bg-[#2563eb] transition-colors"
className="inline-block bg-[#ffb800] text-white font-body text-sm font-bold px-5 py-2 rounded-lg hover:bg-[#d99700] 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-[#3b82f6] rounded-lg px-4 py-3 transition-all group"
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"
>
<div className="flex-1 min-w-0">
<h3 className="text-white font-body font-semibold text-sm group-hover:text-[#3b82f6] transition-colors truncate">
<h3 className="text-white font-body font-semibold text-sm group-hover:text-[#ffb800] 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-[#3b82f6] hover:underline"
className="text-[#ffb800] 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-[#3b82f6] 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-[#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"
/>
{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-[#3b82f6] 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-[#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]"
>
<option value="">All Categories</option>
{categories.map(cat => (
@@ -490,7 +490,7 @@ export default function ForumIndexPage() {
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-[#3b82f6] text-white'
? 'bg-[#ffb800] text-white'
: 'text-[#888] hover:text-white'
}`}
>
@@ -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-[#3b82f6] rounded-lg px-4 py-3 transition-all group"
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"
>
<div className="flex-1 min-w-0">
<h3 className="text-white font-body font-semibold text-sm group-hover:text-[#3b82f6] transition-colors truncate">
<h3 className="text-white font-body font-semibold text-sm group-hover:text-[#ffb800] 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-[#3b82f6] hover:underline" onClick={(e) => e.stopPropagation()}>{thread.author_name}</Link>
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>
{thread.forum_categories && (
<> · <span className="text-[#3b82f6]">{thread.forum_categories.name}</span></>
<> · <span className="text-[#ffb800]">{thread.forum_categories.name}</span></>
)}
{' · '}{timeAgo(thread.created_at)}
</p>
@@ -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-[#3b82f6] rounded-lg p-4 transition-all group"
className="flex items-center gap-4 bg-[#1a1a1a] hover:bg-[#1e2a3a] border border-[#252525] hover:border-[#ffb800] 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-[#3b82f6] transition-colors">
<h2 className="text-white font-heading font-semibold text-lg group-hover:text-[#ffb800] 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-[#3b82f6] 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-[#ffb800] 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-[#1a2535] border border-[#2a3a50] rounded-lg p-5">
<div className="mt-8 bg-[#1a1208] 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-[#3b82f6]">AV Beat AI</span> assistant is available in threads to help answer questions — it is clearly labeled</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>• No spam, self-promotion, or vendor pitches without disclosure</li>
</ul>
</div>

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

@@ -104,7 +104,7 @@ export default function EditForumProfilePage() {
<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-[#3b82f6] hover:underline"
className="text-xs font-body text-[#ffb800] hover:underline"
>
View public profile →
</Link>
@@ -115,7 +115,7 @@ export default function EditForumProfilePage() {
className="bg-[#1a1a1a] border border-[#252525] rounded-lg p-6 space-y-4"
>
{error && (
<div className="bg-[#2a0a0a] border border-[#cc0000] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
<div className="bg-[#2a0a0a] border border-[#d60701] 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-[#3b82f6]"
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]"
/>
<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-[#3b82f6]"
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]"
/>
</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-[#3b82f6] resize-none"
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"
/>
</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-[#3b82f6]"
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]"
/>
</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-[#3b82f6]"
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]"
/>
</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-[#3b82f6]"
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]"
/>
</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-[#3b82f6]"
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]"
/>
</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-[#3b82f6]"
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]"
/>
</Field>
<button
type="submit"
disabled={saving}
className="bg-[#3b82f6] hover:bg-[#2563eb] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors"
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"
>
{saving ? 'Saving…' : 'Save Profile'}
</button>

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

@@ -105,7 +105,7 @@ function ForumRegisterInner() {
<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-[#3b82f6] font-mono mb-3">Membership</div>
<div className="text-[10px] uppercase tracking-widest text-[#ffb800] 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>
@@ -131,7 +131,7 @@ function ForumRegisterInner() {
<div className="mt-6 text-[11px] text-[#666] leading-relaxed max-w-md border-t border-[#252525] 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-[#3b82f6] hover:underline">Contact us</Link> if you represent a manufacturer or agency.
<Link href="/about/advertise" className="text-[#ffb800] hover:underline">Contact us</Link> if you represent a manufacturer or agency.
</div>
</aside>
@@ -148,11 +148,11 @@ function ForumRegisterInner() {
className="bg-[#1a1a1a] border border-[#252525] rounded-lg p-6 space-y-4 shadow-2xl"
>
<div className="hidden lg:block mb-2">
<div className="text-[10px] uppercase tracking-widest text-[#3b82f6] font-mono mb-1">Create your account</div>
<div className="text-[10px] uppercase tracking-widest text-[#ffb800] 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-[#cc0000] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
<div className="bg-[#2a0a0a] border border-[#d60701] 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-[#3b82f6]"
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]"
/>
</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-[#3b82f6]"
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]"
/>
</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-[#3b82f6]"
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]"
/>
</div>
<div>
@@ -211,21 +211,21 @@ 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-[#3b82f6]"
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]"
/>
</div>
<button
type="submit"
disabled={loading}
className="w-full bg-[#3b82f6] hover:bg-[#2563eb] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-3 rounded-lg transition-colors"
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"
>
{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-[#3b82f6] underline">terms</Link>
<Link href="/terms" className="text-[#888] hover:text-[#ffb800] underline">terms</Link>
{' '}and{' '}
<Link href="/privacy" className="text-[#888] hover:text-[#3b82f6] underline">privacy policy</Link>.
<Link href="/privacy" className="text-[#888] hover:text-[#ffb800] underline">privacy policy</Link>.
We&rsquo;ll never sell your email.
</p>
<SocialAuthButtons next={next} />
@@ -233,7 +233,7 @@ function ForumRegisterInner() {
Already have an account?{' '}
<Link
href={`/forum/login?next=${encodeURIComponent(next)}`}
className="text-[#3b82f6] hover:underline font-semibold"
className="text-[#ffb800] hover:underline font-semibold"
>
Sign in
</Link>

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

@@ -43,7 +43,7 @@ function ResetInner() {
<main className="min-h-screen bg-gradient-to-b from-[#0d0d0d] via-[#111111] to-[#0d0d0d]">
<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-[#3b82f6] font-mono mb-2">Reset password</div>
<div className="text-[10px] uppercase tracking-widest text-[#ffb800] 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 ? (
@@ -53,7 +53,7 @@ function ResetInner() {
</p>
<Link
href="/forum/forgot-password"
className="inline-block bg-[#3b82f6] hover:bg-[#2563eb] text-white font-semibold text-sm px-5 py-2 rounded"
className="inline-block bg-[#ffb800] hover:bg-[#d99700] text-white font-semibold text-sm px-5 py-2 rounded"
>
Request a new link
</Link>
@@ -64,7 +64,7 @@ function ResetInner() {
className="bg-[#1a1a1a] border border-[#252525] rounded-lg p-6 space-y-4 shadow-2xl"
>
{err && (
<div className="bg-[#2a0a0a] border border-[#cc0000] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
<div className="bg-[#2a0a0a] border border-[#d60701] 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-[#3b82f6]"
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-[#ffb800]"
/>
</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-[#3b82f6]"
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-[#ffb800]"
/>
</div>
<button
type="submit"
disabled={busy}
className="w-full bg-[#3b82f6] hover:bg-[#2563eb] disabled:opacity-50 text-white font-semibold text-sm px-5 py-3 rounded-lg"
className="w-full bg-[#ffb800] hover:bg-[#d99700] disabled:opacity-50 text-white font-semibold text-sm px-5 py-3 rounded-lg"
>
{busy ? "Saving…" : "Update password"}
</button>

54
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-[#1e3a5f] border border-[#3b82f6] flex items-center justify-center flex-shrink-0">
<span className="text-[#3b82f6] text-xs font-bold">AI</span>
<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>
);
}
const initials = name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
const colors = ['#1e3a5f', '#1a3a2a', '#3a1a1a', '#2a1a3a', '#1a2a3a'];
const colors = ['#4a3500', '#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-[#3b82f6]' : counts.vote_score < 0 ? 'text-red-400' : 'text-[#666]';
const scoreColor = counts.vote_score > 0 ? 'text-[#ffb800]' : 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-[#3b82f6]/20 border-[#3b82f6] text-[#3b82f6]'
: 'bg-transparent border-[#2a2a2a] text-[#666] hover:border-[#3b82f6] hover:text-[#3b82f6]'
? 'bg-[#ffb800]/20 border-[#ffb800] text-[#ffb800]'
: 'bg-transparent border-[#2a2a2a] text-[#666] hover:border-[#ffb800] hover:text-[#ffb800]'
} disabled:opacity-40 disabled:cursor-not-allowed`}
aria-label="Upvote"
>
@@ -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-[#3b82f6] ml-1 transition-colors">
<Link href="/login" className="text-xs font-body text-[#555] hover:text-[#ffb800] ml-1 transition-colors">
Sign in to vote
</Link>
)}
@@ -322,7 +322,7 @@ export default function ForumThreadPage() {
<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-[#3b82f6] hover:underline font-body text-sm">
<Link href="/forum" className="mt-4 inline-block text-[#ffb800] hover:underline font-body text-sm">
← Back to Forum
</Link>
</div>
@@ -339,14 +339,14 @@ export default function ForumThreadPage() {
<Header />
<main className="min-h-screen bg-[#111111]">
{/* Breadcrumb */}
<div className="bg-[#1a2535] border-b border-[#2a3a50]">
<div className="bg-[#1a1208] 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-[#3b82f6] transition-colors">Forum</Link>
<Link href="/forum" className="hover:text-[#ffb800] transition-colors">Forum</Link>
<span className="mx-2">›</span>
{category && (
<>
<Link href={`/forum/${category.slug}`} className="hover:text-[#3b82f6] transition-colors">{category.name}</Link>
<Link href={`/forum/${category.slug}`} className="hover:text-[#ffb800] transition-colors">{category.name}</Link>
<span className="mx-2">›</span>
</>
)}
@@ -366,7 +366,7 @@ export default function ForumThreadPage() {
<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-[#3b82f6] 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-[#ffb800] 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,7 +395,7 @@ export default function ForumThreadPage() {
<div
className={`border rounded-lg p-5 ${
reply.is_ai_response
? 'bg-[#0d1f35] border-[#1e3a5f]'
? 'bg-[#0d1f35] border-[#4a3500]'
: 'bg-[#1a1a1a] border-[#252525]'
}`}
>
@@ -403,9 +403,9 @@ export default function ForumThreadPage() {
<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-[#3b82f6] 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-[#ffb800] hover:underline">{reply.author_name}</Link>
{reply.is_ai_response && (
<span className="text-xs bg-[#3b82f6]/20 text-[#3b82f6] border border-[#3b82f6]/30 px-2 py-0.5 rounded font-body font-semibold">
<span className="text-xs bg-[#ffb800]/20 text-[#ffb800] border border-[#ffb800]/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-[#1e3a5f] rounded-lg p-5 mb-6">
<div className="bg-[#0d1f35] border border-[#4a3500] rounded-lg p-5 mb-6">
<div className="flex items-center gap-2 mb-3">
<div className="w-7 h-7 rounded-full bg-[#1e3a5f] border border-[#3b82f6] flex items-center justify-center">
<span className="text-[#3b82f6] text-xs font-bold">AI</span>
<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>
<div>
<span className="text-white font-body font-semibold text-sm">AV Beat AI Assistant</span>
<span className="ml-2 text-xs bg-[#3b82f6]/20 text-[#3b82f6] border border-[#3b82f6]/30 px-2 py-0.5 rounded font-body">AI — Not a human</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>
</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-[#3b82f6] 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-[#ffb800] disabled:opacity-50"
/>
<button
type="submit"
disabled={aiLoading || !aiQuestion.trim()}
className="bg-[#3b82f6] hover:bg-[#2563eb] disabled:opacity-50 text-white font-body font-semibold text-sm px-4 py-2 rounded-lg transition-colors flex-shrink-0"
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"
>
{aiLoading ? (
<span className="flex items-center gap-1">
@@ -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-[#3b82f6] 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-[#ffb800] 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-[#cc0000] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
<div className="bg-[#2a0a0a] border border-[#d60701] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
{replyError}
</div>
)}
<button
type="submit"
disabled={submitting || !replyBody.trim()}
className="bg-[#3b82f6] hover:bg-[#2563eb] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-2 rounded-lg transition-colors"
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"
>
{submitting ? 'Posting...' : 'Post Reply'}
</button>
@@ -518,7 +518,7 @@ export default function ForumThreadPage() {
)}
{thread.status !== 'closed' && !isAuthenticated && (
<div className="bg-[#0d1f35] border border-[#1e3a5f] rounded-lg p-5 text-center">
<div className="bg-[#0d1f35] border border-[#4a3500] 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-[#3b82f6] hover:bg-[#2563eb] text-white font-body font-semibold text-sm px-5 py-2 rounded-lg transition-colors"
className="bg-[#ffb800] hover:bg-[#d99700] 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-[#3b82f6] text-[#3b82f6] hover:bg-[#3b82f6]/10 font-body font-semibold text-sm px-5 py-2 rounded-lg transition-colors"
className="border border-[#ffb800] text-[#ffb800] hover:bg-[#ffb800]/10 font-body font-semibold text-sm px-5 py-2 rounded-lg transition-colors"
>
Register
</Link>

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

@@ -124,7 +124,7 @@ export default function ForumUserPage() {
<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>
<p className="font-body text-sm text-[#888]">No forum member with username "{username}".</p>
<Link href="/forum" className="font-body text-sm text-[#3b82f6] hover:underline mt-4 inline-block">← Back to The Crew Lounge</Link>
<Link href="/forum" className="font-body text-sm text-[#ffb800] hover:underline mt-4 inline-block">← Back to The Crew Lounge</Link>
</div>
</main>
<Footer />
@@ -148,7 +148,7 @@ export default function ForumUserPage() {
{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-[#3b82f6]">
<span className="font-heading text-2xl font-bold text-[#ffb800]">
{profile.display_name.charAt(0).toUpperCase()}
</span>
)}
@@ -162,13 +162,13 @@ export default function ForumUserPage() {
{isOwnProfile && (
<Link
href="/forum/profile/edit"
className="text-xs font-body font-bold uppercase tracking-wider bg-[#3b82f6] hover:bg-[#2563eb] text-white px-3 py-1.5 rounded-sm transition-colors"
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"
>
Edit Profile
</Link>
)}
</div>
<p className="font-body text-sm text-[#3b82f6] mt-0.5">@{profile.username}</p>
<p className="font-body text-sm text-[#ffb800] mt-0.5">@{profile.username}</p>
<div className="flex flex-wrap items-center gap-2 mt-3">
{archetypeLabel && (
@@ -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-[#3b82f6]/50 transition-colors">
<Link href={`/forum/thread/${t.id}`} className="font-body text-sm font-semibold text-[#e0e0e0] hover:text-[#3b82f6] block">
<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">
{t.title}
</Link>
<div className="flex items-center gap-3 mt-1 text-[11px] text-[#666]">
@@ -252,7 +252,7 @@ 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-[#3b82f6] hover:underline">
<Link href={`/forum/thread/${r.thread_id}`} className="font-body text-xs font-semibold text-[#ffb800] 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>