From d5881dc7ee8c44226e86a932b6ced22646f0dfe0 Mon Sep 17 00:00:00 2001
From: Karina Kharchenko <karina@short.io>
Date: Wed, 20 May 2026 12:44:58 +0300
Subject: [PATCH] feat(connections): promote schema editor to a dedicated card
 row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move the per-connection "Edit schema" affordance out of the dark logo
banner: it now sits as a third row below the banner as a full-width
text button labeled "Edit schema" with an `auto_awesome` sparkle in the
accented blue. A trailing `arrow_forward` icon fades in on hover. The
text uses a subtly blue-tinted slate via --mdc-text-button-label-text-color
so it doesn't compete with the banner at rest but lights up on hover.

The card itself no longer highlights on any hover — the primary border /
shadow are scoped via :has(.connectionLogoPreview:hover) so only the dark
banner triggers the card-level highlight, leaving the schema row to
react independently.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../own-connections.component.css             | 57 ++++++++++++++++---
 .../own-connections.component.html            | 19 ++++---
 2 files changed, 60 insertions(+), 16 deletions(-)

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..f6557ad12 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,16 +334,58 @@
 	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;
+	--mdc-text-button-label-text-color: color-mix(in srgb, var(--color-accentedPalette-500) 18%, #1f2937 82%);
+	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;
+	--mdc-text-button-label-text-color: var(--color-accentedPalette-500);
+	color: var(--color-accentedPalette-500) !important;
+	background-color: color-mix(in srgb, var(--color-accentedPalette-500), transparent 92%);
+}
+
+.connectionSchemaButton:hover .connectionSchemaButton__arrow {
+	opacity: 1;
+	transform: translate(0, -50%);
+}
+
+@media (prefers-color-scheme: dark) {
+	.connectionSchemaButton {
+		--mdc-text-button-label-text-color: color-mix(in srgb, var(--color-accentedPalette-500) 25%, #e2e8f0 75%);
+	}
 }
 
 /* ── Show more / less ── */
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..2b5de2e3f 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 @@ <h1 class="mat-display-1">Create your first connection</h1>
                             <h2 class="connectionInfo__connectionTitle">{{ $any(connectionItem).displayTitle }}</h2>
                             <span class="mat-body-2">{{ supportedDatabasesTitles[connectionItem.connection.type] }}</span>
                         </div>
-                        @if (connectionItem.accessLevel === 'edit') {
-                            <a mat-icon-button
-                                class="connectionSchemaButton"
-                                routerLink="/edit-database-schema/{{connectionItem.connection.id}}"
-                                matTooltip="Edit schema"
-                                (click)="$event.stopPropagation()">
-                                <mat-icon>schema</mat-icon>
-                            </a>
-                        }
                     </div>
+                    @if (connectionItem.accessLevel === 'edit') {
+                        <a mat-button
+                            class="connectionSchemaButton"
+                            routerLink="/edit-database-schema/{{connectionItem.connection.id}}"
+                            (click)="$event.stopPropagation()">
+                            <mat-icon class="connectionSchemaButton__ai">auto_awesome</mat-icon>
+                            <span>Edit schema</span>
+                            <mat-icon iconPositionEnd class="connectionSchemaButton__arrow">arrow_forward</mat-icon>
+                        </a>
+                    }
                 </a>
             </li>
         }