From fb93eaddfe3b01f92a552625f8e46b1bbe9ecfcc Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Wed, 25 Feb 2026 10:34:01 +0000 Subject: [PATCH 1/3] Cassandra logo in dark mode and refactor dark mode detection service --- frontend/src/app/app.component.ts | 4 ++++ .../chart-edit/chart-edit.component.spec.ts | 2 +- .../charts/chart-edit/chart-edit.component.ts | 2 +- .../own-connections.component.html | 2 +- .../own-connections/own-connections.component.ts | 3 +++ .../db-table-actions.component.ts | 2 +- .../db-table-widgets.component.ts | 2 +- .../code/code.component.spec.ts | 2 +- .../record-edit-fields/code/code.component.ts | 2 +- .../json-editor/json-editor.component.html | 2 +- .../json-editor/json-editor.component.ts | 10 ++++++++++ .../markdown/markdown.component.spec.ts | 4 ++-- .../markdown/markdown.component.ts | 2 +- .../record-view-fields/code/code.component.ts | 2 +- .../json-editor/json-editor.component.ts | 2 +- frontend/src/app/services/ui-settings.service.ts | 15 +++++---------- .../db-logos/\321\201assandra_logo_dark.svg" | 5 +++++ 17 files changed, 40 insertions(+), 23 deletions(-) create mode 100644 "frontend/src/assets/icons/db-logos/\321\201assandra_logo_dark.svg" diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 71f9871a9..04b32ee9a 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -132,6 +132,10 @@ export class AppComponent { 'cassandra', this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/db-logos/сassandra_logo.svg'), ); + this.matIconRegistry.addSvgIcon( + 'cassandra-dark', + this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/db-logos/сassandra_logo_dark.svg'), + ); this.matIconRegistry.addSvgIcon( 'redis', this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/db-logos/redis_logo.svg'), diff --git a/frontend/src/app/components/charts/chart-edit/chart-edit.component.spec.ts b/frontend/src/app/components/charts/chart-edit/chart-edit.component.spec.ts index 6b9e18fc1..994f01bfa 100644 --- a/frontend/src/app/components/charts/chart-edit/chart-edit.component.spec.ts +++ b/frontend/src/app/components/charts/chart-edit/chart-edit.component.spec.ts @@ -71,7 +71,7 @@ describe('ChartEditComponent', () => { }; mockUiSettingsService = { - editorTheme: 'vs-dark', + isDarkMode: true, getUiSettings: vi.fn().mockReturnValue(of({})), }; diff --git a/frontend/src/app/components/charts/chart-edit/chart-edit.component.ts b/frontend/src/app/components/charts/chart-edit/chart-edit.component.ts index 09ac816c7..fb31c787a 100644 --- a/frontend/src/app/components/charts/chart-edit/chart-edit.component.ts +++ b/frontend/src/app/components/charts/chart-edit/chart-edit.component.ts @@ -404,7 +404,7 @@ export class ChartEditComponent implements OnInit { this.queryId.set(this.route.snapshot.paramMap.get('query-id') || ''); this.isEditMode.set(!!this.queryId()); - this.codeEditorTheme = this._uiSettings.editorTheme; + this.codeEditorTheme = this._uiSettings.isDarkMode ? 'vs-dark' : 'vs'; if (this.isEditMode()) { this.manualExpanded.set(true); diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.html b/frontend/src/app/components/connections-list/own-connections/own-connections.component.html index b64fef9a4..d0323a8e4 100644 --- a/frontend/src/app/components/connections-list/own-connections/own-connections.component.html +++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.html @@ -11,7 +11,7 @@

