Fix connections list

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'),

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({})),
 		};
 

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);

frontend/src/app/components/connections-list/own-connections/own-connections.component.html

@@ -2,7 +2,7 @@ <h1 *ngIf="isDemo" class="mat-display-1">Create your own test connection</h1>
 
 <div *ngIf="!connections?.length && connections !== null" class="empty-state">
     <h1 *ngIf="(currentUser?.role === 'ADMIN' || currentUser?.role === 'DB_ADMIN') && !isDemo" class="mat-display-1">
-        Create first connection
+        Create your first connection
     </h1>
     <ul class="supportedDatabases">
         <li *ngFor="let supportedDatabase of supportedOrderedDatabases">
@@ -11,7 +11,7 @@ <h1 *ngIf="(currentUser?.role === 'ADMIN' || currentUser?.role === 'DB_ADMIN') &
                 class="addConnectionLink"
                 attr.data-testid="{{supportedDatabase}}-test-connection-list-item">
                 <div class="addConnectionLink__iconBox">
-                    <mat-icon [svgIcon]="supportedDatabase" class="addConnectionLink__icon"></mat-icon>
+                    <mat-icon [svgIcon]="supportedDatabase === 'cassandra' && isDarkMode ? 'cassandra-dark' : supportedDatabase" class="addConnectionLink__icon"></mat-icon>
                 </div>
                 <span class="addConnectionLink__label">
                     {{ getMainTitle(supportedDatabase) }}

frontend/src/app/components/connections-list/own-connections/own-connections.component.ts

@@ -30,13 +30,16 @@ export class OwnConnectionsComponent implements OnInit, OnChanges {
 	public supportedDatabasesTitles = supportedDatabasesTitles;
 	public supportedOrderedDatabases = supportedOrderedDatabases;
 	public hasMultipleMembers: boolean = false;
+	public isDarkMode: boolean = false;
 
 	constructor(
 		private _uiSettings: UiSettingsService,
 		private _companyService: CompanyService
 	) {}
 
 	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;

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();

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() {

frontend/src/app/components/ui-components/record-edit-fields/code/code.component.spec.ts

@@ -12,7 +12,7 @@ describe('CodeEditComponent', () => {
 	let fixture: ComponentFixture<CodeEditComponent>;
 
 	const mockUiSettingsService = {
-		editorTheme: 'vs-dark',
+		isDarkMode: true,
 	};
 
 	beforeEach(async () => {

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';
   }
 }

frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.html

@@ -2,7 +2,7 @@
 
 <div class="code-editor-box ph-no-capture">
     <ngs-code-editor
-        theme="vs"
+        [theme]="codeEditorTheme"
         [codeModel]="mutableCodeModel"
         [options]="codeEditorOptions"
         [readOnly]="readonly"

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<JsonEditorEditComponent>;
 
+	const mockUiSettingsService = {
+		isDarkMode: true,
+	};
+
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
 			imports: [JsonEditorEditComponent, BrowserAnimationsModule],
+			providers: [{ provide: UiSettingsService, useValue: mockUiSettingsService }],
 		})
 			.overrideComponent(JsonEditorEditComponent, {
 				remove: { imports: [CodeEditorModule] },

frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.ts

@@ -3,6 +3,7 @@ import { Component, Input } from '@angular/core';
 import { BaseEditFieldComponent } from '../base-row-field/base-row-field.component';
 import { CodeEditorModule } from '@ngstack/code-editor';
 import { CommonModule } from '@angular/common';
+import { UiSettingsService } from 'src/app/services/ui-settings.service';
 
 @Component({
   selector: 'app-edit-json-editor',
@@ -20,6 +21,13 @@ export class JsonEditorEditComponent extends BaseEditFieldComponent {
     scrollBeyondLastLine: false,
     wordWrap: 'on',
   };
+  public codeEditorTheme = 'vs-dark';
+
+  constructor(
+    private _uiSettings: UiSettingsService,
+  ) {
+    super();
+  }
 
   ngOnInit(): void {
     super.ngOnInit();
@@ -28,5 +36,7 @@ export class JsonEditorEditComponent extends BaseEditFieldComponent {
       uri: `${this.label}.json`,
       value: JSON.stringify(this.value, undefined, 4) || '{}'
     }
+
+    this.codeEditorTheme = this._uiSettings.isDarkMode ? 'vs-dark' : 'vs';
   }
 }

frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.spec.ts

@@ -12,7 +12,7 @@ describe('MarkdownEditComponent', () => {
 	let fixture: ComponentFixture<MarkdownEditComponent>;
 
 	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],

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';
   }
 }

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';
   }
 }

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';
   }
 }

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();
 	}