From 20220592349be738720720650c3d2b85edf149e9 Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Wed, 25 Mar 2026 15:23:53 +0200 Subject: [PATCH 1/4] feat: add configuring status banner, auto-configure card redesign, and sidebar dot indicators - Redesign auto-configure page with centered card, spinning rings, and indeterminate progress bar - Add full-width status banner below nav showing configuring/done state - Hide AI config alert while configuration is in progress - Add dot indicators in sidebar: green = configured, blue pulsing = configuring - Add ConfigurationStateService to manage config state across navigation - Show success snackbar when configuration completes in background Co-Authored-By: Claude Opus 4.6 (1M context) --- .../auto-configure.component.css | 226 ++++++++++++++++-- .../auto-configure.component.html | 34 ++- .../auto-configure.component.ts | 22 +- .../dashboard/dashboard.component.css | 140 +++++++++++ .../dashboard/dashboard.component.html | 26 +- .../dashboard/dashboard.component.ts | 8 + .../db-tables-list.component.css | 57 ++++- .../db-tables-list.component.html | 5 + frontend/src/app/models/table.ts | 2 + .../services/configuration-state.service.ts | 41 ++++ 10 files changed, 504 insertions(+), 57 deletions(-) create mode 100644 frontend/src/app/services/configuration-state.service.ts diff --git a/frontend/src/app/components/auto-configure/auto-configure.component.css b/frontend/src/app/components/auto-configure/auto-configure.component.css index b2352a8fd..95c7243d2 100644 --- a/frontend/src/app/components/auto-configure/auto-configure.component.css +++ b/frontend/src/app/components/auto-configure/auto-configure.component.css @@ -1,43 +1,223 @@ -.auto-configure { +/* ── Page ── */ + +.page { display: flex; - flex-direction: column; justify-content: center; align-items: center; - gap: 24px; height: 100vh; + background: #f3f4f6; } -.auto-configure__title { - color: var(--mat-sidenav-content-text-color); - margin: 0; - font-weight: 500; +@media (prefers-color-scheme: dark) { + .page { + background: #111111; + } } -.auto-configure__text { - color: var(--mat-sidenav-content-text-color); - opacity: 0.7; +/* ── Card ── */ + +.card { + width: 100%; + max-width: 480px; + border-radius: 16px; + background: #fff; + box-shadow: + 0 1px 3px rgba(0, 0, 0, 0.08), + 0 4px 24px rgba(0, 0, 0, 0.06); + overflow: hidden; +} + +@media (prefers-color-scheme: dark) { + .card { + background: #1e1e1e; + box-shadow: + 0 1px 3px rgba(0, 0, 0, 0.3), + 0 4px 24px rgba(0, 0, 0, 0.2); + } +} + +@media (width <= 600px) { + .card { + margin: 0 16px; + } +} + +.card__body { + display: flex; + flex-direction: column; + align-items: center; + padding: 48px 32px 36px; + gap: 16px; +} + +.card__title { margin: 0; - max-width: 400px; + font-size: 20px; + font-weight: 700; + color: #111827; text-align: center; } -.auto-configure__open-btn { - margin-top: 8px; - font-size: 16px; - padding: 0 32px; +@media (prefers-color-scheme: dark) { + .card__title { + color: #f3f4f6; + } } -.auto-configure__hint { - color: var(--mat-sidenav-content-text-color); - opacity: 0.5; +.card__subtitle { margin: 0; - font-size: 13px; + font-size: 14px; + color: #6b7280; + text-align: center; + line-height: 1.5; + max-width: 360px; } -.auto-configure__notice { - color: var(--mat-sidenav-content-text-color); - opacity: 0.7; +@media (prefers-color-scheme: dark) { + .card__subtitle { + color: #9ca3af; + } +} + +.card__notice { margin: 0; + font-size: 14px; + color: #6b7280; text-align: center; - max-width: 400px; + max-width: 360px; + line-height: 1.5; +} + +@media (prefers-color-scheme: dark) { + .card__notice { + color: #9ca3af; + } +} + +/* ── Footer ── */ + +.card__footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + padding: 16px 24px; + border-top: 1px solid #e5e7eb; +} + +@media (prefers-color-scheme: dark) { + .card__footer { + border-top-color: #2a2a2a; + } +} + +@media (width <= 600px) { + .card__footer { + flex-direction: column; + text-align: center; + } +} + +.card__footer-text { + margin: 0; + font-size: 13px; + color: #9ca3af; + line-height: 1.4; + flex: 1; +} + +@media (prefers-color-scheme: dark) { + .card__footer-text { + color: #6b7280; + } +} + +/* ── CTA button ── */ + +.card__cta { + flex-shrink: 0; + background: #2563eb !important; + color: #fff !important; + border-radius: 8px; + font-weight: 600; + font-size: 14px; + padding: 0 20px; + height: 40px; + text-decoration: none; +} + +.card__cta:hover { + background: #1d4ed8 !important; +} + +.card__cta-arrow { + margin-left: 6px; +} + +/* ── Concentric spinning rings ── */ + +.spinner { + position: relative; + width: 72px; + height: 72px; + margin-bottom: 8px; +} + +.spinner__ring { + position: absolute; + border-radius: 50%; + border: 3px solid transparent; +} + +.spinner__ring--outer { + inset: 0; + border-top-color: #2563eb; + border-right-color: #2563eb; + animation: spin-outer 1.8s linear infinite; +} + +.spinner__ring--inner { + inset: 10px; + border-bottom-color: #2563eb; + border-left-color: #2563eb; + animation: spin-inner 1.2s linear infinite; +} + +@keyframes spin-outer { + to { transform: rotate(360deg); } +} + +@keyframes spin-inner { + to { transform: rotate(-360deg); } +} + +/* ── Indeterminate progress bar ── */ + +.progress-bar { + width: 100%; + max-width: 320px; + height: 4px; + border-radius: 2px; + background: #e5e7eb; + overflow: hidden; + margin-top: 4px; +} + +@media (prefers-color-scheme: dark) { + .progress-bar { + background: #2a2a2a; + } +} + +.progress-bar__fill { + width: 40%; + height: 100%; + border-radius: 2px; + background: #2563eb; + animation: indeterminate 1.5s ease-in-out infinite; +} + +@keyframes indeterminate { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(350%); } } diff --git a/frontend/src/app/components/auto-configure/auto-configure.component.html b/frontend/src/app/components/auto-configure/auto-configure.component.html index 14e2b4341..7e818bf08 100644 --- a/frontend/src/app/components/auto-configure/auto-configure.component.html +++ b/frontend/src/app/components/auto-configure/auto-configure.component.html @@ -1,14 +1,22 @@ -@if (loading()) { -
- -

Setting up your dashboard

-

We're analyzing your database structure and applying the best configuration. This may take a while.

- Open tables -

Setup will continue in the background

+
+
+
+ +

Configuring your database

+

We're analyzing your structure and applying the best settings. This is running in the background.

+
+
+
+
+
+

You can start working — setup will continue in the background.

+ + Open tables + → + +
-} @else if (errorMessage()) { -
-

{{ errorMessage() }}

- Continue to dashboard -
-} +
diff --git a/frontend/src/app/components/auto-configure/auto-configure.component.ts b/frontend/src/app/components/auto-configure/auto-configure.component.ts index 322ee6548..1aa0bae6d 100644 --- a/frontend/src/app/components/auto-configure/auto-configure.component.ts +++ b/frontend/src/app/components/auto-configure/auto-configure.component.ts @@ -1,24 +1,21 @@ import { Component, inject, OnInit, signal } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; -import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { ActivatedRoute, Router, RouterModule } from '@angular/router'; -import { ApiService } from '../../services/api.service'; +import { ConfigurationStateService } from '../../services/configuration-state.service'; @Component({ selector: 'app-auto-configure', templateUrl: './auto-configure.component.html', styleUrls: ['./auto-configure.component.css'], - imports: [MatProgressSpinnerModule, MatButtonModule, RouterModule], + imports: [MatButtonModule, RouterModule], }) export class AutoConfigureComponent implements OnInit { private _route = inject(ActivatedRoute); private _router = inject(Router); - private _api = inject(ApiService); + private _configState = inject(ConfigurationStateService); protected connectionId = signal(null); - protected loading = signal(true); - protected errorMessage = signal(null); ngOnInit(): void { const connectionId = this._route.snapshot.paramMap.get('connection-id'); @@ -28,17 +25,6 @@ export class AutoConfigureComponent implements OnInit { } this.connectionId.set(connectionId); - this._configure(connectionId); - } - - private async _configure(connectionId: string): Promise { - const result = await this._api.get(`/ai/v2/setup/${connectionId}`, { responseType: 'text' }); - - if (result !== null) { - this._router.navigate([`/dashboard/${connectionId}`]); - } else { - this.loading.set(false); - this.errorMessage.set('Auto-configuration could not be completed. You can still configure your tables manually.'); - } + this._configState.startConfiguring(connectionId); } } diff --git a/frontend/src/app/components/dashboard/dashboard.component.css b/frontend/src/app/components/dashboard/dashboard.component.css index ae1ccbe98..8c8f907b0 100644 --- a/frontend/src/app/components/dashboard/dashboard.component.css +++ b/frontend/src/app/components/dashboard/dashboard.component.css @@ -180,6 +180,146 @@ } } +/* ── Status banner ── */ + +.status-banner { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 20px; + width: 100%; + border: none; + border-left: 3px solid #2563eb; + border-radius: 0; + background: #ebf2ff; + font-size: 13px; + color: #1e293b; +} + +.status-banner--done { + border-left-color: #16a34a; + background: #edfaf3; +} + +.status-banner--done .status-banner__icon { + color: #16a34a; +} + +.status-banner__icon { + flex-shrink: 0; + color: #2563eb; + font-size: 20px; + width: 20px; + height: 20px; +} + +.status-banner__body { + flex: 1; + display: flex; + align-items: baseline; + gap: 6px; + min-width: 0; +} + +.status-banner__title { + color: #1e293b; + white-space: nowrap; +} + +.status-banner__subtitle { + color: #475569; +} + +.status-banner__link { + color: #2563eb; + text-decoration: underline; +} + +.status-banner__link:hover { + color: #1d4ed8; +} + +.status-banner__progress { + flex-shrink: 0; + width: 80px; + height: 3px; + border-radius: 2px; + background: rgba(37, 99, 235, 0.15); + overflow: hidden; +} + +.status-banner__progress-fill { + width: 40%; + height: 100%; + border-radius: 2px; + background: #2563eb; + animation: banner-indeterminate 1.5s ease-in-out infinite; +} + +@keyframes banner-indeterminate { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(350%); } +} + +@media (prefers-color-scheme: dark) { + .status-banner { + background: #1a2744; + color: #93c5fd; + } + + .status-banner__title { + color: #e2e8f0; + } + + .status-banner__subtitle { + color: #93c5fd; + } + + .status-banner__link { + color: #60a5fa; + } + + .status-banner__link:hover { + color: #93c5fd; + } + + .status-banner__icon { + color: #60a5fa; + } + + .status-banner--done { + background: #0f2a1a; + color: #86efac; + } + + .status-banner--done .status-banner__icon { + color: #4ade80; + } + + .status-banner--done .status-banner__title { + color: #e2e8f0; + } + + .status-banner--done .status-banner__subtitle { + color: #86efac; + } + + .status-banner__progress { + background: rgba(96, 165, 250, 0.15); + } + + .status-banner__progress-fill { + background: #60a5fa; + } +} + +@media (width <= 600px) { + .status-banner__body { + flex-direction: column; + gap: 2px; + } +} + .error-details { margin-top: 8px; } diff --git a/frontend/src/app/components/dashboard/dashboard.component.html b/frontend/src/app/components/dashboard/dashboard.component.html index 4b2cca36f..33384912e 100644 --- a/frontend/src/app/components/dashboard/dashboard.component.html +++ b/frontend/src/app/components/dashboard/dashboard.component.html @@ -43,6 +43,29 @@

Rocketadmin can not find any tables

+ @if (isConfiguring) { +
+ info +
+ Configuring tables + Some tables may look incomplete while setup is running. You can adjust column types, display formats and filters in + Settings and + UI widgets after setup finishes. +
+
+
+
+
+ } @else if (configurationDone) { +
+ check_circle +
+ All tables configured + Everything is ready to use. +
+
+ } + Rocketadmin can not find any tables
-
+
auto_awesome
New: AI Configuration @@ -92,6 +115,7 @@

Rocketadmin can not find any tables

Configure all
+
diff --git a/frontend/src/app/components/dashboard/dashboard.component.ts b/frontend/src/app/components/dashboard/dashboard.component.ts index 56cfdbf82..fb76f5a84 100644 --- a/frontend/src/app/components/dashboard/dashboard.component.ts +++ b/frontend/src/app/components/dashboard/dashboard.component.ts @@ -23,6 +23,7 @@ import { TableRowService } from 'src/app/services/table-row.service'; import { TableStateService } from 'src/app/services/table-state.service'; import { TablesService } from 'src/app/services/tables.service'; import { UiSettingsService } from 'src/app/services/ui-settings.service'; +import { ConfigurationStateService } from 'src/app/services/configuration-state.service'; import { environment } from 'src/environments/environment'; import { normalizeTableName } from '../../lib/normalize'; import { PlaceholderTableViewComponent } from '../skeletons/placeholder-table-view/placeholder-table-view.component'; @@ -99,6 +100,8 @@ export class DashboardComponent implements OnInit, OnDestroy { public uiSettings: ConnectionSettingsUI; public tableFolders: any[] = []; + public isConfiguring: boolean = false; + public configurationDone: boolean = false; constructor( private _connections: ConnectionsService, @@ -107,6 +110,7 @@ export class DashboardComponent implements OnInit, OnDestroy { private _uiSettings: UiSettingsService, private _tableState: TableStateService, private _company: CompanyService, + private _configState: ConfigurationStateService, public router: Router, private route: ActivatedRoute, public dialog: MatDialog, @@ -133,6 +137,10 @@ export class DashboardComponent implements OnInit, OnDestroy { ngOnInit() { this.connectionID = this._connections.currentConnectionID; this.dataSource = new TablesDataSource(this._tables, this._connections, this._tableRow); + + // Check if auto-configure is running for this connection + this.isConfiguring = this._configState.isConfiguring(this.connectionID); + this._tableState.cast.subscribe((row) => { this.selectedRow = row; }); diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css index 9a6d23893..7890687da 100644 --- a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css +++ b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css @@ -708,7 +708,8 @@ .table-link { flex: 1; - display: block; + display: flex; + align-items: center; text-decoration: none; color: inherit; overflow: hidden; @@ -722,8 +723,60 @@ padding: 0 12px; } +.table-link_active { + background: rgba(37, 99, 235, 0.08); + border-radius: 4px; + margin: 0 -12px; + padding: 0 12px; +} + .table-link_active .table-name { - color: var(--color-accentedPalette-500); + color: #2563eb; +} + +@media (prefers-color-scheme: dark) { + .table-link_active { + background: rgba(96, 165, 250, 0.1); + } + + .table-link_active .table-name { + color: #60a5fa; + } +} + +/* ── Dot indicators ── */ + +.table-dot { + flex-shrink: 0; + width: 6px; + height: 6px; + border-radius: 50%; + background: transparent; + margin-right: 6px; +} + +.table-dot--configured { + background: #16a34a; +} + +.table-dot--configuring { + background: #2563eb; + animation: dot-pulse 1.5s ease-in-out infinite; +} + +@keyframes dot-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.4; transform: scale(0.75); } +} + +@media (prefers-color-scheme: dark) { + .table-dot--configured { + background: #4ade80; + } + + .table-dot--configuring { + background: #60a5fa; + } } .table-name { diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html index 7d7003c09..9ecd67a4d 100644 --- a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html +++ b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html @@ -161,6 +161,11 @@ (dragstart)="accessLevel === 'edit' && onTableDragStart($event, table)" (dragend)="accessLevel === 'edit' && onTableDragEnd($event)" (click)="closeSidebar()"> + {{getTableName(table)}}
diff --git a/frontend/src/app/models/table.ts b/frontend/src/app/models/table.ts index d4ec10a1a..3ba61dc9a 100644 --- a/frontend/src/app/models/table.ts +++ b/frontend/src/app/models/table.ts @@ -13,6 +13,8 @@ export interface TableProperties { initials?: string; icon?: string; permissions: TablePermissions; + configured?: boolean; + configuring?: boolean; } export enum TableOrdering { diff --git a/frontend/src/app/services/configuration-state.service.ts b/frontend/src/app/services/configuration-state.service.ts new file mode 100644 index 000000000..1715b8bf1 --- /dev/null +++ b/frontend/src/app/services/configuration-state.service.ts @@ -0,0 +1,41 @@ +import { inject, Injectable } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; + +import { ApiService } from './api.service'; +import { NotificationsService } from './notifications.service'; + +@Injectable({ providedIn: 'root' }) +export class ConfigurationStateService { + private _api = inject(ApiService); + private _notifications = inject(NotificationsService); + private _configuring = new BehaviorSubject>(new Set()); + + /** Start configuring — fires the API and manages state. Returns immediately. */ + startConfiguring(connectionId: string): void { + if (this._configuring.value.has(connectionId)) return; + + const current = this._configuring.value; + current.add(connectionId); + this._configuring.next(current); + + this._runSetup(connectionId); + } + + /** Check if a connection is currently being configured */ + isConfiguring(connectionId: string): boolean { + return this._configuring.value.has(connectionId); + } + + private async _runSetup(connectionId: string): Promise { + try { + await this._api.get(`/ai/v2/setup/${connectionId}`, { responseType: 'text' }); + this._notifications.showSuccessSnackbar('All tables have been configured.'); + } catch { + this._notifications.showSuccessSnackbar('Configuration could not be completed.'); + } finally { + const current = this._configuring.value; + current.delete(connectionId); + this._configuring.next(current); + } + } +} From 1001747acf87f52b922b3477ad8c997d002560d1 Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Wed, 25 Mar 2026 15:26:57 +0000 Subject: [PATCH 2/4] autoconfigure: redirect a user to tables list after configuration is done --- .../auto-configure/auto-configure.component.ts | 5 +++-- .../src/app/services/configuration-state.service.ts | 12 +++++++----- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/frontend/src/app/components/auto-configure/auto-configure.component.ts b/frontend/src/app/components/auto-configure/auto-configure.component.ts index 1aa0bae6d..c5b2c638c 100644 --- a/frontend/src/app/components/auto-configure/auto-configure.component.ts +++ b/frontend/src/app/components/auto-configure/auto-configure.component.ts @@ -17,7 +17,7 @@ export class AutoConfigureComponent implements OnInit { protected connectionId = signal(null); - ngOnInit(): void { + async ngOnInit(): Promise { const connectionId = this._route.snapshot.paramMap.get('connection-id'); if (!connectionId) { this._router.navigate(['/connections-list']); @@ -25,6 +25,7 @@ export class AutoConfigureComponent implements OnInit { } this.connectionId.set(connectionId); - this._configState.startConfiguring(connectionId); + await this._configState.startConfiguring(connectionId); + this._router.navigate(['/dashboard', connectionId]); } } diff --git a/frontend/src/app/services/configuration-state.service.ts b/frontend/src/app/services/configuration-state.service.ts index 1715b8bf1..55268e4f2 100644 --- a/frontend/src/app/services/configuration-state.service.ts +++ b/frontend/src/app/services/configuration-state.service.ts @@ -10,15 +10,15 @@ export class ConfigurationStateService { private _notifications = inject(NotificationsService); private _configuring = new BehaviorSubject>(new Set()); - /** Start configuring — fires the API and manages state. Returns immediately. */ - startConfiguring(connectionId: string): void { - if (this._configuring.value.has(connectionId)) return; + /** Start configuring — fires the API and manages state. Returns a promise that resolves when setup completes. */ + startConfiguring(connectionId: string): Promise { + if (this._configuring.value.has(connectionId)) return Promise.resolve(false); const current = this._configuring.value; current.add(connectionId); this._configuring.next(current); - this._runSetup(connectionId); + return this._runSetup(connectionId); } /** Check if a connection is currently being configured */ @@ -26,12 +26,14 @@ export class ConfigurationStateService { return this._configuring.value.has(connectionId); } - private async _runSetup(connectionId: string): Promise { + private async _runSetup(connectionId: string): Promise { try { await this._api.get(`/ai/v2/setup/${connectionId}`, { responseType: 'text' }); this._notifications.showSuccessSnackbar('All tables have been configured.'); + return true; } catch { this._notifications.showSuccessSnackbar('Configuration could not be completed.'); + return false; } finally { const current = this._configuring.value; current.delete(connectionId); From 7127e0656a685cb0bdd30bd6a171655f4a09d031 Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Thu, 26 Mar 2026 10:40:43 +0000 Subject: [PATCH 3/4] fix status config banner colors --- .../dashboard/dashboard.component.css | 50 +++++++------ .../dashboard/dashboard.component.html | 5 +- .../db-tables-list.component.css | 71 +------------------ .../db-tables-list.component.html | 5 -- 4 files changed, 28 insertions(+), 103 deletions(-) diff --git a/frontend/src/app/components/dashboard/dashboard.component.css b/frontend/src/app/components/dashboard/dashboard.component.css index 8c8f907b0..6ac6bb32c 100644 --- a/frontend/src/app/components/dashboard/dashboard.component.css +++ b/frontend/src/app/components/dashboard/dashboard.component.css @@ -189,25 +189,24 @@ padding: 12px 20px; width: 100%; border: none; - border-left: 3px solid #2563eb; + border-left: 3px solid var(--color-accentedPalette-500); border-radius: 0; - background: #ebf2ff; + background: var(--color-accentedPalette-50); font-size: 13px; - color: #1e293b; } -.status-banner--done { - border-left-color: #16a34a; - background: #edfaf3; +/* .status-banner--done { + border-left-color: var(--success-color); + background: var(--success-background-color); } .status-banner--done .status-banner__icon { - color: #16a34a; -} + color: var(--success-color); +} */ .status-banner__icon { flex-shrink: 0; - color: #2563eb; + color: var(--color-accentedPalette-500); font-size: 20px; width: 20px; height: 20px; @@ -222,21 +221,21 @@ } .status-banner__title { - color: #1e293b; + color: var(--color-accentedPalette-900); white-space: nowrap; } .status-banner__subtitle { - color: #475569; + color: var(--color-accentedPalette-700); } .status-banner__link { - color: #2563eb; + color: var(--color-accentedPalette-500); text-decoration: underline; } .status-banner__link:hover { - color: #1d4ed8; + color: var(--color-accentedPalette-700); } .status-banner__progress { @@ -244,7 +243,7 @@ width: 80px; height: 3px; border-radius: 2px; - background: rgba(37, 99, 235, 0.15); + background: var(--color-accentedPalette-100); overflow: hidden; } @@ -252,7 +251,7 @@ width: 40%; height: 100%; border-radius: 2px; - background: #2563eb; + background: var(--color-accentedPalette-500); animation: banner-indeterminate 1.5s ease-in-out infinite; } @@ -263,31 +262,30 @@ @media (prefers-color-scheme: dark) { .status-banner { - background: #1a2744; - color: #93c5fd; + background: var(--color-accentedPalette-900); } .status-banner__title { - color: #e2e8f0; + color: var(--color-accentedPalette-100); } .status-banner__subtitle { - color: #93c5fd; + color: var(--color-accentedPalette-200); } .status-banner__link { - color: #60a5fa; + color: var(--color-accentedPalette-500); } .status-banner__link:hover { - color: #93c5fd; + color: var(--color-accentedPalette-200); } .status-banner__icon { - color: #60a5fa; + color: var(--color-accentedPalette-500); } - .status-banner--done { + /* .status-banner--done { background: #0f2a1a; color: #86efac; } @@ -302,14 +300,14 @@ .status-banner--done .status-banner__subtitle { color: #86efac; - } + } */ .status-banner__progress { - background: rgba(96, 165, 250, 0.15); + background: var(--color-accentedPalette-800); } .status-banner__progress-fill { - background: #60a5fa; + background: var(--color-accentedPalette-300); } } diff --git a/frontend/src/app/components/dashboard/dashboard.component.html b/frontend/src/app/components/dashboard/dashboard.component.html index 33384912e..6b3c5ff01 100644 --- a/frontend/src/app/components/dashboard/dashboard.component.html +++ b/frontend/src/app/components/dashboard/dashboard.component.html @@ -56,7 +56,8 @@

Rocketadmin can not find any tables

- } @else if (configurationDone) { + } + - {{getTableName(table)}} From 4b7cf8c6570b90e44c49a6695f2a1a3827a452f3 Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Thu, 26 Mar 2026 11:23:41 +0000 Subject: [PATCH 4/4] ai config page: update colors --- .../auto-configure.component.css | 48 +++++++++---------- .../dashboard/dashboard.component.css | 26 ---------- .../dashboard/dashboard.component.html | 11 +---- .../dashboard/dashboard.component.ts | 1 - 4 files changed, 25 insertions(+), 61 deletions(-) diff --git a/frontend/src/app/components/auto-configure/auto-configure.component.css b/frontend/src/app/components/auto-configure/auto-configure.component.css index 95c7243d2..aa84d8a0b 100644 --- a/frontend/src/app/components/auto-configure/auto-configure.component.css +++ b/frontend/src/app/components/auto-configure/auto-configure.component.css @@ -5,12 +5,12 @@ justify-content: center; align-items: center; height: 100vh; - background: #f3f4f6; + background: var(--color-primaryPalette-50); } @media (prefers-color-scheme: dark) { .page { - background: #111111; + background: var(--surface-dark-color); } } @@ -20,7 +20,7 @@ width: 100%; max-width: 480px; border-radius: 16px; - background: #fff; + background: var(--color-whitePalette-500); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 24px rgba(0, 0, 0, 0.06); @@ -29,7 +29,7 @@ @media (prefers-color-scheme: dark) { .card { - background: #1e1e1e; + background: var(--color-primaryPalette-900); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 24px rgba(0, 0, 0, 0.2); @@ -54,20 +54,20 @@ margin: 0; font-size: 20px; font-weight: 700; - color: #111827; + color: var(--color-primaryPalette-900); text-align: center; } @media (prefers-color-scheme: dark) { .card__title { - color: #f3f4f6; + color: var(--color-primaryPalette-50); } } .card__subtitle { margin: 0; font-size: 14px; - color: #6b7280; + color: var(--color-primaryPalette-400); text-align: center; line-height: 1.5; max-width: 360px; @@ -75,14 +75,14 @@ @media (prefers-color-scheme: dark) { .card__subtitle { - color: #9ca3af; + color: var(--color-primaryPalette-300); } } .card__notice { margin: 0; font-size: 14px; - color: #6b7280; + color: var(--color-primaryPalette-400); text-align: center; max-width: 360px; line-height: 1.5; @@ -90,7 +90,7 @@ @media (prefers-color-scheme: dark) { .card__notice { - color: #9ca3af; + color: var(--color-primaryPalette-300); } } @@ -102,12 +102,12 @@ justify-content: space-between; gap: 16px; padding: 16px 24px; - border-top: 1px solid #e5e7eb; + border-top: 1px solid var(--color-primaryPalette-200); } @media (prefers-color-scheme: dark) { .card__footer { - border-top-color: #2a2a2a; + border-top-color: var(--color-primaryPalette-800); } } @@ -121,14 +121,14 @@ .card__footer-text { margin: 0; font-size: 13px; - color: #9ca3af; + color: var(--color-primaryPalette-300); line-height: 1.4; flex: 1; } @media (prefers-color-scheme: dark) { .card__footer-text { - color: #6b7280; + color: var(--color-primaryPalette-400); } } @@ -136,8 +136,8 @@ .card__cta { flex-shrink: 0; - background: #2563eb !important; - color: #fff !important; + background: var(--color-accentedPalette-500) !important; + color: var(--color-accentedPalette-500-contrast) !important; border-radius: 8px; font-weight: 600; font-size: 14px; @@ -147,7 +147,7 @@ } .card__cta:hover { - background: #1d4ed8 !important; + background: var(--color-accentedPalette-700) !important; } .card__cta-arrow { @@ -171,15 +171,15 @@ .spinner__ring--outer { inset: 0; - border-top-color: #2563eb; - border-right-color: #2563eb; + border-top-color: var(--color-accentedPalette-500); + border-right-color: var(--color-accentedPalette-500); animation: spin-outer 1.8s linear infinite; } .spinner__ring--inner { inset: 10px; - border-bottom-color: #2563eb; - border-left-color: #2563eb; + border-bottom-color: var(--color-accentedPalette-500); + border-left-color: var(--color-accentedPalette-500); animation: spin-inner 1.2s linear infinite; } @@ -198,14 +198,14 @@ max-width: 320px; height: 4px; border-radius: 2px; - background: #e5e7eb; + background: var(--color-primaryPalette-200); overflow: hidden; margin-top: 4px; } @media (prefers-color-scheme: dark) { .progress-bar { - background: #2a2a2a; + background: var(--color-primaryPalette-800); } } @@ -213,7 +213,7 @@ width: 40%; height: 100%; border-radius: 2px; - background: #2563eb; + background: var(--color-accentedPalette-500); animation: indeterminate 1.5s ease-in-out infinite; } diff --git a/frontend/src/app/components/dashboard/dashboard.component.css b/frontend/src/app/components/dashboard/dashboard.component.css index 6ac6bb32c..17145b767 100644 --- a/frontend/src/app/components/dashboard/dashboard.component.css +++ b/frontend/src/app/components/dashboard/dashboard.component.css @@ -195,15 +195,6 @@ font-size: 13px; } -/* .status-banner--done { - border-left-color: var(--success-color); - background: var(--success-background-color); -} - -.status-banner--done .status-banner__icon { - color: var(--success-color); -} */ - .status-banner__icon { flex-shrink: 0; color: var(--color-accentedPalette-500); @@ -285,23 +276,6 @@ color: var(--color-accentedPalette-500); } - /* .status-banner--done { - background: #0f2a1a; - color: #86efac; - } - - .status-banner--done .status-banner__icon { - color: #4ade80; - } - - .status-banner--done .status-banner__title { - color: #e2e8f0; - } - - .status-banner--done .status-banner__subtitle { - color: #86efac; - } */ - .status-banner__progress { background: var(--color-accentedPalette-800); } diff --git a/frontend/src/app/components/dashboard/dashboard.component.html b/frontend/src/app/components/dashboard/dashboard.component.html index 6b3c5ff01..800bcada7 100644 --- a/frontend/src/app/components/dashboard/dashboard.component.html +++ b/frontend/src/app/components/dashboard/dashboard.component.html @@ -56,16 +56,7 @@

Rocketadmin can not find any tables

- } - + }