From 8e2b8d7fe2fb7e8beda21bdb8b7496514b2b0e35 Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Tue, 24 Mar 2026 12:07:34 +0200 Subject: [PATCH 1/5] feat: refactor connections list with separate hosted banner, DB grid, and demo sections Split the connections page into three visually distinct sections: - Hosted PostgreSQL as a standalone banner with gradient card - Connect your own as a responsive DB grid - Demo panels as a 3-column grid with section labels Co-Authored-By: Claude Opus 4.6 (1M context) --- .../demo-connections.component.css | 112 +++-- .../demo-connections.component.html | 48 ++- .../own-connections.component.css | 396 ++++++++++-------- .../own-connections.component.html | 232 +++++----- 4 files changed, 428 insertions(+), 360 deletions(-) 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 687354ed7..2cb93121e 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 @@ -1,71 +1,71 @@ :host { display: flex; flex-direction: column; - align-items: center; width: 100%; } -.testConnections { +.section__label { + display: block; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + opacity: 0.45; + margin-bottom: 12px; +} + +.demoGrid { list-style: none; display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - grid-gap: 20px; - margin-top: 24px; + grid-template-columns: repeat(3, 1fr); + gap: 12px; width: 100%; + padding: 0; + margin: 0; } @media (width <= 600px) { - .testConnections { - grid-template-columns: repeat(2, minmax(0, 1fr)); + .demoGrid { + grid-template-columns: 1fr; } } -.testConnectionLink { +.demoCard { display: flex; align-items: center; gap: 12px; - border-radius: 4px; + border-radius: 8px; + padding: 12px 16px; + text-decoration: none; + color: inherit; + transition: box-shadow 200ms, background 200ms, border 200ms; 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; - height: 48px; - padding: 0 12px; - text-decoration: none; - transition: - box-shadow 200ms, - background 200ms, - border 200ms; } -@media (width <= 600px) { - .testConnectionLink { - justify-content: flex-start; - } +.demoCard:hover { + box-shadow: + 0px 1px 5px 0px rgba(0, 0, 0, 0.2), + 0px 3px 4px 0px rgba(0, 0, 0, 0.12), + 0px 2px 4px 0px rgba(0, 0, 0, 0.14); } @media (prefers-color-scheme: light) { - .testConnectionLink { + .demoCard { background: var(--mat-sidenav-content-background-color); border: 1px solid var(--mat-sidenav-content-background-color); } - - .testConnectionLink:hover { - 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); - } } @media (prefers-color-scheme: dark) { - .testConnectionLink { + .demoCard { background: #2a2a2a; border: 1px solid #2a2a2a; } - .testConnectionLink:hover { + .demoCard:hover { background: var(--surface-dark-color); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: @@ -74,55 +74,53 @@ 0px 0px 2px 0px rgba(255, 255, 255, 0.12); } - .testConnectionLink:hover .connection__goIcon { + .demoCard:hover .demoCard__arrow { color: var(--color-accentedPalette-500); } } -.testConnectionLink:hover { - box-shadow: - 0px 1px 5px 0px rgba(0, 0, 0, 0.2), - 0px 3px 4px 0px rgba(0, 0, 0, 0.12), - 0px 2px 4px 0px rgba(0, 0, 0, 0.14); -} - -.testConnectionLink:active { +.demoCard:active { background: rgba(0, 0, 0, 0.16); } -.testConnectionLink__icon { +.demoCard__icon { flex-shrink: 0; height: 28px; width: 28px; } @media (prefers-color-scheme: dark) { - .testConnectionLink__icon { + .demoCard__icon { filter: brightness(0) invert(1); } } -.connection__goIcon { - margin-left: auto; +.demoCard__info { + display: flex; + flex-direction: column; + flex: 1; + min-width: 0; } -@media (width <= 600px) { - .testConnectionLink .connection__goIcon { - display: none; - } +.demoCard__type { + font-size: 12px; + margin-top: -2px; + opacity: 0.55; } -.testConnectionLink:hover .connection__goIcon, -.connection:hover .connection__goIcon { - opacity: 1; +.demoCard__arrow { + flex-shrink: 0; + margin-left: auto; + opacity: 0.65; + transition: opacity 200ms, color 200ms; } -.testConnectionLink__info { - display: flex; - flex-direction: column; +.demoCard:hover .demoCard__arrow { + opacity: 1; } -.testConnectionLink__type { - font-size: 12px; - margin-top: -2px; +@media (width <= 600px) { + .demoCard__arrow { + display: none; + } } diff --git a/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.html b/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.html index 3b919975a..1be3f443f 100644 --- a/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.html +++ b/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.html @@ -1,23 +1,27 @@ -

Explore demo panels

-

Try out a demo admin panel

+@if (!isDemo) { + EXPLORE DEMO PANELS +} @else { +

Try out a demo admin panel

+} - \ No newline at end of file + 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 7749c24da..1d78126fd 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 @@ -6,81 +6,176 @@ width: 100%; } -.empty-state { +/* ── Section labels ── */ + +.section { + width: 100%; + margin-top: 32px; +} + +.section:first-of-type { + margin-top: 0; +} + +.section__label { + display: block; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + opacity: 0.45; + margin-bottom: 12px; +} + +/* ── Hosted banner ── */ + +.hosted-banner { + appearance: none; + cursor: pointer; + width: 100%; display: flex; - flex-direction: column; align-items: center; - width: 100%; + gap: 16px; + padding: 18px 24px; + border-radius: 12px; + border: 1px solid rgba(139, 128, 255, 0.25); + background-clip: padding-box; + background: + radial-gradient(ellipse 120% 80% at 85% 0%, rgba(129, 120, 248, 0.3), transparent), + radial-gradient(ellipse 80% 100% at 0% 100%, rgba(99, 60, 200, 0.2), transparent), + linear-gradient(160deg, #12103a 0%, #1e1a5e 35%, #2d2680 70%, #3b34a8 100%); + color: #f8fafc; + text-align: left; + transition: border-color 200ms, box-shadow 200ms; } -.empty-state_bottom { - margin-top: auto; +.hosted-banner:hover { + border-color: rgba(139, 128, 255, 0.35); + box-shadow: + 0px 8px 24px rgba(30, 26, 94, 0.3), + 0px 1px 5px rgba(15, 15, 42, 0.2); } -@media (prefers-color-scheme: light) { - .empty-state_bottom { - color: rgba(0, 0, 0, 0.64); - } +.hosted-banner:disabled { + opacity: 0.7; + cursor: wait; } -@media (prefers-color-scheme: dark) { - .empty-state_bottom { - color: rgba(255, 255, 255, 0.64); - } +.hosted-banner__iconBox { + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.1); } -.empty-state__text { - font-size: 12px !important; - font-weight: 500 !important; - margin-bottom: 0 !important; - text-align: center; - text-transform: uppercase; +.hosted-banner__icon { + width: 28px; + height: 28px; + color: #fff; + filter: brightness(0) invert(1); +} + +.hosted-banner__text { + display: flex; + flex-direction: column; + gap: 2px; + flex: 1; + min-width: 0; +} + +.hosted-banner__title { + font-size: 15px; + font-weight: 600; +} + +.hosted-banner__subtitle { + font-size: 13px; + opacity: 0.72; +} + +.hosted-banner__badge { + flex-shrink: 0; + font-size: 12px; + font-weight: 600; + padding: 4px 12px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(139, 128, 255, 0.3); + white-space: nowrap; +} + +@media (width <= 600px) { + .hosted-banner { + flex-direction: column; + align-items: flex-start; + padding: 16px; + gap: 12px; + } + + .hosted-banner__iconBox { + width: 36px; + height: 36px; + } + + .hosted-banner__title { + font-size: 14px; + } + + .hosted-banner__subtitle { + font-size: 12px; + } + + .hosted-banner__badge { + align-self: flex-start; + font-size: 11px; + } } -.supportedDatabases { +/* ── DB grid (5 columns) ── */ + +.dbGrid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); align-items: stretch; grid-gap: 20px; - margin-top: 24px; - width: 77%; + width: 100%; + padding: 0; + margin: 0; } @media (width <= 600px) { - .supportedDatabases { + .dbGrid { width: 100%; } } -.addConnectionLink { - appearance: none; - background: transparent; - border: none; - cursor: pointer; +.dbCard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; - border-radius: 4px; + border-radius: 8px; + padding: 8px; + height: 100%; + min-height: 90px; + text-decoration: none; + color: inherit; + font-weight: 600; + cursor: pointer; + transition: box-shadow 200ms, background 200ms, border 200ms; 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: 8px; - text-decoration: none; - height: 100%; - min-height: 90px; - transition: - box-shadow 200ms, - background 200ms, - border 200ms; } -.addConnectionLink:hover { +.dbCard:hover { box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.12), @@ -88,12 +183,12 @@ } @media (prefers-color-scheme: dark) { - .addConnectionLink { + .dbCard { background: #2a2a2a; border: 1px solid #2a2a2a; } - .addConnectionLink:hover { + .dbCard:hover { background: var(--surface-dark-color); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: @@ -103,33 +198,7 @@ } } -.addConnectionLink_hosted { - background: - radial-gradient(circle at top right, rgba(125, 211, 252, 0.32), transparent 42%), - linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%); - border: 1px solid rgba(125, 211, 252, 0.35); - color: #f8fafc; - gap: 10px; - padding: 14px 12px; - text-align: left; -} - -.addConnectionLink_hosted:hover { - border-color: rgba(191, 219, 254, 0.72); - box-shadow: - 0px 8px 24px rgba(29, 78, 216, 0.24), - 0px 1px 5px rgba(15, 23, 42, 0.22); -} - -.addConnectionLink__eyebrow { - font-size: 11px; - font-weight: 700; - letter-spacing: 0.08em; - opacity: 0.84; - text-transform: uppercase; -} - -.addConnectionLink__iconBox { +.dbCard__iconBox { flex-shrink: 0; display: flex; align-items: center; @@ -138,95 +207,35 @@ width: 32px; } -.addConnectionLink__iconBox_hosted { - background: rgba(255, 255, 255, 0.1); - border-radius: 999px; - height: 42px; - width: 42px; -} - -.addConnectionLink__icon { +.dbCard__icon { flex-shrink: 0; 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"] { + .dbCard__icon[data-mat-icon-name="mongodb"], + .dbCard__icon[data-mat-icon-name="mysql"], + .dbCard__icon[data-mat-icon-name="dynamodb"], + .dbCard__icon[data-mat-icon-name="mssql"] { filter: brightness(2); } } -.addConnectionLink__label { +.dbCard__label { text-align: center; + font-size: 13px; } -.addConnectionLink__subLabel { +.dbCard__subLabel { display: block; font-weight: 400; - opacity: 0.6; - font-size: 12px; + opacity: 0.5; + font-size: 11px; margin-top: -2px; } -.showAllButton { - margin-top: 20px; - margin-bottom: -56px; -} - -@media (width <= 600px) { - .showAllButton { - margin-bottom: 0; - } -} - -.addButton { - margin-top: -44px; - height: 40px; -} - -.fabActions { - display: flex; - align-items: center; - gap: 12px; - align-self: flex-end; - margin-top: 52px; -} - -.fabAddButton { - border-radius: 24px; - box-shadow: - 0px 1px 10px 0px rgba(0, 0, 0, 0.2), - 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; -} - -.fabHostedButton { - border-radius: 24px; - height: 48px !important; -} - -@media (width <= 600px) { - .fabActions { - position: fixed; - right: 9vw; - bottom: max(64px, 10vw); - flex-direction: column; - align-items: flex-end; - z-index: 1; - } - - .fabAddButton, - .fabHostedButton { - width: auto; - min-width: 178px; - } -} +/* ── Existing connections list ── */ .connections { list-style: none; @@ -234,29 +243,11 @@ grid-template-columns: repeat(auto-fit, minmax(300px, calc(33.33% - 14px))); justify-content: center; gap: 20px; - margin-top: 24px; + margin-bottom: 8px; width: 100%; + padding: 0; } -/* @media (width <= 600px) { - .connections { - flex-direction: column; - flex-wrap: nowrap; - } -} */ - -/* .connectionItem { - flex: 0 0 calc((100% - 40px)/3); - max-width: calc((100% - 40px)/3); -} - -@media (width <= 600px) { - .connectionItem { - flex: initial; - max-width: 100%; - } -} */ - .connection { display: flex; flex-direction: column; @@ -266,9 +257,7 @@ padding: 12px; text-decoration: none; width: 100%; - transition: - border 200ms, - box-shadow 200ms; + transition: border 200ms, box-shadow 200ms; } @media (prefers-color-scheme: dark) { @@ -326,12 +315,77 @@ width: 100%; } -.connection__goIcon { - grid-row: 1 / span 2; - grid-column: 2; - margin-left: auto; - opacity: 0.65; - transition: - opacity 200ms, - color 200ms; +/* ── Show more / less ── */ + +.showAllButton { + margin-top: 12px; + margin-bottom: 8px; +} + +/* ── FAB actions ── */ + +.fabActions { + display: flex; + align-items: center; + gap: 12px; + align-self: flex-end; + margin-top: 52px; +} + +.fabAddButton { + border-radius: 24px; + box-shadow: + 0px 1px 10px 0px rgba(0, 0, 0, 0.2), + 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; +} + +.fabHostedButton { + border-radius: 24px; + height: 48px !important; +} + +@media (width <= 600px) { + .fabActions { + position: fixed; + right: 9vw; + bottom: max(64px, 10vw); + flex-direction: column; + align-items: flex-end; + z-index: 1; + } + + .fabAddButton, + .fabHostedButton { + width: auto; + min-width: 178px; + } +} + +/* ── Empty state bottom ── */ + +.empty-state_bottom { + margin-top: auto; +} + +@media (prefers-color-scheme: light) { + .empty-state_bottom { + color: rgba(0, 0, 0, 0.64); + } +} + +@media (prefers-color-scheme: dark) { + .empty-state_bottom { + color: rgba(255, 255, 255, 0.64); + } +} + +.empty-state__text { + font-size: 12px !important; + font-weight: 500 !important; + margin-bottom: 0 !important; + text-align: center; + text-transform: uppercase; } 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 e5eacccc5..960ad2543 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 @@ -1,125 +1,137 @@ -

Create your own test connection

+ +@if (!connections?.length && connections !== null) { + @if (isDemo) { +

Create your own test connection

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

Create your first connection

+ } +} -
-

- Create your first connection -

- -
- - - - + @if (displayedCardCount < connections?.length) { + + } + @if (displayedCardCount > 3) { + + } +} -
- @if (showHostedDatabaseEntry && connections?.length) { + +@if (showHostedDatabaseEntry) { +
+ HOSTED BY ROCKETADMIN - } - - add - Add database - -
- +
+} -
-

- Invited to a company but don't see your admin panel? -

-

- Request access from your Account Owner -

+ +
+ CONNECT YOUR OWN +
+ + +@if (connections?.length) { +
+ @if (showHostedDatabaseEntry) { + + } + @if (currentUser?.role === 'ADMIN' || currentUser?.role === 'DB_ADMIN') { + + add + Add database + + } +
+} + +@if (!connections?.length && connections !== null && !isDemo && hasMultipleMembers) { +
+

+ Invited to a company but don't see your admin panel? +

+

+ Request access from your Account Owner +

+
+} From d4f316a5eb0468cf287c8789093f19b4c9fa42cd Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Tue, 24 Mar 2026 12:12:53 +0200 Subject: [PATCH 2/5] fix: lighten hosted PostgreSQL banner gradient for light theme Add separate dark mode gradient to keep the deep tones, while using a brighter indigo palette for light theme. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../own-connections.component.css | 27 ++++++++++++++----- 1 file changed, 21 insertions(+), 6 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 1d78126fd..cd0892753 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 @@ -41,19 +41,34 @@ border: 1px solid rgba(139, 128, 255, 0.25); background-clip: padding-box; background: - radial-gradient(ellipse 120% 80% at 85% 0%, rgba(129, 120, 248, 0.3), transparent), - radial-gradient(ellipse 80% 100% at 0% 100%, rgba(99, 60, 200, 0.2), transparent), - linear-gradient(160deg, #12103a 0%, #1e1a5e 35%, #2d2680 70%, #3b34a8 100%); + radial-gradient(ellipse 120% 80% at 85% 0%, rgba(129, 120, 248, 0.25), transparent), + radial-gradient(ellipse 80% 100% at 0% 100%, rgba(99, 60, 200, 0.15), transparent), + linear-gradient(160deg, #2e2a7a 0%, #3b34a8 35%, #4f46c8 70%, #6358e0 100%); color: #f8fafc; text-align: left; transition: border-color 200ms, box-shadow 200ms; } .hosted-banner:hover { - border-color: rgba(139, 128, 255, 0.35); + border-color: rgba(139, 128, 255, 0.4); box-shadow: - 0px 8px 24px rgba(30, 26, 94, 0.3), - 0px 1px 5px rgba(15, 15, 42, 0.2); + 0px 8px 24px rgba(59, 52, 168, 0.25), + 0px 1px 5px rgba(30, 26, 94, 0.15); +} + +@media (prefers-color-scheme: dark) { + .hosted-banner { + background: + radial-gradient(ellipse 120% 80% at 85% 0%, rgba(129, 120, 248, 0.3), transparent), + radial-gradient(ellipse 80% 100% at 0% 100%, rgba(99, 60, 200, 0.2), transparent), + linear-gradient(160deg, #12103a 0%, #1e1a5e 35%, #2d2680 70%, #3b34a8 100%); + } + + .hosted-banner:hover { + box-shadow: + 0px 8px 24px rgba(30, 26, 94, 0.4), + 0px 1px 5px rgba(15, 15, 42, 0.25); + } } .hosted-banner:disabled { From ea1722b3fedb4bcac54b785677bc3dce7f5d861c Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Wed, 25 Mar 2026 14:31:41 +0000 Subject: [PATCH 3/5] connections list: fix colors and states, hosted database --- .../demo-connections.component.html | 2 +- .../own-connections.component.css | 44 ++++----- .../own-connections.component.html | 92 +++++++++---------- 3 files changed, 69 insertions(+), 69 deletions(-) diff --git a/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.html b/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.html index 1be3f443f..ae9168f3e 100644 --- a/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.html +++ b/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.html @@ -1,5 +1,5 @@ @if (!isDemo) { - EXPLORE DEMO PANELS +

Explore demo panels

} @else {

Try out a demo admin panel

} 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 cd0892753..3888c781b 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 @@ -2,7 +2,6 @@ flex-grow: 1; display: flex; flex-direction: column; - align-items: center; width: 100%; } @@ -38,36 +37,33 @@ gap: 16px; padding: 18px 24px; border-radius: 12px; - border: 1px solid rgba(139, 128, 255, 0.25); + border: 1px solid var(--color-accentedPalette-200); background-clip: padding-box; - background: - radial-gradient(ellipse 120% 80% at 85% 0%, rgba(129, 120, 248, 0.25), transparent), - radial-gradient(ellipse 80% 100% at 0% 100%, rgba(99, 60, 200, 0.15), transparent), - linear-gradient(160deg, #2e2a7a 0%, #3b34a8 35%, #4f46c8 70%, #6358e0 100%); - color: #f8fafc; + background-color: var(--color-accentedPalette-50); + color: var(--color-accentedPalette-900); text-align: left; transition: border-color 200ms, box-shadow 200ms; } .hosted-banner:hover { - border-color: rgba(139, 128, 255, 0.4); + border-color: var(--color-accentedPalette-300); box-shadow: - 0px 8px 24px rgba(59, 52, 168, 0.25), - 0px 1px 5px rgba(30, 26, 94, 0.15); + 0px 8px 24px var(--color-accentedPalette-100), + 0px 1px 5px var(--color-accentedPalette-50); } @media (prefers-color-scheme: dark) { .hosted-banner { - background: - radial-gradient(ellipse 120% 80% at 85% 0%, rgba(129, 120, 248, 0.3), transparent), - radial-gradient(ellipse 80% 100% at 0% 100%, rgba(99, 60, 200, 0.2), transparent), - linear-gradient(160deg, #12103a 0%, #1e1a5e 35%, #2d2680 70%, #3b34a8 100%); + border-color: var(--color-accentedPalette-700); + background-color: var(--color-accentedPalette-900); + color: var(--color-accentedPalette-100); } .hosted-banner:hover { + border-color: var(--color-accentedPalette-500); box-shadow: - 0px 8px 24px rgba(30, 26, 94, 0.4), - 0px 1px 5px rgba(15, 15, 42, 0.25); + 0px 8px 24px var(--color-accentedPalette-800), + 0px 1px 5px var(--color-accentedPalette-600); } } @@ -90,8 +86,12 @@ .hosted-banner__icon { width: 28px; height: 28px; - color: #fff; - filter: brightness(0) invert(1); +} + +@media (prefers-color-scheme: dark) { + .hosted-banner__icon { + filter: brightness(0) invert(1); + } } .hosted-banner__text { @@ -116,10 +116,10 @@ flex-shrink: 0; font-size: 12px; font-weight: 600; - padding: 4px 12px; + padding: 6px 12px; border-radius: 999px; - background: rgba(255, 255, 255, 0.06); - border: 1px solid rgba(139, 128, 255, 0.3); + background: var(--color-accentedPalette-700); + color: var(--color-accentedPalette-50); white-space: nowrap; } @@ -205,7 +205,7 @@ .dbCard:hover { background: var(--surface-dark-color); - border: 1px solid rgba(255, 255, 255, 0.75); + border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0px 1px 3px 0px rgba(255, 255, 255, 0.1), 0px 2px 2px 0px rgba(255, 255, 255, 0.08), 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 960ad2543..c746aebe0 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 @@ -42,57 +42,57 @@

{{ $any(connectionItem).displayTitle @if (displayedCardCount > 3) { } -} +} @else { + + @if (showHostedDatabaseEntry) { +
+ HOSTED BY ROCKETADMIN + +
+ } - -@if (showHostedDatabaseEntry) { +
- HOSTED BY ROCKETADMIN - + CONNECT YOUR OWN +
} - -
- CONNECT YOUR OWN - -
- @if (connections?.length) {
From 1f73e41f65b7519081605789c71e66889b505eb2 Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Wed, 25 Mar 2026 14:34:40 +0000 Subject: [PATCH 4/5] connections list: minor changes --- .../own-connections/own-connections.component.css | 1 + .../own-connections/own-connections.component.html | 6 +++--- 2 files changed, 4 insertions(+), 3 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 3888c781b..aa15010de 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 @@ -24,6 +24,7 @@ text-transform: uppercase; opacity: 0.45; margin-bottom: 12px; + text-transform: uppercase; } /* ── Hosted banner ── */ 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 c746aebe0..ff3d3c17e 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 @@ -46,7 +46,7 @@

{{ $any(connectionItem).displayTitle @if (showHostedDatabaseEntry) {
- HOSTED BY ROCKETADMIN + Hosted by Rocketadmin
- ✦ Recommended + ✦ Quickstart

}
- CONNECT YOUR OWN + Connect your own
    @for (supportedDatabase of supportedOrderedDatabases; track supportedDatabase) {
  • From f58e156ed8b67430efed8ffa02d34818266cdaeb Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Thu, 26 Mar 2026 14:08:06 +0000 Subject: [PATCH 5/5] fix unit tests --- .../own-connections/own-connections.component.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.spec.ts b/frontend/src/app/components/connections-list/own-connections/own-connections.component.spec.ts index dd4440fa1..33f27ac56 100644 --- a/frontend/src/app/components/connections-list/own-connections/own-connections.component.spec.ts +++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.spec.ts @@ -98,7 +98,7 @@ describe('OwnConnectionsComponent', () => { fixture.detectChanges(); - expect(fixture.nativeElement.querySelector('[data-testid="create-hosted-database-empty-button"]')).toBeTruthy(); + expect(fixture.nativeElement.querySelector('[data-testid="create-hosted-database-button"]')).toBeTruthy(); }); it('should hide hosted database CTA for non-admin users', () => { @@ -111,7 +111,7 @@ describe('OwnConnectionsComponent', () => { fixture.detectChanges(); - expect(fixture.nativeElement.querySelector('[data-testid="create-hosted-database-empty-button"]')).toBeFalsy(); + expect(fixture.nativeElement.querySelector('[data-testid="create-hosted-database-button"]')).toBeFalsy(); }); it('should provision a hosted database and open the success dialog', async () => {