Skip to content

Commit ade1873

Browse files
andrelandgrafandrelandgraf
committed
fix theming
1 parent 76179d1 commit ade1873

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

80 files changed

+7377
-2711
lines changed

‎dashboard/app/font.js

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎dashboard/app/globals.css

Lines changed: 92 additions & 176 deletions
Original file line numberDiff line numberDiff line change
@@ -3,199 +3,115 @@
33
@custom-variant dark (&:is(.dark *));
44

55
@theme inline {
6-
--color-background: var(--background);
7-
--color-foreground: var(--foreground);
8-
--font-sans: var(--font-geist-sans);
9-
--font-mono: var(--font-geist-mono);
10-
--color-sidebar-ring: var(--sidebar-ring);
11-
--color-sidebar-border: var(--sidebar-border);
12-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
13-
--color-sidebar-accent: var(--sidebar-accent);
14-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
15-
--color-sidebar-primary: var(--sidebar-primary);
16-
--color-sidebar-foreground: var(--sidebar-foreground);
17-
--color-sidebar: var(--sidebar);
18-
--color-chart-5: var(--chart-5);
19-
--color-chart-4: var(--chart-4);
20-
--color-chart-3: var(--chart-3);
21-
--color-chart-2: var(--chart-2);
22-
--color-chart-1: var(--chart-1);
23-
--color-ring: var(--ring);
24-
--color-input: var(--input);
25-
--color-border: var(--border);
26-
--color-destructive: var(--destructive);
27-
--color-accent-foreground: var(--accent-foreground);
28-
--color-accent: var(--accent);
29-
--color-muted-foreground: var(--muted-foreground);
30-
--color-muted: var(--muted);
31-
--color-secondary-foreground: var(--secondary-foreground);
32-
--color-secondary: var(--secondary);
33-
--color-primary-foreground: var(--primary-foreground);
34-
--color-primary: var(--primary);
35-
--color-popover-foreground: var(--popover-foreground);
36-
--color-popover: var(--popover);
37-
--color-card-foreground: var(--card-foreground);
38-
--color-card: var(--card);
39-
--color-callout-foreground: var(--callout-foreground);
40-
--color-callout: var(--callout);
41-
--color-status-green: var(--status-green);
42-
--color-status-yellow: var(--status-yellow);
43-
--color-status-orange: var(--status-orange);
44-
--color-status-red: var(--status-red);
45-
--color-matched-region: var(--matched-region);
46-
--color-matched-region-foreground: var(--matched-region-foreground);
476
--radius-sm: calc(var(--radius) - 4px);
487
--radius-md: calc(var(--radius) - 2px);
498
--radius-lg: var(--radius);
509
--radius-xl: calc(var(--radius) + 4px);
10+
--color-background: var(--background);
11+
--color-foreground: var(--foreground);
12+
--color-card: var(--card);
13+
--color-card-foreground: var(--card-foreground);
14+
--color-popover: var(--popover);
15+
--color-popover-foreground: var(--popover-foreground);
16+
--color-primary: var(--primary);
17+
--color-primary-foreground: var(--primary-foreground);
18+
--color-secondary: var(--secondary);
19+
--color-secondary-foreground: var(--secondary-foreground);
20+
--color-muted: var(--muted);
21+
--color-muted-foreground: var(--muted-foreground);
22+
--color-accent: var(--accent);
23+
--color-accent-foreground: var(--accent-foreground);
24+
--color-destructive: var(--destructive);
25+
--color-border: var(--border);
26+
--color-input: var(--input);
27+
--color-ring: var(--ring);
28+
--color-chart-1: var(--chart-1);
29+
--color-chart-2: var(--chart-2);
30+
--color-chart-3: var(--chart-3);
31+
--color-chart-4: var(--chart-4);
32+
--color-chart-5: var(--chart-5);
33+
--color-sidebar: var(--sidebar);
34+
--color-sidebar-foreground: var(--sidebar-foreground);
35+
--color-sidebar-primary: var(--sidebar-primary);
36+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
37+
--color-sidebar-accent: var(--sidebar-accent);
38+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
39+
--color-sidebar-border: var(--sidebar-border);
40+
--color-sidebar-ring: var(--sidebar-ring);
5141
}
5242

