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

26
src/app/articles/[slug]/ArticleDetailClient.tsx
View File

@@ -224,9 +224,9 @@ export default function ArticleDetailClient({ article, relatedArticles }: Articl
{/* DO NOT OVERRIDE — article breadcrumb and back navigation */}
<div className="bg-[#0d0d0d] border-b border-[#1a1a1a]">
<div className="max-w-container mx-auto px-4 py-2.5 flex items-center gap-2 text-xs font-body text-[#555]">
<Link href="/home-page" className="hover:text-[#3b82f6] transition-colors">Home</Link>
<Link href="/home-page" className="hover:text-[#5B7C8D] transition-colors">Home</Link>
<span>/</span>
<Link href={sectionHref} className="hover:text-[#3b82f6] transition-colors">{sectionLabel}</Link>
<Link href={sectionHref} className="hover:text-[#5B7C8D] transition-colors">{sectionLabel}</Link>
<span>/</span>
<span className="text-[#888] truncate max-w-[300px]">{article.title}</span>
</div>
@@ -240,7 +240,7 @@ export default function ArticleDetailClient({ article, relatedArticles }: Articl
{/* Article Header */}
<div className="mb-8">
<div className="flex items-center gap-3 mb-4">
<Link href={sectionHref} className="text-xs font-bold uppercase tracking-widest text-[#3b82f6] hover:underline">
<Link href={sectionHref} className="text-xs font-bold uppercase tracking-widest text-[#5B7C8D] hover:underline">
{article.category}
</Link>
<span className="text-xs text-[#777]">{article.date}</span>
@@ -265,7 +265,7 @@ export default function ArticleDetailClient({ article, relatedArticles }: Articl
<div>
<Link
href={`/authors/${article.authorSlug}`}
className="font-heading font-bold text-sm hover:text-[#3b82f6] transition-colors text-[#e0e0e0]">
className="font-heading font-bold text-sm hover:text-[#5B7C8D] transition-colors text-[#e0e0e0]">
{article.author}
</Link>
<p className="font-body text-xs text-[#777]">{article.authorTitle}</p>
@@ -275,7 +275,7 @@ export default function ArticleDetailClient({ article, relatedArticles }: Articl
onClick={handleSaveToReadingList}
disabled={savingState !== "idle"}
aria-label={isSaved ? "Remove from reading list" : "Save to reading list"}
className="text-xs font-bold uppercase tracking-widest text-[#3b82f6] hover:text-blue-300 disabled:opacity-50 transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6]">
className="text-xs font-bold uppercase tracking-widest text-[#5B7C8D] hover:text-blue-300 disabled:opacity-50 transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D]">
{savingState === "saving" ? "Saving..." : savingState === "removing" ? "Removing..." : isSaved ? "✓ Saved" : "Save"}
</button>
</div>
@@ -302,7 +302,7 @@ export default function ArticleDetailClient({ article, relatedArticles }: Articl
[&_ul]:mb-4 [&_ul]:pl-5 [&_ul]:space-y-2
[&_li]:text-[#aaa]
[&_strong]:text-[#e0e0e0] [&_strong]:font-bold
[&_a]:text-[#3b82f6] [&_a]:hover:underline"
[&_a]:text-[#5B7C8D] [&_a]:hover:underline"
dangerouslySetInnerHTML={{ __html: article.content }}
/>
@@ -314,7 +314,7 @@ export default function ArticleDetailClient({ article, relatedArticles }: Articl
{article.tags.map((tag) => (
<span
key={tag}
className="px-3 py-1 text-xs font-body bg-[#1a1a1a] border border-[#2a2a2a] text-[#888] hover:border-[#3b82f6] hover:text-[#3b82f6] transition-colors rounded-sm cursor-default">
className="px-3 py-1 text-xs font-body bg-[#1a1a1a] border border-[#2a2a2a] text-[#888] hover:border-[#5B7C8D] hover:text-[#5B7C8D] transition-colors rounded-sm cursor-default">
{tag}
</span>
))}
@@ -326,7 +326,7 @@ export default function ArticleDetailClient({ article, relatedArticles }: Articl
<div className="pt-6 border-t border-[#222]">
<Link
href={sectionHref}
className="inline-flex items-center gap-2 text-[#3b82f6] font-body text-sm hover:underline focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6]">
className="inline-flex items-center gap-2 text-[#5B7C8D] font-body text-sm hover:underline focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D]">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
<polyline points="15 18 9 12 15 6" />
</svg>
@@ -340,7 +340,7 @@ export default function ArticleDetailClient({ article, relatedArticles }: Articl
{/* Related Articles */}
{/* DO NOT OVERRIDE — related articles sidebar */}
<div className="bg-[#111] border border-[#222] p-5">
<h3 className="font-body font-bold text-xs text-[#3b82f6] uppercase tracking-widest mb-4 pb-2 border-b border-[#222]">
<h3 className="font-body font-bold text-xs text-[#5B7C8D] uppercase tracking-widest mb-4 pb-2 border-b border-[#222]">
Related Articles
</h3>
<div className="space-y-4">
@@ -359,10 +359,10 @@ export default function ArticleDetailClient({ article, relatedArticles }: Articl
/>
</div>
<div className="flex-1 min-w-0">
<p className="text-[#3b82f6] font-body text-[9px] font-bold uppercase tracking-wider mb-0.5">
<p className="text-[#5B7C8D] font-body text-[9px] font-bold uppercase tracking-wider mb-0.5">
{related.category}
</p>
<p className="font-heading text-[#e0e0e0] text-xs font-bold group-hover:text-[#3b82f6] transition-colors line-clamp-2 leading-snug">
<p className="font-heading text-[#e0e0e0] text-xs font-bold group-hover:text-[#5B7C8D] transition-colors line-clamp-2 leading-snug">
{related.title}
</p>
</div>
@@ -372,7 +372,7 @@ export default function ArticleDetailClient({ article, relatedArticles }: Articl
</div>
{/* Newsletter Signup */}
<div className="bg-[#0d1520] border border-[#1e3a5f] p-5">
<div className="bg-[#0d1520] border border-[#2F4F5F] p-5">
<h3 className="font-heading text-[#e0e0e0] font-bold mb-2">Stay Updated</h3>
<p className="font-body text-[#777] text-xs mb-4">
Get the latest broadcast engineering news delivered to your inbox.
@@ -398,7 +398,7 @@ export default function ArticleDetailClient({ article, relatedArticles }: Articl
<div
role="status"
aria-live="polite"
className="fixed bottom-4 right-4 bg-[#1a1a1a] border border-[#3b82f6] text-white px-4 py-3 rounded-sm text-sm font-body shadow-lg z-50">
className="fixed bottom-4 right-4 bg-[#1a1a1a] border border-[#5B7C8D] text-white px-4 py-3 rounded-sm text-sm font-body shadow-lg z-50">
{saveToast}
</div>
)}

14
src/app/articles/[slug]/components/CommentsSection.tsx
View File

@@ -134,8 +134,8 @@ export default function CommentsSection({ articleSlug }: CommentsSectionProps) {
{user ? (
<form onSubmit={handleSubmit} className="mb-8">
<div className="flex gap-3">
<div className="w-8 h-8 rounded-full bg-[#1e3a5f] border border-[#2a3a50] flex items-center justify-center flex-shrink-0 mt-0.5">
<span className="font-body text-[10px] font-bold text-[#3b82f6]">
<div className="w-8 h-8 rounded-full bg-[#2F4F5F] border border-[#2a3a50] flex items-center justify-center flex-shrink-0 mt-0.5">
<span className="font-body text-[10px] font-bold text-[#5B7C8D]">
{getInitials(user.user_metadata?.full_name || user.email || "U")}
</span>
</div>
@@ -146,7 +146,7 @@ export default function CommentsSection({ articleSlug }: CommentsSectionProps) {
placeholder="Share your thoughts on this article..."
rows={3}
maxLength={1000}
className="w-full bg-[#1a1a1a] border border-[#2a2a2a] text-[#e0e0e0] font-body text-sm px-3 py-2.5 rounded-sm focus:outline-none focus:border-[#3b82f6] focus:ring-1 focus:ring-[#3b82f6] transition-colors placeholder-[#444] resize-none"
className="w-full bg-[#1a1a1a] border border-[#2a2a2a] text-[#e0e0e0] font-body text-sm px-3 py-2.5 rounded-sm focus:outline-none focus:border-[#5B7C8D] focus:ring-1 focus:ring-[#5B7C8D] transition-colors placeholder-[#444] resize-none"
/>
{error && (
<p className="font-body text-xs text-[#cc0000] mt-1.5">{error}</p>
@@ -158,7 +158,7 @@ export default function CommentsSection({ articleSlug }: CommentsSectionProps) {
<button
type="submit"
disabled={submitting || !newComment.trim()}
className="bg-[#3b82f6] hover:bg-[#2563eb] text-white font-body text-xs font-bold uppercase tracking-wide px-5 py-2 rounded-sm transition-colors disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6]">
className="bg-[#5B7C8D] hover:bg-[#4A6473] text-white font-body text-xs font-bold uppercase tracking-wide px-5 py-2 rounded-sm transition-colors disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#5B7C8D]">
{submitting ? "Posting..." : "Post Comment"}
</button>
</div>
@@ -166,14 +166,14 @@ export default function CommentsSection({ articleSlug }: CommentsSectionProps) {
</div>
</form>
) : (
<div className="mb-8 bg-[#0d1520] border border-[#1e3a5f] rounded-sm p-5 flex items-center justify-between gap-4">
<div className="mb-8 bg-[#0d1520] border border-[#2F4F5F] rounded-sm p-5 flex items-center justify-between gap-4">
<div>
<p className="font-body text-sm font-bold text-[#e0e0e0] mb-0.5">Join the conversation</p>
<p className="font-body text-xs text-[#666]">Sign in to post a comment on this article.</p>
</div>
<Link
href="/login"
className="flex-shrink-0 bg-[#3b82f6] hover:bg-[#2563eb] text-white font-body text-xs font-bold uppercase tracking-wide px-5 py-2 rounded-sm transition-colors">
className="flex-shrink-0 bg-[#5B7C8D] hover:bg-[#4A6473] text-white font-body text-xs font-bold uppercase tracking-wide px-5 py-2 rounded-sm transition-colors">
Sign In
</Link>
</div>
@@ -216,7 +216,7 @@ export default function CommentsSection({ articleSlug }: CommentsSectionProps) {
className="w-full h-full object-cover"
/>
) : (
<span className="font-body text-[10px] font-bold text-[#3b82f6]">
<span className="font-body text-[10px] font-bold text-[#5B7C8D]">
{getInitials(name)}
</span>
)}