Skip to content

Commit 5c9257d

Browse files
bekmuradovbekmuradov
committed
fix: light and dark theme classes
1 parent 4e300ee commit 5c9257d

File tree

10 files changed

+408
-77
lines changed

10 files changed

+408
-77
lines changed

‎src/BrainDriveChatWithDocs.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ class BrainDriveChatWithDocs extends React.Component<ChatCollectionsPluginProps,
144144
const areServicesReady = this.pluginService.areServicesReady();
145145

146146
return (
147-
<div className="chat-collections-plugin-content">
147+
<div className="chat-collections-plugin-content dark:bg-gray-900">
148148
{/* Header */}
149149
<PluginHeader
150150
pluginService={this.pluginService}
@@ -198,7 +198,7 @@ class BrainDriveChatWithDocs extends React.Component<ChatCollectionsPluginProps,
198198
const { currentTheme, isInitializing, error } = this.state;
199199

200200
return (
201-
<div className={`plugin-template chat-collections-plugin ${currentTheme === 'dark' ? 'dark-theme' : ''}`}>
201+
<div className={`plugin-template chat-collections-plugin ${currentTheme === 'dark' ? 'dark-theme dark' : ''}`}>
202202
{isInitializing ? (
203203
this.renderLoading()
204204
) : error && !this.state.collections.length ? (

‎src/braindrive-plugin/PluginHeader.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,22 +23,22 @@ export const PluginHeader: React.FC<PluginHeaderProps> = ({
2323
// Direct call for service checks
2424
const checkAllServices = () => pluginService.checkAllServices();
2525
return (
26-
<div className="bg-white shadow-sm border-b">
26+
<div className="dark:bg-gray-900 shadow-sm border-b border-gray-200 dark:border-gray-700">
2727
<div className="max-w-7xl mx-auto px-4 py-4">
2828
<div className="flex items-center justify-between">
2929
<div className="flex items-center space-x-4">
3030
{/* Uses delegated handlers */}
3131
{currentView !== ViewType.COLLECTIONS && (
3232
<button
3333
onClick={handleBack}
34-
className="flex items-center text-gray-600 hover:text-gray-900"
34+
className="flex items-center hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
3535
disabled={!areServicesReady}
3636
>
3737
<ArrowLeft className="h-5 w-5 mr-2" />
3838
Back
3939
</button>
4040
)}
41-
<h1 className="text-base font-medium text-gray-500 mb-0">
41+
<h1 className="text-base font-medium dark:text-gray-300 mb-0">
4242
{currentView === ViewType.COLLECTIONS && 'Collections'}
4343
{currentView === ViewType.DOCUMENTS && `Documents - ${collectionName}`}
4444
{currentView === ViewType.CHAT && `Chat with ${collectionName} collection`}
@@ -58,7 +58,7 @@ export const PluginHeader: React.FC<PluginHeaderProps> = ({
5858
{currentView !== ViewType.SETTINGS && (
5959
<button
6060
onClick={() => handleViewChange(ViewType.SETTINGS)}
61-
className="p-2 rounded-full text-gray-600 hover:bg-gray-100"
61+
className="p-2 rounded-full hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
6262
title="Settings"
6363
disabled={!areServicesReady}
6464
>

‎src/collection-view/CollectionViewModeToggle.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,17 @@ interface ComponentProps {
1010

1111
export const CollectionViewModeToggle: React.FC<ComponentProps> = ({currentViewMode, onViewModeChange}) => {
1212
return (
13-
<div className="flex bg-gray-100 rounded-lg p-1">
13+
<div className="cv-toggle">
1414
<button
1515
onClick={() => onViewModeChange(CollectionViewType.LIST)}
16-
className={`flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors ${
17-
currentViewMode === CollectionViewType.LIST
18-
? 'bg-white text-gray-900 shadow-sm'
19-
: 'text-gray-500 hover:text-gray-700'
20-
}`}
16+
className={`cv-toggle-btn ${currentViewMode === CollectionViewType.LIST ? 'cv-toggle-btn--active' : ''}`}
2117
aria-label="List view"
2218
>
2319
<LayoutList className="h-4 w-4" />
2420
</button>
2521
<button
2622
onClick={() => onViewModeChange(CollectionViewType.GRID)}
27-
className={`flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors ${
28-
currentViewMode === CollectionViewType.GRID
29-
? 'bg-white text-gray-900 shadow-sm'
30-
: 'text-gray-500 hover:text-gray-700'
31-
}`}
23+
className={`cv-toggle-btn ${currentViewMode === CollectionViewType.GRID ? 'cv-toggle-btn--active' : ''}`}
3224
aria-label="Grid view"
3325
>
3426
<LayoutGrid className="h-4 w-4" />

‎src/collection-view/CollectionViewShell.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,8 @@ export class CollectionViewShell extends React.Component<CollectionsViewProps, C
8282
<div>
8383
<div className="flex justify-between items-center mb-6">
8484
<div className="px-4 sm:px-6">
85-
<h2 className="text-lg leading-6 font-medium text-gray-900">Your Collections</h2>
86-
<p className="max-w-2xl text-sm text-gray-500">Organize your documents into collections for better management</p>
85+
<h2 className="text-lg leading-6 font-medium dark:text-gray-100">Your Collections</h2>
86+
<p className="max-w-2xl text-sm dark:text-gray-400">Organize your documents into collections for better management</p>
8787
</div>
8888
<div className="flex items-center space-x-4">
8989
<CollectionViewModeToggle
@@ -93,7 +93,7 @@ export class CollectionViewShell extends React.Component<CollectionsViewProps, C
9393

9494
<button
9595
onClick={handleToggleCreateForm}
96-
className="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors flex items-center text-sm"
96+
className="bg-blue-500 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors flex items-center text-sm"
9797
>
9898
<Plus className="h-4 w-4 mr-2" />
9999
New Collection

‎src/collection-view/CollectionsList.tsx‎

Lines changed: 36 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -24,29 +24,39 @@ export const CollectionsList: React.FC<ComponentProps> = ({
2424
return (
2525
<li
2626
key={collection.id}
27-
className="cursor-pointer hover:bg-gray-50 transition-colors"
27+
className="cursor-pointer transition-all duration-200"
2828
onClick={() => onCollectionSelect(collection)}
2929
>
3030
<div className="px-4 py-4 flex items-center justify-between">
3131
<div className="flex items-center">
3232
<div
33-
className="w-3 h-3 rounded-full mr-3"
33+
className="w-3 h-3 rounded-full mr-3 flex-shrink-0"
3434
style={collectionIndicatorStyle}
3535
aria-label="Collection color indicator"
3636
/>
3737
<div>
38-
<p className="text-sm font-medium text-gray-900">{collection.name}</p>
39-
<p className="text-sm text-gray-500">{collection.description || 'No description'}</p>
38+
<p className="text-sm font-medium dark:text-gray-100">
39+
{collection.name}
40+
</p>
41+
<p className="text-sm dark:text-gray-400">
42+
{collection.description || 'No description'}
43+
</p>
4044
</div>
4145
</div>
42-
<div className="flex items-center space-x-2">
43-
<span className="text-xs text-gray-500">{formatDate(collection.created_at)}</span>
44-
<ChevronRight className="h-4 w-4 text-gray-400" />
46+
<div className="flex flex-col items-start space-y-1 text-left">
47+
<span className="text-xs dark:text-gray-400">{collection.document_count || 0} documents</span>
48+
<div className="flex items-center space-x-2">
49+
<span className="text-xs dark:text-gray-400">
50+
{formatDate(collection.created_at)}
51+
</span>
52+
<ChevronRight className="h-4 w-4 text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors" />
53+
</div>
4554
</div>
4655
</div>
4756
</li>
4857
);
4958
};
59+
5060
const renderGridItem = (collection: Collection) => {
5161
const collectionIndicatorStyle = {
5262
backgroundColor: collection.color
@@ -55,22 +65,28 @@ export const CollectionsList: React.FC<ComponentProps> = ({
5565
return (
5666
<div
5767
key={collection.id}
58-
className="bg-white rounded-lg border border-gray-200 hover:shadow-md transition-shadow cursor-pointer"
68+
className="dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-lg transition-all duration-200 cursor-pointer"
5969
onClick={() => onCollectionSelect(collection)}
6070
>
6171
<div className="p-6">
6272
<div className="flex items-center mb-4">
6373
<div
64-
className="w-4 h-4 rounded-full mr-3"
74+
className="w-4 h-4 rounded-full mr-3 flex-shrink-0"
6575
style={collectionIndicatorStyle}
6676
aria-label="Collection color indicator"
6777
/>
68-
<h3 className="text-lg font-medium text-gray-900">{collection.name}</h3>
78+
<h3 className="text-lg font-medium dark:text-gray-100">
79+
{collection.name}
80+
</h3>
6981
</div>
70-
<p className="text-gray-600 mb-4">{collection.description || 'No description'}</p>
71-
<div className="flex items-center justify-between text-sm text-gray-500">
72-
<span>{collection.document_count || 0} documents</span>
73-
<span>{formatDate(collection.created_at)}</span>
82+
<p className="text-sm dark:text-gray-400 mb-4 line-clamp-2">
83+
{collection.description || 'No description'}
84+
</p>
85+
<div className="flex items-center justify-between text-sm dark:text-gray-500">
86+
<span className="font-medium dark:text-gray-300">
87+
{collection.document_count || 0} documents
88+
</span>
89+
<span className="text-gray-500 dark:text-gray-400">{formatDate(collection.created_at)}</span>
7490
</div>
7591
</div>
7692
</div>
@@ -79,19 +95,19 @@ export const CollectionsList: React.FC<ComponentProps> = ({
7995

8096
if (viewMode === CollectionViewType.GRID) {
8197
return (
82-
<div className={`h-full ${maxHeight} overflow-y-auto overflow-x-hidden`}>
83-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-1">
98+
<div className={`h-full ${maxHeight} overflow-y-auto overflow-x-hidden dark:bg-gray-950`}>
99+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-4">
84100
{collections.map((collection) => renderGridItem(collection))}
85101
</div>
86102
</div>
87103
);
88104
}
89105

90106
return (
91-
<div className={`h-full ${maxHeight} overflow-y-auto`}>
92-
<ul id="collections-list" className="divide-y divide-gray-200">
107+
<div className={`h-full ${maxHeight} overflow-y-auto dark:bg-gray-950`}>
108+
<ul id="collections-list" className="divide-y divide-gray-200 dark:divide-gray-700 dark:bg-gray-900">
93109
{collections.map((collection) => renderListItem(collection))}
94110
</ul>
95111
</div>
96-
)
97-
}
112+
);
113+
};

‎src/components/plugin-settings/ChatCollectionSettings.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -516,8 +516,8 @@ export class ChatCollectionsSettings extends React.Component<ChatCollectionsSett
516516

517517
if (!config || !this.shouldShowField(fieldName)) return null;
518518

519-
const baseClasses = `mt-1 block w-full rounded-md border shadow-sm px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors ${
520-
error ? 'border-red-300 focus:border-red-500' : 'border-gray-300 focus:border-blue-500'
519+
const baseClasses = `mt-1 block w-full rounded-md border shadow-sm px-3 py-2 text-sm transition-colors ccs-input ${
520+
error ? 'border-red-300' : ''
521521
}`;
522522

523523
let inputElement;
@@ -618,7 +618,7 @@ export class ChatCollectionsSettings extends React.Component<ChatCollectionsSett
618618
return (
619619
<div key={fieldName} className="space-y-2">
620620
{inputElement}
621-
<p className="text-xs text-gray-500 flex items-start space-x-1">
621+
<p className="text-xs ccs-help flex items-start space-x-1">
622622
<Info className="h-3 w-3 mt-0.5 flex-shrink-0" />
623623
<span>{config.description}</span>
624624
</p>
@@ -629,12 +629,12 @@ export class ChatCollectionsSettings extends React.Component<ChatCollectionsSett
629629

630630
return (
631631
<div key={fieldName} className="space-y-2">
632-
<label className="block text-sm font-medium text-gray-700">
632+
<label className="block text-sm font-medium ccs-label">
633633
{config.label}
634634
{config.required && <span className="text-red-500 ml-1">*</span>}
635635
</label>
636636
{inputElement}
637-
<p className="text-xs text-gray-500 flex items-start space-x-1">
637+
<p className="text-xs ccs-help flex items-start space-x-1">
638638
<Info className="h-3 w-3 mt-0.5 flex-shrink-0" />
639639
<span>{config.description}</span>
640640
</p>
@@ -654,8 +654,8 @@ export class ChatCollectionsSettings extends React.Component<ChatCollectionsSett
654654
if (visibleFields.length === 0) return null;
655655

656656
return (
657-
<div key={sectionKey} className="bg-white rounded-lg border border-gray-200 p-6">
658-
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center space-x-2">
657+
<div key={sectionKey} className="p-6 ccs-card">
658+
<h3 className="text-lg font-semibold mb-4 flex items-center space-x-2 ccs-card-title">
659659
<span>{section.icon}</span>
660660
<span>{section.title}</span>
661661
</h3>
@@ -671,11 +671,11 @@ export class ChatCollectionsSettings extends React.Component<ChatCollectionsSett
671671
const isProcessing = isSaving || isRestarting;
672672

673673
return (
674-
<div className="space-y-6">
675-
<div className="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6">
674+
<div className="space-y-6">
675+
<div className="ccs-info p-4 mb-6">
676676
<div className="flex">
677677
<Info className="h-5 w-5 text-blue-400 mr-2 flex-shrink-0 mt-0.5" />
678-
<p className="text-sm text-blue-700">
678+
<p className="text-sm">
679679
These settings configure your document processing microservice.
680680
Use "Save & Restart" to apply changes immediately, or "Save Only" to save without restarting the service.
681681
</p>
@@ -684,7 +684,7 @@ export class ChatCollectionsSettings extends React.Component<ChatCollectionsSett
684684

685685
{Object.keys(SECTIONS).map(sectionKey => this.renderSection(sectionKey))}
686686

687-
<div className="flex items-center justify-between pt-6 border-t border-gray-200">
687+
<div className="flex items-center justify-between pt-6 ccs-divider">
688688
<div className="flex-1">
689689
{success && (
690690
<div className="flex items-center text-green-600">
@@ -775,25 +775,25 @@ export class ChatCollectionsSettings extends React.Component<ChatCollectionsSett
775775
const { isLoading, error } = this.state;
776776

777777
return (
778-
<div className="max-w-4xl mx-auto p-6">
778+
<div className="max-w-4xl mx-auto p-6 ccs-container">
779779
<div className="mb-6">
780-
<h1 className="text-xl font-bold text-gray-900 mb-2">
780+
<h1 className="text-xl font-bold mb-2">
781781
Plugin Service Runtime Settings
782782
</h1>
783-
<p className="text-gray-600">
783+
<p className="ccs-help">
784784
Configure your LLM providers, document processing, and retrieval settings
785785
</p>
786786
</div>
787787

788788
{isLoading ? (
789789
<div className="flex flex-col items-center justify-center py-12">
790790
<Loader2 className="h-8 w-8 animate-spin text-blue-600 mb-4" />
791-
<p className="text-gray-600">Loading settings...</p>
791+
<p className="ccs-help">Loading settings...</p>
792792
</div>
793793
) : error && !this.state.settings ? (
794794
<div className="flex flex-col items-center justify-center py-12">
795795
<AlertCircle className="h-8 w-8 text-red-500 mb-4" />
796-
<p className="text-gray-600">{error}</p>
796+
<p className="ccs-help">{error}</p>
797797
</div>
798798
) : (
799799
this.renderForm()

‎src/document-view/DocumentList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ export const DocumentList: React.FC<ComponentProps> = ({
1616
maxHeight = "max-h-96"
1717
}) => {
1818
return (
19-
<div className="bg-white rounded-lg">
19+
<div className="dlist-container">
2020
{documents.length === 0 ? (
2121
<NoDocuments />
2222
) : (
23-
<div className={`h-full ${maxHeight} space-y-3 overflow-y-auto`}>
23+
<div className={`dlist-scroll ${maxHeight} space-y-3`}>
2424
{documents.map((doc) => (
2525
<DocumentListItem key={doc.id} document={doc} onDocumentDelete={onDocumentDelete} />
2626
))}

0 commit comments

Comments
 (0)