Skip to content

feat: standardize color system with CSS variables across frontend #417

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Hydrax117 merged 2 commits into from
Jun 1, 2026
Merged

feat: standardize color system with CSS variables across frontend #417

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
77fda73
feat: standardize color system with CSS variables across all pages an…
Nusirat12345 May 30, 2026
33b77ae
Merge branch 'main' into feat/standardize-color-system
Hydrax117 Jun 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions frontend/src/__tests__/profile-header.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ describe('ProfileHeader', () => {
<ProfileHeader user={{ ...baseUser, isOnline: true }} isOwner={false} friendshipStatus="none" />
);
const indicator = screen.getByTestId('online-indicator');
expect(indicator).toHaveClass('bg-green-500');
expect(indicator).toHaveClass('bg-success');
expect(indicator).not.toHaveClass('bg-gray-400');
});

Expand All @@ -111,6 +111,6 @@ describe('ProfileHeader', () => {
);
const indicator = screen.getByTestId('online-indicator');
expect(indicator).toHaveClass('bg-gray-400');
expect(indicator).not.toHaveClass('bg-green-500');
expect(indicator).not.toHaveClass('bg-success');
});
});
2 changes: 1 addition & 1 deletion frontend/src/app/accessibility/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export default function AccessibilityPage() {
We welcome your feedback on the accessibility of ArenaX. Please let us know if you
encounter accessibility barriers:
</p>
<Link href="/contact" className="text-blue-600 hover:underline">
<Link href="/contact" className="text-primary hover:underline">
Contact Us
</Link>
</CardContent>
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/app/achievements/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function AchievementsPage() {
if (isLoading) {
return (
<div className="flex items-center justify-center min-h-screen">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
</div>
);
}
Expand All @@ -40,14 +40,14 @@ export default function AchievementsPage() {
<Trophy className="h-8 w-8 text-yellow-400" />
Achievements
</h1>
<p className="text-gray-400">
<p className="text-muted-foreground">
{unlockedCount} of {totalAchievements} unlocked · {totalPoints}{" "}
points earned
</p>
</div>
<Link
href="/achievements/progress"
className="inline-flex items-center gap-2 rounded-md bg-blue-600 hover:bg-blue-700 px-4 py-2 text-sm font-medium text-white transition-colors self-start"
className="inline-flex items-center gap-2 rounded-md bg-primary/90 hover:bg-blue-700 px-4 py-2 text-sm font-medium text-white transition-colors self-start"
>
📊 View Progress
</Link>
Expand Down
18 changes: 9 additions & 9 deletions frontend/src/app/admin/disputes/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export default function DisputeDashboard() {
<ProtectedPage requiredRole="admin">
<div className="container mx-auto p-6 space-y-8">
<header className="flex flex-col gap-2">
<h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl text-gray-900 dark:text-gray-100">
<h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl text-foreground dark:text-foreground">
Dispute Resolution
</h1>
<p className="text-xl text-muted-foreground">
Expand Down Expand Up @@ -126,7 +126,7 @@ export default function DisputeDashboard() {
<h4 className="text-sm font-bold text-gray-500 dark:text-gray-400 uppercase tracking-widest mb-2">Evidence</h4>
<div className="grid grid-cols-3 gap-2">
{dispute.evidenceUrls.map((url: string, index: number) => (
<div key={index} className="aspect-square bg-gray-200 rounded-md overflow-hidden border">
<div key={index} className="aspect-square bg-muted rounded-md overflow-hidden border">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={url} alt={`Evidence ${index + 1}`} className="w-full h-full object-cover" />
</div>
Expand All @@ -136,19 +136,19 @@ export default function DisputeDashboard() {
</div>
<div className="flex flex-col justify-between border-l pl-8 border-indigo-50 dark:border-indigo-900">
<div className="space-y-4">
<h4 className="text-sm font-bold text-gray-500 dark:text-gray-400 uppercase tracking-widest">Match Details</h4>
<h4 className="text-sm font-bold text-muted-foreground uppercase tracking-widest">Match Details</h4>
<div className="grid grid-cols-2 gap-4">
<div className="p-3 bg-red-50 dark:bg-red-950/20 rounded-lg">
<p className="text-xs text-red-600 font-bold uppercase">Player A</p>
<div className="p-3 bg-destructive/5 dark:bg-destructive/10/20 rounded-lg">
<p className="text-xs text-destructive font-bold uppercase">Player A</p>
<p className="text-sm font-mono truncate">{dispute.match.playerAId}</p>
</div>
<div className="p-3 bg-blue-50 dark:bg-blue-950/20 rounded-lg">
<p className="text-xs text-blue-600 font-bold uppercase">Player B</p>
<div className="p-3 bg-info-muted dark:bg-info-muted/20 rounded-lg">
<p className="text-xs text-primary font-bold uppercase">Player B</p>
<p className="text-sm font-mono truncate">{dispute.match.playerBId}</p>
</div>
</div>
<div className="p-4 bg-green-50 dark:bg-green-950/20 rounded-lg border border-green-100 dark:border-green-900/50">
<p className="text-xs text-green-600 font-bold uppercase">Reported Winner</p>
<div className="p-4 bg-success-muted dark:bg-success-muted/20 rounded-lg border border-green-100 dark:border-success/30/50">
<p className="text-xs text-success font-bold uppercase">Reported Winner</p>
<p className="text-lg font-bold">{dispute.match.winnerId === dispute.match.playerAId ? "Player A" : "Player B"}</p>
</div>
</div>
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/app/admin/governance/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export default function GovernanceDashboard() {
<div className="container mx-auto p-6 space-y-8">
<header className="flex items-center justify-between">
<div>
<h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl text-gray-900 dark:text-gray-100">
<h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl text-foreground dark:text-foreground">
Governance
</h1>
<p className="text-xl text-muted-foreground mt-2">
Expand Down Expand Up @@ -129,9 +129,9 @@ export default function GovernanceDashboard() {
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="p-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-100 dark:border-gray-700">
<p className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-2">Target Contract</p>
<p className="text-sm font-mono truncate text-gray-700 dark:text-gray-300">{proposal.targetContract}</p>
<div className="p-4 bg-muted dark:bg-surface/50 rounded-lg border border-gray-100 dark:border-border">
<p className="text-xs font-bold text-muted-foreground uppercase tracking-widest mb-2">Target Contract</p>
<p className="text-sm font-mono truncate text-foreground/70 dark:text-foreground/80">{proposal.targetContract}</p>
</div>
<div className="flex items-center justify-between">
<div className="flex -space-x-2 overflow-hidden">
Expand All @@ -145,7 +145,7 @@ export default function GovernanceDashboard() {
{proposal._count.votes} / 3 signatures
</p>
</div>
<div className="w-full bg-gray-100 dark:bg-gray-800 rounded-full h-2">
<div className="w-full bg-muted dark:bg-surface rounded-full h-2">
<div
className="bg-gradient-to-r from-indigo-500 to-purple-500 h-2 rounded-full transition-all duration-500"
style={{ width: `${Math.min((proposal._count.votes / 3) * 100, 100)}%` }}
Expand All @@ -161,7 +161,7 @@ export default function GovernanceDashboard() {
</Button>
)}
{proposal.status === "VOTING" && (
<Button className="w-full bg-green-600 hover:bg-green-700" onClick={() => handleVote(proposal.id)}>
<Button className="w-full bg-success/90 hover:bg-green-700" onClick={() => handleVote(proposal.id)}>
Sign Proposal
</Button>
)}
Expand Down
14 changes: 7 additions & 7 deletions frontend/src/app/admin/kyc/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ export default function KycDashboard() {
<div className="container mx-auto p-6 space-y-8">
<header className="flex flex-col md:flex-row md:items-center justify-between gap-4">
<div>
<h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl text-gray-900 dark:text-gray-100">
<h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl text-foreground dark:text-foreground">
KYC Review Queue
</h1>
<p className="text-xl text-muted-foreground">
Expand Down Expand Up @@ -186,8 +186,8 @@ export default function KycDashboard() {
<CardTitle className="text-lg truncate">{review.user.username}</CardTitle>
<span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase ${
review.status === 'PENDING' ? 'bg-yellow-100 text-yellow-800' :
review.status === 'APPROVED' ? 'bg-green-100 text-green-800' :
review.status === 'REJECTED' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800'
review.status === 'APPROVED' ? 'bg-success-muted text-green-800' :
review.status === 'REJECTED' ? 'bg-destructive/10 text-red-800' : 'bg-muted text-gray-800'
}`}>
{review.status}
</span>
Expand Down Expand Up @@ -264,7 +264,7 @@ export default function KycDashboard() {
<div className="flex flex-wrap gap-3 pt-2">
<Button
variant="primary"
className="flex-1 min-w-[140px] bg-green-600 hover:bg-green-700 text-white font-bold"
className="flex-1 min-w-[140px] bg-success/90 hover:bg-green-700 text-white font-bold"
onClick={() => handleProcess(selectedReview.id, "APPROVED")}
disabled={isSubmitting}
>
Expand All @@ -289,9 +289,9 @@ export default function KycDashboard() {
</div>
) : (
<div className={`p-4 rounded-xl border flex items-center justify-between ${
selectedReview.status === 'APPROVED' ? 'bg-green-50 border-green-200 text-green-800' :
selectedReview.status === 'REJECTED' ? 'bg-red-50 border-red-200 text-red-800' :
'bg-gray-50 border-gray-200 text-gray-800'
selectedReview.status === 'APPROVED' ? 'bg-success-muted border-success/30 text-green-800' :
selectedReview.status === 'REJECTED' ? 'bg-destructive/5 border-red-200 text-red-800' :
'bg-muted border-gray-200 text-gray-800'
}`}>
<div className="flex items-center gap-3">
<span className="font-bold uppercase tracking-wider text-xs">Final State: {selectedReview.status}</span>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/app/contact/ContactForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@ export function ContactForm() {
animate={{ opacity: 1, y: 0 }}
className="text-center py-8"
>
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 mb-4">
<Send className="h-8 w-8 text-green-600 dark:text-green-400" />
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-success-muted dark:bg-success-muted mb-4">
<Send className="h-8 w-8 text-success dark:text-success/80" />
</div>
<h3 className="text-xl font-bold mb-2">Message Sent!</h3>
<p className="text-muted-foreground">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/dashboard/friends/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const mockFriends: Friend[] = [
];

const statusConfig = {
online: { label: "Online", dot: "bg-green-500" },
online: { label: "Online", dot: "bg-success" },
"in-game": { label: "In Game", dot: "bg-yellow-500" },
offline: { label: "Offline", dot: "bg-muted-foreground/50" },
};
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/dashboard/profile/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function DashboardProfilePage() {
<span className="text-3xl font-bold text-muted-foreground">{user.username.charAt(0)}</span>
)}
</div>
<div className="absolute -bottom-1 -right-1 h-6 w-6 bg-green-500 border-4 border-card rounded-full" />
<div className="absolute -bottom-1 -right-1 h-6 w-6 bg-success border-4 border-card rounded-full" />
</div>
<div className="flex-1 space-y-2">
<h1 className="text-3xl font-extrabold tracking-tight">{user.username}</h1>
Expand Down
22 changes: 11 additions & 11 deletions frontend/src/app/friends/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,19 +32,19 @@ export default function FriendsPage() {
<Users className="w-8 h-8" />
Friends
</h1>
<p className="text-gray-400">
<p className="text-muted-foreground">
{onlineFriends} of {friends.length} friends online
</p>
</div>

{/* Tabs */}
<div className="flex gap-4 mb-8 border-b border-gray-700">
<div className="flex gap-4 mb-8 border-b border-border">
<button
onClick={() => setActiveTab("list")}
className={`px-4 py-2 font-medium transition-colors ${
activeTab === "list"
? "text-blue-400 border-b-2 border-blue-400"
: "text-gray-400 hover:text-gray-300"
? "text-primary/80 border-b-2 border-primary/70"
: "text-muted-foreground hover:text-foreground/80"
}`}
>
<Users className="w-4 h-4 inline mr-2" />
Expand All @@ -54,8 +54,8 @@ export default function FriendsPage() {
onClick={() => setActiveTab("requests")}
className={`px-4 py-2 font-medium transition-colors ${
activeTab === "requests"
? "text-blue-400 border-b-2 border-blue-400"
: "text-gray-400 hover:text-gray-300"
? "text-primary/80 border-b-2 border-primary/70"
: "text-muted-foreground hover:text-foreground/80"
}`}
>
<UserPlus className="w-4 h-4 inline mr-2" />
Expand All @@ -65,8 +65,8 @@ export default function FriendsPage() {
onClick={() => setActiveTab("invite")}
className={`px-4 py-2 font-medium transition-colors ${
activeTab === "invite"
? "text-blue-400 border-b-2 border-blue-400"
: "text-gray-400 hover:text-gray-300"
? "text-primary/80 border-b-2 border-primary/70"
: "text-muted-foreground hover:text-foreground/80"
}`}
>
<UserPlus className="w-4 h-4 inline mr-2" />
Expand All @@ -77,19 +77,19 @@ export default function FriendsPage() {
{/* Search Bar */}
{activeTab === "list" && (
<div className="mb-6 relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-muted-foreground" />
<input
type="text"
placeholder="Search friends..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"
className="w-full pl-10 pr-4 py-2 bg-surface border border-border rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-primary"
/>
</div>
)}

{/* Content */}
<div className="bg-gray-800/50 rounded-lg border border-gray-700 p-6">
<div className="bg-surface/50 rounded-lg border border-border p-6">
{activeTab === "list" && (
<FriendsList
friends={filteredFriends}
Expand Down
22 changes: 11 additions & 11 deletions frontend/src/app/leaderboards/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,32 +29,32 @@ export default function LeaderboardsPage() {
{/* Header */}
<div className="mb-8">
<h1 className="text-4xl font-bold text-white mb-2">Leaderboards</h1>
<p className="text-gray-400">Compete and climb the ranks</p>
<p className="text-muted-foreground">Compete and climb the ranks</p>
</div>

{/* Stats */}
{statsData && (
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
<div className="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
<p className="text-gray-400 text-sm mb-1">Total Players</p>
<div className="bg-surface/50 rounded-lg p-4 border border-border">
<p className="text-muted-foreground text-sm mb-1">Total Players</p>
<p className="text-2xl font-bold text-white">
{statsData.totalPlayers}
</p>
</div>
<div className="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
<p className="text-gray-400 text-sm mb-1">Average Elo</p>
<div className="bg-surface/50 rounded-lg p-4 border border-border">
<p className="text-muted-foreground text-sm mb-1">Average Elo</p>
<p className="text-2xl font-bold text-white">
{Math.round(statsData.averageElo)}
</p>
</div>
<div className="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
<p className="text-gray-400 text-sm mb-1">Median Elo</p>
<div className="bg-surface/50 rounded-lg p-4 border border-border">
<p className="text-muted-foreground text-sm mb-1">Median Elo</p>
<p className="text-2xl font-bold text-white">
{statsData.medianElo}
</p>
</div>
<div className="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
<p className="text-gray-400 text-sm mb-1">Top Player Elo</p>
<div className="bg-surface/50 rounded-lg p-4 border border-border">
<p className="text-muted-foreground text-sm mb-1">Top Player Elo</p>
<p className="text-2xl font-bold text-white">
{statsData.topPlayerElo}
</p>
Expand All @@ -75,7 +75,7 @@ export default function LeaderboardsPage() {
<PersonalRank category={category} season={season} />

{/* Leaderboard Table */}
<div className="bg-gray-800/50 rounded-lg p-6 backdrop-blur border border-gray-700">
<div className="bg-surface/50 rounded-lg p-6 backdrop-blur border border-border">
<div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-bold text-white">
{category === "global"
Expand All @@ -86,7 +86,7 @@ export default function LeaderboardsPage() {
? "Casual Rankings"
: "Ranked Rankings"}
</h2>
<div className="text-sm text-gray-400">
<div className="text-sm text-muted-foreground">
{filteredEntries.length} players
</div>
</div>
Expand Down
Loading
Loading