diff --git a/.gitignore b/.gitignore index 85336faee..3cea27708 100644 --- a/.gitignore +++ b/.gitignore @@ -11,6 +11,12 @@ /node_modules .yarn/ +# yarn berry cache (not tracked at repo root) +/.yarn/cache +/.yarn/install-state.gz +/.yarn/unplugged +/.yarn/build-state.yml + # profiling files chrome-profiler-events*.json speed-measure-plugin*.json diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 16b2ee830..7c57050d9 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -48,6 +48,11 @@
Zapier
+ help
Help center
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 08ddb770a..476fb5894 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -304,6 +304,7 @@ export class AppComponent { user_hash: res.intercom_hash, user_id: res.id, email: res.email, + hide_default_launcher: window.innerWidth > 600, }); if (this.isDemo) @@ -345,6 +346,12 @@ export class AppComponent { this.isFeatureNotificationShown = false; } + openSupportChat() { + if (typeof window.Intercom !== 'undefined') { + window.Intercom('show'); + } + } + setUserLoggedIn(state) { this.userLoggedIn = state; this.changeDetector.detectChanges(); 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 fc3527475..bd0d88cfd 100644 --- a/frontend/src/app/components/connections-list/connections-list.component.css +++ b/frontend/src/app/components/connections-list/connections-list.component.css @@ -56,6 +56,13 @@ margin-bottom: 0; } +@media (width <= 600px) { + .pageTitleHeader .pageTitle__name { + font-size: 20px !important; + line-height: 1.2 !important; + } +} + .companyEditLink { position: absolute; top: 50%; 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 2cb93121e..b794ba21b 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 @@ -4,6 +4,14 @@ width: 100%; } +@media (width <= 600px) { + :host h1.mat-display-1 { + font-size: 22px !important; + line-height: 1.2 !important; + margin-bottom: 20px; + } +} + .section__label { display: block; font-size: 11px; @@ -17,11 +25,18 @@ .demoGrid { list-style: none; display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; padding: 0; margin: 0; + align-items: stretch; +} + +@media (601px <= width <= 1024px) { + .demoGrid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } } @media (width <= 600px) { @@ -36,6 +51,7 @@ gap: 12px; border-radius: 8px; padding: 12px 16px; + height: 100%; text-decoration: none; color: inherit; transition: box-shadow 200ms, background 200ms, border 200ms; @@ -102,6 +118,12 @@ min-width: 0; } +.demoCard__info strong { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .demoCard__type { font-size: 12px; margin-top: -2px; 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 a64c7d27e..2304d8803 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 @@ -5,6 +5,16 @@ width: 100%; } +/* ── Page heading: shrink on mobile to match company name ── */ + +@media (width <= 600px) { + :host h1.mat-display-1 { + font-size: 22px !important; + line-height: 1.2 !important; + margin-bottom: 20px; + } +} + /* ── Section labels ── */ .section { @@ -124,30 +134,50 @@ white-space: nowrap; } +.hosted-banner__chevron { + display: none; + flex-shrink: 0; + color: var(--color-accentedPalette-700); +} + @media (width <= 600px) { .hosted-banner { - flex-direction: column; - align-items: flex-start; - padding: 16px; - gap: 12px; + align-items: center; + padding: 10px 14px; + gap: 10px; } .hosted-banner__iconBox { - width: 36px; - height: 36px; + width: 30px; + height: 30px; + } + + .hosted-banner__icon { + width: 18px !important; + height: 18px !important; + font-size: 18px !important; + line-height: 18px !important; } .hosted-banner__title { - font-size: 14px; + font-size: 13px; + line-height: 1.2; } .hosted-banner__subtitle { - font-size: 12px; + font-size: 11.5px; + line-height: 1.25; } .hosted-banner__badge { - align-self: flex-start; - font-size: 11px; + display: none; + } + + .hosted-banner__chevron { + display: block; + font-size: 20px; + width: 20px; + height: 20px; } } @@ -167,6 +197,8 @@ @media (width <= 600px) { .dbGrid { width: 100%; + grid-template-columns: 1fr; + grid-gap: 8px; } } @@ -191,6 +223,16 @@ 0px 0px 2px 0px rgba(0, 0, 0, 0.14); } +@media (width <= 600px) { + .dbCard { + flex-direction: row; + justify-content: flex-start; + gap: 12px; + padding: 10px 14px; + min-height: 54px; + } +} + .dbCard:hover { box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), @@ -251,6 +293,19 @@ margin-top: -2px; } +@media (width <= 600px) { + .dbCard__label { + text-align: left; + line-height: 1.2; + flex: 1; + min-width: 0; + } + + .dbCard__subLabel { + margin-top: 2px; + } +} + /* ── Existing connections list ── */ .connections { @@ -334,6 +389,33 @@ width: 100%; } +/* ── Compact mobile layout (keep desktop dark banner, just shorter) ── */ + +@media (width <= 600px) { + .connections { + grid-template-columns: 1fr; + gap: 8px; + } + + .connection { + padding: 8px; + } + + .connectionLogoPreview { + height: 56px; + padding: 6px 10px; + gap: 10px; + } + + .connectionInfo .connectionInfo__connectionTitle { + font-size: 14px !important; + } + + .connectionLogoPreview .mat-body-2 { + font-size: 11px; + } +} + /* ── Schema button row at the bottom of the card ── */ .connectionSchemaButton { @@ -410,6 +492,21 @@ margin-top: 52px; } +/* Show separate buttons on desktop, dropdown menu on mobile */ +.fabActions--mobile { + display: none; +} + +@media (width <= 600px) { + .fabActions--desktop { + display: none; + } + + .fabActions--mobile { + display: flex; + } +} + .fabAddButton { border-radius: 24px; box-shadow: @@ -417,7 +514,12 @@ 0px 4px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14); height: 48px !important; - width: 178px; + min-width: 178px; + padding: 0 14px 0 16px !important; +} + +.fabAddButton .mat-icon[iconPositionEnd] { + margin-left: 4px; } .fabHostedButton { @@ -445,6 +547,128 @@ } } +/* ── Add-connection menu styling (panelClass="addConnectionMenu") ── */ + +::ng-deep .addConnectionMenu.mat-mdc-menu-panel { + min-width: 320px !important; + max-width: 360px !important; + border-radius: 14px !important; + box-shadow: + 0 12px 28px rgba(0, 0, 0, 0.16), + 0 4px 8px rgba(0, 0, 0, 0.08); + padding: 6px !important; + margin-bottom: 20px !important; +} + +::ng-deep .addConnectionMenu .mat-mdc-menu-content { + padding: 0 !important; +} + +::ng-deep .addConnectionMenu .mat-mdc-menu-item { + padding: 0 !important; + min-height: auto !important; + border-radius: 10px; + margin: 2px 0; +} + +::ng-deep .addConnectionMenu .mat-mdc-menu-item:hover { + background-color: rgba(0, 0, 0, 0.04); +} + +::ng-deep .addConnectionMenu .mat-mdc-menu-item .mat-mdc-menu-item-text { + width: 100%; +} + +.addConnectionItem { + display: flex; + align-items: center; + gap: 10px; + width: 100%; + padding: 10px 12px 10px 0; + line-height: 1; +} + +.addConnectionItem mat-icon { + margin: 0 !important; +} + +.addConnectionItem__iconBox { + flex-shrink: 0; + width: 32px; + height: 32px; + border-radius: 8px; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; +} + +.addConnectionItem__iconBox mat-icon { + font-size: 18px !important; + width: 18px !important; + height: 18px !important; + line-height: 18px !important; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.addConnectionItem__iconBox--primary { + background-color: color-mix(in srgb, var(--color-accentedPalette-500) 14%, transparent); + color: var(--color-accentedPalette-500); +} + +.addConnectionItem__iconBox--accent { + background-color: color-mix(in srgb, var(--color-alternativePalette-500) 14%, transparent); + color: var(--color-alternativePalette-500); +} + +.addConnectionItem__iconBox--warn { + background-color: color-mix(in srgb, var(--color-warningPalette-500) 16%, transparent); + color: var(--color-warningPalette-500); +} + +.addConnectionItem__text { + flex: 1; + display: flex; + flex-direction: column; + gap: 2px; + min-width: 0; +} + +.addConnectionItem__title { + font-size: 14px; + font-weight: 600; + color: rgba(0, 0, 0, 0.88); + line-height: 1.2; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.addConnectionItem__subtitle { + font-size: 12px; + color: rgba(0, 0, 0, 0.55); + line-height: 1.3; + white-space: normal; + overflow: hidden; + text-overflow: ellipsis; +} + +@media (prefers-color-scheme: dark) { + ::ng-deep .addConnectionMenu .mat-mdc-menu-item:hover { + background-color: rgba(255, 255, 255, 0.06); + } + + .addConnectionItem__title { + color: rgba(255, 255, 255, 0.92); + } + + .addConnectionItem__subtitle { + color: rgba(255, 255, 255, 0.6); + } +} + /* ── Empty state bottom ── */ .empty-state_bottom { 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 dcf1407ba..c9999068d 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 @@ -3,7 +3,7 @@ @if (isDemo) {

Create your own test connection

} @else if (currentUser?.role === 'ADMIN' || currentUser?.role === 'DB_ADMIN') { -

Create your first connection

+

Add your first connection

} } @@ -67,6 +67,7 @@

{{ $any(connectionItem).displayTitle You've reached the limit of 3 hosted databases ✦ Upgrade + chevron_right } @else { } @@ -118,7 +120,8 @@

{{ $any(connectionItem).displayTitle @if (connections?.length) { -
+ +
@if (showHostedDatabaseEntry) { @if (hostedDbLimitReached) { @@ -153,6 +156,86 @@

{{ $any(connectionItem).displayTitle }

+ + +
+ @if (currentUser?.role === 'ADMIN' || currentUser?.role === 'DB_ADMIN') { + @if (showHostedDatabaseEntry) { + + + +
+
+ cable +
+
+ Connect your own + MySQL, PostgreSQL, MongoDB and more +
+
+ + @if (hostedDbLimitReached) { + +
+
+ upgrade +
+
+ Upgrade to host more + You've reached the limit of 3 hosted databases +
+
+ + } @else { + + } + + } @else { + + add + Add connection + + } + } +
} @if (!connections?.length && connections !== null && !isDemo && hasMultipleMembers) { 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 5402c49a7..3cafdc687 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 @@ -3,6 +3,7 @@ import { Component, Input, OnChanges, OnInit, SimpleChanges, signal } from '@ang import { MatButtonModule } from '@angular/material/button'; import { MatDialog } from '@angular/material/dialog'; import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; import { MatTooltipModule } from '@angular/material/tooltip'; import { Router, RouterModule } from '@angular/router'; import posthog from 'posthog-js'; @@ -34,7 +35,7 @@ import { @Component({ selector: 'app-own-connections', - imports: [CommonModule, RouterModule, MatIconModule, MatButtonModule, MatTooltipModule], + imports: [CommonModule, RouterModule, MatIconModule, MatButtonModule, MatMenuModule, MatTooltipModule], templateUrl: './own-connections.component.html', styleUrl: './own-connections.component.css', })