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

30
src/app/admin/newsletter/templates/page.tsx
View File

@@ -42,7 +42,7 @@ const STYLE_OPTIONS = [
];
const ACCENT_COLORS = [
'#3b82f6', '#ef4444', '#10b981', '#8b5cf6', '#f59e0b', '#ec4899', '#06b6d4', '#f97316',
'#5B7C8D', '#ef4444', '#10b981', '#8b5cf6', '#f59e0b', '#ec4899', '#06b6d4', '#f97316',
];
const LAYOUT_ICONS: Record<string, React.ReactNode> = {
@@ -83,7 +83,7 @@ const emptyForm = (): Omit<NewsletterTemplate, 'id' | 'is_preset' | 'created_at'
subject_prefix: '',
header_text: '',
footer_text: '',
accent_color: '#3b82f6',
accent_color: '#5B7C8D',
article_blocks: [{ title: '', excerpt: '', url: '', category: '' }],
});
@@ -226,7 +226,7 @@ export default function NewsletterTemplatesPage() {
if (loading) {
return (
<div className="min-h-screen bg-[#0a0a0a] flex items-center justify-center">
<div className="w-8 h-8 border-2 border-[#3b82f6] border-t-transparent rounded-full animate-spin" />
<div className="w-8 h-8 border-2 border-[#5B7C8D] border-t-transparent rounded-full animate-spin" />
</div>
);
}
@@ -272,11 +272,11 @@ export default function NewsletterTemplatesPage() {
<div className="mb-8">
<div className="flex items-center gap-2 mb-4">
<h2 className="font-display font-bold text-white text-base">Preset Templates</h2>
<span className="text-xs bg-[#1a2535] text-[#3b82f6] px-2 py-0.5 rounded-full font-body">{presets.length}</span>
<span className="text-xs bg-[#1a2535] text-[#5B7C8D] px-2 py-0.5 rounded-full font-body">{presets.length}</span>
</div>
{loadingData ? (
<div className="flex items-center justify-center py-12">
<div className="w-6 h-6 border-2 border-[#3b82f6] border-t-transparent rounded-full animate-spin" />
<div className="w-6 h-6 border-2 border-[#5B7C8D] border-t-transparent rounded-full animate-spin" />
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -298,7 +298,7 @@ export default function NewsletterTemplatesPage() {
<div>
<div className="flex items-center gap-2 mb-4">
<h2 className="font-display font-bold text-white text-base">Custom Templates</h2>
<span className="text-xs bg-[#1a2535] text-[#3b82f6] px-2 py-0.5 rounded-full font-body">{custom.length}</span>
<span className="text-xs bg-[#1a2535] text-[#5B7C8D] px-2 py-0.5 rounded-full font-body">{custom.length}</span>
</div>
{!loadingData && custom.length === 0 ? (
<div className="bg-[#111] border border-[#252525] rounded-lg p-10 text-center">
@@ -306,7 +306,7 @@ export default function NewsletterTemplatesPage() {
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
</svg>
<p className="text-[#555] font-body text-sm mb-3">No custom templates yet</p>
<button onClick={openNew} className="text-[#3b82f6] text-sm font-body font-semibold hover:text-blue-400 transition-colors">
<button onClick={openNew} className="text-[#5B7C8D] text-sm font-body font-semibold hover:text-blue-400 transition-colors">
Create your first template →
</button>
</div>
@@ -376,8 +376,8 @@ export default function NewsletterTemplatesPage() {
key={opt.value}
type="button"
onClick={() => setForm((f) => ({ ...f, layout: opt.value as NewsletterTemplate['layout'] }))}
className={`flex items-start gap-3 p-3 rounded-lg border text-left transition-colors ${form.layout === opt.value ? 'border-[#3b82f6] bg-[#1a2535]' : 'border-[#252525] bg-[#0d0d0d] hover:border-[#333]'}`}>
<span className={`mt-0.5 ${form.layout === opt.value ? 'text-[#3b82f6]' : 'text-[#555]'}`}>
className={`flex items-start gap-3 p-3 rounded-lg border text-left transition-colors ${form.layout === opt.value ? 'border-[#5B7C8D] bg-[#1a2535]' : 'border-[#252525] bg-[#0d0d0d] hover:border-[#333]'}`}>
<span className={`mt-0.5 ${form.layout === opt.value ? 'text-[#5B7C8D]' : 'text-[#555]'}`}>
{LAYOUT_ICONS[opt.value]}
</span>
<div>
@@ -398,7 +398,7 @@ export default function NewsletterTemplatesPage() {
key={opt.value}
type="button"
onClick={() => setForm((f) => ({ ...f, style: opt.value as NewsletterTemplate['style'] }))}
className={`flex-1 py-2.5 px-3 rounded-lg border text-sm font-body font-semibold transition-colors ${form.style === opt.value ? 'border-[#3b82f6] bg-[#1a2535] text-white' : 'border-[#252525] bg-[#0d0d0d] text-[#888] hover:border-[#333]'}`}>
className={`flex-1 py-2.5 px-3 rounded-lg border text-sm font-body font-semibold transition-colors ${form.style === opt.value ? 'border-[#5B7C8D] bg-[#1a2535] text-white' : 'border-[#252525] bg-[#0d0d0d] text-[#888] hover:border-[#333]'}`}>
{opt.label}
</button>
))}
@@ -469,7 +469,7 @@ export default function NewsletterTemplatesPage() {
<div>
<div className="flex items-center justify-between mb-2">
<label className="text-xs font-body font-bold text-[#888] uppercase tracking-wider">Article Block Slots</label>
<button type="button" onClick={addBlock} className="text-xs text-[#3b82f6] hover:text-blue-400 font-body font-semibold transition-colors">
<button type="button" onClick={addBlock} className="text-xs text-[#5B7C8D] hover:text-blue-400 font-body font-semibold transition-colors">
+ Add Slot
</button>
</div>
@@ -486,7 +486,7 @@ export default function NewsletterTemplatesPage() {
type="checkbox"
checked={!!block.featured}
onChange={(e) => updateBlock(i, 'featured', e.target.checked)}
className="w-3 h-3 accent-[#3b82f6]"
className="w-3 h-3 accent-[#5B7C8D]"
/>
<span className="text-xs font-body text-[#888]">Featured</span>
</label>
@@ -597,7 +597,7 @@ export default function NewsletterTemplatesPage() {
{previewTemplate.article_blocks.map((b, i) => (
<div key={i} className="flex items-center gap-2 bg-[#0d0d0d] rounded px-3 py-2">
<span className="text-xs text-[#555] font-body w-12 flex-shrink-0">Slot {i + 1}</span>
{b.featured && <span className="text-xs text-[#3b82f6] font-body bg-[#1a2535] px-1.5 py-0.5 rounded">Featured</span>}
{b.featured && <span className="text-xs text-[#5B7C8D] font-body bg-[#1a2535] px-1.5 py-0.5 rounded">Featured</span>}
{b.category && <span className="text-xs text-[#888] font-body">{b.category}</span>}
{b.title && <span className="text-xs text-[#e0e0e0] font-body truncate">{b.title}</span>}
</div>
@@ -668,12 +668,12 @@ function TemplateCard({ template, onEdit, onDelete, onPreview, deletingId }: Tem
<div className="flex items-center gap-2">
<button
onClick={() => onPreview(template)}
className="flex-1 py-1.5 text-xs font-body font-semibold text-[#3b82f6] border border-[#1e3a5f] rounded-lg hover:bg-[#1a2535] transition-colors">
className="flex-1 py-1.5 text-xs font-body font-semibold text-[#5B7C8D] border border-[#2F4F5F] rounded-lg hover:bg-[#1a2535] transition-colors">
Preview
</button>
<Link
href={`/admin/newsletter?template=${template.id}`}
className="flex-1 py-1.5 text-xs font-body font-semibold text-center text-white bg-[#1a2535] border border-[#1e3a5f] rounded-lg hover:bg-[#1e3a5f] transition-colors">
className="flex-1 py-1.5 text-xs font-body font-semibold text-center text-white bg-[#1a2535] border border-[#2F4F5F] rounded-lg hover:bg-[#2F4F5F] transition-colors">
Use
</Link>
{!template.is_preset && (