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

40
src/app/admin/page.tsx
View File

@@ -44,8 +44,8 @@ function timeAgo(dateStr: string): string {
const STATUS_COLORS: Record<string, string> = {
published: 'text-green-400 bg-green-400/10',
pending: 'text-yellow-400 bg-yellow-400/10',
draft: 'text-[#888] bg-[#231d18]',
archived: 'text-[#555] bg-[#231d18]',
draft: 'text-[#888] bg-[#FFFFFF]',
archived: 'text-[#555] bg-[#FFFFFF]',
imported: 'text-blue-400 bg-blue-400/10',
};
@@ -91,7 +91,7 @@ interface MetricCardProps {
function MetricCard({ label, value, sub, accent, icon, href, badge }: MetricCardProps) {
const content = (
<div className={`bg-[#111] border border-[#3a322b] rounded-lg p-5 flex flex-col gap-3 hover:border-[#333] transition-colors ${href ? 'cursor-pointer' : ''}`}>
<div className={`bg-[#111] border border-[#DCE6F2] rounded-lg p-5 flex flex-col gap-3 hover:border-[#333] transition-colors ${href ? 'cursor-pointer' : ''}`}>
<div className="flex items-start justify-between">
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${accent}`}>
{icon}
@@ -125,15 +125,15 @@ interface QuickActionProps {
function QuickAction({ label, description, href, icon, accent }: QuickActionProps) {
return (
<Link href={href} className="flex items-center gap-3 p-3 bg-[#111] border border-[#3a322b] rounded-lg hover:border-[#F0A623] hover:bg-[#0d1a2d] transition-all group">
<Link href={href} className="flex items-center gap-3 p-3 bg-[#111] border border-[#DCE6F2] rounded-lg hover:border-[#1D4ED8] hover:bg-[#0d1a2d] transition-all group">
<div className={`w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0 ${accent} group-hover:scale-105 transition-transform`}>
{icon}
</div>
<div className="min-w-0">
<p className="text-sm font-body font-semibold text-white group-hover:text-[#F0A623] transition-colors">{label}</p>
<p className="text-sm font-body font-semibold text-white group-hover:text-[#1D4ED8] transition-colors">{label}</p>
<p className="text-xs text-[#555] font-body truncate">{description}</p>
</div>
<svg className="w-4 h-4 text-[#444] group-hover:text-[#F0A623] ml-auto flex-shrink-0 transition-colors" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
<svg className="w-4 h-4 text-[#444] group-hover:text-[#1D4ED8] ml-auto flex-shrink-0 transition-colors" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
</svg>
</Link>
@@ -239,7 +239,7 @@ export default function AdminDashboardPage() {
return (
<div className="min-h-screen bg-[#0a0a0a] flex items-center justify-center">
<div className="flex flex-col items-center gap-3">
<div className="w-8 h-8 border-2 border-[#F0A623] border-t-transparent rounded-full animate-spin" />
<div className="w-8 h-8 border-2 border-[#1D4ED8] border-t-transparent rounded-full animate-spin" />
<p className="text-[#555] text-sm font-body">Loading dashboard…</p>
</div>
</div>
@@ -345,7 +345,7 @@ export default function AdminDashboardPage() {
<MetricCard
label="Drafts"
value={metrics.draftArticles}
accent="bg-[#231d18]"
accent="bg-[#FFFFFF]"
href="/admin/articles"
icon={
<svg className="w-5 h-5 text-[#888]" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
@@ -356,7 +356,7 @@ export default function AdminDashboardPage() {
<MetricCard
label="Archived"
value={metrics.archivedArticles}
accent="bg-[#231d18]"
accent="bg-[#FFFFFF]"
href="/admin/articles"
icon={
<svg className="w-5 h-5 text-[#555]" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
@@ -372,20 +372,20 @@ export default function AdminDashboardPage() {
{/* Recent Activity Feed */}
<div className="lg:col-span-2">
<div className="bg-[#111] border border-[#3a322b] rounded-lg overflow-hidden">
<div className="px-5 py-4 border-b border-[#231d18] flex items-center justify-between">
<div className="bg-[#111] border border-[#DCE6F2] rounded-lg overflow-hidden">
<div className="px-5 py-4 border-b border-[#FFFFFF] flex items-center justify-between">
<h2 className="text-sm font-display font-bold text-white">Recent Activity</h2>
<Link href="/admin/articles" className="text-xs text-[#F0A623] hover:text-blue-300 font-body transition-colors">View all →</Link>
<Link href="/admin/articles" className="text-xs text-[#1D4ED8] hover:text-blue-300 font-body transition-colors">View all →</Link>
</div>
<div className="divide-y divide-[#231d18]">
<div className="divide-y divide-[#FFFFFF]">
{recentActivity.length === 0 ? (
<div className="px-5 py-10 text-center">
<p className="text-[#555] text-sm font-body">No recent activity found</p>
</div>
) : (
recentActivity.map((item) => (
<div key={`${item.source}-${item.id}`} className="px-5 py-3 flex items-start gap-3 hover:bg-[#1c1815] transition-colors">
<div className="w-6 h-6 rounded-full bg-[#231d18] flex items-center justify-center flex-shrink-0 mt-0.5">
<div key={`${item.source}-${item.id}`} className="px-5 py-3 flex items-start gap-3 hover:bg-[#F8FAFC] transition-colors">
<div className="w-6 h-6 rounded-full bg-[#FFFFFF] flex items-center justify-center flex-shrink-0 mt-0.5">
{ACTIVITY_ICONS[item.type] || ACTIVITY_ICONS['draft']}
</div>
<div className="flex-1 min-w-0">
@@ -412,8 +412,8 @@ export default function AdminDashboardPage() {
{/* Quick Actions */}
<div className="flex flex-col gap-4">
<div className="bg-[#111] border border-[#3a322b] rounded-lg overflow-hidden">
<div className="px-5 py-4 border-b border-[#231d18]">
<div className="bg-[#111] border border-[#DCE6F2] rounded-lg overflow-hidden">
<div className="px-5 py-4 border-b border-[#FFFFFF]">
<h2 className="text-sm font-display font-bold text-white">Quick Actions</h2>
</div>
<div className="p-4 flex flex-col gap-2">
@@ -587,21 +587,21 @@ export default function AdminDashboardPage() {
</div>
{/* Status Summary Mini-Card */}
<div className="bg-[#111] border border-[#3a322b] rounded-lg p-4">
<div className="bg-[#111] border border-[#DCE6F2] rounded-lg p-4">
<h3 className="text-xs font-body font-bold text-[#555] uppercase tracking-widest mb-3">Content Status</h3>
<div className="space-y-2">
{[
{ label: 'Published', value: metrics.publishedArticles, color: 'bg-green-400', total: metrics.totalArticles },
{ label: 'Pending', value: metrics.pendingApprovals, color: 'bg-yellow-400', total: metrics.totalArticles },
{ label: 'Draft', value: metrics.draftArticles, color: 'bg-[#444]', total: metrics.totalArticles },
{ label: 'Archived', value: metrics.archivedArticles, color: 'bg-[#3a322b]', total: metrics.totalArticles },
{ label: 'Archived', value: metrics.archivedArticles, color: 'bg-[#DCE6F2]', total: metrics.totalArticles },
].map(({ label, value, color, total }) => (
<div key={label}>
<div className="flex items-center justify-between mb-1">
<span className="text-xs text-[#888] font-body">{label}</span>
<span className="text-xs text-white font-body font-semibold">{value}</span>
</div>
<div className="h-1.5 bg-[#231d18] rounded-full overflow-hidden">
<div className="h-1.5 bg-[#FFFFFF] rounded-full overflow-hidden">
<div
className={`h-full rounded-full ${color} transition-all duration-500`}
style={{ width: total > 0 ? `${Math.round((value / total) * 100)}%` : '0%' }}