refactor: remove gh/GitHub references from tokens, classes, and component names
Rename all --color-gh-* CSS tokens to --color-*, update Tailwind class names (bg-gh-*, text-gh-*, border-gh-*, etc.) across all TSX/TS files, rename GhButton component and file to Button, and remove trivial descriptive comments.
This commit is contained in:
@@ -29,7 +29,7 @@ export function RecentSessions({ sessions }: RecentSessionsProps) {
|
||||
|
||||
if (sessions.length === 0) {
|
||||
return (
|
||||
<div className="px-4 py-8 text-center text-sm text-gh-muted">No recent sessions found</div>
|
||||
<div className="px-4 py-8 text-center text-sm text-muted">No recent sessions found</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -37,44 +37,44 @@ export function RecentSessions({ sessions }: RecentSessionsProps) {
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-gh-border-muted bg-gh-base">
|
||||
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-gh-subtle">
|
||||
<tr className="border-b border-border-muted bg-base">
|
||||
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-subtle">
|
||||
Date
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-gh-subtle">
|
||||
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-subtle">
|
||||
Type
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-gh-subtle">
|
||||
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-subtle">
|
||||
Track
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-gh-subtle">
|
||||
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-subtle">
|
||||
Duration
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-gh-subtle">
|
||||
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-subtle">
|
||||
Players
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sessions.map((session) => (
|
||||
<tr key={session.id} className="border-b border-gh-border-muted transition-colors hover:bg-gh-hover last:border-0">
|
||||
<td className="px-4 py-3 text-sm text-gh-muted">
|
||||
<tr key={session.id} className="border-b border-border-muted transition-colors hover:bg-hover last:border-0">
|
||||
<td className="px-4 py-3 text-sm text-muted">
|
||||
{formatDate(session.date)}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
|
||||
session.type === 'R' ? 'bg-gh-green-bg text-gh-green' :
|
||||
session.type === 'Q' ? 'bg-gh-yellow-bg text-gh-yellow' :
|
||||
'bg-gh-blue-bg text-gh-blue'
|
||||
session.type === 'R' ? 'bg-green-bg text-green' :
|
||||
session.type === 'Q' ? 'bg-yellow-bg text-yellow' :
|
||||
'bg-blue-bg text-blue'
|
||||
}`}>
|
||||
{session.type === 'R' ? 'Race' : session.type === 'Q' ? 'Qualify' : 'Practice'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gh-secondary">{session.track}</td>
|
||||
<td className="px-4 py-3 text-sm text-gh-muted">
|
||||
<td className="px-4 py-3 text-sm text-secondary">{session.track}</td>
|
||||
<td className="px-4 py-3 text-sm text-muted">
|
||||
{formatDuration(session.duration)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gh-secondary">
|
||||
<td className="px-4 py-3 text-sm text-secondary">
|
||||
{session.players}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -15,10 +15,10 @@ interface SessionTypesChartProps {
|
||||
}
|
||||
|
||||
const colors = [
|
||||
'#3fb950', // gh-green
|
||||
'#58a6ff', // gh-blue
|
||||
'#f78166', // gh-red
|
||||
'#d29922' // gh-yellow
|
||||
'#3fb950', // green
|
||||
'#58a6ff', // blue
|
||||
'#f78166', // red
|
||||
'#d29922' // yellow
|
||||
];
|
||||
|
||||
export function SessionTypesChart({ data }: SessionTypesChartProps) {
|
||||
|
||||
@@ -6,12 +6,12 @@ interface StatCardProps {
|
||||
|
||||
export function StatCard({ title, value, icon }: StatCardProps) {
|
||||
return (
|
||||
<div className="rounded-lg border border-gh-border bg-gh-canvas p-4">
|
||||
<div className="rounded-lg border border-border bg-canvas p-4">
|
||||
<div className="mb-1 flex items-center gap-2">
|
||||
<span className="text-base">{icon}</span>
|
||||
<span className="text-xs text-gh-muted">{title}</span>
|
||||
<span className="text-xs text-muted">{title}</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-gh-primary">{value}</div>
|
||||
<div className="text-2xl font-bold text-primary">{value}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -16,15 +16,14 @@ export function StatisticsDashboard({ stats }: StatisticsDashboardProps) {
|
||||
return (
|
||||
<div className="py-16 text-center">
|
||||
<div className="mb-3 text-5xl">📊</div>
|
||||
<h3 className="mb-1 text-base font-semibold text-gh-primary">No Statistics Available</h3>
|
||||
<p className="text-sm text-gh-muted">No data found for the selected date range.</p>
|
||||
<h3 className="mb-1 text-base font-semibold text-primary">No Statistics Available</h3>
|
||||
<p className="text-sm text-muted">No data found for the selected date range.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* 4 stat cards */}
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<StatCard title="Total Sessions" value={stats.totalSessions ?? 0} icon="🏁" />
|
||||
<StatCard
|
||||
@@ -40,26 +39,24 @@ export function StatisticsDashboard({ stats }: StatisticsDashboardProps) {
|
||||
<StatCard title="Peak Players" value={stats.peakPlayers ?? 0} icon="🔥" />
|
||||
</div>
|
||||
|
||||
{/* Charts row */}
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||
<div className="lg:col-span-2 rounded-lg border border-gh-border bg-gh-canvas p-4">
|
||||
<h3 className="mb-3 text-sm font-semibold text-gh-primary">Player Count Over Time</h3>
|
||||
<div className="lg:col-span-2 rounded-lg border border-border bg-canvas p-4">
|
||||
<h3 className="mb-3 text-sm font-semibold text-primary">Player Count Over Time</h3>
|
||||
<PlayerCountChart data={stats.playerCountOverTime ?? []} />
|
||||
</div>
|
||||
<div className="rounded-lg border border-gh-border bg-gh-canvas p-4">
|
||||
<h3 className="mb-3 text-sm font-semibold text-gh-primary">Session Types</h3>
|
||||
<div className="rounded-lg border border-border bg-canvas p-4">
|
||||
<h3 className="mb-3 text-sm font-semibold text-primary">Session Types</h3>
|
||||
<SessionTypesChart data={stats.sessionTypes ?? []} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-gh-border bg-gh-canvas p-4">
|
||||
<h3 className="mb-3 text-sm font-semibold text-gh-primary">Daily Activity</h3>
|
||||
<div className="rounded-lg border border-border bg-canvas p-4">
|
||||
<h3 className="mb-3 text-sm font-semibold text-primary">Daily Activity</h3>
|
||||
<DailyActivityChart data={stats.dailyActivity ?? []} />
|
||||
</div>
|
||||
|
||||
{/* Recent sessions */}
|
||||
<div className="overflow-hidden rounded-lg border border-gh-border bg-gh-canvas">
|
||||
<div className="border-b border-gh-border-muted px-4 py-3 text-sm font-semibold text-gh-primary">Recent Sessions</div>
|
||||
<div className="overflow-hidden rounded-lg border border-border bg-canvas">
|
||||
<div className="border-b border-border-muted px-4 py-3 text-sm font-semibold text-primary">Recent Sessions</div>
|
||||
<RecentSessions sessions={stats.recentSessions ?? []} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user