5343
:root {
54-
--radius: 0.5rem;
55-
/* Light modern theme matching the screenshot */
56-
--background: #ffffff; /* White background */
57-
--foreground: #0C0D0D; /* Specified text color */
58-
--card: #ffffff;
59-
--card-foreground: #0C0D0D;
60-
--popover: #ffffff;
61-
--popover-foreground: #0C0D0D;
62-
--primary: oklch(0.3 0 0);
63-
--primary-foreground: oklch(0.98 0 0);
64-
--secondary: oklch(0.95 0 0);
65-
--secondary-foreground: oklch(0.3 0 0);
66-
--muted: oklch(0.96 0 0);
67-
--muted-foreground: oklch(0.55 0 0);
68-
--accent: oklch(0.96 0 0);
69-
--accent-foreground: oklch(0.3 0 0);
70-
--destructive: oklch(0.7 0.15 30);
71-
--destructive-foreground: oklch(1 0 0);
72-
--border: oklch(0.9 0 0);
73-
--input: oklch(0.9 0 0);
74-
--ring: oklch(0.7 0 0);
75-
--callout: rgb(254 249 195); /* bg-yellow-50 */
76-
--callout-foreground: oklch(0.3 0 0);
77-
--status-green: rgb(22 163 74); /* text-green-600 */
78-
--status-yellow: rgb(202 138 4); /* text-yellow-600 */
79-
--status-orange: rgb(234 88 12); /* text-orange-600 */
80-
--status-red: rgb(220 38 38); /* text-red-600 */
81-
--matched-region: rgb(240 253 244); /* bg-green-50 */
82-
--matched-region-foreground: oklch(0.3 0 0);
83-
84-
/* Chart colors matching the screenshot */
85-
--chart-1: oklch(0.65 0.2 40); /* Orange/coral */
86-
--chart-2: oklch(0.6 0.12 180); /* Teal */
87-
--chart-3: oklch(0.4 0.07 220); /* Navy */
88-
--chart-4: oklch(0.83 0.19 85); /* Yellow */
89-
--chart-5: oklch(0.77 0.19 70); /* Orange */
90-
91-
/* Sidebar styling matching the screenshot */
92-
--sidebar: #ffffff;
93-
--sidebar-foreground: #0C0D0D;
94-
--sidebar-primary: oklch(0.3 0 0);
95-
--sidebar-primary-foreground: oklch(0.98 0 0);
96-
--sidebar-accent: oklch(0.95 0 0);
97-
--sidebar-accent-foreground: oklch(0.3 0 0);
98-
--sidebar-border: oklch(0.92 0 0);
99-
--sidebar-ring: oklch(0.7 0 0);
100-
}
101-
102-
@media (prefers-color-scheme: dark) {
103-
:root {
104-
--background: #000000; /* Black background */
105-
--foreground: #ffffff; /* White text */
106-
--card: #0C0D0D;
107-
--card-foreground: #ffffff;
108-
--popover: #0C0D0D;
109-
--popover-foreground: #ffffff;
110-
--primary: oklch(0.92 0 0);
111-
--primary-foreground: oklch(0.2 0 0);
112-
--secondary: oklch(0.27 0 0);
113-
--secondary-foreground: oklch(0.98 0 0);
114-
--muted: oklch(0.27 0 0);
115-
--muted-foreground: oklch(0.7 0 0);
116-
--accent: oklch(0.27 0 0);
117-
--accent-foreground: oklch(0.98 0 0);
118-
--destructive: oklch(0.7 0.19 22);
119-
--border: oklch(1 0 0 / 10%);
120-
--input: oklch(1 0 0 / 15%);
121-
--ring: oklch(0.55 0 0);
122-
--callout: rgb(76 29 149 / 0.2); /* dark:bg-yellow-900/20 */
123-
--callout-foreground: #ffffff;
124-
--status-green: rgb(74 222 128); /* dark:text-green-400 */
125-
--status-yellow: rgb(250 204 21); /* dark:text-yellow-400 */
126-
--status-orange: rgb(251 146 60); /* dark:text-orange-400 */
127-
--status-red: rgb(248 113 113); /* dark:text-red-400 */
128-
--matched-region: rgb(6 78 59 / 0.2); /* dark:bg-green-950/20 */
129-
--matched-region-foreground: #ffffff;
130-
131-
/* Dark mode chart colors */
132-
--chart-1: oklch(0.49 0.24 264);
133-
--chart-2: oklch(0.7 0.17 162);
134-
--chart-3: oklch(0.77 0.19 70);
135-
--chart-4: oklch(0.63 0.26 304);
136-
--chart-5: oklch(0.65 0.25 16);
137-
138-
/* Dark mode sidebar */
139-
--sidebar: #000000;
140-
--sidebar-foreground: #ffffff;
141-
--sidebar-primary: oklch(0.49 0.24 264);
142-
--sidebar-primary-foreground: oklch(0.98 0 0);
143-
--sidebar-accent: oklch(0.27 0 0);
144-
--sidebar-accent-foreground: oklch(0.98 0 0);
145-
--sidebar-border: oklch(1 0 0 / 10%);
146-
--sidebar-ring: oklch(0.55 0 0);
147-
}
44+
--radius: 0.625rem;
45+
--background: oklch(1 0 0);
46+
--foreground: oklch(0.145 0 0);
47+
--card: oklch(1 0 0);
48+
--card-foreground: oklch(0.145 0 0);
49+
--popover: oklch(1 0 0);
50+
--popover-foreground: oklch(0.145 0 0);
51+
--primary: oklch(0.205 0 0);
52+
--primary-foreground: oklch(0.985 0 0);
53+
--secondary: oklch(0.97 0 0);
54+
--secondary-foreground: oklch(0.205 0 0);
55+
--muted: oklch(0.97 0 0);
56+
--muted-foreground: oklch(0.556 0 0);
57+
--accent: oklch(0.97 0 0);
58+
--accent-foreground: oklch(0.205 0 0);
59+
--destructive: oklch(0.577 0.245 27.325);
60+
--border: oklch(0.922 0 0);
61+
--input: oklch(0.922 0 0);
62+
--ring: oklch(0.708 0 0);
63+
--chart-1: oklch(0.646 0.222 41.116);
64+
--chart-2: oklch(0.6 0.118 184.704);
65+
--chart-3: oklch(0.398 0.07 227.392);
66+
--chart-4: oklch(0.828 0.189 84.429);
67+
--chart-5: oklch(0.769 0.188 70.08);
68+
--sidebar: oklch(0.985 0 0);
69+
--sidebar-foreground: oklch(0.145 0 0);
70+
--sidebar-primary: oklch(0.205 0 0);
71+
--sidebar-primary-foreground: oklch(0.985 0 0);
72+
--sidebar-accent: oklch(0.97 0 0);
73+
--sidebar-accent-foreground: oklch(0.205 0 0);
74+
--sidebar-border: oklch(0.922 0 0);
75+
--sidebar-ring: oklch(0.708 0 0);
14876
}
14977

