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

feat(brand): AV BEAT 2026 rebrand — blue/navy/white identity

Browse Source 
- New AvBeatLogo inline-SVG component (rounded-square emblem with
  forward-leaning AV monogram + horizontal beam detail) at
  src/components/AvBeatLogo.tsx, three variants (full/wordmark/icon).
- Header.tsx now uses the responsive AV BEAT logo lockup in the
  top-left, links to /, full lockup on desktop (emblem+wordmark+tagline),
  emblem+wordmark on tablet, emblem-only on mobile.
- Removed DualSpeedTicker (the 'RECENT FORUM POSTS' ticker strip);
  the news ticker / glow chrome does not match the new aesthetic and the
  forum row was the explicit removal target.
- Tailwind theme + globals.css now expose the AV BEAT 2026 palette as
  semantic tokens: --brand-blue (#1D4ED8), --brand-blue-bright (#38BDF8),
  --brand-navy (#0F172A), --brand-bg (#F8FAFC), --brand-surface, --brand-border,
  --brand-text, --brand-text-muted. Legacy --color-* aliases re-point to the
  new tokens so any inline-styled component re-themes for free.
- Site-wide hex sweep migrates 2,769 hardcoded color literals across 144
  files from the old dark-broadcast palette to the new tokens (orange
  -> blue, dark-brown -> white surface / navy text, cream -> navy).
- Layout body class flipped from 'bb-neon' to 'bg-brand-bg text-brand-text'
  so the dark glow chrome no longer leaks through the new light theme.
This commit is contained in:
Local Administrator
2026-06-03 12:07:18 +00:00
parent 39d2bf9073
commit 8042024c4a
146 changed files with 2219 additions and 2081 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -74,27 +74,27 @@ 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-[#F0A623]' };
if (activeMetric === 'replies') return { value: thread.reply_count, label: 'replies', color: 'text-[#1D4ED8]' };
return { value: thread.view_count, label: 'views', color: 'text-[#f59e0b]' };
};
return (
<div className="bg-[#231d18] border border-[#3a322b] rounded-xl overflow-hidden mb-6">
<div className="bg-[#FFFFFF] border border-[#DCE6F2] rounded-xl overflow-hidden mb-6">
{/* Header */}
<div className="flex items-center justify-between px-5 py-4 border-b border-[#3a322b]">
<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>
</div>
{/* Metric Tabs */}
<div className="flex gap-1 bg-[#111] border border-[#3a322b] rounded-lg p-1">
<div className="flex gap-1 bg-[#111] border border-[#DCE6F2] rounded-lg p-1">
{metrics.map(m => (
<button
key={m.value}
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-[#F0A623] text-white'
? 'bg-[#1D4ED8] text-white'
: 'text-[#666] hover:text-[#aaa]'
}`}
>
@@ -111,12 +111,12 @@ function TopThreadsWidget({ categoryId }: { categoryId: string }) {
<>
{[...Array(5)].map((_, i) => (
<div key={i} className="flex items-center gap-3 px-5 py-3">
<div className="w-6 h-6 bg-[#3a322b] rounded animate-pulse flex-shrink-0" />
<div className="w-6 h-6 bg-[#DCE6F2] rounded animate-pulse flex-shrink-0" />
<div className="flex-1 space-y-1.5">
<div className="h-3.5 bg-[#3a322b] rounded animate-pulse w-3/4" />
<div className="h-3.5 bg-[#DCE6F2] rounded animate-pulse w-3/4" />
<div className="h-2.5 bg-[#1e1e1e] rounded animate-pulse w-1/3" />
</div>
<div className="w-10 h-8 bg-[#3a322b] rounded animate-pulse flex-shrink-0" />
<div className="w-10 h-8 bg-[#DCE6F2] rounded animate-pulse flex-shrink-0" />
</div>
))}
</>
@@ -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-[#F0A623] transition-colors truncate leading-snug">
<p className="text-white 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-[#F0A623] hover:underline" onClick={(e) => e.stopPropagation()}>{thread.author_name}</Link>
<Link href={`/forum/user/${encodeURIComponent(thread.author_name)}`} className="text-[#666] hover:text-[#1D4ED8] hover:underline" onClick={(e) => e.stopPropagation()}>{thread.author_name}</Link>
{' · '}{timeAgo(thread.created_at)}
</p>
</div>
@@ -277,12 +277,12 @@ export default function ForumCategoryPage() {
return (
<>
<Header />
<main className="min-h-screen bg-[#1c1815]">
<main className="min-h-screen bg-[#F8FAFC]">
{/* Breadcrumb + Header */}
<div className="bg-[#231d18] border-b border-[#2a3a50]">
<div className="bg-[#FFFFFF] 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-[#F0A623] transition-colors">Forum</Link>
<Link href="/forum" className="hover:text-[#1D4ED8] 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-[#F0A623] hover:bg-[#BA7517] text-white font-body font-semibold text-sm px-4 py-2 rounded-lg transition-colors"
className="flex-shrink-0 bg-[#1D4ED8] hover:bg-[#1E3A8A] 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-[#F0A623] hover:bg-[#BA7517] text-white font-body font-semibold text-sm px-4 py-2 rounded-lg transition-colors"
className="flex-shrink-0 bg-[#1D4ED8] hover:bg-[#1E3A8A] 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-[#231d18] border border-[#2a3a50] rounded-lg p-5 mb-6">
<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>
<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-[#F0A623]"
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]"
/>
<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-[#F0A623] 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-[#1D4ED8] 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-[#D85A30] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
<div className="bg-[#2a0a0a] border border-[#1D4ED8] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
{newError}
</div>
)}
@@ -350,14 +350,14 @@ export default function ForumCategoryPage() {
<button
type="submit"
disabled={submitting}
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"
className="bg-[#1D4ED8] hover:bg-[#1E3A8A] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-2 rounded-lg transition-colors"
>
{submitting ? 'Posting...' : 'Post Thread'}
</button>
<button
type="button"
onClick={() => setShowNewThread(false)}
className="bg-[#3a322b] hover:bg-[#333] text-[#aaa] font-body text-sm px-5 py-2 rounded-lg transition-colors"
className="bg-[#DCE6F2] hover:bg-[#333] text-[#aaa] 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-[#231d18] border border-[#3a322b] focus:border-[#F0A623] 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-white font-body text-sm placeholder-[#555] focus:outline-none transition-colors"
/>
{search && (
<button
@@ -394,14 +394,14 @@ export default function ForumCategoryPage() {
</div>
{/* Sort Options */}
<div className="flex gap-1 bg-[#231d18] border border-[#3a322b] rounded-lg p-1 flex-shrink-0">
<div className="flex gap-1 bg-[#FFFFFF] border border-[#DCE6F2] rounded-lg p-1 flex-shrink-0">
{sortOptions.map(opt => (
<button
key={opt.value}
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-[#F0A623] text-white'
? 'bg-[#1D4ED8] text-white'
: 'text-[#888] hover:text-white'
}`}
>
@@ -414,7 +414,7 @@ export default function ForumCategoryPage() {
{(loading || threadsLoading) && (
<div className="space-y-2">
{[...Array(10)].map((_, i) => (
<div key={i} className="bg-[#231d18] rounded-lg h-16 animate-pulse border border-[#3a322b]" />
<div key={i} className="bg-[#FFFFFF] rounded-lg h-16 animate-pulse border border-[#DCE6F2]" />
))}
</div>
)}
@@ -445,12 +445,12 @@ export default function ForumCategoryPage() {
<Link
key={thread.id}
href={`/forum/thread/${thread.id}`}
className="flex items-center gap-4 bg-[#231d18] hover:bg-[#1e2a3a] border border-[#3a322b] hover:border-[#F0A623] rounded-lg px-4 py-3 transition-all group"
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"
>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap">
{thread.status === 'pinned' && (
<span className="text-xs bg-[#F0A623]/20 text-[#F0A623] px-2 py-0.5 rounded font-body font-semibold">PINNED</span>
<span className="text-xs bg-[#1D4ED8]/20 text-[#1D4ED8] 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-[#F0A623] transition-colors truncate">
<h3 className="text-white font-body font-semibold text-sm group-hover:text-[#1D4ED8] 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-[#F0A623] hover:underline" onClick={(e) => e.stopPropagation()}>{thread.author_name}</Link>
by <Link href={`/forum/user/${encodeURIComponent(thread.author_name)}`} className="text-[#888] hover:text-[#1D4ED8] hover:underline" onClick={(e) => e.stopPropagation()}>{thread.author_name}</Link>
{' · '}{timeAgo(thread.created_at)}
</p>
</div>