Skip to content

Commit 1771b0d

Browse files
Shaurya2k06Shaurya2k06
committed
Style: UI Update wrt Neobrutalist UI
1 parent 160e215 commit 1771b0d

22 files changed

Lines changed: 1431 additions & 1605 deletions

‎client/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="en" class="dark">
2+
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
@@ -8,7 +8,7 @@
88
<title>DCT Protocol — Delegated Capability Tokens</title>
99
<link rel="preconnect" href="https://fonts.googleapis.com">
1010
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
11+
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
1212
</head>
1313
<body>
1414
<div id="root"></div>

‎client/package-lock.json‎

Lines changed: 93 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@hookform/resolvers": "^5.2.2",
1314
"@radix-ui/react-slot": "^1.2.4",
1415
"@xyflow/react": "^12.10.2",
1516
"axios": "^1.15.0",
@@ -20,10 +21,14 @@
2021
"lucide-react": "^0.555.0",
2122
"react": "^19.2.0",
2223
"react-dom": "^19.2.0",
24+
"react-hook-form": "^7.72.1",
2325
"react-router-dom": "^7.14.0",
26+
"sonner": "^2.0.7",
2427
"tailwind-merge": "^3.4.0",
2528
"tailwindcss-animate": "^1.0.7",
26-
"tlsn-js": "^0.1.0-alpha.12.0"
29+
"tlsn-js": "^0.1.0-alpha.12.0",
30+
"zod": "^4.3.6",
31+
"zustand": "^5.0.12"
2732
},
2833
"devDependencies": {
2934
"@eslint/js": "^9.39.1",

‎client/src/App.jsx‎

Lines changed: 20 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,21 @@ import LiveDemo from "./pages/LiveDemo";
66
import LayerConsole from "./pages/LayerConsole";
77
import Landing from "./pages/Landing";
88

9-
/** Landing page at root, sidebar-wrapped app under /app/* */
10-
function AppShell() {
9+
function ShellLayout({ children }) {
1110
return (
12-
<div className="min-h-screen bg-background bg-grid dark">
11+
<div className="min-h-screen bg-nb-bg">
1312
<Sidebar />
14-
<main className="ml-64 p-8 max-w-[1400px]">
13+
<main className="max-w-[1400px] md:ml-64 px-4 pt-6 pb-24 sm:px-6 sm:pt-8 md:pb-8 lg:px-10">
14+
{children}
15+
</main>
16+
</div>
17+
);
18+
}
19+
20+
/** Landing page at root, sidebar-wrapped app under /app/* */
21+
function AppShellRoutes() {
22+
return (
23+
<ShellLayout>
1524
<Routes>
1625
<Route path="tlsn" element={<TlsnDemo />} />
1726
<Route path="live-demo" element={<LiveDemo />} />
@@ -20,49 +29,21 @@ function AppShell() {
2029
{/* default inner page */}
2130
<Route index element={<TlsnDemo />} />
2231
</Routes>
23-
</main>
24-
</div>
32+
</ShellLayout>
2533
);
2634
}
2735

2836
function App() {
2937
return (
30-
<div className="dark">
38+
<div className="bg-nb-bg">
3139
<Routes>
3240
<Route path="/" element={<Landing />} />
3341
{/* Keep legacy direct routes working */}
34-
<Route path="/live-demo" element={
35-
<div className="min-h-screen bg-background bg-grid dark">
36-
<Sidebar />
37-
<main className="ml-64 p-8 max-w-[1400px]">
38-
<LiveDemo />
39-
</main>
40-
</div>
41-
} />
42-
<Route path="/demo" element={
43-
<div className="min-h-screen bg-background bg-grid dark">
44-
<Sidebar />
45-
<main className="ml-64 p-8 max-w-[1400px]">
46-
<Demo />
47-
</main>
48-
</div>
49-
} />
50-
<Route path="/tlsn" element={
51-
<div className="min-h-screen bg-background bg-grid dark">
52-
<Sidebar />
53-
<main className="ml-64 p-8 max-w-[1400px]">
54-
<TlsnDemo />
55-
</main>
56-
</div>
57-
} />
58-
<Route path="/layer" element={
59-
<div className="min-h-screen bg-background bg-grid dark">
60-
<Sidebar />
61-
<main className="ml-64 p-8 max-w-[1400px]">
62-
<LayerConsole />
63-
</main>
64-
</div>
65-
} />
42+
<Route path="/live-demo" element={<ShellLayout><LiveDemo /></ShellLayout>} />
43+
<Route path="/demo" element={<ShellLayout><Demo /></ShellLayout>} />
44+
<Route path="/tlsn" element={<ShellLayout><TlsnDemo /></ShellLayout>} />
45+
<Route path="/layer" element={<ShellLayout><LayerConsole /></ShellLayout>} />
46+
<Route path="/app/*" element={<AppShellRoutes />} />
6647
</Routes>
6748
</div>
6849
);

‎client/src/components/cards/ActivityCard.jsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ const eventIcons = {
88
};
99

1010
const eventColors = {
11-
delegation: "text-[hsl(199,89%,48%)] bg-[hsl(199,89%,48%)]/10",
12-
revocation: "text-[hsl(0,72%,51%)] bg-[hsl(0,72%,51%)]/10",
13-
validation: "text-[hsl(142,76%,36%)] bg-[hsl(142,76%,36%)]/10",
14-
registration: "text-[hsl(265,89%,65%)] bg-[hsl(265,89%,65%)]/10",
11+
delegation: "text-nb-accent-2 bg-nb-accent-2/15",
12+
revocation: "text-nb-error bg-nb-error/15",
13+
validation: "text-nb-ok bg-nb-ok/15",
14+
registration: "text-purple-600 bg-purple-500/15",
1515
};
1616

1717
export default function ActivityCard({ type, message, txHash, timestamp }) {
@@ -20,13 +20,13 @@ export default function ActivityCard({ type, message, txHash, timestamp }) {
2020
const basescanUrl = import.meta.env.VITE_BASESCAN_URL || "https://sepolia.basescan.org";
2121

2222
return (
23-
<div className="flex items-center gap-4 p-4 rounded-xl glass hover:bg-white/[0.07] transition-colors group">
24-
<div className={`w-10 h-10 rounded-lg flex items-center justify-center shrink-0 ${colorClass}`}>
23+
<div className="group flex items-center gap-4 rounded-nb p-4 border-2 border-nb-ink bg-nb-card hover:bg-nb-accent/10 hover:-translate-y-0.5 active:translate-y-0 transition-all">
24+
<div className={`w-10 h-10 rounded-nb border-2 border-nb-ink flex items-center justify-center shrink-0 ${colorClass}`}>
2525
<Icon className="w-5 h-5" />
2626
</div>
2727
<div className="flex-1 min-w-0">
28-
<p className="text-sm font-medium truncate">{message}</p>
29-
<p className="text-xs text-muted-foreground mt-0.5">
28+
<p className="text-sm font-display font-semibold truncate text-nb-ink">{message}</p>
29+
<p className="mt-0.5 text-xs text-nb-ink/50">
3030
{timestamp || "Just now"}
3131
</p>
3232
</div>
@@ -35,7 +35,7 @@ export default function ActivityCard({ type, message, txHash, timestamp }) {
3535
href={`${basescanUrl}/tx/${txHash}`}
3636
target="_blank"
3737
rel="noopener noreferrer"
38-
className="text-muted-foreground hover:text-[hsl(199,89%,48%)] transition-colors opacity-0 group-hover:opacity-100"
38+
className="text-nb-ink/40 hover:text-nb-accent transition-colors opacity-0 group-hover:opacity-100"
3939
>
4040
<ExternalLink className="w-4 h-4" />
4141
</a>

0 commit comments

Comments
 (0)