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

62
src/app/profile/[userId]/page.tsx
View File

@@ -95,7 +95,7 @@ function Avatar({ name, size = 'lg' }: { name: string; size?: 'sm' | 'lg' }) {
.join('')
.toUpperCase()
.slice(0, 2);
const colors = ['#1e3a5f', '#1a3a2a', '#3a1a1a', '#2a1a3a', '#1a2a3a'];
const colors = ['#2F4F5F', '#1a3a2a', '#3a1a1a', '#2a1a3a', '#1a2a3a'];
const colorIdx = name.charCodeAt(0) % colors.length;
const sizeClass = size === 'lg' ? 'w-20 h-20 text-2xl' : 'w-9 h-9 text-xs';
return (
@@ -113,7 +113,7 @@ function ReputationBadge({ rep }: { rep: number }) {
let color = 'text-[#888] border-[#333]';
if (rep >= 1000) { label = 'Expert'; color = 'text-yellow-400 border-yellow-700'; }
else if (rep >= 500) { label = 'Veteran'; color = 'text-purple-400 border-purple-700'; }
else if (rep >= 200) { label = 'Contributor'; color = 'text-[#3b82f6] border-[#3b82f6]/50'; }
else if (rep >= 200) { label = 'Contributor'; color = 'text-[#5B7C8D] border-[#5B7C8D]/50'; }
else if (rep >= 50) { label = 'Member'; color = 'text-green-400 border-green-700'; }
return (
<span className={`font-body text-xs font-bold uppercase tracking-wider px-2 py-0.5 border rounded-sm ${color}`}>
@@ -130,9 +130,9 @@ const BADGE_CONFIG: Record<string, { label: string; icon: React.ReactNode; color
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
</svg>
),
color: 'text-[#3b82f6]',
bg: 'bg-[#1e3a5f]/40',
border: 'border-[#3b82f6]/40',
color: 'text-[#5B7C8D]',
bg: 'bg-[#2F4F5F]/40',
border: 'border-[#5B7C8D]/40',
description: 'Active community contributor',
},
mentor: {
@@ -362,7 +362,7 @@ export default function UserProfilePage() {
<Header />
<div className="max-w-container mx-auto px-4 py-16 text-center">
<p className="font-body text-[#888] text-sm">{error || 'User not found.'}</p>
<Link href="/forum" className="mt-4 inline-block font-body text-xs font-bold uppercase tracking-wider text-[#3b82f6] hover:underline">
<Link href="/forum" className="mt-4 inline-block font-body text-xs font-bold uppercase tracking-wider text-[#5B7C8D] hover:underline">
← Back to Forum
</Link>
</div>
@@ -387,9 +387,9 @@ export default function UserProfilePage() {
<div className="bg-[#0d0d0d] border-b border-[#1e1e1e]">
<div className="max-w-container mx-auto px-4 py-2.5">
<nav aria-label="Breadcrumb" className="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 aria-hidden="true">/</span>
<Link href="/forum" className="hover:text-[#3b82f6] transition-colors">Forum</Link>
<Link href="/forum" className="hover:text-[#5B7C8D] transition-colors">Forum</Link>
<span aria-hidden="true">/</span>
<span className="text-[#888]">{profile.full_name || 'User Profile'}</span>
</nav>
@@ -415,8 +415,8 @@ export default function UserProfilePage() {
disabled={followLoading}
className={`font-body text-xs font-bold uppercase tracking-wider px-4 py-1.5 rounded-sm border transition-colors disabled:opacity-60 ${
followData.isFollowing
? 'bg-[#1e3a5f] text-[#3b82f6] border-[#3b82f6]/50 hover:bg-red-900/30 hover:text-red-400 hover:border-red-700/50'
: 'bg-[#3b82f6] text-white border-[#3b82f6] hover:bg-[#2563eb]'
? 'bg-[#2F4F5F] text-[#5B7C8D] border-[#5B7C8D]/50 hover:bg-red-900/30 hover:text-red-400 hover:border-red-700/50'
: 'bg-[#5B7C8D] text-white border-[#5B7C8D] hover:bg-[#4A6473]'
}`}
>
{followLoading ? '...' : followData.isFollowing ? 'Following' : '+ Follow'}
@@ -425,7 +425,7 @@ export default function UserProfilePage() {
{currentUserId === userId && (
<Link
href="/account"
className="font-body text-xs font-bold uppercase tracking-wider text-[#888] hover:text-[#3b82f6] border border-[#2a2a2a] hover:border-[#3b82f6] px-3 py-1 rounded-sm transition-colors"
className="font-body text-xs font-bold uppercase tracking-wider text-[#888] hover:text-[#5B7C8D] border border-[#2a2a2a] hover:border-[#5B7C8D] px-3 py-1 rounded-sm transition-colors"
>
Edit Profile
</Link>
@@ -449,7 +449,7 @@ export default function UserProfilePage() {
href={profile.website.startsWith('http') ? profile.website : `https://${profile.website}`}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-1 hover:text-[#3b82f6] transition-colors"
className="flex items-center gap-1 hover:text-[#5B7C8D] transition-colors"
>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
<circle cx="12" cy="12" r="10" />
@@ -477,7 +477,7 @@ export default function UserProfilePage() {
{/* Reputation & Stats Row */}
<div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-3 mt-6 pt-5 border-t border-[#2a2a2a]">
<div className="text-center">
<div className="font-heading text-2xl font-bold text-[#3b82f6]">{(profile.reputation || 0).toLocaleString()}</div>
<div className="font-heading text-2xl font-bold text-[#5B7C8D]">{(profile.reputation || 0).toLocaleString()}</div>
<div className="font-body text-xs text-[#666] uppercase tracking-wider mt-0.5">Reputation</div>
</div>
<div className="text-center">
@@ -493,11 +493,11 @@ export default function UserProfilePage() {
<div className="font-body text-xs text-[#666] uppercase tracking-wider mt-0.5">Upvotes</div>
</div>
<div className="text-center cursor-pointer" onClick={() => setActiveTab('followers')}>
<div className="font-heading text-2xl font-bold text-[#e0e0e0] hover:text-[#3b82f6] transition-colors">{followData.followerCount}</div>
<div className="font-heading text-2xl font-bold text-[#e0e0e0] hover:text-[#5B7C8D] transition-colors">{followData.followerCount}</div>
<div className="font-body text-xs text-[#666] uppercase tracking-wider mt-0.5">Followers</div>
</div>
<div className="text-center cursor-pointer" onClick={() => setActiveTab('following')}>
<div className="font-heading text-2xl font-bold text-[#e0e0e0] hover:text-[#3b82f6] transition-colors">{followData.followingCount}</div>
<div className="font-heading text-2xl font-bold text-[#e0e0e0] hover:text-[#5B7C8D] transition-colors">{followData.followingCount}</div>
<div className="font-body text-xs text-[#666] uppercase tracking-wider mt-0.5">Following</div>
</div>
</div>
@@ -511,7 +511,7 @@ export default function UserProfilePage() {
onClick={() => setActiveTab(tab.id)}
className={`font-body text-sm font-bold uppercase tracking-wider px-5 py-3 border-b-2 transition-colors flex items-center gap-2 whitespace-nowrap ${
activeTab === tab.id
? 'border-[#3b82f6] text-[#3b82f6]'
? 'border-[#5B7C8D] text-[#5B7C8D]'
: 'border-transparent text-[#666] hover:text-[#aaa]'
}`}
>
@@ -549,17 +549,17 @@ export default function UserProfilePage() {
<div key={thread.id} className="group">
<Link
href={`/forum/thread/${thread.id}`}
className="font-body text-sm text-[#ccc] hover:text-[#3b82f6] transition-colors line-clamp-2 leading-snug"
className="font-body text-sm text-[#ccc] hover:text-[#5B7C8D] transition-colors line-clamp-2 leading-snug"
>
{thread.title}
</Link>
<div className="flex items-center gap-3 mt-1 text-xs font-body text-[#555]">
{thread.forum_categories && (
<Link href={`/forum/${thread.forum_categories.slug}`} className="text-[#3b82f6]/70 hover:text-[#3b82f6]">
<Link href={`/forum/${thread.forum_categories.slug}`} className="text-[#5B7C8D]/70 hover:text-[#5B7C8D]">
{thread.forum_categories.name}
</Link>
)}
<span className={`font-semibold ${(thread.vote_score || 0) >= 0 ? 'text-[#3b82f6]' : 'text-red-400'}`}>
<span className={`font-semibold ${(thread.vote_score || 0) >= 0 ? 'text-[#5B7C8D]' : 'text-red-400'}`}>
{(thread.vote_score || 0) > 0 ? '+' : ''}{thread.vote_score || 0} pts
</span>
<span>{thread.reply_count || 0} replies</span>
@@ -585,7 +585,7 @@ export default function UserProfilePage() {
<div className="flex items-center justify-between mb-1">
<Link
href={`/forum/${cat.slug}`}
className="font-body text-xs font-semibold text-[#aaa] hover:text-[#3b82f6] transition-colors"
className="font-body text-xs font-semibold text-[#aaa] hover:text-[#5B7C8D] transition-colors"
>
{cat.name}
</Link>
@@ -593,7 +593,7 @@ export default function UserProfilePage() {
</div>
<div className="h-1.5 bg-[#2a2a2a] rounded-full overflow-hidden">
<div
className="h-full bg-[#3b82f6] rounded-full transition-all duration-500"
className="h-full bg-[#5B7C8D] rounded-full transition-all duration-500"
style={{ width: `${(cat.count / maxCategoryCount) * 100}%` }}
/>
</div>
@@ -621,7 +621,7 @@ export default function UserProfilePage() {
.map((entry, idx) => (
<div key={idx} className="flex items-start gap-3 py-2 border-b border-[#1e1e1e] last:border-0">
<span className={`font-body text-xs font-bold uppercase tracking-wider px-2 py-0.5 rounded-sm flex-shrink-0 mt-0.5 ${
entry.type === 'thread' ? 'bg-[#1e3a5f] text-[#3b82f6]' : 'bg-[#1a2a1a] text-green-400'
entry.type === 'thread' ? 'bg-[#2F4F5F] text-[#5B7C8D]' : 'bg-[#1a2a1a] text-green-400'
}`}>
{entry.type === 'thread' ? 'Thread' : 'Reply'}
</span>
@@ -629,7 +629,7 @@ export default function UserProfilePage() {
{entry.type === 'thread' ? (
<Link
href={`/forum/thread/${(entry.item as ForumThread).id}`}
className="font-body text-sm text-[#ccc] hover:text-[#3b82f6] transition-colors line-clamp-1"
className="font-body text-sm text-[#ccc] hover:text-[#5B7C8D] transition-colors line-clamp-1"
>
{(entry.item as ForumThread).title}
</Link>
@@ -637,7 +637,7 @@ export default function UserProfilePage() {
<div>
<Link
href={`/forum/thread/${(entry.item as ForumReply).thread_id}`}
className="font-body text-sm text-[#ccc] hover:text-[#3b82f6] transition-colors line-clamp-1"
className="font-body text-sm text-[#ccc] hover:text-[#5B7C8D] transition-colors line-clamp-1"
>
Re: {(entry.item as ForumReply).forum_threads?.title || 'Thread'}
</Link>
@@ -671,14 +671,14 @@ export default function UserProfilePage() {
<div className="flex-1 min-w-0">
<Link
href={`/forum/thread/${thread.id}`}
className="font-body text-sm font-semibold text-[#ccc] hover:text-[#3b82f6] transition-colors line-clamp-2"
className="font-body text-sm font-semibold text-[#ccc] hover:text-[#5B7C8D] transition-colors line-clamp-2"
>
{thread.title}
</Link>
<p className="font-body text-xs text-[#555] line-clamp-1 mt-1">{thread.body}</p>
<div className="flex flex-wrap items-center gap-3 mt-2 text-xs font-body text-[#555]">
{thread.forum_categories && (
<Link href={`/forum/${thread.forum_categories.slug}`} className="text-[#3b82f6]/70 hover:text-[#3b82f6]">
<Link href={`/forum/${thread.forum_categories.slug}`} className="text-[#5B7C8D]/70 hover:text-[#5B7C8D]">
{thread.forum_categories.name}
</Link>
)}
@@ -688,7 +688,7 @@ export default function UserProfilePage() {
</div>
</div>
<div className="text-right flex-shrink-0">
<div className={`font-heading text-lg font-bold ${(thread.vote_score || 0) >= 0 ? 'text-[#3b82f6]' : 'text-red-400'}`}>
<div className={`font-heading text-lg font-bold ${(thread.vote_score || 0) >= 0 ? 'text-[#5B7C8D]' : 'text-red-400'}`}>
{(thread.vote_score || 0) > 0 ? '+' : ''}{thread.vote_score || 0}
</div>
<div className="font-body text-xs text-[#555]">score</div>
@@ -714,13 +714,13 @@ export default function UserProfilePage() {
<div key={reply.id} className="p-4 hover:bg-[#1e1e1e] transition-colors">
<Link
href={`/forum/thread/${reply.thread_id}`}
className="font-body text-xs font-bold uppercase tracking-wider text-[#3b82f6]/70 hover:text-[#3b82f6] transition-colors mb-1 block"
className="font-body text-xs font-bold uppercase tracking-wider text-[#5B7C8D]/70 hover:text-[#5B7C8D] transition-colors mb-1 block"
>
Re: {reply.forum_threads?.title || 'Thread'}
</Link>
<p className="font-body text-sm text-[#aaa] line-clamp-3 leading-relaxed">{reply.body}</p>
<div className="flex items-center gap-3 mt-2 text-xs font-body text-[#555]">
<span className={`font-semibold ${(reply.vote_score || 0) >= 0 ? 'text-[#3b82f6]' : 'text-red-400'}`}>
<span className={`font-semibold ${(reply.vote_score || 0) >= 0 ? 'text-[#5B7C8D]' : 'text-red-400'}`}>
{(reply.vote_score || 0) > 0 ? '+' : ''}{reply.vote_score || 0} pts
</span>
<span>{timeAgo(reply.created_at)}</span>
@@ -782,7 +782,7 @@ function FollowUserList({
<div className="flex-1 min-w-0">
<Link
href={`/profile/${u.id}`}
className="font-body text-sm font-semibold text-[#ccc] hover:text-[#3b82f6] transition-colors"
className="font-body text-sm font-semibold text-[#ccc] hover:text-[#5B7C8D] transition-colors"
>
{u.full_name || 'Anonymous User'}
</Link>
@@ -796,7 +796,7 @@ function FollowUserList({
{currentUserId && currentUserId !== u.id && (
<Link
href={`/profile/${u.id}`}
className="font-body text-xs font-bold uppercase tracking-wider text-[#888] hover:text-[#3b82f6] border border-[#2a2a2a] hover:border-[#3b82f6] px-3 py-1 rounded-sm transition-colors"
className="font-body text-xs font-bold uppercase tracking-wider text-[#888] hover:text-[#5B7C8D] border border-[#2a2a2a] hover:border-[#5B7C8D] px-3 py-1 rounded-sm transition-colors"
>
View
</Link>