feat: improve connection list cards UI for dark theme by karinakharchenko · Pull Request #1529 · rocket-admin/rocketadmin

karinakharchenko · 2026-01-23T13:37:14Z

Change card background to #2a2a2a in dark theme
Remove white background from icon boxes
Add brightness filter for mongodb, mysql, dynamodb, mssql logos in dark theme

- Change card background to #2a2a2a in dark theme - Remove white background from icon boxes - Add brightness filter for mongodb, mysql, dynamodb, mssql logos in dark theme Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

CLAassistant · 2026-01-23T13:37:23Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

karinakharchenko · 2026-01-28T16:06:32Z

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Reduce divider bottom margin - Show "Invited to company" text only when company has multiple members - Update text: remove "admin" from "Explore demo panels" - Update text: remove "your" from "Create first connection" - Fix typo: "Create you own" → "Create your own" - Comment out unused CSS classes (.addButton, .zapier-link__caption) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

karinakharchenko · 2026-01-30T12:28:53Z

Copilot

Pull request overview

This pull request improves the visual appearance of connection list cards in dark theme by updating background colors, removing white backgrounds from icon containers, and applying brightness filters to specific database logos for better visibility. Additionally, it introduces functionality to conditionally show a help message only when a company has multiple members, and refactors database title display to separate main titles from subtitles.

Changes:

Updated dark theme card backgrounds from #404040 to #2a2a2a and removed white backgrounds from icon boxes
Added conditional display logic for the "Invited to a company" help message based on company member count
Split database titles into main and subtitle components (e.g., "MySQL (MariaDB)" → "MySQL" + "(MariaDB)")

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
frontend/src/app/components/connections-list/own-connections/own-connections.component.ts	Added ngOnChanges hook to fetch company members, implemented title parsing methods, injected CompanyService
frontend/src/app/components/connections-list/own-connections/own-connections.component.html	Fixed typo, updated text for brevity, added subtitle span, conditioned help message on hasMultipleMembers
frontend/src/app/components/connections-list/own-connections/own-connections.component.css	Changed dark theme background to #2a2a2a, removed white icon box background, added brightness filter for specific logos, adjusted sizing and spacing
frontend/src/app/components/connections-list/demo-connections/demo-connections.component.html	Shortened heading text from "admin panels" to "panels"
frontend/src/app/components/connections-list/demo-connections/demo-connections.component.css	Updated dark theme background to #2a2a2a for consistency
frontend/src/app/components/connections-list/connections-list.component.html	Passed companyId as input to own-connections component
frontend/src/app/components/connections-list/connections-list.component.css	Reduced divider margin for tighter spacing

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-16T09:51:27Z

+		if (changes['companyId'] && this.companyId) {
+			this._companyService.fetchCompanyMembers(this.companyId).subscribe((members: any[]) => {
+				this.hasMultipleMembers = members && members.length > 1;
+			});
+		}


The ngOnChanges hook will be called on every change detection cycle when any input changes, not just when companyId changes. The condition checks if companyId exists, but ngOnChanges will still trigger whenever any of the other inputs (currentUser, connections, isDemo) change. Consider adding a check to verify that companyId has actually changed from its previous value: if (changes['companyId'] && this.companyId && !changes['companyId'].firstChange && changes['companyId'].currentValue !== changes['companyId'].previousValue) or simply check changes['companyId'].firstChange to only fetch on initial load.

Copilot · 2026-02-16T09:51:27Z

