fix(contrast,brand): full audit sweep — white-on-white + cross-component renames
- forum/page.tsx: text-white → navy on TopThreads, Following feed, Discover feed cards, search input, select, category grid, Community Guidelines; greys lightened where applicable for new white surface - forum/[slug]/page.tsx: same sweep for category page (h1, h2, thread rows, new-thread form, search/sort bar) + hover:bg-[#1e2a3a] → slate-200 - forum/user/[username]/page.tsx: text-[#cccccc]/[#bfbfbf]/[#e0e0e0] + bg-[#222] tag chip + #9ca3af labels → readable on white card - authors/[slug]/page.tsx: profile contact/facts cards readable - search/page.tsx: h1 + h2 navy + hover slate - news/[slug]/NewsArticleDetailClient.tsx: toast color - news/NewsPageClient.tsx: import cleanExcerpt, strip HTML from listing excerpts - privacy/terms/page.tsx: h1 + h2 + body greys to readable navy/slate - error.tsx: page-level text to navy + button border slate - about/page.tsx: page body text + Stat/Block cards to white surface w/ navy text - Header.tsx: mobile hamburger + dropdown links → readable navy + slate border - NotificationCenter.tsx: hover + unread bg flipped to light blue - AISuggestedArticles.tsx: hover bg → slate-200 - Footer.tsx: link greys to #475569 + #DCE6F2 borders - AskBBAI.tsx: copy rename 'BB AI' → 'AV Beat AI' (greeting, button, header, aria) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -84,7 +84,7 @@ function TopThreadsWidget({ categoryId }: { categoryId: string }) {
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-[#DCE6F2]">
|
||||
<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>
|
||||
<h2 className="text-[#0F172A] font-heading font-bold text-base">Top Performing Threads</h2>
|
||||
</div>
|
||||
{/* Metric Tabs */}
|
||||
<div className="flex gap-1 bg-[#111] border border-[#DCE6F2] rounded-lg p-1">
|
||||
@@ -132,7 +132,7 @@ function TopThreadsWidget({ categoryId }: { categoryId: string }) {
|
||||
<Link
|
||||
key={thread.id}
|
||||
href={`/forum/thread/${thread.id}`}
|
||||
className="flex items-center gap-3 px-5 py-3 hover:bg-[#1e2a3a] transition-colors group"
|
||||
className="flex items-center gap-3 px-5 py-3 hover:bg-[#e2e8f0] transition-colors group"
|
||||
>
|
||||
{/* Rank */}
|
||||
<span className={`flex-shrink-0 w-6 text-center font-heading font-bold text-sm ${
|
||||
@@ -142,7 +142,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-[#1D4ED8] transition-colors truncate leading-snug">
|
||||
<p className="text-[#0F172A] font-body text-sm font-semibold group-hover:text-[#1D4ED8] transition-colors truncate leading-snug">
|
||||
{thread.title}
|
||||
</p>
|
||||
<p className="text-[#555] font-body text-xs mt-0.5">
|
||||
@@ -284,15 +284,15 @@ export default function ForumCategoryPage() {
|
||||
<nav className="text-sm font-body text-[#666] mb-3">
|
||||
<Link href="/forum" className="hover:text-[#1D4ED8] transition-colors">Forum</Link>
|
||||
<span className="mx-2">›</span>
|
||||
<span className="text-[#aab4c4]">{category?.name || slug}</span>
|
||||
<span className="text-[#0F172A]">{category?.name || slug}</span>
|
||||
</nav>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">{category?.icon || '💬'}</span>
|
||||
<div>
|
||||
<h1 className="text-2xl font-heading font-bold text-white">{category?.name || 'Loading...'}</h1>
|
||||
<h1 className="text-2xl font-heading font-bold text-[#0F172A]">{category?.name || 'Loading...'}</h1>
|
||||
{category && (
|
||||
<p className="text-[#aab4c4] font-body text-sm mt-0.5">{category.thread_count} threads</p>
|
||||
<p className="text-[#475569] font-body text-sm mt-0.5">{category.thread_count} threads</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -318,8 +318,8 @@ 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-[#FFFFFF] border border-[#2a3a50] rounded-lg p-5 mb-6">
|
||||
<h3 className="text-white font-heading font-semibold mb-4">Start a New Thread</h3>
|
||||
<form onSubmit={handleNewThread} className="bg-[#FFFFFF] border border-[#DCE6F2] rounded-lg p-5 mb-6">
|
||||
<h3 className="text-[#0F172A] font-heading font-semibold mb-4">Start a New Thread</h3>
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
@@ -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-[#1D4ED8]"
|
||||
className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-[#0F172A] font-body text-sm placeholder-[#888] focus:outline-none focus:border-[#1D4ED8]"
|
||||
/>
|
||||
<textarea
|
||||
placeholder="What would you like to discuss? *"
|
||||
@@ -335,7 +335,7 @@ 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-[#1D4ED8] resize-none"
|
||||
className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-[#0F172A] font-body text-sm placeholder-[#888] focus:outline-none focus:border-[#1D4ED8] resize-none"
|
||||
/>
|
||||
<div className="flex items-center gap-3">
|
||||
<ImageAttachButton onInsert={(md) => setNewBody((b) => (b || "") + md)} />
|
||||
@@ -357,7 +357,7 @@ export default function ForumCategoryPage() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowNewThread(false)}
|
||||
className="bg-[#DCE6F2] hover:bg-[#333] text-[#aaa] font-body text-sm px-5 py-2 rounded-lg transition-colors"
|
||||
className="bg-[#DCE6F2] hover:bg-[#cbd5e1] text-[#0F172A] 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-[#FFFFFF] border border-[#DCE6F2] focus:border-[#1D4ED8] 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-[#FFFFFF] border border-[#DCE6F2] focus:border-[#1D4ED8] rounded-lg pl-9 pr-4 py-2.5 text-[#0F172A] font-body text-sm placeholder-[#888] focus:outline-none transition-colors"
|
||||
/>
|
||||
{search && (
|
||||
<button
|
||||
@@ -402,7 +402,7 @@ export default function ForumCategoryPage() {
|
||||
className={`px-3 py-1.5 rounded-md text-xs font-body font-semibold transition-colors whitespace-nowrap ${
|
||||
sort === opt.value
|
||||
? 'bg-[#1D4ED8] text-white'
|
||||
: 'text-[#888] hover:text-white'
|
||||
: 'text-[#888] hover:text-[#0F172A]'
|
||||
}`}
|
||||
>
|
||||
{opt.label}
|
||||
@@ -426,8 +426,8 @@ export default function ForumCategoryPage() {
|
||||
)}
|
||||
|
||||
{!loading && !threadsLoading && !error && threads.length === 0 && (
|
||||
<div className="text-center py-16 text-[#555] font-body">
|
||||
<p className="text-lg mb-2">
|
||||
<div className="text-center py-16 text-[#475569] font-body">
|
||||
<p className="text-lg mb-2 text-[#0F172A] font-semibold">
|
||||
{search ? 'No threads match your search' : sort === 'unanswered' ? 'No unanswered threads' : 'No threads yet'}
|
||||
</p>
|
||||
<p className="text-sm">
|
||||
@@ -445,7 +445,7 @@ export default function ForumCategoryPage() {
|
||||
<Link
|
||||
key={thread.id}
|
||||
href={`/forum/thread/${thread.id}`}
|
||||
className="flex items-center gap-4 bg-[#FFFFFF] hover:bg-[#1e2a3a] border border-[#DCE6F2] hover:border-[#1D4ED8] rounded-lg px-4 py-3 transition-all group"
|
||||
className="flex items-center gap-4 bg-[#FFFFFF] hover:bg-[#e2e8f0] border border-[#DCE6F2] hover:border-[#1D4ED8] 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">
|
||||
@@ -458,7 +458,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-[#1D4ED8] transition-colors truncate">
|
||||
<h3 className="text-[#0F172A] font-body font-semibold text-sm group-hover:text-[#1D4ED8] transition-colors truncate">
|
||||
{thread.title}
|
||||
</h3>
|
||||
</div>
|
||||
@@ -468,13 +468,13 @@ export default function ForumCategoryPage() {
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 text-right hidden sm:block">
|
||||
<div className="text-[#aaa] font-body text-sm font-semibold">{thread.reply_count}</div>
|
||||
<div className="text-[#555] font-body text-xs">replies</div>
|
||||
<div className="text-[#0F172A] font-body text-sm font-semibold">{thread.reply_count}</div>
|
||||
<div className="text-[#475569] font-body text-xs">replies</div>
|
||||
</div>
|
||||
{sort === 'top-voted' && (
|
||||
<div className="flex-shrink-0 text-right hidden md:block">
|
||||
<div className="text-[#22c55e] font-body text-sm font-semibold">+{thread.upvotes ?? 0}</div>
|
||||
<div className="text-[#555] font-body text-xs">votes</div>
|
||||
<div className="text-[#475569] font-body text-xs">votes</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-shrink-0 text-right hidden md:block">
|
||||
|
||||
@@ -151,7 +151,7 @@ function TopThreadsWidget({ categoryId }: { categoryId?: string }) {
|
||||
</>
|
||||
)}
|
||||
{!loading && threads.length === 0 && (
|
||||
<div className="px-5 py-8 text-center text-[#555] font-body text-sm">
|
||||
<div className="px-5 py-8 text-center text-[#475569] font-body text-sm">
|
||||
No threads yet. Be the first to start a discussion!
|
||||
</div>
|
||||
)}
|
||||
@@ -161,7 +161,7 @@ function TopThreadsWidget({ categoryId }: { categoryId?: string }) {
|
||||
<Link
|
||||
key={thread.id}
|
||||
href={`/forum/thread/${thread.id}`}
|
||||
className="flex items-center gap-3 px-5 py-3 hover:bg-[#1e2a3a] transition-colors group"
|
||||
className="flex items-center gap-3 px-5 py-3 hover:bg-[#e2e8f0] transition-colors group"
|
||||
>
|
||||
{/* Rank */}
|
||||
<span className={`flex-shrink-0 w-6 text-center font-heading font-bold text-sm ${
|
||||
@@ -171,11 +171,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-[#1D4ED8] transition-colors truncate leading-snug">
|
||||
<p className="text-[#0F172A] font-body text-sm font-semibold group-hover:text-[#1D4ED8] 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-[#1D4ED8] hover:underline" onClick={(e) => e.stopPropagation()}>{thread.author_name}</Link>
|
||||
<p className="text-[#475569] font-body text-xs mt-0.5">
|
||||
<Link href={`/forum/user/${encodeURIComponent(thread.author_name)}`} className="text-[#475569] hover:text-[#1D4ED8] hover:underline" onClick={(e) => e.stopPropagation()}>{thread.author_name}</Link>
|
||||
{thread.forum_categories && (
|
||||
<> · <span className="text-[#1D4ED8]">{thread.forum_categories.name}</span></>
|
||||
)}
|
||||
@@ -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-[#1D4ED8] text-white' : 'text-[#888] hover:text-white'
|
||||
feedMode === 'discover' ? 'bg-[#1D4ED8] text-white' : 'text-[#888] hover:text-[#0F172A]'
|
||||
}`}
|
||||
>
|
||||
<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-[#1D4ED8] text-white' : 'text-[#888] hover:text-white'
|
||||
feedMode === 'following' ? 'bg-[#1D4ED8] text-white' : 'text-[#888] hover:text-[#0F172A]'
|
||||
}`}
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
|
||||
@@ -359,8 +359,8 @@ export default function ForumIndexPage() {
|
||||
{feedMode === 'following' && (
|
||||
<div className="mb-8">
|
||||
{!currentUserId && (
|
||||
<div className="bg-[#FFFFFF] 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>
|
||||
<div className="bg-[#FFFFFF] border border-[#DCE6F2] rounded-lg p-8 text-center">
|
||||
<p className="text-[#475569] font-body text-sm mb-3">Sign in to see threads from people you follow.</p>
|
||||
<Link
|
||||
href="/login"
|
||||
className="inline-block bg-[#1D4ED8] text-white font-body text-sm font-bold px-5 py-2 rounded-lg hover:bg-[#1E3A8A] transition-colors"
|
||||
@@ -379,8 +379,8 @@ export default function ForumIndexPage() {
|
||||
{currentUserId && !followingLoading && followingThreads.length === 0 && (
|
||||
<div className="bg-[#FFFFFF] border border-[#DCE6F2] 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>
|
||||
<p className="text-[#0F172A] font-body text-sm font-semibold mb-1">Your following feed is empty</p>
|
||||
<p className="text-[#475569] font-body text-sm mb-4">Follow other members to see their threads here.</p>
|
||||
<Link
|
||||
href="/forum"
|
||||
onClick={() => setFeedMode('discover')}
|
||||
@@ -398,10 +398,10 @@ export default function ForumIndexPage() {
|
||||
<Link
|
||||
key={thread.id}
|
||||
href={`/forum/thread/${thread.id}`}
|
||||
className="flex items-center gap-4 bg-[#FFFFFF] hover:bg-[#1e2a3a] border border-[#DCE6F2] hover:border-[#1D4ED8] rounded-lg px-4 py-3 transition-all group"
|
||||
className="flex items-center gap-4 bg-[#FFFFFF] hover:bg-[#e2e8f0] border border-[#DCE6F2] hover:border-[#1D4ED8] 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-[#1D4ED8] transition-colors truncate">
|
||||
<h3 className="text-[#0F172A] font-body font-semibold text-sm group-hover:text-[#1D4ED8] transition-colors truncate">
|
||||
{thread.title}
|
||||
</h3>
|
||||
<p className="text-[#666] font-body text-xs mt-0.5">
|
||||
@@ -420,12 +420,12 @@ export default function ForumIndexPage() {
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 text-right hidden sm:block">
|
||||
<div className="text-[#aaa] font-body text-sm font-semibold">{thread.reply_count}</div>
|
||||
<div className="text-[#555] font-body text-xs">replies</div>
|
||||
<div className="text-[#0F172A] font-body text-sm font-semibold">{thread.reply_count}</div>
|
||||
<div className="text-[#475569] font-body text-xs">replies</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 text-right hidden md:block">
|
||||
<div className="text-[#aaa] font-body text-sm font-semibold">{thread.view_count}</div>
|
||||
<div className="text-[#555] font-body text-xs">views</div>
|
||||
<div className="text-[#0F172A] font-body text-sm font-semibold">{thread.view_count}</div>
|
||||
<div className="text-[#475569] font-body text-xs">views</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
@@ -450,7 +450,7 @@ export default function ForumIndexPage() {
|
||||
placeholder="Search threads..."
|
||||
value={search}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
className="w-full bg-[#FFFFFF] border border-[#DCE6F2] focus:border-[#1D4ED8] 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-[#FFFFFF] border border-[#DCE6F2] focus:border-[#1D4ED8] rounded-lg pl-9 pr-4 py-2.5 text-[#0F172A] font-body text-sm placeholder-[#888] 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-[#FFFFFF] border border-[#DCE6F2] focus:border-[#1D4ED8] 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-[#FFFFFF] border border-[#DCE6F2] focus:border-[#1D4ED8] rounded-lg pl-3 pr-8 py-2.5 text-sm font-body text-[#0F172A] focus:outline-none transition-colors cursor-pointer min-w-[160px]"
|
||||
>
|
||||
<option value="">All Categories</option>
|
||||
{categories.map(cat => (
|
||||
@@ -491,7 +491,7 @@ export default function ForumIndexPage() {
|
||||
className={`px-3 py-1.5 rounded-md text-xs font-body font-semibold transition-colors whitespace-nowrap ${
|
||||
sort === opt.value
|
||||
? 'bg-[#1D4ED8] text-white'
|
||||
: 'text-[#888] hover:text-white'
|
||||
: 'text-[#888] hover:text-[#0F172A]'
|
||||
}`}
|
||||
>
|
||||
{opt.label}
|
||||
@@ -511,8 +511,8 @@ export default function ForumIndexPage() {
|
||||
</div>
|
||||
)}
|
||||
{!threadsLoading && threads.length === 0 && (
|
||||
<div className="text-center py-12 text-[#555] font-body">
|
||||
<p className="text-base mb-1">No threads found</p>
|
||||
<div className="text-center py-12 text-[#475569] font-body">
|
||||
<p className="text-base mb-1 text-[#0F172A] font-semibold">No threads found</p>
|
||||
<p className="text-sm">Try adjusting your search or filters.</p>
|
||||
</div>
|
||||
)}
|
||||
@@ -523,10 +523,10 @@ export default function ForumIndexPage() {
|
||||
<Link
|
||||
key={thread.id}
|
||||
href={`/forum/thread/${thread.id}`}
|
||||
className="flex items-center gap-4 bg-[#FFFFFF] hover:bg-[#1e2a3a] border border-[#DCE6F2] hover:border-[#1D4ED8] rounded-lg px-4 py-3 transition-all group"
|
||||
className="flex items-center gap-4 bg-[#FFFFFF] hover:bg-[#e2e8f0] border border-[#DCE6F2] hover:border-[#1D4ED8] 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-[#1D4ED8] transition-colors truncate">
|
||||
<h3 className="text-[#0F172A] font-body font-semibold text-sm group-hover:text-[#1D4ED8] transition-colors truncate">
|
||||
{thread.title}
|
||||
</h3>
|
||||
<p className="text-[#666] font-body text-xs mt-0.5">
|
||||
@@ -538,13 +538,13 @@ export default function ForumIndexPage() {
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 text-right hidden sm:block">
|
||||
<div className="text-[#aaa] font-body text-sm font-semibold">{thread.reply_count}</div>
|
||||
<div className="text-[#555] font-body text-xs">replies</div>
|
||||
<div className="text-[#0F172A] font-body text-sm font-semibold">{thread.reply_count}</div>
|
||||
<div className="text-[#475569] font-body text-xs">replies</div>
|
||||
</div>
|
||||
{sort === 'top-voted' && (
|
||||
<div className="flex-shrink-0 text-right hidden md:block">
|
||||
<div className="text-[#22c55e] font-body text-sm font-semibold">+{thread.upvotes ?? 0}</div>
|
||||
<div className="text-[#555] font-body text-xs">votes</div>
|
||||
<div className="text-[#475569] font-body text-xs">votes</div>
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
@@ -584,30 +584,30 @@ export default function ForumIndexPage() {
|
||||
<Link
|
||||
key={cat.id}
|
||||
href={`/forum/${cat.slug}`}
|
||||
className="flex items-center gap-4 bg-[#FFFFFF] hover:bg-[#1e2a3a] border border-[#DCE6F2] hover:border-[#1D4ED8] rounded-lg p-4 transition-all group"
|
||||
className="flex items-center gap-4 bg-[#FFFFFF] hover:bg-[#e2e8f0] border border-[#DCE6F2] hover:border-[#1D4ED8] 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-[#1D4ED8] transition-colors">
|
||||
<h2 className="text-[#0F172A] font-heading font-semibold text-lg group-hover:text-[#1D4ED8] transition-colors">
|
||||
{cat.name}
|
||||
</h2>
|
||||
<p className="text-[#888] font-body text-sm mt-0.5 truncate">{cat.description}</p>
|
||||
<p className="text-[#475569] font-body text-sm mt-0.5 truncate">{cat.description}</p>
|
||||
{cat.last_thread_title && (
|
||||
<p className="text-[10px] text-[#666] font-body mt-1.5 truncate">
|
||||
<span className="text-[#555]">Last post:</span>{' '}
|
||||
<span className="text-[#aaa]">{cat.last_thread_title}</span>
|
||||
<p className="text-[10px] text-[#475569] font-body mt-1.5 truncate">
|
||||
<span className="text-[#666]">Last post:</span>{' '}
|
||||
<span className="text-[#1e293b]">{cat.last_thread_title}</span>
|
||||
{cat.last_activity_at && (
|
||||
<span className="text-[#555]"> · {timeAgoFresh(cat.last_activity_at, cat.id)}</span>
|
||||
<span className="text-[#666]"> · {timeAgoFresh(cat.last_activity_at, cat.id)}</span>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-shrink-0 text-right hidden sm:block">
|
||||
<div className="text-white font-body font-semibold text-sm">{cat.thread_count}</div>
|
||||
<div className="text-[#0F172A] font-body font-semibold text-sm">{cat.thread_count}</div>
|
||||
<div className="text-[#666] font-body text-xs">threads</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 text-right hidden md:block">
|
||||
<div className="text-white font-body font-semibold text-sm">{cat.post_count}</div>
|
||||
<div className="text-[#0F172A] 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-[#1D4ED8] flex-shrink-0 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -624,9 +624,9 @@ export default function ForumIndexPage() {
|
||||
)}
|
||||
|
||||
{/* Forum guidelines */}
|
||||
<div className="mt-8 bg-[#FFFFFF] 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">
|
||||
<div className="mt-8 bg-[#FFFFFF] border border-[#DCE6F2] rounded-lg p-5">
|
||||
<h3 className="text-[#0F172A] font-heading font-semibold mb-2">Community Guidelines</h3>
|
||||
<ul className="text-[#475569] 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-[#1D4ED8]">AV Beat AI</span> assistant is available in threads to help answer questions — it is clearly labeled</li>
|
||||
|
||||
@@ -182,7 +182,7 @@ export default function ForumUserPage() {
|
||||
</span>
|
||||
)}
|
||||
{profile.role_title && (
|
||||
<span className="font-body text-[10px] font-bold uppercase tracking-wider text-[#9ca3af] bg-[#9ca3af]/10 border border-[#9ca3af]/30 px-2 py-1 rounded-sm">
|
||||
<span className="font-body text-[10px] font-bold uppercase tracking-wider text-[#475569] bg-[#9ca3af]/10 border border-[#9ca3af]/30 px-2 py-1 rounded-sm">
|
||||
{profile.role_title}
|
||||
</span>
|
||||
)}
|
||||
@@ -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-[#DCE6F2]">
|
||||
<p className="font-body text-sm text-[#1e293b] leading-relaxed mt-5 pt-5 border-t border-[#DCE6F2]">
|
||||
{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-[#DCE6F2] px-2 py-0.5 rounded-sm">
|
||||
<span key={tag} className="font-body text-[11px] text-[#475569] bg-[#F8FAFC] border border-[#DCE6F2] px-2 py-0.5 rounded-sm">
|
||||
#{tag}
|
||||
</span>
|
||||
))}
|
||||
@@ -226,7 +226,7 @@ export default function ForumUserPage() {
|
||||
<ul className="space-y-2 mb-8">
|
||||
{threads.map((t) => (
|
||||
<li key={t.id} className="bg-[#FFFFFF] border border-[#DCE6F2] rounded-sm p-3 hover:border-[#1D4ED8]/50 transition-colors">
|
||||
<Link href={`/forum/thread/${t.id}`} className="font-body text-sm font-semibold text-[#e0e0e0] hover:text-[#1D4ED8] block">
|
||||
<Link href={`/forum/thread/${t.id}`} className="font-body text-sm font-semibold text-[#0F172A] hover:text-[#1D4ED8] block">
|
||||
{t.title}
|
||||
</Link>
|
||||
<div className="flex items-center gap-3 mt-1 text-[11px] text-[#666]">
|
||||
@@ -255,7 +255,7 @@ export default function ForumUserPage() {
|
||||
<Link href={`/forum/thread/${r.thread_id}`} className="font-body text-xs font-semibold text-[#1D4ED8] 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>
|
||||
<p className="font-body text-sm text-[#1e293b] leading-relaxed mt-1 line-clamp-3">{r.body}</p>
|
||||
<div className="mt-1 text-[11px] text-[#666]">
|
||||
<time>{new Date(r.created_at).toLocaleDateString()}</time>
|
||||
</div>
|
||||
@@ -269,12 +269,12 @@ export default function ForumUserPage() {
|
||||
<div className="bg-[#FFFFFF] border border-[#DCE6F2] 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>
|
||||
{profile.company && <div><dt className="text-[#666] text-[11px] uppercase tracking-wider">Company</dt><dd className="text-[#cccccc]">{profile.company}</dd></div>}
|
||||
<div><dt className="text-[#666] text-[11px] uppercase tracking-wider">Threads</dt><dd className="text-[#cccccc]">{profile.thread_count}</dd></div>
|
||||
<div><dt className="text-[#666] text-[11px] uppercase tracking-wider">Replies</dt><dd className="text-[#cccccc]">{profile.reply_count}</dd></div>
|
||||
{profile.years_experience && <div><dt className="text-[#666] text-[11px] uppercase tracking-wider">Years in industry</dt><dd className="text-[#cccccc]">{profile.years_experience}</dd></div>}
|
||||
<div><dt className="text-[#666] text-[11px] uppercase tracking-wider">Member since</dt><dd className="text-[#cccccc]">{fmtDate(profile.join_date)}</dd></div>
|
||||
<div><dt className="text-[#666] text-[11px] uppercase tracking-wider">Role</dt><dd className="text-[#0F172A]">{profile.role_title || "—"}</dd></div>
|
||||
{profile.company && <div><dt className="text-[#666] text-[11px] uppercase tracking-wider">Company</dt><dd className="text-[#0F172A]">{profile.company}</dd></div>}
|
||||
<div><dt className="text-[#666] text-[11px] uppercase tracking-wider">Threads</dt><dd className="text-[#0F172A]">{profile.thread_count}</dd></div>
|
||||
<div><dt className="text-[#666] text-[11px] uppercase tracking-wider">Replies</dt><dd className="text-[#0F172A]">{profile.reply_count}</dd></div>
|
||||
{profile.years_experience && <div><dt className="text-[#666] text-[11px] uppercase tracking-wider">Years in industry</dt><dd className="text-[#0F172A]">{profile.years_experience}</dd></div>}
|
||||
<div><dt className="text-[#666] text-[11px] uppercase tracking-wider">Member since</dt><dd className="text-[#0F172A]">{fmtDate(profile.join_date)}</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
Reference in New Issue
Block a user