Skip to content

Commit e841a72

Browse files
author
Matthew Valancy
committed
Fix dark theme consistency across all pages
- Updated Ontology, Agents, Analytics, Backend, Settings pages - Fixed GraphManagement, NodeList, Login, GraphView pages - Consistent dark theme with bg-gray-900/800 backgrounds - Updated text colors to gray-100/400 for proper contrast - Changed accent colors from blue to green for consistency - Fixed form elements, badges, and interactive components - Improved system architecture diagram readability
1 parent fca9406 commit e841a72

10 files changed

Lines changed: 394 additions & 394 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ GraphDone reimagines project management as a collaborative graph where work flow
2020
- 🎯 **Spherical priority model** - Ideas migrate from periphery to center based on community validation
2121
- 💰 **Accessible pricing** - $5/user/month with full-featured free tier
2222

23-
[Read our full philosophy](./philosophy.md)
23+
[Read our full philosophy](./docs/philosophy.md)
2424

2525
## How GraphDone Works: A Visual Deep Dive
2626

‎packages/web/src/pages/Agents.tsx‎

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,10 @@ export function Agents() {
7575

7676
const getStatusColor = (status: Agent['status']) => {
7777
switch (status) {
78-
case 'active': return 'text-green-600 bg-green-50 border-green-200';
79-
case 'paused': return 'text-yellow-600 bg-yellow-50 border-yellow-200';
80-
case 'error': return 'text-red-600 bg-red-50 border-red-200';
81-
case 'idle': return 'text-gray-600 bg-gray-50 border-gray-200';
78+
case 'active': return 'text-green-400 bg-green-900 border-green-700';
79+
case 'paused': return 'text-yellow-400 bg-yellow-900 border-yellow-700';
80+
case 'error': return 'text-red-400 bg-red-900 border-red-700';
81+
case 'idle': return 'text-gray-400 bg-gray-700 border-gray-600';
8282
}
8383
};
8484

@@ -99,11 +99,11 @@ export function Agents() {
9999
return (
100100
<div className="h-screen flex flex-col">
101101
{/* Header */}
102-
<div className="bg-white border-b border-gray-200 px-6 py-4">
102+
<div className="bg-gray-900 border-b border-gray-700 px-6 py-4">
103103
<div className="flex items-center justify-between">
104104
<div>
105-
<h1 className="text-2xl font-bold text-gray-900">AI Agents</h1>
106-
<p className="text-sm text-gray-500 mt-1">
105+
<h1 className="text-2xl font-bold text-gray-100">AI Agents</h1>
106+
<p className="text-sm text-gray-400 mt-1">
107107
Collaborate with AI agents as peers in your work graph
108108
</p>
109109
</div>
@@ -129,15 +129,15 @@ export function Agents() {
129129
</div>
130130

131131
{/* Tabs */}
132-
<div className="bg-white border-b border-gray-200">
132+
<div className="bg-gray-900 border-b border-gray-700">
133133
<div className="px-6">
134134
<nav className="flex space-x-8">
135135
<button
136136
onClick={() => setActiveTab('active')}
137137
className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
138138
activeTab === 'active'
139-
? 'border-blue-500 text-blue-600'
140-
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
139+
? 'border-green-500 text-green-400'
140+
: 'border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-600'
141141
}`}
142142
>
143143
<Activity className="h-4 w-4 inline mr-2" />
@@ -147,8 +147,8 @@ export function Agents() {
147147
onClick={() => setActiveTab('available')}
148148
className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
149149
activeTab === 'available'
150-
? 'border-blue-500 text-blue-600'
151-
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
150+
? 'border-green-500 text-green-400'
151+
: 'border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-600'
152152
}`}
153153
>
154154
Available ({mockAgents.length})
@@ -157,8 +157,8 @@ export function Agents() {
157157
onClick={() => setActiveTab('marketplace')}
158158
className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
159159
activeTab === 'marketplace'
160-
? 'border-blue-500 text-blue-600'
161-
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
160+
? 'border-green-500 text-green-400'
161+
: 'border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-600'
162162
}`}
163163
>
164164
Marketplace
@@ -174,9 +174,9 @@ export function Agents() {
174174
<div className="space-y-6">
175175
{/* Current Graph Context */}
176176
{currentGraph && (
177-
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
178-
<h3 className="font-medium text-blue-900 mb-2">Current Graph: {currentGraph.name}</h3>
179-
<p className="text-blue-700 text-sm">
177+
<div className="bg-green-900 border border-green-700 rounded-lg p-4">
178+
<h3 className="font-medium text-green-300 mb-2">Current Graph: {currentGraph.name}</h3>
179+
<p className="text-green-400 text-sm">
180180
Agents shown below are active in this graph or available system-wide.
181181
</p>
182182
</div>
@@ -185,65 +185,65 @@ export function Agents() {
185185
{/* Active Agents */}
186186
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
187187
{activeAgents.map((agent) => (
188-
<div key={agent.id} className="bg-white border border-gray-200 rounded-lg p-6">
188+
<div key={agent.id} className="bg-gray-800 border border-gray-700 rounded-lg p-6">
189189
<div className="flex items-center justify-between mb-4">
190190
<div className="flex items-center space-x-3">
191-
<div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-lg">
191+
<div className="w-10 h-10 bg-green-900 rounded-lg flex items-center justify-center text-lg">
192192
{getTypeIcon(agent.type)}
193193
</div>
194194
<div>
195-
<h3 className="font-semibold text-gray-900">{agent.name}</h3>
195+
<h3 className="font-semibold text-gray-100">{agent.name}</h3>
196196
<div className="flex items-center space-x-2">
197197
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium border ${getStatusColor(agent.status)}`}>
198198
{agent.status}
199199
</span>
200-
<span className="text-xs text-gray-500">{agent.type}</span>
200+
<span className="text-xs text-gray-400">{agent.type}</span>
201201
</div>
202202
</div>
203203
</div>
204204

205205
<div className="flex items-center space-x-1">
206-
<button className="p-2 text-gray-400 hover:text-gray-600 transition-colors">
206+
<button className="p-2 text-gray-400 hover:text-gray-300 transition-colors">
207207
<Eye className="h-4 w-4" />
208208
</button>
209209
{agent.status === 'active' ? (
210-
<button className="p-2 text-gray-400 hover:text-yellow-600 transition-colors">
210+
<button className="p-2 text-gray-400 hover:text-yellow-400 transition-colors">
211211
<Pause className="h-4 w-4" />
212212
</button>
213213
) : (
214-
<button className="p-2 text-gray-400 hover:text-green-600 transition-colors">
214+
<button className="p-2 text-gray-400 hover:text-green-400 transition-colors">
215215
<Play className="h-4 w-4" />
216216
</button>
217217
)}
218-
<button className="p-2 text-gray-400 hover:text-red-600 transition-colors">
218+
<button className="p-2 text-gray-400 hover:text-red-400 transition-colors">
219219
<Trash2 className="h-4 w-4" />
220220
</button>
221221
</div>
222222
</div>
223223

224-
<p className="text-gray-600 text-sm mb-4">{agent.description}</p>
224+
<p className="text-gray-300 text-sm mb-4">{agent.description}</p>
225225

226226
<div className="space-y-3">
227227
<div className="flex items-center justify-between text-sm">
228-
<span className="text-gray-500">Last Activity:</span>
229-
<span className="text-gray-900">{agent.lastActivity}</span>
228+
<span className="text-gray-400">Last Activity:</span>
229+
<span className="text-gray-100">{agent.lastActivity}</span>
230230
</div>
231231

232232
<div className="flex items-center justify-between text-sm">
233-
<span className="text-gray-500">Actions Today:</span>
234-
<span className="text-gray-900">{agent.actionsToday}</span>
233+
<span className="text-gray-400">Actions Today:</span>
234+
<span className="text-gray-100">{agent.actionsToday}</span>
235235
</div>
236236

237237
<div className="flex items-center justify-between text-sm">
238-
<span className="text-gray-500">Connected Graphs:</span>
239-
<span className="text-gray-900">{agent.connectedGraphs.length}</span>
238+
<span className="text-gray-400">Connected Graphs:</span>
239+
<span className="text-gray-100">{agent.connectedGraphs.length}</span>
240240
</div>
241241

242242
<div>
243-
<span className="text-sm text-gray-500 block mb-2">Capabilities:</span>
243+
<span className="text-sm text-gray-400 block mb-2">Capabilities:</span>
244244
<div className="flex flex-wrap gap-1">
245245
{agent.capabilities.map((capability) => (
246-
<span key={capability} className="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded">
246+
<span key={capability} className="bg-gray-700 text-gray-300 text-xs px-2 py-1 rounded">
247247
{capability}
248248
</span>
249249
))}
@@ -257,8 +257,8 @@ export function Agents() {
257257
{activeAgents.length === 0 && (
258258
<div className="text-center py-12">
259259
<Bot className="h-16 w-16 mx-auto text-gray-300 mb-4" />
260-
<h3 className="text-lg font-medium text-gray-900 mb-2">No Active Agents</h3>
261-
<p className="text-gray-500 mb-4">
260+
<h3 className="text-lg font-medium text-gray-100 mb-2">No Active Agents</h3>
261+
<p className="text-gray-400 mb-4">
262262
{currentGraph
263263
? `No agents are currently active in "${currentGraph.name}"`
264264
: 'Select a graph to see active agents'
@@ -276,33 +276,33 @@ export function Agents() {
276276
{activeTab === 'available' && (
277277
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
278278
{mockAgents.map((agent) => (
279-
<div key={agent.id} className="bg-white border border-gray-200 rounded-lg p-6">
279+
<div key={agent.id} className="bg-gray-800 border border-gray-700 rounded-lg p-6">
280280
<div className="flex items-center justify-between mb-4">
281281
<div className="flex items-center space-x-3">
282-
<div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-lg">
282+
<div className="w-10 h-10 bg-green-900 rounded-lg flex items-center justify-center text-lg">
283283
{getTypeIcon(agent.type)}
284284
</div>
285285
<div>
286-
<h3 className="font-semibold text-gray-900">{agent.name}</h3>
286+
<h3 className="font-semibold text-gray-100">{agent.name}</h3>
287287
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium border ${getStatusColor(agent.status)}`}>
288288
{agent.status}
289289
</span>
290290
</div>
291291
</div>
292292

293293
<div className="flex items-center space-x-1">
294-
<button className="p-2 text-gray-400 hover:text-gray-600 transition-colors">
294+
<button className="p-2 text-gray-400 hover:text-gray-300 transition-colors">
295295
<Eye className="h-4 w-4" />
296296
</button>
297-
<button className="p-2 text-gray-400 hover:text-green-600 transition-colors">
297+
<button className="p-2 text-gray-400 hover:text-green-400 transition-colors">
298298
<Play className="h-4 w-4" />
299299
</button>
300300
</div>
301301
</div>
302302

303-
<p className="text-gray-600 text-sm mb-4">{agent.description}</p>
303+
<p className="text-gray-300 text-sm mb-4">{agent.description}</p>
304304

305-
<div className="text-sm text-gray-500">
305+
<div className="text-sm text-gray-400">
306306
{agent.owner === 'system' ? 'System Agent' : `Created by ${agent.owner}`}
307307
</div>
308308
</div>
@@ -313,8 +313,8 @@ export function Agents() {
313313
{activeTab === 'marketplace' && (
314314
<div className="text-center py-12">
315315
<Bot className="h-16 w-16 mx-auto text-gray-300 mb-4" />
316-
<h3 className="text-lg font-medium text-gray-900 mb-2">Agent Marketplace</h3>
317-
<p className="text-gray-500 mb-4">
316+
<h3 className="text-lg font-medium text-gray-100 mb-2">Agent Marketplace</h3>
317+
<p className="text-gray-400 mb-4">
318318
Discover and install community-created AI agents
319319
</p>
320320
<button className="btn btn-primary">

0 commit comments

Comments
 (0)