Skip to content

Implement Clean Slate theme system #357

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danshalev7 merged 5 commits into from
Jan 7, 2026
Merged

Implement Clean Slate theme system #357

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b037584
Implement Clean Slate theme system
Naseem77 Jan 4, 2026
cbc94c5
update background colors
Naseem77 Jan 5, 2026
0019c69
Merge branch 'staging' into implement-clean-slate-theme-system
Naseem77 Jan 5, 2026
36f71de
fix comments
Naseem77 Jan 5, 2026
c36f747
Resolved conflicts in ChatMessage
Naseem77 Jan 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/src/components/SuggestionCards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const SuggestionCards = ({ suggestions, onSelect, disabled = false }: Suggestion
{suggestions.map((suggestion) => (
<Card
key={suggestion}
className={`bg-gray-800 border-gray-600 ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-purple-500/50 transition-all duration-200 cursor-pointer'}`}
className={`bg-card border-border ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-purple-500/50 transition-all duration-200 cursor-pointer'}`}
onClick={disabled ? undefined : () => onSelect(suggestion)}
role="button"
tabIndex={disabled ? -1 : 0}
Expand All @@ -26,7 +26,7 @@ const SuggestionCards = ({ suggestions, onSelect, disabled = false }: Suggestion
}}
>
<CardContent className="p-2 sm:p-4">
<div className="text-gray-300 text-xs sm:text-sm text-center line-clamp-2">
<div className="text-muted-foreground text-xs sm:text-sm text-center line-clamp-2">
{suggestion}
</div>
</CardContent>
Expand Down
14 changes: 7 additions & 7 deletions app/src/components/chat/ChatInterface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,9 @@ const ChatInterface = ({ className, disabled = false, onProcessingChange }: Chat
<span className="text-white text-xs font-bold">QW</span>
</div>
<div className="flex-1 min-w-0 space-y-2">
<Skeleton className="h-4 w-3/4 bg-gray-700" />
<Skeleton className="h-4 w-1/2 bg-gray-700" />
<Skeleton className="h-4 w-2/3 bg-gray-700" />
<Skeleton className="h-4 w-3/4 bg-muted" />
<Skeleton className="h-4 w-1/2 bg-muted" />
<Skeleton className="h-4 w-2/3 bg-muted" />
</div>
</div>
</div>
Expand Down Expand Up @@ -489,7 +489,7 @@ const ChatInterface = ({ className, disabled = false, onProcessingChange }: Chat
};

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

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

{/* Footer */}
<div className="text-center mt-4">
<p className="text-gray-500 text-sm">
<p className="text-muted-foreground text-sm">
Powered by <a href="https://falkordb.com" target="_blank">FalkorDB</a>
</p>
</div>
Expand Down
58 changes: 29 additions & 29 deletions app/src/components/chat/ChatMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,20 +72,20 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati

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

<div className={`${isHighRisk ? 'bg-red-950/40 border-red-700/50' : 'bg-yellow-950/40 border-yellow-700/50'} border rounded p-3`}>
<p className="text-sm text-gray-300">
<p className="text-sm text-foreground">
{isHighRisk ? (
<>
<span className="font-semibold text-red-400">⚠️ WARNING:</span> This operation may be irreversible and will permanently modify your database.
Expand All @@ -100,7 +100,7 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
<Button
variant="outline"
onClick={onCancel}
className="flex-1 bg-gray-800 border-gray-600 text-gray-300 hover:bg-gray-700"
className="flex-1 bg-card border-border text-muted-foreground hover:bg-muted"
data-testid="confirmation-cancel-button"
>
Cancel
Expand Down Expand Up @@ -128,9 +128,9 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
<div className="px-6" data-testid="user-message">
<div className="flex justify-end gap-3 mb-6">
<div className="flex-1 max-w-xl">
<Card className="bg-gray-700 border-gray-600 inline-block float-right">
<Card className="bg-muted border-border inline-block float-right">
<CardContent className="p-3">
<p className="text-gray-200 text-base leading-relaxed">{content}</p>
<p className="text-foreground text-base leading-relaxed">{content}</p>
</CardContent>
</Card>
</div>
Expand Down Expand Up @@ -158,7 +158,7 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<Card className={`bg-gray-800 ${isValid ? 'border-purple-500/30' : 'border-yellow-500/30'}`}>
<Card className={`bg-card ${isValid ? 'border-purple-500/30' : 'border-yellow-500/30'}`}>
<CardContent className="p-4">
<div className="flex items-center gap-2 mb-2">
<Code className={`w-4 h-4 ${isValid ? 'text-purple-400' : 'text-yellow-400'}`} />
Expand All @@ -168,22 +168,22 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
</div>

{hasSQL && (
<div className="-mx-2 px-2">
<div className="overflow-x-auto -mx-2 px-2">
<div className="relative">
<Button
variant="ghost"
size="sm"
onClick={handleCopyQuery}
className="absolute top-2 right-2 z-10 h-8 w-8 p-0 hover:bg-gray-800"
className="absolute top-2 right-2 z-10 h-8 w-8 p-0 hover:bg-muted"
title={copied ? "Copied!" : "Copy query"}
>
{copied ? (
<Check className="w-4 h-4 text-green-400" />
) : (
<Copy className="w-4 h-4 text-gray-400" />
<Copy className="w-4 h-4 text-muted-foreground" />
)}
</Button>
<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">
<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">
<code className="language-sql">{content}</code>
</pre>
</div>
Expand All @@ -193,21 +193,21 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
{!isValid && (
<div className="space-y-2 text-sm">
{analysisInfo?.explanation && (
<div className="bg-gray-900/50 p-2 rounded">
<div className="bg-background/50 p-2 rounded">
<span className="font-semibold text-yellow-400">Explanation:</span>
<p className="text-gray-300 mt-1">{analysisInfo.explanation}</p>
<p className="text-foreground mt-1">{analysisInfo.explanation}</p>
</div>
)}
{analysisInfo?.missing && (
<div className="bg-gray-900/50 p-2 rounded">
<div className="bg-background/50 p-2 rounded">
<span className="font-semibold text-orange-400">Missing Information:</span>
<p className="text-gray-300 mt-1">{analysisInfo.missing}</p>
<p className="text-foreground mt-1">{analysisInfo.missing}</p>
</div>
)}
{analysisInfo?.ambiguities && (
<div className="bg-gray-900/50 p-2 rounded">
<div className="bg-background/50 p-2 rounded">
<span className="font-semibold text-orange-400">Ambiguities:</span>
<p className="text-gray-300 mt-1">{analysisInfo.ambiguities}</p>
<p className="text-foreground mt-1">{analysisInfo.ambiguities}</p>
</div>
)}
</div>
Expand All @@ -230,7 +230,7 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0 max-w-full overflow-hidden">
<Card className="bg-gray-800 border-green-500/30 max-w-full">
<Card className="bg-card border-green-500/30 max-w-full">
<CardContent className="p-4 max-w-full overflow-hidden">
<div className="flex items-center gap-2 mb-3">
<Database className="w-4 h-4 text-green-400" />
Expand All @@ -241,22 +241,22 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
</div>
{queryData && queryData.length > 0 && (
<div className="max-w-full overflow-hidden -mx-4 px-4">
<div className="overflow-x-auto overflow-y-auto max-h-96 border border-gray-700 rounded scrollbar-visible" style={{ maxWidth: '100%' }}>
<div className="overflow-x-auto overflow-y-auto max-h-96 border border-border rounded scrollbar-visible" style={{ maxWidth: '100%' }}>
<table className="text-sm border-collapse" data-testid="results-table" style={{ width: '100%', maxWidth: '100%', tableLayout: 'auto', display: 'table' }}>
<thead className="sticky top-0 bg-gray-800 z-10">
<tr className="border-b border-gray-700">
<thead className="sticky top-0 bg-card z-10">
<tr className="border-b border-border">
{Object.keys(queryData[0]).map((column) => (
<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' }}>
<th key={column} className="text-left px-3 py-2 text-muted-foreground font-semibold bg-card break-words" style={{ maxWidth: '300px', minWidth: '100px' }}>
{column}
</th>
))}
</tr>
</thead>
<tbody>
{queryData.map((row, index) => (
<tr key={index} className="border-b border-gray-700/50 hover:bg-gray-700/30">
<tr key={index} className="border-b border-border hover:bg-muted">
{Object.values(row).map((value: any, cellIndex) => (
<td key={cellIndex} className="px-3 py-2 text-gray-200 break-words" style={{ maxWidth: '300px', minWidth: '100px' }}>
<td key={cellIndex} className="px-3 py-2 text-foreground break-words" style={{ maxWidth: '300px', minWidth: '100px' }}>
{String(value)}
</td>
))}
Expand Down Expand Up @@ -285,7 +285,7 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<div className="text-gray-200 text-base leading-relaxed whitespace-pre-line">
<div className="text-foreground text-base leading-relaxed whitespace-pre-line">
{content}
</div>
</div>
Expand All @@ -304,11 +304,11 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<Card className="bg-gray-800 border-purple-500/30 max-w-md">
<Card className="bg-card border-purple-500/30 max-w-md">
<CardContent className="p-4">
<div className="space-y-3">
{steps?.map((step, index) => (
<div key={index} className="flex items-center gap-3 text-sm text-gray-300">
<div key={index} className="flex items-center gap-3 text-sm text-foreground">
<Badge variant="outline" className="p-1 w-6 h-6 flex items-center justify-center border-purple-400">
{step.icon === 'search' && <Search className="w-3 h-3 text-purple-400" />}
{step.icon === 'database' && <Database className="w-3 h-3 text-purple-400" />}
Expand All @@ -321,7 +321,7 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
{progress !== undefined && (
<div className="mt-4">
<Progress value={progress} className="h-2" />
<p className="text-xs text-gray-400 mt-1">{progress}% complete</p>
<p className="text-xs text-muted-foreground mt-1">{progress}% complete</p>
</div>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/src/components/chat/QueryInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const QueryInput = ({ onSubmit, placeholder = "Ask me anything about your databa
onChange={(e) => setQuery(e.target.value)}
placeholder={placeholder}
disabled={disabled}
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"
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"
onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey && !disabled) {
e.preventDefault();
Expand Down
2 changes: 1 addition & 1 deletion app/src/components/layout/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const Header = ({ onConnectDatabase, onUploadSchema }: HeaderProps) => {
href="https://github.com/FalkorDB/QueryWeaver"
target="_blank"
rel="noopener noreferrer"
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"
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"
title="View QueryWeaver on GitHub"
>
<svg
Expand Down
12 changes: 6 additions & 6 deletions app/src/components/layout/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const SidebarIcon = ({ icon: Icon, label, active, onClick, href, testId }: {
className={`flex h-10 w-10 items-center justify-center rounded-lg transition-colors ${
active
? 'bg-purple-600 text-white'
: 'text-gray-400 hover:bg-gray-800 hover:text-white'
: 'text-muted-foreground hover:bg-card hover:text-foreground'
}`}
data-testid={testId}
>
Expand All @@ -57,7 +57,7 @@ const SidebarIcon = ({ icon: Icon, label, active, onClick, href, testId }: {
className={`flex h-10 w-10 items-center justify-center rounded-lg transition-colors ${
active
? 'bg-purple-600 text-white'
: 'text-gray-400 hover:bg-gray-800 hover:text-white'
: 'text-muted-foreground hover:bg-card hover:text-foreground'
}`}
data-testid={testId}
>
Expand All @@ -70,7 +70,7 @@ const SidebarIcon = ({ icon: Icon, label, active, onClick, href, testId }: {
className={`flex h-10 w-10 items-center justify-center rounded-lg transition-colors ${
active
? 'bg-purple-600 text-white'
: 'text-gray-400 hover:bg-gray-800 hover:text-white'
: 'text-muted-foreground hover:bg-card hover:text-foreground'
}`}
data-testid={testId}
>
Expand All @@ -90,7 +90,7 @@ const Sidebar = ({ className, onSchemaClick, isSchemaOpen, isCollapsed = false,
return (
<>
<aside className={cn(
"fixed inset-y-0 left-0 z-50 flex flex-col border-r border-gray-700 bg-gray-900 transition-all duration-300",
"fixed inset-y-0 left-0 z-50 flex flex-col border-r border-border bg-background transition-all duration-300",
// Only collapse on mobile (md:w-16 keeps it visible on desktop)
isCollapsed ? "w-0 -translate-x-full overflow-hidden md:w-16 md:translate-x-0" : "w-16",
className
Expand All @@ -99,7 +99,7 @@ const Sidebar = ({ className, onSchemaClick, isSchemaOpen, isCollapsed = false,
{isMobile && (
<button
onClick={onToggleCollapse}
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"
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"
title="Toggle Sidebar (Mobile)"
data-testid="sidebar-toggle"
>
Expand All @@ -119,7 +119,7 @@ const Sidebar = ({ className, onSchemaClick, isSchemaOpen, isCollapsed = false,
</nav>

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

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