diff --git a/.gitignore b/.gitignore index aff81c8ae..85336faee 100644 --- a/.gitignore +++ b/.gitignore @@ -9,6 +9,7 @@ # dependencies /node_modules +.yarn/ # profiling files chrome-profiler-events*.json diff --git a/frontend/src/app/components/connections-list/hosted-database-success-dialog/hosted-database-success-dialog.component.html b/frontend/src/app/components/connections-list/hosted-database-success-dialog/hosted-database-success-dialog.component.html index 45bc545a3..edd6c05e0 100644 --- a/frontend/src/app/components/connections-list/hosted-database-success-dialog/hosted-database-success-dialog.component.html +++ b/frontend/src/app/components/connections-list/hosted-database-success-dialog/hosted-database-success-dialog.component.html @@ -64,8 +64,10 @@

[cdkCopyToClipboard]="credentialsText" (cdkCopyToClipboardCopied)="handleCredentialsCopied()"> @if (copied) { - check - Credentials copied + + check + Credentials copied + } @else { Copy connection string } 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 2638a5434..a64c7d27e 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 @@ -267,6 +267,7 @@ .connection { display: flex; flex-direction: column; + gap: 10px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 4px; color: inherit; @@ -283,7 +284,7 @@ } } -.connection:hover { +.connection:has(.connectionLogoPreview:hover) { border: 1px solid var(--color-primaryPalette-500); box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.2), @@ -292,7 +293,7 @@ } @media (prefers-color-scheme: dark) { - .connection:hover { + .connection:has(.connectionLogoPreview:hover) { border: 1px solid #636363; } } @@ -333,18 +334,65 @@ width: 100%; } -/* ── Schema button inside card ── */ +/* ── Schema button row at the bottom of the card ── */ .connectionSchemaButton { - margin-left: auto; - flex-shrink: 0; - color: rgba(255, 255, 255, 0.7); + position: relative; + align-self: stretch; + justify-content: center; + color: var(--mdc-text-button-label-text-color) !important; + font-size: 13px; + font-weight: 500; + line-height: 1; + height: 34px; + transition: color 150ms ease, background-color 150ms ease; +} + +.connectionSchemaButton mat-icon { + font-size: 16px !important; + width: 16px !important; + height: 16px !important; + margin-right: 6px; + transition: color 150ms ease; +} + +.connectionSchemaButton__ai { + color: var(--color-accentedPalette-500) !important; +} + +.connectionSchemaButton__arrow { + position: absolute; + right: 12px; + top: 50%; + margin: 0 !important; + transform: translate(-4px, -50%); + opacity: 0; + transition: opacity 150ms ease, transform 150ms ease; } .connectionSchemaButton:hover { - color: #fff; + color: var(--color-accentedPalette-500) !important; } +@media (prefers-color-scheme: dark) { + .connectionSchemaButton:hover { + color: var(--color-accentedPalette-100) !important; + background: var(--color-accentedPalette-900); + } + + .connectionSchemaButton:hover .connectionSchemaButton__ai { + color: var(--color-accentedPalette-100) !important; + } +} + +.connectionSchemaButton:hover .connectionSchemaButton__arrow { + opacity: 1; + transform: translate(0, -50%); +} + + + + /* ── Show more / less ── */ .showAllButton { 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 e446491f0..0fd862fcf 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 @@ -30,16 +30,17 @@

Create your first connection

{{ $any(connectionItem).displayTitle }}

{{ supportedDatabasesTitles[connectionItem.connection.type] }} - @if (connectionItem.accessLevel === 'edit') { - - schema - - } + @if (connectionItem.accessLevel === 'edit') { + + auto_awesome + Edit schema + arrow_forward + + } } diff --git a/frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.html b/frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.html index dc18b2e5a..56bda3c9d 100644 --- a/frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.html +++ b/frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.html @@ -47,8 +47,10 @@

New password for {{ result()!.databaseName }} @if (copied()) { - check - Credentials copied + + check + Credentials copied + } @else { Copy connection string }