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

slice 4: accent palette refinement — blue → teal

Browse Source 
Replace the four accent-family hex codes site-wide with the teal palette
(keeps the dark theme; only swaps the accent family, not the dark base):

  #3b82f6 (accent primary CTA)   → #5B7C8D  (teal)        [839×]
  #2563eb (accent-dark / hover)  → #4A6473  (darker teal) [44×]
  #60a5fa (info link, lighter)   → #8FB0C3  (mid teal)    [68×]
  #1e3a5f (accent-muted bg)      → #2F4F5F  (navy)        [44×]

tailwind.config.js tokens updated to match (accent/accent-dark/accent-muted).
Sweep also covers tailwind.css. 108 files touched. The dark base (#0d0d0d,
#111, #161616, #1a1a1a etc.) is intentionally untouched.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ryan Salazar (via Claude)
2026-05-15 23:33:04 +00:00
parent f6fa7570c4
commit 52fe7bceb6
109 changed files with 937 additions and 937 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -72,7 +72,7 @@ function TopThreadsWidget({ categoryId }: { categoryId: string }) {
const getMetricValue = (thread: ForumThread) => {
if (activeMetric === 'upvotes') return { value: thread.upvote_count ?? 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-[#5B7C8D]' };
return { value: thread.view_count, label: 'views', color: 'text-[#f59e0b]' };
};
@@ -92,7 +92,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-[#5B7C8D] text-white'
: 'text-[#666] hover:text-[#aaa]'
}`}
>
@@ -140,7 +140,7 @@ 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-[#5B7C8D] transition-colors truncate leading-snug">
{thread.title}
</p>
<p className="text-[#555] font-body text-xs mt-0.5">
@@ -268,7 +268,7 @@ export default function ForumCategoryPage() {
<div className="bg-[#1a2535] 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-[#5B7C8D] transition-colors">Forum</Link>
<span className="mx-2">›</span>
<span className="text-[#aab4c4]">{category?.name || slug}</span>
</nav>
@@ -284,7 +284,7 @@ export default function ForumCategoryPage() {
</div>
<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-[#5B7C8D] hover:bg-[#4A6473] text-white font-body font-semibold text-sm px-4 py-2 rounded-lg transition-colors"
>
+ New Thread
</button>
@@ -303,7 +303,7 @@ export default function ForumCategoryPage() {
placeholder="Your name (optional)"
value={newAuthor}
onChange={e => setNewAuthor(e.target.value)}
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-[#5B7C8D]"
/>
<input
type="text"
@@ -311,7 +311,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-[#5B7C8D]"
/>
<textarea
placeholder="What would you like to discuss? *"
@@ -319,13 +319,13 @@ 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-[#5B7C8D] resize-none"
/>
<div className="flex gap-3">
<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-[#5B7C8D] hover:bg-[#4A6473] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-2 rounded-lg transition-colors"
>
{submitting ? 'Posting...' : 'Post Thread'}
</button>
@@ -356,7 +356,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-[#5B7C8D] rounded-lg pl-9 pr-4 py-2.5 text-white font-body text-sm placeholder-[#555] focus:outline-none transition-colors"
/>
{search && (
<button
@@ -379,7 +379,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-[#5B7C8D] text-white'
: 'text-[#888] hover:text-white'
}`}
>
@@ -423,12 +423,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-[#5B7C8D] 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-[#5B7C8D]/20 text-[#5B7C8D] 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>
@@ -436,7 +436,7 @@ 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-[#5B7C8D] transition-colors truncate">
{thread.title}
</h3>
</div>

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

@@ -75,7 +75,7 @@ function TopThreadsWidget({ categoryId }: { categoryId?: string }) {
const getMetricValue = (thread: ForumThread) => {
if (activeMetric === 'upvotes') return { value: thread.upvote_count ?? 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-[#5B7C8D]' };
return { value: thread.view_count, label: 'views', color: 'text-[#f59e0b]' };
};
@@ -95,7 +95,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-[#5B7C8D] text-white'
: 'text-[#666] hover:text-[#aaa]'
}`}
>
@@ -143,13 +143,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-[#5B7C8D] transition-colors truncate leading-snug">
{thread.title}
</p>
<p className="text-[#555] font-body text-xs mt-0.5">
<span className="text-[#666]">{thread.author_name}</span>
{thread.forum_categories && (
<> · <span className="text-[#3b82f6]">{thread.forum_categories.name}</span></>
<> · <span className="text-[#5B7C8D]">{thread.forum_categories.name}</span></>
)}
{' · '}{timeAgo(thread.created_at)}
</p>
@@ -278,7 +278,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-[#5B7C8D] 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">
@@ -289,7 +289,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-[#5B7C8D] 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">
@@ -308,7 +308,7 @@ export default function ForumIndexPage() {
<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-[#5B7C8D] text-white font-body text-sm font-bold px-5 py-2 rounded-lg hover:bg-[#4A6473] transition-colors"
>
Sign In
</Link>
@@ -329,7 +329,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-[#5B7C8D] text-white font-body text-sm font-bold px-5 py-2 rounded-lg hover:bg-[#4A6473] transition-colors"
>
Discover Members
</Link>
@@ -343,10 +343,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-[#5B7C8D] 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-[#5B7C8D] transition-colors truncate">
{thread.title}
</h3>
<p className="text-[#666] font-body text-xs mt-0.5">
@@ -354,7 +354,7 @@ export default function ForumIndexPage() {
<Link
href={`/profile/${thread.author_id}`}
onClick={e => e.stopPropagation()}
className="text-[#3b82f6] hover:underline"
className="text-[#5B7C8D] hover:underline"
>
{thread.author_name}
</Link>
@@ -395,7 +395,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-[#5B7C8D] rounded-lg pl-9 pr-4 py-2.5 text-white font-body text-sm placeholder-[#555] focus:outline-none transition-colors"
/>
{search && (
<button
@@ -415,7 +415,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-[#5B7C8D] 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 => (
@@ -435,7 +435,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-[#5B7C8D] text-white'
: 'text-[#888] hover:text-white'
}`}
>
@@ -468,16 +468,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-[#5B7C8D] 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-[#5B7C8D] transition-colors truncate">
{thread.title}
</h3>
<p className="text-[#666] font-body text-xs mt-0.5">
by <span className="text-[#888]">{thread.author_name}</span>
{thread.forum_categories && (
<> · <span className="text-[#3b82f6]">{thread.forum_categories.name}</span></>
<> · <span className="text-[#5B7C8D]">{thread.forum_categories.name}</span></>
)}
{' · '}{timeAgo(thread.created_at)}
</p>
@@ -527,11 +527,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-[#5B7C8D] 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-[#5B7C8D] transition-colors">
{cat.name}
</h2>
<p className="text-[#888] font-body text-sm mt-0.5 truncate">{cat.description}</p>
@@ -544,7 +544,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-[#5B7C8D] 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>
@@ -563,7 +563,7 @@ export default function ForumIndexPage() {
<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]">BroadcastBeat AI</span> assistant is available in threads to help answer questions — it is clearly labeled</li>
<li>• The <span className="text-[#5B7C8D]">BroadcastBeat 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>

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

@@ -47,13 +47,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-[#2F4F5F] border border-[#5B7C8D] flex items-center justify-center flex-shrink-0">
<span className="text-[#5B7C8D] 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 = ['#2F4F5F', '#1a3a2a', '#3a1a1a', '#2a1a3a', '#1a2a3a'];
const colorIdx = name.charCodeAt(0) % colors.length;
return (
<div
@@ -113,7 +113,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-[#5B7C8D]' : counts.vote_score < 0 ? 'text-red-400' : 'text-[#666]';
return (
<div className="flex items-center gap-1 mt-2">
@@ -124,8 +124,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-[#5B7C8D]/20 border-[#5B7C8D] text-[#5B7C8D]'
: 'bg-transparent border-[#2a2a2a] text-[#666] hover:border-[#5B7C8D] hover:text-[#5B7C8D]'
} disabled:opacity-40 disabled:cursor-not-allowed`}
aria-label="Upvote"
>
@@ -158,7 +158,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-[#5B7C8D] ml-1 transition-colors">
Sign in to vote
</Link>
)}
@@ -295,7 +295,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-[#5B7C8D] hover:underline font-body text-sm">
← Back to Forum
</Link>
</div>
@@ -315,11 +315,11 @@ export default function ForumThreadPage() {
<div className="bg-[#1a2535] 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-[#5B7C8D] 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-[#5B7C8D] transition-colors">{category.name}</Link>
<span className="mx-2">›</span>
</>
)}
@@ -366,7 +366,7 @@ export default function ForumThreadPage() {
key={reply.id}
className={`border rounded-lg p-5 ${
reply.is_ai_response
? 'bg-[#0d1f35] border-[#1e3a5f]'
? 'bg-[#0d1f35] border-[#2F4F5F]'
: 'bg-[#1a1a1a] border-[#252525]'
}`}
>
@@ -376,7 +376,7 @@ export default function ForumThreadPage() {
<div className="flex items-center gap-2 mb-2 flex-wrap">
<span className="text-white font-body font-semibold text-sm">{reply.author_name}</span>
{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-[#5B7C8D]/20 text-[#5B7C8D] border border-[#5B7C8D]/30 px-2 py-0.5 rounded font-body font-semibold">
AI Assistant
</span>
)}
@@ -404,14 +404,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-[#2F4F5F] 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-[#2F4F5F] border border-[#5B7C8D] flex items-center justify-center">
<span className="text-[#5B7C8D] text-xs font-bold">AI</span>
</div>
<div>
<span className="text-white font-body font-semibold text-sm">BroadcastBeat 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-[#5B7C8D]/20 text-[#5B7C8D] border border-[#5B7C8D]/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">
@@ -424,12 +424,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-[#5B7C8D] 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-[#5B7C8D] hover:bg-[#4A6473] 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">
@@ -457,7 +457,7 @@ export default function ForumThreadPage() {
placeholder="Your name (optional)"
value={replyAuthor}
onChange={e => setReplyAuthor(e.target.value)}
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-[#5B7C8D]"
/>
<textarea
placeholder="Share your thoughts, experience, or answer..."
@@ -465,12 +465,12 @@ 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-[#5B7C8D] resize-none"
/>
<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-[#5B7C8D] hover:bg-[#4A6473] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-2 rounded-lg transition-colors"
>
{submitting ? 'Posting...' : 'Post Reply'}
</button>