feat: improve connection list cards UI for dark theme

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

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

@@ -22,7 +22,8 @@ <h1 class="mat-headline-4 pageTitle__name" data-testid="company-name">{{companyN
         <app-own-connections
             [currentUser]="currentUser"
             [connections]="ownConnections"
-            [isDemo]="isDemo">
+            [isDemo]="isDemo"
+            [companyId]="currentUser?.company?.id">
         </app-own-connections>
 
         <mat-divider *ngIf="testConnections && testConnections.length"

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 {

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

@@ -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>
 <h1 *ngIf="isDemo" class="mat-display-1">Try out a demo admin panel</h1>
 
 <ul class="testConnections">

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,17 +57,19 @@
     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),
         0px 2px 2px 0px rgba(0, 0, 0, 0.12),
         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;
 }
 
@@ -79,8 +82,8 @@
 
 @media (prefers-color-scheme: dark) {
     .addConnectionLink {
-        background: #404040;
-        border: 1px solid #404040;
+        background: #2a2a2a;
+        border: 1px solid #2a2a2a;
     }
 
     .addConnectionLink:hover {
@@ -98,22 +101,37 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #fff;
-    border-radius: 4px;
-    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) {
+    .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);
+    }
 }
 
 .addConnectionLink__label {
     text-align: center;
 }
 
+.addConnectionLink__subLabel {
+    display: block;
+    font-weight: 400;
+    opacity: 0.6;
+    font-size: 12px;
+    margin-top: -2px;
+}
+
 .showAllButton {
     margin-top: 20px;
     margin-bottom: -56px;
@@ -125,10 +143,10 @@
     }
 }
 
-.addButton {
+/* .addButton {
     margin-top: -44px;
     height: 40px;
-}
+} */
 
 .fabActions {
     display: flex;
@@ -162,9 +180,9 @@
     }
 }
 
-.zapier-link__caption {
+/* .zapier-link__caption {
     font-size: 12px;
-}
+} */
 
 .zapier-link__logo {
     border-radius: 8px;

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

@@ -1,8 +1,8 @@
-<h1 *ngIf="isDemo" class="mat-display-1">Create you own test connection</h1>
+<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 your first connection
+        Create first connection
     </h1>
     <ul class="supportedDatabases">
         <li *ngFor="let supportedDatabase of supportedOrderedDatabases">
@@ -13,7 +13,10 @@ <h1 *ngIf="(currentUser?.role === 'ADMIN' || currentUser?.role === 'DB_ADMIN') &
                 <div class="addConnectionLink__iconBox">
                     <mat-icon [svgIcon]="supportedDatabase" class="addConnectionLink__icon"></mat-icon>
                 </div>
-                <span class="addConnectionLink__label">{{ supportedDatabasesTitles[supportedDatabase] }}</span>
+                <span class="addConnectionLink__label">
+                    {{ getMainTitle(supportedDatabase) }}
+                    <span *ngIf="getSubTitle(supportedDatabase)" class="addConnectionLink__subLabel">{{ getSubTitle(supportedDatabase) }}</span>
+                </span>
             </a>
         </li>
     </ul>
@@ -96,7 +99,7 @@ <h2 class="connectionInfo__connectionTitle">{{ connectionItem.displayTitle }}</h
     Add database
 </a>-->
 
-<div *ngIf="!connections?.length && connections !== null && !isDemo" class="empty-state_bottom">
+<div *ngIf="!connections?.length && connections !== null && !isDemo && hasMultipleMembers" class="empty-state_bottom">
     <p class="mat-body-1 empty-state__text">
         Invited to a company but don't see your admin panel?
     </p>

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

@@ -1,12 +1,13 @@
 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';
 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);
@@ -43,4 +57,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] : '';
+	}
 }