+		const match = title.match(/^([^(]+)/);
+		return match ? match[1].trim() : title;


The regex pattern /^([^(]+)/ will match from the beginning up to (but not including) the first opening parenthesis. However, for databases without parentheses (like "PostgreSQL", "MongoDB", "Redis", etc.), this regex will match the entire string. While this works, it's more efficient to simply use split or check for the presence of a parenthesis first. Consider simplifying to: const index = title.indexOf('('); return index > 0 ? title.substring(0, index).trim() : title;

Suggested change

const match = title.match(/^([^(]+)/);

return match ? match[1].trim() : title;

const index = title.indexOf('(');

return index > 0 ? title.substring(0, index).trim() : title;

Copilot · 2026-02-16T09:51:27Z

 <div *ngIf="!connections?.length && connections !== null" class="empty-state">
    <h1 *ngIf="(currentUser?.role === 'ADMIN' || currentUser?.role === 'DB_ADMIN') && !isDemo" class="mat-display-1">
-        Create your first connection
+        Create first connection


The text was changed from "Create your first connection" to "Create first connection", removing the word "your". This makes the text less personal and slightly more abrupt. While this may be intentional for brevity, consider whether this aligns with the overall tone of the application's user interface.

Suggested change

Create first connection

Create your first connection

Copilot · 2026-02-16T09:51:28Z

+		if (changes['companyId'] && this.companyId) {
+			this._companyService.fetchCompanyMembers(this.companyId).subscribe((members: any[]) => {
+				this.hasMultipleMembers = members && members.length > 1;
+			});


The new ngOnChanges lifecycle hook and the hasMultipleMembers feature lack test coverage. Consider adding tests to verify that:

hasMultipleMembers is set to true when the company has more than one member

hasMultipleMembers is set to false when there is only one member

The method only fetches company members when companyId changes and is defined

Suggested change

if (changes['companyId'] && this.companyId) {

this._companyService.fetchCompanyMembers(this.companyId).subscribe((members: any[]) => {

this.hasMultipleMembers = members && members.length > 1;

});

const companyIdChange = changes['companyId'];

if (companyIdChange && companyIdChange.currentValue && companyIdChange.currentValue !== companyIdChange.previousValue) {

const companyId = companyIdChange.currentValue;

this._companyService.fetchCompanyMembers(companyId).subscribe((members: any[] = []) => {

const safeMembers = Array.isArray(members) ? members : [];

this.hasMultipleMembers = safeMembers.length > 1;

});

} else if (companyIdChange && !companyIdChange.currentValue) {

// Reset flag if companyId becomes undefined or falsy

this.hasMultipleMembers = false;

Copilot · 2026-02-16T09:51:28Z

@@ -1,4 +1,4 @@
-<h1 *ngIf="!isDemo" class="mat-display-1">Explore demo admin panels</h1>
+<h1 *ngIf="!isDemo" class="mat-display-1">Explore demo panels</h1>


The text was shortened from "Explore demo admin panels" to "Explore demo panels". While this is more concise, consider whether "admin" is an important qualifier that helps users understand what these demo panels are for.

Suggested change

<h1 *ngIf="!isDemo" class="mat-display-1">Explore demo panels</h1>

<h1 *ngIf="!isDemo" class="mat-display-1">Explore demo admin panels</h1>

Copilot · 2026-02-16T09:51:28Z

+    .addConnectionLink__icon[data-mat-icon-name="mongodb"],
+    .addConnectionLink__icon[data-mat-icon-name="mysql"],
+    .addConnectionLink__icon[data-mat-icon-name="dynamodb"],
+    .addConnectionLink__icon[data-mat-icon-name="mssql"] {


The CSS selector using data-mat-icon-name attribute won't work because Angular Material's mat-icon component doesn't automatically set this attribute when using the [svgIcon] binding. To make this work, you need to either:

Add [attr.data-mat-icon-name]="supportedDatabase" to the mat-icon element in the template (line 14 of the HTML file)

Or use a different CSS approach such as adding a class based on the database type

Suggested change

.addConnectionLink__icon[data-mat-icon-name="mongodb"],

.addConnectionLink__icon[data-mat-icon-name="mysql"],

.addConnectionLink__icon[data-mat-icon-name="dynamodb"],

.addConnectionLink__icon[data-mat-icon-name="mssql"] {

.addConnectionLink__icon {

Copilot · 2026-02-16T09:51:29Z

+			this._companyService.fetchCompanyMembers(this.companyId).subscribe((members: any[]) => {
+				this.hasMultipleMembers = members && members.length > 1;
+			});


The subscription to fetchCompanyMembers in ngOnChanges is not being cleaned up, which could lead to memory leaks. The subscription should be stored and unsubscribed in ngOnDestroy, or you should use the async pipe in the template, or add .pipe(take(1)) to automatically unsubscribe after the first emission.

Copilot · 2026-02-16T09:51:29Z

+	getMainTitle(database: string): string {
+		const title = this.supportedDatabasesTitles[database] || database;
+		const match = title.match(/^([^(]+)/);
+		return match ? match[1].trim() : title;
+	}
+
+	getSubTitle(database: string): string {
+		const title = this.supportedDatabasesTitles[database] || database;
+		const match = title.match(/(\([^)]+\))/);
+		return match ? match[1] : '';
+	}


The new methods getMainTitle and getSubTitle lack test coverage. Since this component has a test file (own-connections.component.spec.ts) with basic setup, consider adding unit tests for these methods to ensure they correctly parse database titles with and without parentheses, such as "MySQL (MariaDB)" → main: "MySQL", sub: "(MariaDB)" and "PostgreSQL" → main: "PostgreSQL", sub: "".

feat: improve connection list cards UI for dark theme

26162ad

- Change card background to #2a2a2a in dark theme - Remove white background from icon boxes - Add brightness filter for mongodb, mysql, dynamodb, mssql logos in dark theme Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Merge main into connection-list-try-ui

2ffcefc

karinakharchenko and others added 2 commits January 28, 2026 18:07

Style database subtitle (text in brackets) lighter and smaller

84e8808

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

lyubov-voloshko added 2 commits February 15, 2026 17:50

Merge branch 'main' into connection-list-try-ui

20ccfe1

Merge branch 'main' into connection-list-try-ui

cb62bc4

lyubov-voloshko marked this pull request as ready for review February 16, 2026 09:46

Copilot AI review requested due to automatic review settings February 16, 2026 09:46

lyubov-voloshko enabled auto-merge February 16, 2026 09:46

Copilot started reviewing on behalf of lyubov-voloshko February 16, 2026 09:46 View session

lyubov-voloshko merged commit ed93565 into rocket-admin:main Feb 16, 2026
10 of 12 checks passed

Copilot AI reviewed Feb 16, 2026

View reviewed changes

		const match = title.match(/^([^(]+)/);
		return match ? match[1].trim() : title;

-		if (changes['companyId'] && this.companyId) {
-			this._companyService.fetchCompanyMembers(this.companyId).subscribe((members: any[]) => {
-				this.hasMultipleMembers = members && members.length > 1;
-			});
+		const companyIdChange = changes['companyId'];
+		if (companyIdChange && companyIdChange.currentValue && companyIdChange.currentValue !== companyIdChange.previousValue) {
+			const companyId = companyIdChange.currentValue;
+			this._companyService.fetchCompanyMembers(companyId).subscribe((members: any[] = []) => {
+				const safeMembers = Array.isArray(members) ? members : [];
+				this.hasMultipleMembers = safeMembers.length > 1;
+			});
+		} else if (companyIdChange && !companyIdChange.currentValue) {
+			// Reset flag if companyId becomes undefined or falsy
+			this.hasMultipleMembers = false;

		@@ -1,4 +1,4 @@
		<h1 *ngIf="!isDemo" class="mat-display-1">Explore demo admin panels</h1>
		<h1 *ngIf="!isDemo" class="mat-display-1">Explore demo panels</h1>

Uh oh!

Conversation

karinakharchenko commented Jan 23, 2026

Uh oh!

CLAassistant commented Jan 23, 2026

Uh oh!

karinakharchenko commented Jan 28, 2026

Uh oh!

karinakharchenko commented Jan 30, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants