From 26162ad72fa127f308e66153dbfd9091d7ddbf7f Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Fri, 23 Jan 2026 13:17:54 +0200 Subject: [PATCH 1/3] feat: improve connection list cards UI for 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 --- .../demo-connections.component.css | 4 ++-- .../own-connections/own-connections.component.css | 15 +++++++++++---- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.css b/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.css index 4ba6a028d..a02b6121e 100644 --- a/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.css +++ b/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.css @@ -58,8 +58,8 @@ @media (prefers-color-scheme: dark) { .testConnectionLink { - background: #404040; - border: 1px solid #404040; + background: #2a2a2a; + border: 1px solid #2a2a2a; } .testConnectionLink:hover { diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.css b/frontend/src/app/components/connections-list/own-connections/own-connections.component.css index 0f77fab94..adeb28db5 100644 --- a/frontend/src/app/components/connections-list/own-connections/own-connections.component.css +++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.css @@ -77,8 +77,8 @@ @media (prefers-color-scheme: dark) { .addConnectionLink { - background: #404040; - border: 1px solid #404040; + background: #2a2a2a; + border: 1px solid #2a2a2a; } .addConnectionLink:hover { @@ -96,8 +96,6 @@ display: flex; align-items: center; justify-content: center; - background-color: #fff; - border-radius: 4px; height: 40px; width: 40px; } @@ -108,6 +106,15 @@ width: 30px; } +@media (prefers-color-scheme: dark) { + .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"] { + filter: brightness(2); + } +} + .showAllButton { margin-top: 20px; margin-bottom: -56px; From 84e8808282099c1d4b7dc59ca74937e15f4a43f9 Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Wed, 28 Jan 2026 18:07:27 +0200 Subject: [PATCH 2/3] Style database subtitle (text in brackets) lighter and smaller Co-Authored-By: Claude Opus 4.5 --- .../own-connections/own-connections.component.css | 7 +++++++ .../own-connections/own-connections.component.html | 5 ++++- .../own-connections/own-connections.component.ts | 12 ++++++++++++ 3 files changed, 23 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.css b/frontend/src/app/components/connections-list/own-connections/own-connections.component.css index a2b726014..b7c0555a3 100644 --- a/frontend/src/app/components/connections-list/own-connections/own-connections.component.css +++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.css @@ -121,6 +121,13 @@ text-align: center; } +.addConnectionLink__subLabel { + display: block; + font-weight: 400; + opacity: 0.6; + font-size: 12px; +} + .showAllButton { margin-top: 20px; margin-bottom: -56px; 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 132db5c24..d8adcbbfe 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 @@ -13,7 +13,10 @@

- {{ supportedDatabasesTitles[supportedDatabase] }} + + {{ getMainTitle(supportedDatabase) }} + {{ getSubTitle(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 d6f5ba87c..cc89ef30a 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 @@ -43,4 +43,16 @@ export class OwnConnectionsComponent { this.displayedCardCount = 3; this._uiSettings.updateGlobalSetting('connectionsListCollapsed', true); } + + 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] : ''; + } } From 5c11684a22a2a69cc6a6f78b78752603326ce816 Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Fri, 30 Jan 2026 12:15:40 +0200 Subject: [PATCH 3/3] Improve connections list UI and add company members check MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- .../connections-list.component.css | 2 +- .../connections-list.component.html | 3 ++- .../demo-connections.component.html | 2 +- .../own-connections.component.css | 24 +++++++++++-------- .../own-connections.component.html | 6 ++--- .../own-connections.component.ts | 20 +++++++++++++--- 6 files changed, 38 insertions(+), 19 deletions(-) diff --git a/frontend/src/app/components/connections-list/connections-list.component.css b/frontend/src/app/components/connections-list/connections-list.component.css index d1a03e4f3..cf71755da 100644 --- a/frontend/src/app/components/connections-list/connections-list.component.css +++ b/frontend/src/app/components/connections-list/connections-list.component.css @@ -83,7 +83,7 @@ .connections-divider { position: relative; - margin: 44px auto 52px; + margin: 24px auto 32px; width: calc(100% - 16px); } diff --git a/frontend/src/app/components/connections-list/connections-list.component.html b/frontend/src/app/components/connections-list/connections-list.component.html index 2a6becd5e..7faf5a90c 100644 --- a/frontend/src/app/components/connections-list/connections-list.component.html +++ b/frontend/src/app/components/connections-list/connections-list.component.html @@ -22,7 +22,8 @@

{{companyN + [isDemo]="isDemo" + [companyId]="currentUser?.company?.id"> Explore demo admin panels

+

Explore demo panels

Try out a demo admin panel

    diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.css b/frontend/src/app/components/connections-list/own-connections/own-connections.component.css index b7c0555a3..ac6c2b680 100644 --- a/frontend/src/app/components/connections-list/own-connections/own-connections.component.css +++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.css @@ -3,6 +3,7 @@ flex-direction: column; align-items: center; width: 100%; + flex-grow: 1; } .empty-state { @@ -56,7 +57,8 @@ display: flex; flex-direction: column; align-items: center; - gap: 6px; + justify-content: center; + gap: 4px; border-radius: 4px; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), @@ -64,9 +66,10 @@ 0px 0px 2px 0px rgba(0, 0, 0, 0.14); color: inherit; font-weight: 600; - padding: 12px; + padding: 8px; text-decoration: none; height: 100%; + min-height: 90px; transition: box-shadow 200ms, background 200ms, border 200ms; } @@ -98,14 +101,14 @@ display: flex; align-items: center; justify-content: center; - height: 40px; - width: 40px; + height: 32px; + width: 32px; } .addConnectionLink__icon { flex-shrink: 0; - height: 30px; - width: 30px; + height: 28px; + width: 28px; } @media (prefers-color-scheme: dark) { @@ -126,6 +129,7 @@ font-weight: 400; opacity: 0.6; font-size: 12px; + margin-top: -2px; } .showAllButton { @@ -139,10 +143,10 @@ } } -.addButton { +/* .addButton { margin-top: -44px; height: 40px; -} +} */ .fabActions { display: flex; @@ -176,9 +180,9 @@ } } -.zapier-link__caption { +/* .zapier-link__caption { font-size: 12px; -} +} */ .zapier-link__logo { border-radius: 8px; 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 d8adcbbfe..06cfc2b4c 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 @@ -1,8 +1,8 @@ -

    Create you own test connection

    +

    Create your own test connection

    - Create your first connection + Create first connection

    • @@ -99,7 +99,7 @@

      {{ connectionItem.displayTitle }}--> -
      +

      Invited to a company but don't see your admin panel?

      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 cc89ef30a..ca04c0096 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 @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { Component, Input } from '@angular/core'; +import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { RouterModule } from '@angular/router'; @@ -7,6 +7,7 @@ import { User } from '@sentry/angular'; import { supportedDatabasesTitles, supportedOrderedDatabases } from 'src/app/consts/databases'; import { ConnectionItem } from 'src/app/models/connection'; import { UiSettings } from 'src/app/models/ui-settings'; +import { CompanyService } from 'src/app/services/company.service'; import { UiSettingsService } from 'src/app/services/ui-settings.service'; @Component({ @@ -15,17 +16,22 @@ import { UiSettingsService } from 'src/app/services/ui-settings.service'; templateUrl: './own-connections.component.html', styleUrl: './own-connections.component.css', }) -export class OwnConnectionsComponent { +export class OwnConnectionsComponent implements OnInit, OnChanges { @Input() currentUser: User; @Input() connections: ConnectionItem[] = null; @Input() isDemo: boolean = false; + @Input() companyId: string; public displayedCardCount: number = 3; public connectionsListCollapsed: boolean; public supportedDatabasesTitles = supportedDatabasesTitles; public supportedOrderedDatabases = supportedOrderedDatabases; + public hasMultipleMembers: boolean = false; - constructor(private _uiSettings: UiSettingsService) {} + constructor( + private _uiSettings: UiSettingsService, + private _companyService: CompanyService + ) {} ngOnInit() { this._uiSettings.getUiSettings().subscribe((settings: UiSettings) => { @@ -34,6 +40,14 @@ export class OwnConnectionsComponent { }); } + ngOnChanges(changes: SimpleChanges) { + if (changes['companyId'] && this.companyId) { + this._companyService.fetchCompanyMembers(this.companyId).subscribe((members: any[]) => { + this.hasMultipleMembers = members && members.length > 1; + }); + } + } + showMore() { this.displayedCardCount = this.connections.length; this._uiSettings.updateGlobalSetting('connectionsListCollapsed', false);