Skip to content

Commit be15e06

Browse files
danshalev7danshalev7
authored
Merge pull request #357 from FalkorDB/implement-clean-slate-theme-system
Implement Clean Slate theme system
2 parents 132b093 + c36f747 commit be15e06

File tree

17 files changed

+444
-446
lines changed

17 files changed

+444
-446
lines changed

‎app/src/components/SuggestionCards.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const SuggestionCards = ({ suggestions, onSelect, disabled = false }: Suggestion
1212
{suggestions.map((suggestion) => (
1313
<Card
1414
key={suggestion}
15-
className={`bg-gray-800 border-gray-600 ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-purple-500/50 transition-all duration-200 cursor-pointer'}`}
15+
className={`bg-card border-border ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-purple-500/50 transition-all duration-200 cursor-pointer'}`}
1616
onClick={disabled ? undefined : () => onSelect(suggestion)}
1717
role="button"
1818
tabIndex={disabled ? -1 : 0}
@@ -26,7 +26,7 @@ const SuggestionCards = ({ suggestions, onSelect, disabled = false }: Suggestion
2626
}}
2727
>
2828
<CardContent className="p-2 sm:p-4">
29-
<div className="text-gray-300 text-xs sm:text-sm text-center line-clamp-2">
29+
<div className="text-muted-foreground text-xs sm:text-sm text-center line-clamp-2">
3030
{suggestion}
3131
</div>
3232
</CardContent>

‎app/src/components/chat/ChatInterface.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,9 @@ const ChatInterface = ({ className, disabled = false, onProcessingChange }: Chat
6363
<span className="text-white text-xs font-bold">QW</span>
6464
</div>
6565
<div className="flex-1 min-w-0 space-y-2">
66-
<Skeleton className="h-4 w-3/4 bg-gray-700" />
67-
<Skeleton className="h-4 w-1/2 bg-gray-700" />
68-
<Skeleton className="h-4 w-2/3 bg-gray-700" />
66+
<Skeleton className="h-4 w-3/4 bg-muted" />
67+
<Skeleton className="h-4 w-1/2 bg-muted" />
68+
<Skeleton className="h-4 w-2/3 bg-muted" />
6969
</div>
7070
</div>
7171
</div>
@@ -489,7 +489,7 @@ const ChatInterface = ({ className, disabled = false, onProcessingChange }: Chat
489489
};
490490

491491
return (
492-
<div className={cn("flex flex-col h-full bg-gray-900", className)} data-testid="chat-interface">
492+
<div className={cn("flex flex-col h-full bg-background", className)} data-testid="chat-interface">
493493
{/* Messages Area */}
494494
<div ref={chatContainerRef} className="flex-1 overflow-y-auto scrollbar-hide overflow-x-hidden" data-testid="chat-messages-container">
495495
<div className="space-y-6 py-6 max-w-full">
@@ -515,7 +515,7 @@ const ChatInterface = ({ className, disabled = false, onProcessingChange }: Chat
515515
</div>
516516

517517
{/* Bottom Section with Suggestions and Input */}
518-
<div className="border-t border-gray-700 bg-gray-900">
518+
<div className="border-t border-border bg-background">
519519
<div className="p-6">
520520
{/* Suggestion Cards - Only show for DEMO_CRM database */}
521521
{(selectedGraph?.id === 'DEMO_CRM' || selectedGraph?.name === 'DEMO_CRM') && (
@@ -537,13 +537,13 @@ const ChatInterface = ({ className, disabled = false, onProcessingChange }: Chat
537537
{isProcessing && (
538538
<div className="flex items-center justify-center gap-2 mt-2" data-testid="processing-query-indicator">
539539
<LoadingSpinner size="sm" />
540-
<span className="text-gray-400 text-sm">Processing your query...</span>
540+
<span className="text-muted-foreground text-sm">Processing your query...</span>
541541
</div>
542542
)}
543543

544544
{/* Footer */}
545545
<div className="text-center mt-4">
546-
<p className="text-gray-500 text-sm">
546+
<p className="text-muted-foreground text-sm">
547547
Powered by <a href="https://falkordb.com" target="_blank">FalkorDB</a>
548548
</p>
549549
</div>

‎app/src/components/chat/ChatMessage.tsx‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -72,20 +72,20 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
7272

7373
<div className="space-y-3">
7474
<div>
75-
<p className="text-gray-300 text-sm mb-2">
75+
<p className="text-foreground text-sm mb-2">
7676
This operation will perform a <span className={`font-semibold ${isHighRisk ? 'text-red-400' : 'text-yellow-400'}`}>{operationType}</span> query:
7777
</p>
7878
{confirmationData?.sqlQuery && (
79-
<div className="bg-gray-900 border border-gray-700 rounded p-3">
80-
<pre className="text-sm font-mono text-gray-200 whitespace-pre-wrap break-words overflow-wrap-anywhere">
79+
<div className="bg-background border border-border rounded p-3 overflow-x-auto">
80+
<pre className="text-sm font-mono text-foreground whitespace-pre-wrap break-words overflow-wrap-anywhere">
8181
<code className="language-sql">{confirmationData.sqlQuery}</code>
8282
</pre>
8383
</div>
8484
)}
8585
</div>
8686

8787
<div className={`${isHighRisk ? 'bg-red-950/40 border-red-700/50' : 'bg-yellow-950/40 border-yellow-700/50'} border rounded p-3`}>
88-
<p className="text-sm text-gray-300">
88+
<p className="text-sm text-foreground">
8989
{isHighRisk ? (
9090
<>
9191
<span className="font-semibold text-red-400">⚠️ WARNING:</span> This operation may be irreversible and will permanently modify your database.
@@ -100,7 +100,7 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
100100
<Button
101101
variant="outline"
102102
onClick={onCancel}
103-
className="flex-1 bg-gray-800 border-gray-600 text-gray-300 hover:bg-gray-700"
103+
className="flex-1 bg-card border-border text-muted-foreground hover:bg-muted"
104104
data-testid="confirmation-cancel-button"
105105
>
106106
Cancel
@@ -128,9 +128,9 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
128128
<div className="px-6" data-testid="user-message">
129129
<div className="flex justify-end gap-3 mb-6">
130130
<div className="flex-1 max-w-xl">
131-
<Card className="bg-gray-700 border-gray-600 inline-block float-right">
131+
<Card className="bg-muted border-border inline-block float-right">
132132
<CardContent className="p-3">
133-
<p className="text-gray-200 text-base leading-relaxed">{content}</p>
133+
<p className="text-foreground text-base leading-relaxed">{content}</p>
134134
</CardContent>
135135
</Card>
136136
</div>
@@ -158,7 +158,7 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
158158
</AvatarFallback>
159159
</Avatar>
160160
<div className="flex-1 min-w-0">
161-
<Card className={`bg-gray-800 ${isValid ? 'border-purple-500/30' : 'border-yellow-500/30'}`}>
161+
<Card className={`bg-card ${isValid ? 'border-purple-500/30' : 'border-yellow-500/30'}`}>
162162
<CardContent className="p-4">
163163
<div className="flex items-center gap-2 mb-2">
164164
<Code className={`w-4 h-4 ${isValid ? 'text-purple-400' : 'text-yellow-400'}`} />
@@ -168,22 +168,22 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
168168
</div>
169169

170170
{hasSQL && (
171-
<div className="-mx-2 px-2">
171+
<div className="overflow-x-auto -mx-2 px-2">
172172
<div className="relative">
173173
<Button
174174
variant="ghost"
175175
size="sm"
176176
onClick={handleCopyQuery}
177-
className="absolute top-2 right-2 z-10 h-8 w-8 p-0 hover:bg-gray-800"
177+
className="absolute top-2 right-2 z-10 h-8 w-8 p-0 hover:bg-muted"
178178
title={copied ? "Copied!" : "Copy query"}
179179
>
180180
{copied ? (
181181
<Check className="w-4 h-4 text-green-400" />
182182
) : (
183-
<Copy className="w-4 h-4 text-gray-400" />
183+
<Copy className="w-4 h-4 text-muted-foreground" />
184184
)}
185185
</Button>
186-
<pre className="bg-gray-900 text-gray-200 p-3 rounded text-sm mb-3 font-mono whitespace-pre-wrap break-words overflow-wrap-anywhere">
186+
<pre className="bg-background text-foreground p-3 rounded text-sm mb-3 w-fit min-w-full font-mono whitespace-pre-wrap break-words overflow-wrap-anywhere">
187187
<code className="language-sql">{content}</code>
188188
</pre>
189189
</div>
@@ -193,21 +193,21 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
193193
{!isValid && (
194194
<div className="space-y-2 text-sm">
195195
{analysisInfo?.explanation && (
196-
<div className="bg-gray-900/50 p-2 rounded">
196+
<div className="bg-background/50 p-2 rounded">
197197
<span className="font-semibold text-yellow-400">Explanation:</span>
198-
<p className="text-gray-300 mt-1">{analysisInfo.explanation}</p>
198+
<p className="text-foreground mt-1">{analysisInfo.explanation}</p>
199199
</div>
200200
)}
201201
{analysisInfo?.missing && (
202-
<div className="bg-gray-900/50 p-2 rounded">
202+
<div className="bg-background/50 p-2 rounded">
203203
<span className="font-semibold text-orange-400">Missing Information:</span>
204-
<p className="text-gray-300 mt-1">{analysisInfo.missing}</p>
204+
<p className="text-foreground mt-1">{analysisInfo.missing}</p>
205205
</div>
206206
)}
207207
{analysisInfo?.ambiguities && (
208-
<div className="bg-gray-900/50 p-2 rounded">
208+
<div className="bg-background/50 p-2 rounded">
209209
<span className="font-semibold text-orange-400">Ambiguities:</span>
210-
<p className="text-gray-300 mt-1">{analysisInfo.ambiguities}</p>
210+
<p className="text-foreground mt-1">{analysisInfo.ambiguities}</p>
211211
</div>
212212
)}
213213
</div>
@@ -230,7 +230,7 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
230230
</AvatarFallback>
231231
</Avatar>
232232
<div className="flex-1 min-w-0 max-w-full overflow-hidden">
233-
<Card className="bg-gray-800 border-green-500/30 max-w-full">
233+
<Card className="bg-card border-green-500/30 max-w-full">
234234
<CardContent className="p-4 max-w-full overflow-hidden">
235235
<div className="flex items-center gap-2 mb-3">
236236
<Database className="w-4 h-4 text-green-400" />
@@ -241,22 +241,22 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
241241
</div>
242242
{queryData && queryData.length > 0 && (
243243
<div className="max-w-full overflow-hidden -mx-4 px-4">
244-
<div className="overflow-x-auto overflow-y-auto max-h-96 border border-gray-700 rounded scrollbar-visible" style={{ maxWidth: '100%' }}>
244+
<div className="overflow-x-auto overflow-y-auto max-h-96 border border-border rounded scrollbar-visible" style={{ maxWidth: '100%' }}>
245245
<table className="text-sm border-collapse" data-testid="results-table" style={{ width: '100%', maxWidth: '100%', tableLayout: 'auto', display: 'table' }}>
246-
<thead className="sticky top-0 bg-gray-800 z-10">
247-
<tr className="border-b border-gray-700">
246+
<thead className="sticky top-0 bg-card z-10">
247+
<tr className="border-b border-border">
248248
{Object.keys(queryData[0]).map((column) => (
249-
<th key={column} className="text-left px-3 py-2 text-gray-300 font-semibold bg-gray-800 break-words" style={{ maxWidth: '300px', minWidth: '100px' }}>
249+
<th key={column} className="text-left px-3 py-2 text-muted-foreground font-semibold bg-card break-words" style={{ maxWidth: '300px', minWidth: '100px' }}>
250250
{column}
251251
</th>
252252
))}
253253
</tr>
254254
</thead>
255255
<tbody>
256256
{queryData.map((row, index) => (
257-
<tr key={index} className="border-b border-gray-700/50 hover:bg-gray-700/30">
257+
<tr key={index} className="border-b border-border hover:bg-muted">
258258
{Object.values(row).map((value: any, cellIndex) => (
259-
<td key={cellIndex} className="px-3 py-2 text-gray-200 break-words" style={{ maxWidth: '300px', minWidth: '100px' }}>
259+
<td key={cellIndex} className="px-3 py-2 text-foreground break-words" style={{ maxWidth: '300px', minWidth: '100px' }}>
260260
{String(value)}
261261
</td>
262262
))}
@@ -285,7 +285,7 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
285285
</AvatarFallback>
286286
</Avatar>
287287
<div className="flex-1 min-w-0">
288-
<div className="text-gray-200 text-base leading-relaxed whitespace-pre-line">
288+
<div className="text-foreground text-base leading-relaxed whitespace-pre-line">
289289
{content}
290290
</div>
291291
</div>
@@ -304,11 +304,11 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
304304
</AvatarFallback>
305305
</Avatar>
306306
<div className="flex-1 min-w-0">
307-
<Card className="bg-gray-800 border-purple-500/30 max-w-md">
307+
<Card className="bg-card border-purple-500/30 max-w-md">
308308
<CardContent className="p-4">
309309
<div className="space-y-3">
310310
{steps?.map((step, index) => (
311-
<div key={index} className="flex items-center gap-3 text-sm text-gray-300">
311+
<div key={index} className="flex items-center gap-3 text-sm text-foreground">
312312
<Badge variant="outline" className="p-1 w-6 h-6 flex items-center justify-center border-purple-400">
313313
{step.icon === 'search' && <Search className="w-3 h-3 text-purple-400" />}
314314
{step.icon === 'database' && <Database className="w-3 h-3 text-purple-400" />}
@@ -321,7 +321,7 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
321321
{progress !== undefined && (
322322
<div className="mt-4">
323323
<Progress value={progress} className="h-2" />
324-
<p className="text-xs text-gray-400 mt-1">{progress}% complete</p>
324+
<p className="text-xs text-muted-foreground mt-1">{progress}% complete</p>
325325
</div>
326326
)}
327327
</div>

‎app/src/components/chat/QueryInput.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const QueryInput = ({ onSubmit, placeholder = "Ask me anything about your databa
2727
onChange={(e) => setQuery(e.target.value)}
2828
placeholder={placeholder}
2929
disabled={disabled}
30-
className="min-h-[60px] bg-gray-800 border-gray-600 text-gray-200 placeholder-gray-500 resize-none pr-12 focus:border-purple-500 focus:ring-purple-500/20 disabled:opacity-50 disabled:cursor-not-allowed"
30+
className="min-h-[60px] bg-card border-border text-foreground placeholder-muted-foreground resize-none pr-12 focus-visible:border-purple-500 focus-visible:ring-purple-500 disabled:opacity-50 disabled:cursor-not-allowed"
3131
onKeyDown={(e) => {
3232
if (e.key === 'Enter' && !e.shiftKey && !disabled) {
3333
e.preventDefault();

‎app/src/components/layout/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ const Header = ({ onConnectDatabase, onUploadSchema }: HeaderProps) => {
8585
href="https://github.com/FalkorDB/QueryWeaver"
8686
target="_blank"
8787
rel="noopener noreferrer"
88-
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors text-gray-300 hover:text-white"
88+
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-card hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
8989
title="View QueryWeaver on GitHub"
9090
>
9191
<svg

‎app/src/components/layout/Sidebar.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const SidebarIcon = ({ icon: Icon, label, active, onClick, href, testId }: {
4242
className={`flex h-10 w-10 items-center justify-center rounded-lg transition-colors ${
4343
active
4444
? 'bg-purple-600 text-white'
45-
: 'text-gray-400 hover:bg-gray-800 hover:text-white'
45+
: 'text-muted-foreground hover:bg-card hover:text-foreground'
4646
}`}
4747
data-testid={testId}
4848
>
@@ -57,7 +57,7 @@ const SidebarIcon = ({ icon: Icon, label, active, onClick, href, testId }: {
5757
className={`flex h-10 w-10 items-center justify-center rounded-lg transition-colors ${
5858
active
5959
? 'bg-purple-600 text-white'
60-
: 'text-gray-400 hover:bg-gray-800 hover:text-white'
60+
: 'text-muted-foreground hover:bg-card hover:text-foreground'
6161
}`}
6262
data-testid={testId}
6363
>
@@ -70,7 +70,7 @@ const SidebarIcon = ({ icon: Icon, label, active, onClick, href, testId }: {
7070
className={`flex h-10 w-10 items-center justify-center rounded-lg transition-colors ${
7171
active
7272
? 'bg-purple-600 text-white'
73-
: 'text-gray-400 hover:bg-gray-800 hover:text-white'
73+
: 'text-muted-foreground hover:bg-card hover:text-foreground'
7474
}`}
7575
data-testid={testId}
7676
>
@@ -90,7 +90,7 @@ const Sidebar = ({ className, onSchemaClick, isSchemaOpen, isCollapsed = false,
9090
return (
9191
<>
9292
<aside className={cn(
93-
"fixed inset-y-0 left-0 z-50 flex flex-col border-r border-gray-700 bg-gray-900 transition-all duration-300",
93+
"fixed inset-y-0 left-0 z-50 flex flex-col border-r border-border bg-background transition-all duration-300",
9494
// Only collapse on mobile (md:w-16 keeps it visible on desktop)
9595
isCollapsed ? "w-0 -translate-x-full overflow-hidden md:w-16 md:translate-x-0" : "w-16",
9696
className
@@ -99,7 +99,7 @@ const Sidebar = ({ className, onSchemaClick, isSchemaOpen, isCollapsed = false,
9999
{isMobile && (
100100
<button
101101
onClick={onToggleCollapse}
102-
className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-gray-800 text-lg font-semibold text-white hover:bg-gray-700"
102+
className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-card text-lg font-semibold text-foreground hover:bg-muted"
103103
title="Toggle Sidebar (Mobile)"
104104
data-testid="sidebar-toggle"
105105
>
@@ -119,7 +119,7 @@ const Sidebar = ({ className, onSchemaClick, isSchemaOpen, isCollapsed = false,
119119
</nav>
120120

121121
<div className="flex-1 flex items-center justify-center">
122-
<Separator orientation="horizontal" className="bg-gray-700 w-8" />
122+
<Separator orientation="horizontal" className="bg-border w-8" />
123123
</div>
124124

125125
<nav className="flex flex-col items-center gap-4 px-2 py-4">

0 commit comments

Comments
 (0)