15078
.dark {
151-
--background: #000000; /* Black background */
152-
--foreground: #ffffff; /* White text */
153-
--card: #0C0D0D;
154-
--card-foreground: #ffffff;
155-
--popover: #0C0D0D;
156-
--popover-foreground: #ffffff;
157-
--primary: oklch(0.92 0 0);
158-
--primary-foreground: oklch(0.2 0 0);
159-
--secondary: oklch(0.27 0 0);
160-
--secondary-foreground: oklch(0.98 0 0);
161-
--muted: oklch(0.27 0 0);
162-
--muted-foreground: oklch(0.7 0 0);
163-
--accent: oklch(0.27 0 0);
164-
--accent-foreground: oklch(0.98 0 0);
165-
--destructive: oklch(0.7 0.19 22);
79+
--background: oklch(0.145 0 0);
80+
--foreground: oklch(0.985 0 0);
81+
--card: oklch(0.205 0 0);
82+
--card-foreground: oklch(0.985 0 0);
83+
--popover: oklch(0.205 0 0);
84+
--popover-foreground: oklch(0.985 0 0);
85+
--primary: oklch(0.922 0 0);
86+
--primary-foreground: oklch(0.205 0 0);
87+
--secondary: oklch(0.269 0 0);
88+
--secondary-foreground: oklch(0.985 0 0);
89+
--muted: oklch(0.269 0 0);
90+
--muted-foreground: oklch(0.708 0 0);
91+
--accent: oklch(0.269 0 0);
92+
--accent-foreground: oklch(0.985 0 0);
93+
--destructive: oklch(0.704 0.191 22.216);
16694
--border: oklch(1 0 0 / 10%);
16795
--input: oklch(1 0 0 / 15%);
168-
--ring: oklch(0.55 0 0);
169-
--callout: rgb(76 29 149 / 0.2); /* dark:bg-yellow-900/20 */
170-
--callout-foreground: #ffffff;
171-
--status-green: rgb(74 222 128); /* dark:text-green-400 */
172-
--status-yellow: rgb(250 204 21); /* dark:text-yellow-400 */
173-
--status-orange: rgb(251 146 60); /* dark:text-orange-400 */
174-
--status-red: rgb(248 113 113); /* dark:text-red-400 */
175-
--matched-region: rgb(6 78 59 / 0.2); /* dark:bg-green-950/20 */
176-
--matched-region-foreground: #ffffff;
177-
178-
/* Dark mode chart colors */
179-
--chart-1: oklch(0.49 0.24 264);
180-
--chart-2: oklch(0.7 0.17 162);
181-
--chart-3: oklch(0.77 0.19 70);
182-
--chart-4: oklch(0.63 0.26 304);
183-
--chart-5: oklch(0.65 0.25 16);
184-
185-
/* Dark mode sidebar */
186-
--sidebar: #000000;
187-
--sidebar-foreground: #ffffff;
188-
--sidebar-primary: oklch(0.49 0.24 264);
189-
--sidebar-primary-foreground: oklch(0.98 0 0);
190-
--sidebar-accent: oklch(0.27 0 0);
191-
--sidebar-accent-foreground: oklch(0.98 0 0);
96+
--ring: oklch(0.556 0 0);
97+
--chart-1: oklch(0.488 0.243 264.376);
98+
--chart-2: oklch(0.696 0.17 162.48);
99+
--chart-3: oklch(0.769 0.188 70.08);
100+
--chart-4: oklch(0.627 0.265 303.9);
101+
--chart-5: oklch(0.645 0.246 16.439);
102+
--sidebar: oklch(0.205 0 0);
103+
--sidebar-foreground: oklch(0.985 0 0);
104+
--sidebar-primary: oklch(0.488 0.243 264.376);
105+
--sidebar-primary-foreground: oklch(0.985 0 0);
106+
--sidebar-accent: oklch(0.269 0 0);
107+
--sidebar-accent-foreground: oklch(0.985 0 0);
192108
--sidebar-border: oklch(1 0 0 / 10%);
193-
--sidebar-ring: oklch(0.55 0 0);
109+
--sidebar-ring: oklch(0.556 0 0);
194110
}
195111

