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
}