- +
{{ getMainTitle(supportedDatabase) }} diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.ts b/frontend/src/app/components/connections-list/own-connections/own-connections.component.ts index 9e81f927b..b109521ff 100644 --- a/frontend/src/app/components/connections-list/own-connections/own-connections.component.ts +++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.ts @@ -30,6 +30,7 @@ export class OwnConnectionsComponent implements OnInit, OnChanges { public supportedDatabasesTitles = supportedDatabasesTitles; public supportedOrderedDatabases = supportedOrderedDatabases; public hasMultipleMembers: boolean = false; + public isDarkMode: boolean = false; constructor( private _uiSettings: UiSettingsService, @@ -37,6 +38,8 @@ export class OwnConnectionsComponent implements OnInit, OnChanges { ) {} ngOnInit() { + this.isDarkMode = this._uiSettings.isDarkMode; + this._uiSettings.getUiSettings().subscribe((settings: UiSettings) => { this.connectionsListCollapsed = settings?.globalSettings?.connectionsListCollapsed; this.displayedCardCount = this.connectionsListCollapsed ? 3 : this.connections.length; diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.ts index 374ff7414..8c251ee7f 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.ts +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.ts @@ -133,7 +133,7 @@ export class DbTableActionsComponent implements OnInit { this._connections .getCurrentConnectionSigningKey() .subscribe((signingKey) => (this.codeSnippets = codeSnippets(signingKey))); - this.codeEditorTheme = this._uiSettings.editorTheme; + this.codeEditorTheme = this._uiSettings.isDarkMode ? 'vs-dark' : 'vs'; try { this.rulesData = await this.getRules(); diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts index 6dffb116a..16043c049 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts @@ -317,7 +317,7 @@ export class DbTableWidgetsComponent implements OnInit { ); this.getWidgets(); }); - this.codeEditorTheme = this._uiSettings.editorTheme; + this.codeEditorTheme = this._uiSettings.isDarkMode ? 'vs-dark' : 'vs'; } get currentConnection() { diff --git a/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.spec.ts b/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.spec.ts index b28ca295d..bc6d68e9c 100644 --- a/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.spec.ts +++ b/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.spec.ts @@ -12,7 +12,7 @@ describe('CodeEditComponent', () => { let fixture: ComponentFixture; const mockUiSettingsService = { - editorTheme: 'vs-dark', + isDarkMode: true, }; beforeEach(async () => { diff --git a/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.ts b/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.ts index 0f4c1849e..1b233628b 100644 --- a/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.ts +++ b/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.ts @@ -37,6 +37,6 @@ export class CodeEditComponent extends BaseEditFieldComponent { value: this.value } - this.codeEditorTheme = this._uiSettings.editorTheme; + this.codeEditorTheme = this._uiSettings.isDarkMode ? 'vs-dark' : 'vs'; } } diff --git a/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.html b/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.html index b53c245c5..115648820 100644 --- a/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.html +++ b/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.html @@ -2,7 +2,7 @@
{ let fixture: ComponentFixture; const mockUiSettingsService = { - editorTheme: 'vs-dark', + isDarkMode: true, }; beforeEach(async () => { @@ -67,7 +67,7 @@ describe('MarkdownEditComponent', () => { }); it('should use light theme when configured', () => { - const lightThemeService = { editorTheme: 'vs' }; + const lightThemeService = { isDarkMode: false }; TestBed.resetTestingModule(); TestBed.configureTestingModule({ imports: [MarkdownEditComponent, BrowserAnimationsModule], diff --git a/frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.ts b/frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.ts index 89b5eb96a..65a6fc722 100644 --- a/frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.ts +++ b/frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.ts @@ -37,6 +37,6 @@ export class MarkdownEditComponent extends BaseEditFieldComponent { value: this.value } - this.codeEditorTheme = this._uiSettings.editorTheme; + this.codeEditorTheme = this._uiSettings.isDarkMode ? 'vs-dark' : 'vs'; } } diff --git a/frontend/src/app/components/ui-components/record-view-fields/code/code.component.ts b/frontend/src/app/components/ui-components/record-view-fields/code/code.component.ts index 03ddbcbcd..280189ed3 100644 --- a/frontend/src/app/components/ui-components/record-view-fields/code/code.component.ts +++ b/frontend/src/app/components/ui-components/record-view-fields/code/code.component.ts @@ -35,6 +35,6 @@ export class CodeRecordViewComponent extends BaseRecordViewFieldComponent { value: this.value, } - this.codeEditorTheme = this._uiSettings.editorTheme; + this.codeEditorTheme = this._uiSettings.isDarkMode ? 'vs-dark' : 'vs'; } } diff --git a/frontend/src/app/components/ui-components/record-view-fields/json-editor/json-editor.component.ts b/frontend/src/app/components/ui-components/record-view-fields/json-editor/json-editor.component.ts index e6fb6fa3c..d4f8fa809 100644 --- a/frontend/src/app/components/ui-components/record-view-fields/json-editor/json-editor.component.ts +++ b/frontend/src/app/components/ui-components/record-view-fields/json-editor/json-editor.component.ts @@ -34,6 +34,6 @@ export class JsonEditorRecordViewComponent extends BaseRecordViewFieldComponent value: this.value } - this.codeEditorTheme = this._uiSettings.editorTheme; + this.codeEditorTheme = this._uiSettings.isDarkMode ? 'vs-dark' : 'vs'; } } diff --git a/frontend/src/app/services/ui-settings.service.ts b/frontend/src/app/services/ui-settings.service.ts index 2a40fc1bd..5fa8ca761 100644 --- a/frontend/src/app/services/ui-settings.service.ts +++ b/frontend/src/app/services/ui-settings.service.ts @@ -15,25 +15,20 @@ export class UiSettingsService { }; private uiSettings = null; - private codeEditorTheme: 'vs' | 'vs-dark'; + private _isDarkMode: boolean; constructor( private _http: HttpClient, private _notifications: NotificationsService, ) { - const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; - this.codeEditorTheme = prefersDark ? 'vs-dark' : 'vs'; + this._isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; } - // get uiSettings$(){ - // return this.uiSettings.asObservable(); - // } - - get editorTheme(): 'vs' | 'vs-dark' { - return this.codeEditorTheme; + get isDarkMode(): boolean { + return this._isDarkMode; } - updateGlobalSetting(key: string, value: any) { +updateGlobalSetting(key: string, value: any) { this.settings.globalSettings[key] = value; this.syncUiSettings().subscribe(); } diff --git "a/frontend/src/assets/icons/db-logos/\321\201assandra_logo_dark.svg" "b/frontend/src/assets/icons/db-logos/\321\201assandra_logo_dark.svg" new file mode 100644 index 000000000..4715287e9 --- /dev/null +++ "b/frontend/src/assets/icons/db-logos/\321\201assandra_logo_dark.svg" @@ -0,0 +1,5 @@ + + + + + From e01b5af606afce4dcaf4d2178e39c53baab09877 Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Wed, 25 Feb 2026 10:47:10 +0000 Subject: [PATCH 2/3] fix text --- .../own-connections/own-connections.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.html b/frontend/src/app/components/connections-list/own-connections/own-connections.component.html index d0323a8e4..591c3a2a1 100644 --- a/frontend/src/app/components/connections-list/own-connections/own-connections.component.html +++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.html @@ -2,7 +2,7 @@

Create your own test connection

- Create first connection + Create your first connection

  • From cbc2116480bf9c8d8268d2f505a5d53d6bc6300f Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Wed, 25 Feb 2026 12:32:45 +0000 Subject: [PATCH 3/3] fix json editor unit tests --- .../json-editor/json-editor.component.spec.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.spec.ts b/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.spec.ts index f6886b45c..794f05af5 100644 --- a/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.spec.ts +++ b/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.spec.ts @@ -3,15 +3,21 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { CodeEditorModule } from '@ngstack/code-editor'; import { MockCodeEditorComponent } from 'src/app/testing/code-editor.mock'; +import { UiSettingsService } from 'src/app/services/ui-settings.service'; import { JsonEditorEditComponent } from './json-editor.component'; describe('JsonEditorEditComponent', () => { let component: JsonEditorEditComponent; let fixture: ComponentFixture; + const mockUiSettingsService = { + isDarkMode: true, + }; + beforeEach(async () => { await TestBed.configureTestingModule({ imports: [JsonEditorEditComponent, BrowserAnimationsModule], + providers: [{ provide: UiSettingsService, useValue: mockUiSettingsService }], }) .overrideComponent(JsonEditorEditComponent, { remove: { imports: [CodeEditorModule] },