196112
@layer base {
197113
* {
198-
@apply border-border;
114+
@apply border-border outline-ring/50;
199115
}
200116
body {
201117
@apply bg-background text-foreground;

‎dashboard/app/layout.tsx

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Metadata } from "next";
22
import { Geist, Geist_Mono } from "next/font/google";
33
import "./globals.css";
4+
import { ThemeProvider } from "@/components/theme-provider";
45

56
const geistSans = Geist({
67
variable: "--font-geist-sans",
@@ -13,8 +14,9 @@ const geistMono = Geist_Mono({
1314
});
1415

1516
export const metadata: Metadata = {
16-
title: "Create Next App",
17-
description: "Generated by create next app",
17+
title: "Neon Latency Dashboard",
18+
description:
19+
"30-day average latency of Neon databases from different serverless functions.",
1820
};
1921

2022
export default function RootLayout({
@@ -23,11 +25,18 @@ export default function RootLayout({
2325
children: React.ReactNode;
2426
}>) {
2527
return (
26-
<html lang="en">
28+
<html lang="en" suppressHydrationWarning>
2729
<body
2830
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
2931
>
30-
{children}
32+
<ThemeProvider
33+
attribute="class"
34+
defaultTheme="system"
35+
enableSystem
36+
disableTransitionOnChange
37+
>
38+
{children}
39+
</ThemeProvider>
3140
</body>
3241
</html>
3342
);

‎dashboard/app/page.tsx

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
1-
import { BenchmarkDashboard } from "@/components/benchmark-dashboard"
2-
import { getAllDatabases, getAllFunctions, getLast30DaysAvgLatency } from "@/lib/db"
1+
import { BenchmarkDashboard } from "@/components/benchmark-dashboard";
2+
import {
3+
getAllDatabases,
4+
getAllFunctions,
5+
getLast30DaysAvgLatency,
6+
} from "@/lib/db";
37

48
// Revalidate the page every 15 minutes
59
export const revalidate = 900; // 15 minutes in seconds
610

711
export default async function Home() {
8-
const [functions, databases, stats] = await Promise.all([getAllFunctions(), getAllDatabases(), getLast30DaysAvgLatency()]);
12+
const [functions, databases, stats] = await Promise.all([
13+
getAllFunctions(),
14+
getAllDatabases(),
15+
getLast30DaysAvgLatency(),
16+
]);
917

1018
return (
1119
<main>
12-
<BenchmarkDashboard
20+
<BenchmarkDashboard
1321
initialDatabases={databases}
1422
initialFunctions={functions}
1523
initialStats={stats}

‎dashboard/components.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,4 @@
1818
"hooks": "@/hooks"
1919
},
2020
"iconLibrary": "lucide"
21-
}
21+
}

0 commit comments

Comments
 (0)