Skip to content

Commit 76cc9e1

Browse files
bytefulbyteful
committed
Dark mode (my eyes bruh)
1 parent f0e1514 commit 76cc9e1

File tree

10 files changed

+81
-81
lines changed

10 files changed

+81
-81
lines changed

‎client/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" class="dark">
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

‎client/src/components/SystemLogs.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -235,11 +235,11 @@ export default function SystemLogs() {
235235
const getLevelBadge = (level: string) => {
236236
switch (level) {
237237
case 'critical':
238-
return <Badge variant="destructive" className="bg-red-600"><XCircle className="h-3 w-3 mr-1" />Critical</Badge>;
238+
return <Badge variant="destructive" className="bg-red-600 dark:bg-red-700"><XCircle className="h-3 w-3 mr-1" />Critical</Badge>;
239239
case 'error':
240240
return <Badge variant="destructive"><AlertTriangle className="h-3 w-3 mr-1" />Error</Badge>;
241241
case 'warning':
242-
return <Badge className="bg-yellow-500"><AlertTriangle className="h-3 w-3 mr-1" />Warning</Badge>;
242+
return <Badge className="bg-yellow-500 dark:bg-yellow-600"><AlertTriangle className="h-3 w-3 mr-1" />Warning</Badge>;
243243
case 'info':
244244
return <Badge variant="secondary"><Info className="h-3 w-3 mr-1" />Info</Badge>;
245245
default:
@@ -313,15 +313,15 @@ export default function SystemLogs() {
313313
<h3 className="text-lg font-semibold">System Logs</h3>
314314
<div className="flex items-center space-x-2">
315315
{newLogs.length > 0 && (
316-
<Badge variant="default" className="bg-blue-600">
316+
<Badge variant="default" className="bg-blue-600 dark:bg-blue-700">
317317
<Zap className="h-3 w-3 mr-1" />
318318
{newLogs.length} new
319319
</Badge>
320320
)}
321321
{pm2Status?.data && (
322322
<Badge
323323
variant={pm2Status.data.isEnabled && pm2Status.data.isStreaming ? "default" : "destructive"}
324-
className={pm2Status.data.isEnabled && pm2Status.data.isStreaming ? "bg-green-600" : "bg-red-600"}
324+
className={pm2Status.data.isEnabled && pm2Status.data.isStreaming ? "bg-green-600 dark:bg-green-700" : "bg-red-600 dark:bg-red-700"}
325325
>
326326
PM2 {!pm2Status.data.isEnabled ? 'Disabled' : pm2Status.data.isStreaming ? 'Active' : 'Inactive'}
327327
</Badge>
@@ -336,20 +336,20 @@ export default function SystemLogs() {
336336
variant="outline"
337337
size="sm"
338338
onClick={() => setRealTimeEnabled(!realTimeEnabled)}
339-
className={realTimeEnabled && isConnected ? 'text-green-600 border-green-600' : ''}
339+
className={realTimeEnabled && isConnected ? 'text-green-600 dark:text-green-400 border-green-600 dark:border-green-400' : ''}
340340
>
341341
{isConnected ? (
342-
<Wifi className={`h-4 w-4 mr-2 ${realTimeEnabled ? 'text-green-600' : ''}`} />
342+
<Wifi className={`h-4 w-4 mr-2 ${realTimeEnabled ? 'text-green-600 dark:text-green-400' : ''}`} />
343343
) : (
344-
<WifiOff className="h-4 w-4 mr-2 text-red-500" />
344+
<WifiOff className="h-4 w-4 mr-2 text-red-500 dark:text-red-400" />
345345
)}
346346
{realTimeEnabled ? 'Real-time' : 'Static'}
347347
</Button>
348348
<Button
349349
variant="outline"
350350
size="sm"
351351
onClick={() => setAutoRefresh(!autoRefresh)}
352-
className={autoRefresh ? 'text-blue-600' : ''}
352+
className={autoRefresh ? 'text-blue-600 dark:text-blue-400' : ''}
353353
>
354354
<RefreshCw className={`h-4 w-4 mr-2 ${autoRefresh ? 'animate-spin' : ''}`} />
355355
{autoRefresh ? 'Auto-refresh' : 'Manual'}
@@ -554,7 +554,7 @@ export default function SystemLogs() {
554554
</div>
555555
) : error ? (
556556
<div className="text-center py-8">
557-
<AlertTriangle className="h-12 w-12 text-red-500 mx-auto mb-4" />
557+
<AlertTriangle className="h-12 w-12 text-red-500 dark:text-red-400 mx-auto mb-4" />
558558
<p className="text-destructive">Failed to load logs</p>
559559
<Button variant="outline" size="sm" onClick={() => refetch()} className="mt-2">
560560
<RotateCcw className="h-4 w-4 mr-2" />
@@ -626,7 +626,7 @@ export default function SystemLogs() {
626626
</div>
627627
<div className="col-span-1">
628628
{log.resolved ? (
629-
<Badge variant="secondary" className="bg-green-100 text-green-800">
629+
<Badge variant="secondary" className="bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400">
630630
Resolved
631631
</Badge>
632632
) : (

‎client/src/index.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,21 +27,21 @@
2727

2828
.dark {
2929
--background: 240 10% 3.9%;
30-
--foreground: 0 0% 98%;
30+
--foreground: 0 0% 88%;
3131
--card: 240 10% 3.9%;
32-
--card-foreground: 0 0% 98%;
32+
--card-foreground: 0 0% 88%;
3333
--popover: 240 10% 3.9%;
34-
--popover-foreground: 0 0% 98%;
34+
--popover-foreground: 0 0% 88%;
3535
--primary: 207 90% 54%;
36-
--primary-foreground: 211 100% 99%;
36+
--primary-foreground: 211 100% 95%;
3737
--secondary: 240 3.7% 15.9%;
38-
--secondary-foreground: 0 0% 98%;
38+
--secondary-foreground: 0 0% 88%;
3939
--muted: 240 3.7% 15.9%;
4040
--muted-foreground: 240 5% 64.9%;
4141
--accent: 273 68% 59%;
42-
--accent-foreground: 0 0% 98%;
42+
--accent-foreground: 0 0% 88%;
4343
--destructive: 0 62.8% 30.6%;
44-
--destructive-foreground: 0 0% 98%;
44+
--destructive-foreground: 0 0% 88%;
4545
--border: 240 3.7% 15.9%;
4646
--input: 240 3.7% 15.9%;
4747
--ring: 240 4.9% 83.9%;

‎client/src/pages/AnalyticsPage.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export default function AnalyticsPage() {
113113

114114
if (isLoading) {
115115
return (
116-
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
116+
<div className="min-h-screen bg-background flex items-center justify-center">
117117
<div className="text-center">
118118
<div className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
119119
<p className="text-muted-foreground">Loading analytics...</p>
@@ -124,8 +124,8 @@ export default function AnalyticsPage() {
124124

125125
if (error || !analytics) {
126126
return (
127-
<div className="min-h-screen bg-gray-50">
128-
<header className="bg-white border-b">
127+
<div className="min-h-screen bg-background">
128+
<header className="bg-card border-b">
129129
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
130130
<div className="flex justify-between items-center py-6">
131131
<Link href="/">
@@ -144,7 +144,7 @@ export default function AnalyticsPage() {
144144
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
145145
<Card>
146146
<CardContent className="text-center py-8">
147-
<AlertTriangle className="h-12 w-12 mx-auto mb-4 text-red-500" />
147+
<AlertTriangle className="h-12 w-12 mx-auto mb-4 text-red-500 dark:text-red-400" />
148148
<h3 className="text-lg font-semibold mb-2">Failed to Load Analytics</h3>
149149
<p className="text-muted-foreground">Unable to fetch analytics data.</p>
150150
</CardContent>
@@ -155,9 +155,9 @@ export default function AnalyticsPage() {
155155
}
156156

157157
return (
158-
<div className="min-h-screen bg-gray-50">
158+
<div className="min-h-screen bg-background">
159159
{/* Header */}
160-
<header className="bg-white border-b">
160+
<header className="bg-card border-b">
161161
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
162162
<div className="flex justify-between items-center py-6">
163163
<div className="flex items-center">
@@ -170,7 +170,7 @@ export default function AnalyticsPage() {
170170
<div className="flex items-center space-x-3">
171171
<BarChart3 className="h-6 w-6 text-muted-foreground" />
172172
<div>
173-
<h1 className="text-2xl font-bold text-gray-900">Analytics & Reports</h1>
173+
<h1 className="text-2xl font-bold text-foreground">Analytics & Reports</h1>
174174
<p className="text-sm text-muted-foreground">
175175
System insights and data analysis {isLoading && <span className="inline-flex items-center"><Clock className="h-3 w-3 ml-2 animate-spin" /></span>}
176176
</p>
@@ -227,9 +227,9 @@ export default function AnalyticsPage() {
227227
<div className="text-2xl font-bold">{analytics.overview.totalServers}</div>
228228
<div className="flex items-center text-xs text-muted-foreground">
229229
{analytics.overview.serverGrowthRate > 0 ? (
230-
<TrendingUp className="h-3 w-3 mr-1 text-green-600" />
230+
<TrendingUp className="h-3 w-3 mr-1 text-green-600 dark:text-green-400" />
231231
) : (
232-
<TrendingDown className="h-3 w-3 mr-1 text-red-600" />
232+
<TrendingDown className="h-3 w-3 mr-1 text-red-600 dark:text-red-400" />
233233
)}
234234
{Math.abs(analytics.overview.serverGrowthRate)}% vs last period
235235
</div>
@@ -262,9 +262,9 @@ export default function AnalyticsPage() {
262262
<div className="text-2xl font-bold">{analytics.overview.totalUsers.toLocaleString()}</div>
263263
<div className="flex items-center text-xs text-muted-foreground">
264264
{analytics.overview.userGrowthRate > 0 ? (
265-
<TrendingUp className="h-3 w-3 mr-1 text-green-600" />
265+
<TrendingUp className="h-3 w-3 mr-1 text-green-600 dark:text-green-400" />
266266
) : (
267-
<TrendingDown className="h-3 w-3 mr-1 text-red-600" />
267+
<TrendingDown className="h-3 w-3 mr-1 text-red-600 dark:text-red-400" />
268268
)}
269269
{Math.abs(analytics.overview.userGrowthRate)}% growth
270270
</div>

‎client/src/pages/DashboardPage.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,28 +26,28 @@ export default function DashboardPage() {
2626
const getHealthStatusIcon = (status: string) => {
2727
switch (status) {
2828
case 'healthy':
29-
return <CheckCircle className="h-4 w-4 text-green-500" />;
29+
return <CheckCircle className="h-4 w-4 text-green-500 dark:text-green-400" />;
3030
case 'degraded':
31-
return <AlertCircle className="h-4 w-4 text-yellow-500" />;
31+
return <AlertCircle className="h-4 w-4 text-yellow-500 dark:text-yellow-400" />;
3232
case 'critical':
33-
return <XCircle className="h-4 w-4 text-red-500" />;
33+
return <XCircle className="h-4 w-4 text-red-500 dark:text-red-400" />;
3434
default:
35-
return <AlertTriangle className="h-4 w-4 text-gray-500" />;
35+
return <AlertTriangle className="h-4 w-4 text-gray-500 dark:text-gray-400" />;
3636
}
3737
};
3838

3939
const getHealthStatusColor = (status: string) => {
4040
switch (status) {
4141
case 'excellent':
42-
return 'text-green-600';
42+
return 'text-green-600 dark:text-green-400';
4343
case 'good':
44-
return 'text-blue-600';
44+
return 'text-blue-600 dark:text-blue-400';
4545
case 'fair':
46-
return 'text-yellow-600';
46+
return 'text-yellow-600 dark:text-yellow-400';
4747
case 'poor':
48-
return 'text-red-600';
48+
return 'text-red-600 dark:text-red-400';
4949
default:
50-
return 'text-gray-600';
50+
return 'text-gray-600 dark:text-gray-400';
5151
}
5252
};
5353

‎client/src/pages/MonitoringPage.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -30,25 +30,25 @@ export default function MonitoringPage() {
3030

3131
const getStatusIcon = (level: string, resolved: boolean) => {
3232
if (resolved) {
33-
return <CheckCircle className="h-4 w-4 text-green-500" />;
33+
return <CheckCircle className="h-4 w-4 text-green-500 dark:text-green-400" />;
3434
}
3535

3636
switch (level) {
3737
case 'critical':
38-
return <XCircle className="h-4 w-4 text-red-500" />;
38+
return <XCircle className="h-4 w-4 text-red-500 dark:text-red-400" />;
3939
case 'error':
40-
return <AlertCircle className="h-4 w-4 text-orange-500" />;
40+
return <AlertCircle className="h-4 w-4 text-orange-500 dark:text-orange-400" />;
4141
case 'warning':
42-
return <AlertTriangle className="h-4 w-4 text-yellow-500" />;
42+
return <AlertTriangle className="h-4 w-4 text-yellow-500 dark:text-yellow-400" />;
4343
default:
44-
return <Clock className="h-4 w-4 text-blue-500" />;
44+
return <Clock className="h-4 w-4 text-blue-500 dark:text-blue-400" />;
4545
}
4646
};
4747

4848
return (
49-
<div className="min-h-screen bg-gray-50">
49+
<div className="min-h-screen bg-background">
5050
{/* Header */}
51-
<header className="bg-white border-b">
51+
<header className="bg-card border-b">
5252
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
5353
<div className="flex justify-between items-center py-6">
5454
<div className="flex items-center">
@@ -58,7 +58,7 @@ export default function MonitoringPage() {
5858
Back to Dashboard
5959
</Button>
6060
</Link>
61-
<h1 className="text-3xl font-bold text-gray-900">System Monitoring</h1>
61+
<h1 className="text-3xl font-bold text-foreground">System Monitoring</h1>
6262
</div>
6363
<div className="flex items-center space-x-4">
6464
<Button onClick={logout} variant="outline">
@@ -90,7 +90,7 @@ export default function MonitoringPage() {
9090
<CardTitle className="text-sm font-medium">Critical Issues</CardTitle>
9191
</CardHeader>
9292
<CardContent>
93-
<div className="text-2xl font-bold text-red-600">{metrics.logs.unresolved.critical}</div>
93+
<div className="text-2xl font-bold text-red-600 dark:text-red-400">{metrics.logs.unresolved.critical}</div>
9494
<p className="text-xs text-muted-foreground">Unresolved</p>
9595
</CardContent>
9696
</Card>
@@ -100,7 +100,7 @@ export default function MonitoringPage() {
100100
<CardTitle className="text-sm font-medium">Error Count</CardTitle>
101101
</CardHeader>
102102
<CardContent>
103-
<div className="text-2xl font-bold text-orange-600">{metrics.logs.unresolved.error}</div>
103+
<div className="text-2xl font-bold text-orange-600 dark:text-orange-400">{metrics.logs.unresolved.error}</div>
104104
<p className="text-xs text-muted-foreground">Unresolved</p>
105105
</CardContent>
106106
</Card>

‎client/src/pages/SecurityPage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ export default function SecurityPage() {
1212
const { logout } = useAuth();
1313

1414
return (
15-
<div className="min-h-screen bg-gray-50">
15+
<div className="min-h-screen bg-background">
1616
{/* Header */}
17-
<header className="bg-white border-b">
17+
<header className="bg-card border-b">
1818
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
1919
<div className="flex justify-between items-center py-6">
2020
<div className="flex items-center">
@@ -27,7 +27,7 @@ export default function SecurityPage() {
2727
<div className="flex items-center space-x-3">
2828
<Shield className="h-6 w-6 text-muted-foreground" />
2929
<div>
30-
<h1 className="text-2xl font-bold text-gray-900">Security</h1>
30+
<h1 className="text-2xl font-bold text-foreground">Security</h1>
3131
<p className="text-sm text-muted-foreground">Audit logs and security events</p>
3232
</div>
3333
</div>

‎client/src/pages/ServerDetailPage.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -184,16 +184,16 @@ export default function ServerDetailPage() {
184184

185185
if (isLoading) {
186186
return (
187-
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
187+
<div className="min-h-screen bg-background flex items-center justify-center">
188188
<div className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
189189
</div>
190190
);
191191
}
192192

193193
if (error || !server) {
194194
return (
195-
<div className="min-h-screen bg-gray-50">
196-
<header className="bg-white border-b">
195+
<div className="min-h-screen bg-background">
196+
<header className="bg-card border-b">
197197
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
198198
<div className="flex justify-between items-center py-6">
199199
<Link href="/servers">
@@ -212,7 +212,7 @@ export default function ServerDetailPage() {
212212
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
213213
<Card>
214214
<CardContent className="text-center py-8">
215-
<AlertTriangle className="h-12 w-12 mx-auto mb-4 text-red-500" />
215+
<AlertTriangle className="h-12 w-12 mx-auto mb-4 text-red-500 dark:text-red-400" />
216216
<h3 className="text-lg font-semibold mb-2">Server Not Found</h3>
217217
<p className="text-muted-foreground">The requested server could not be found.</p>
218218
</CardContent>
@@ -223,9 +223,9 @@ export default function ServerDetailPage() {
223223
}
224224

225225
return (
226-
<div className="min-h-screen bg-gray-50">
226+
<div className="min-h-screen bg-background">
227227
{/* Header */}
228-
<header className="bg-white border-b">
228+
<header className="bg-card border-b">
229229
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
230230
<div className="flex justify-between items-center py-6">
231231
<div className="flex items-center">
@@ -238,7 +238,7 @@ export default function ServerDetailPage() {
238238
<div className="flex items-center space-x-3">
239239
<Server className="h-6 w-6 text-muted-foreground" />
240240
<div>
241-
<h1 className="text-2xl font-bold text-gray-900">{server.serverName}</h1>
241+
<h1 className="text-2xl font-bold text-foreground">{server.serverName}</h1>
242242
<p className="text-sm text-muted-foreground">{server.customDomain}</p>
243243
</div>
244244
</div>
@@ -387,7 +387,7 @@ export default function ServerDetailPage() {
387387
{getDomainStatusBadge(server.customDomain_status)}
388388
</div>
389389
{server.customDomain_error && (
390-
<p className="text-sm text-red-600 mt-1">{server.customDomain_error}</p>
390+
<p className="text-sm text-red-600 dark:text-red-400 mt-1">{server.customDomain_error}</p>
391391
)}
392392
{server.customDomain_lastChecked && (
393393
<p className="text-xs text-muted-foreground mt-1">

0 commit comments

Comments
 (0)