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">
|
||||
|
||||
Reference in New Issue
Block a user