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

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>
)}