diff --git a/frontend/src/app/app.component.css b/frontend/src/app/app.component.css index 6c03ef7e0..05a64e488 100644 --- a/frontend/src/app/app.component.css +++ b/frontend/src/app/app.component.css @@ -26,7 +26,7 @@ position: sticky; top: 0; flex-shrink: 0; - background-color: #212121; + background-color: var(--surface-dark-color); z-index: 3; } @@ -295,12 +295,6 @@ height: 100%; } -@media (prefers-color-scheme: dark) { - .main-menu-content_interior .content { - background-color: #212121; - } -} - .helpContainer { position: fixed; right: 16px; @@ -319,7 +313,7 @@ @media (prefers-color-scheme: dark) { .footer { - background: #212121; + background: var(--surface-dark-color); border-top: 1px solid #303030; } } diff --git a/frontend/src/app/components/api-keys/api-keys.component.css b/frontend/src/app/components/api-keys/api-keys.component.css index bd83623bb..dd8c43d92 100644 --- a/frontend/src/app/components/api-keys/api-keys.component.css +++ b/frontend/src/app/components/api-keys/api-keys.component.css @@ -5,6 +5,7 @@ .profile-main { flex: 1; + background-color: var(--mat-sidenav-content-background-color); overflow-y: auto; } diff --git a/frontend/src/app/components/branding/branding.component.css b/frontend/src/app/components/branding/branding.component.css index 61a756909..51667135e 100644 --- a/frontend/src/app/components/branding/branding.component.css +++ b/frontend/src/app/components/branding/branding.component.css @@ -5,6 +5,7 @@ .profile-main { flex: 1; + background-color: var(--mat-sidenav-content-background-color); overflow-y: auto; } @@ -123,7 +124,7 @@ @media (prefers-color-scheme: dark) { .white-label-settings__overlay { - background-color: rgba(0,0,0,0.64); + background-color: rgba(25,25,25,0.64); } } diff --git a/frontend/src/app/components/branding/branding.component.html b/frontend/src/app/components/branding/branding.component.html index 97b4f15de..d56a54a69 100644 --- a/frontend/src/app/components/branding/branding.component.html +++ b/frontend/src/app/components/branding/branding.component.html @@ -180,7 +180,7 @@

Branding

- + Members - Show demo admin panels + Show Demo panels for all members diff --git a/frontend/src/app/components/company/invite-member-dialog/invite-member-dialog.component.css b/frontend/src/app/components/company/invite-member-dialog/invite-member-dialog.component.css index d9c43e8c3..92790cb78 100644 --- a/frontend/src/app/components/company/invite-member-dialog/invite-member-dialog.component.css +++ b/frontend/src/app/components/company/invite-member-dialog/invite-member-dialog.component.css @@ -36,3 +36,9 @@ margin-top: 2px; } +@media (prefers-color-scheme: dark) { + .role-option__description { + color: rgba(255,255,255,0.7); + } +} + diff --git a/frontend/src/app/components/connection-settings/connection-settings.component.css b/frontend/src/app/components/connection-settings/connection-settings.component.css index ab3cdcad6..053204cb4 100644 --- a/frontend/src/app/components/connection-settings/connection-settings.component.css +++ b/frontend/src/app/components/connection-settings/connection-settings.component.css @@ -137,7 +137,7 @@ display: flex; align-items: center; justify-content: space-between; - background-color: var(--mat-sidenav-content-background-color); + background-color: var(--background-color); box-shadow: var(--shadow); height: 64px; padding: 0 max(calc(50vw - 325px), 10%); @@ -147,12 +147,14 @@ @media (prefers-color-scheme: dark) { .actions { --shadow: 0 3px 1px -2px rgba(0,0,0,.5),0 2px 2px 0 rgba(0,0,0,.64),0 1px 5px 0 rgba(0,0,0,0.85); + --background-color: var(--surface-dark-color); } } @media (prefers-color-scheme: light) { .actions { --shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12); + --background-color: #fff; } } 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 a02b6121e..018b1eeba 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 @@ -63,7 +63,7 @@ } .testConnectionLink:hover { - background: #212121; + background: var(--surface-dark-color); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0px 1px 3px 0px rgba(255, 255, 255, 0.1), 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 e29b03642..e042cf447 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 @@ -87,7 +87,7 @@ } .addConnectionLink:hover { - background: #212121; + background: var(--surface-dark-color); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0px 1px 3px 0px rgba(255, 255, 255, 0.1), diff --git a/frontend/src/app/components/dashboard/dashboard.component.css b/frontend/src/app/components/dashboard/dashboard.component.css index b9d0162b8..eddfeda94 100644 --- a/frontend/src/app/components/dashboard/dashboard.component.css +++ b/frontend/src/app/components/dashboard/dashboard.component.css @@ -10,7 +10,7 @@ @media (prefers-color-scheme: dark) { .table-list-sidenav { - background-color: #202020; + background-color: var(--surface-dark-color); } } diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css index f8547187b..f4b0059b0 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css @@ -201,11 +201,11 @@ @media (prefers-color-scheme: dark) { .code-snippet-box { border-color: rgba(255, 255, 255, 0.12); - background-color: #202020; + background-color: var(--surface-dark-color); } .copy-button { - background-color: #202020; + background-color: var(--surface-dark-color); } } @@ -302,7 +302,7 @@ @media (prefers-color-scheme: dark) { .rule-example { border-color: rgba(255, 255, 255, 0.12); - background-color: #202020; + background-color: var(--surface-dark-color); } } diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css index 49fe0efe7..2e9f1cfba 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css @@ -34,12 +34,6 @@ width 400ms cubic-bezier(0.4, 0, 0.2, 1); } -@media (prefers-color-scheme: dark) { - .ai-panel-sidebar_open { - background-color: #202020; - } -} - @media (width <= 600px) { .ai-panel-sidebar_open { width: 0; @@ -911,3 +905,20 @@ background-color: rgba(99, 132, 255, 0.25) !important; } } + +@media (prefers-color-scheme: dark) { + .ai-message ::ng-deep svg text, + .ai-message ::ng-deep svg .legend text, + .ai-message ::ng-deep svg .title text, + .ai-message ::ng-deep svg .label text, + .ai-message ::ng-deep svg .tick text, + .ai-message ::ng-deep svg .axis text, + .ai-message ::ng-deep svg .pieCircle text, + .ai-message ::ng-deep svg .slice text { + fill: rgba(255, 255, 255, 0.87) !important; + } + + .ai-message ::ng-deep svg .title { + fill: rgba(255, 255, 255, 0.87) !important; + } +} diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts index 2e1f9c59f..4bf7603c2 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts @@ -109,8 +109,14 @@ export class DbTableAiPanelComponent implements OnInit, AfterViewInit, OnDestroy async ngAfterViewInit() { const mermaid = await import('mermaid'); + const mermaidAPI: any = mermaid.default ?? mermaid; + const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + mermaidAPI.initialize({ + startOnLoad: false, + theme: isDark ? 'dark' : 'default', + }); //@ts-expect-error dynamic load of mermaid - window.mermaid = mermaid.default ?? mermaid; + window.mermaid = mermaidAPI; } ngOnDestroy() { diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css index 74c343fb9..37d801447 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css @@ -23,7 +23,7 @@ @media (prefers-color-scheme: dark) { .row-preview-sidebar_open { border-left: 1px solid var(--mat-sidenav-container-divider-color); - background-color: #202020; + background-color: var(--surface-dark-color); } } diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css index fde57c8b3..72916df55 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css @@ -200,7 +200,7 @@ display: flex; align-items: center; justify-content: space-between; - background-color: var(--mat-sidenav-content-background-color); + background-color: var(--background-color); box-shadow: var(--shadow); height: 64px; padding: 0 max(calc(50vw - 325px), 10%); @@ -211,12 +211,14 @@ @media (prefers-color-scheme: dark) { .actions { --shadow: 0 3px 1px -2px rgba(0,0,0,.5),0 2px 2px 0 rgba(0,0,0,.64),0 1px 5px 0 rgba(0,0,0,0.85); + --background-color: var(--surface-dark-color); } } @media (prefers-color-scheme: light) { .actions { --shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12); + --background-color: #fff; } } diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css index dcfff60a5..41247593d 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css @@ -150,7 +150,7 @@ top: 9px; right: 3px; display: block; - background: rgba(0, 0, 0, 0.87); + background: var(--color-accentedPalette-500); border-radius: 50%; height: 5px; width: 5px; @@ -307,8 +307,8 @@ @media (prefers-color-scheme: dark) { .table-surface { - --mat-table-background-color: #202020; - --mat-paginator-container-background-color: #202020; + --mat-table-background-color: var(--surface-dark-color); + --mat-paginator-container-background-color: var(--surface-dark-color); } } diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css index 501c07724..df62f7fb9 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css @@ -87,7 +87,7 @@ @media (prefers-color-scheme: dark) { .widget-example { border-color: rgba(255,255,255,0.12); - background-color: #202020; + background-color: var(--surface-dark-color); } } @@ -122,7 +122,7 @@ display: flex; align-items: center; justify-content: space-between; - background-color: var(--mat-sidenav-content-background-color); + background-color: var(--background-color); box-shadow: var(--shadow); height: 64px; /* padding: 0 max(calc(50vw - 500px), 2%); */ @@ -134,11 +134,13 @@ @media (prefers-color-scheme: dark) { .actions { --shadow: 0 3px 1px -2px rgba(0,0,0,.5),0 2px 2px 0 rgba(0,0,0,.64),0 1px 5px 0 rgba(0,0,0,0.85); + --background-color: var(--surface-dark-color); } } @media (prefers-color-scheme: light) { .actions { --shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12); + --background-color: #fff; } } \ No newline at end of file diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.css b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.css index f223040b2..9824b85cb 100644 --- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.css @@ -51,35 +51,6 @@ } } -.add-condition-button { - width: auto; - min-width: auto; - min-height: 36px; - height: 36px; - display: flex; - align-items: center; - justify-content: center; - text-transform: none; - margin: 0 !important; - padding: 0 16px; - gap: 4px; -} - -.add-condition-button.accent-button { - color: #C177FC; -} - -.add-condition-button.accent-button:hover { - background-color: rgba(193, 119, 252, 0.04); -} - -.add-condition-button.accent-button .add-icon { - font-size: 20px; - width: 20px; - height: 20px; - line-height: 20px; -} - .empty-conditions-container .column-name-icon { font-size: 18px; width: 18px; diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.html b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.html index 58ccbba8c..c85164d00 100644 --- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.html +++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.html @@ -212,8 +212,10 @@

- diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-folder-delete-dialog/db-folder-delete-dialog.component.css b/frontend/src/app/components/dashboard/db-tables-list/db-folder-delete-dialog/db-folder-delete-dialog.component.css index cc617fcbd..6c028eb26 100644 --- a/frontend/src/app/components/dashboard/db-tables-list/db-folder-delete-dialog/db-folder-delete-dialog.component.css +++ b/frontend/src/app/components/dashboard/db-tables-list/db-folder-delete-dialog/db-folder-delete-dialog.component.css @@ -1,13 +1,5 @@ .confirmation-message { margin: 0 0 20px 0; - font-size: 16px; - line-height: 1.5; - color: #424242; -} - -.confirmation-message strong { - color: #212121; - font-weight: 600; } .folder-info { @@ -15,13 +7,13 @@ align-items: flex-start; gap: 12px; padding: 12px 16px; - background-color: #e3f2fd; + background-color: color-mix(in hsl, #296EE9, transparent 95%); border-radius: 4px; margin-bottom: 20px; } .info-icon { - color: #1976d2; + color: #296EE9; font-size: 20px; width: 20px; height: 20px; @@ -32,93 +24,20 @@ margin: 0; font-size: 14px; line-height: 1.5; - color: #424242; flex: 1; } -.warning-note { - padding: 12px 16px; - background-color: #fff3e0; - border-radius: 4px; - border-left: 4px solid #ff9800; -} - -.warning-note p { - margin: 0; - font-size: 14px; - line-height: 1.5; - color: #424242; -} - -.warning-note strong { - color: #e65100; - font-weight: 600; -} - -.cancel-button { - color: #666; -} - -.delete-button { - display: flex; - align-items: center; - gap: 8px; -} - -.delete-button mat-icon { - font-size: 18px; - width: 18px; - height: 18px; -} - /* Dark mode support */ @media (prefers-color-scheme: dark) { - .dialog-title { - border-bottom-color: #424242; - } - - .dialog-content { - background-color: #303030; - } - - .confirmation-message { - color: #e0e0e0; - } - - .confirmation-message strong { - color: #fff; - } - .folder-info { - background-color: #1a3a52; + background-color: color-mix(in hsl, #296EE9, transparent 75%); } .info-icon { - color: #64b5f6; + color: #296EE9; } .info-text { color: #e0e0e0; } - - .warning-note { - background-color: #4a3c28; - border-left-color: #ffb74d; - } - - .warning-note p { - color: #e0e0e0; - } - - .warning-note strong { - color: #ffb74d; - } - - .dialog-actions { - border-top-color: #424242; - } - - .cancel-button { - color: #aaa; - } } \ No newline at end of file diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-folder-delete-dialog/db-folder-delete-dialog.component.html b/frontend/src/app/components/dashboard/db-tables-list/db-folder-delete-dialog/db-folder-delete-dialog.component.html index 5d5704819..43d04eebb 100644 --- a/frontend/src/app/components/dashboard/db-tables-list/db-folder-delete-dialog/db-folder-delete-dialog.component.html +++ b/frontend/src/app/components/dashboard/db-tables-list/db-folder-delete-dialog/db-folder-delete-dialog.component.html @@ -1,5 +1,5 @@

- Delete Folder + Delete folder

@@ -14,22 +14,17 @@

The tables will not be deleted, only removed from this folder.

- -
-

Note: This action cannot be undone.

-
\ No newline at end of file diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-folder-edit-dialog/db-folder-edit-dialog.component.html b/frontend/src/app/components/dashboard/db-tables-list/db-folder-edit-dialog/db-folder-edit-dialog.component.html index bf926b7d7..192a338e4 100644 --- a/frontend/src/app/components/dashboard/db-tables-list/db-folder-edit-dialog/db-folder-edit-dialog.component.html +++ b/frontend/src/app/components/dashboard/db-tables-list/db-folder-edit-dialog/db-folder-edit-dialog.component.html @@ -1,11 +1,11 @@

- Edit Folder + Edit folder

-

Folder Name

+

Folder name

Folder Name
-

Folder Icon Color

-
+

Folder icon color

+
@@ -63,7 +63,7 @@
add
@@ -85,7 +85,7 @@
@@ -105,10 +105,10 @@ dehaze + [style.color]="folder.iconColor || null">dehaze folder + [style.color]="folder.iconColor || null">folder
{{folder.name}} @@ -173,7 +173,7 @@ color="primary" [class.empty-folder-button]="folder.isEmpty" (click)="showEditTablesDialog(folder)"> - {{folder.isEmpty ? 'Add or drag and drop tables' : 'Add Table'}} + {{folder.isEmpty ? 'Add or drag and drop tables' : 'Add table'}}
diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.ts b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.ts index 467ca4e72..79a200fcb 100644 --- a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.ts +++ b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.ts @@ -97,7 +97,7 @@ export class DbTablesListComponent implements OnInit, OnChanges { // Folder icon colors public folderIconColors = [ - { name: 'Default', value: '#212121' }, + { name: 'Default', value: 'rgba(0, 0, 0, 0.87)' }, { name: 'Blue', value: '#2196F3' }, { name: 'Green', value: '#4CAF50' }, { name: 'Orange', value: '#FF9800' }, @@ -389,22 +389,6 @@ export class DbTablesListComponent implements OnInit, OnChanges { } - getFolderIconColor(folder: Folder, isActive?: boolean): string { - if (isActive) { - return '#212121'; // Black for active folders - } - - // Check if we're in dark theme - if (window.matchMedia?.('(prefers-color-scheme: dark)').matches) { - // In dark theme, use #212121 for folders without custom color - return folder.iconColor || '#212121'; - } - - // In light theme, use default color - return folder.iconColor || '#212121'; - } - - get allTables(): TableProperties[] { return this.tableFolders ?.find((folder: any) => folder.category_id === 'all-tables-kitten')?.tables || []; diff --git a/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.css b/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.css index f2a624e12..db3020ee9 100644 --- a/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.css +++ b/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.css @@ -5,6 +5,7 @@ app-dashboard-view .dashboard-view-page { height: calc(100vh - 64px); display: flex; flex-direction: column; + background-color: var(--mat-sidenav-content-background-color); } app-dashboard-view .dashboard-header { @@ -119,7 +120,7 @@ app-dashboard-view .dashboard-grid { @media (prefers-color-scheme: dark) { app-dashboard-view .dashboard-grid { - background-color: rgba(255, 255, 255, 0.02); + background-color: var(--surface-dark-color); } } diff --git a/frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.css b/frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.css index 95ce24298..ce68abd34 100644 --- a/frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.css +++ b/frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.css @@ -14,6 +14,7 @@ .dashboards-main { flex: 1; + background-color: var(--mat-sidenav-content-background-color); overflow-y: auto; } @@ -90,19 +91,29 @@ display: flex; flex-direction: column; overflow: hidden; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 12px; transition: box-shadow 0.2s ease, - transform 0.2s ease; + transform 0.2s ease, + border-color 0.2s ease; } .dashboard-card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); transform: translateY(-2px); + border-color: rgba(0, 0, 0, 0.18); } @media (prefers-color-scheme: dark) { + .dashboard-card { + background: color-mix(in srgb, var(--color-accentedPalette-500) 5%, transparent); + border-color: #1e293b; + } + .dashboard-card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); + border-color: #334155; } } @@ -118,33 +129,52 @@ @media (prefers-color-scheme: dark) { .dashboard-preview { - background-color: rgba(255, 255, 255, 0.05); + background-color: transparent; + border-bottom-color: rgba(255, 255, 255, 0.06); } } .preview-placeholder { display: flex; + flex-direction: column; align-items: center; justify-content: center; height: 100%; - background-color: var(--color-primaryPalette-100); + background-color: rgba(0, 0, 0, 0.02); } .preview-placeholder-icon { - font-size: 56px; - width: 56px; - height: 56px; - color: rgba(0, 0, 0, 0.2); + font-size: 40px; + width: 40px; + height: 40px; + color: rgba(0, 0, 0, 0.18); +} + +.preview-placeholder-hint { + font-size: 12px; + color: rgba(0, 0, 0, 0.3); + margin-top: 4px; } @media (prefers-color-scheme: dark) { .preview-placeholder { - background-color: var(--color-primaryPalette-800); + background-color: transparent; } .preview-placeholder-icon { color: rgba(255, 255, 255, 0.2); } + + .preview-placeholder-hint { + color: rgba(255, 255, 255, 0.3); + } +} + +.preview-chart { + display: flex; + align-items: center; + justify-content: center; + height: 100%; } /* Card Content */ @@ -238,28 +268,28 @@ justify-content: center; padding: 64px 24px; text-align: center; - background-color: rgba(0, 0, 0, 0.02); - border-radius: 8px; -} - -@media (prefers-color-scheme: dark) { - .no-dashboards { - background-color: rgba(255, 255, 255, 0.05); - } } -.no-dashboards-icon { - font-size: 64px; - width: 64px; - height: 64px; - color: rgba(0, 0, 0, 0.26); +.no-dashboards-illustration { + width: 120px; + height: 100px; margin-bottom: 16px; } +/* Illustration — light theme */ +.illust-card-back { fill: #e2e8f0; stroke: #cbd5e1; stroke-width: 1.5; } +.illust-card-mid { fill: #eef2f7; stroke: #cbd5e1; stroke-width: 1.5; } +.illust-card-front { fill: #f8fafc; stroke: #94a3b8; stroke-width: 1.5; } +.illust-detail { fill: #cbd5e1; } +.illust-detail-accent { fill: #94a3b8; } + +/* Illustration — dark theme */ @media (prefers-color-scheme: dark) { - .no-dashboards-icon { - color: rgba(255, 255, 255, 0.3); - } + .illust-card-back { fill: #0f1219; stroke: #1e293b; } + .illust-card-mid { fill: #141820; stroke: #1e293b; } + .illust-card-front { fill: #1a1f2e; stroke: #334155; } + .illust-detail { fill: #1e293b; } + .illust-detail-accent { fill: #334155; } } .no-dashboards h3 { diff --git a/frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.html b/frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.html index 398292735..6e367003c 100644 --- a/frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.html +++ b/frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.html @@ -37,10 +37,39 @@

Dashboards

- dashboard -

No dashboards found

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

No dashboards yet

No dashboards match your search criteria.

-

Create your first dashboard to visualize your data.

+

Dashboards help you visualize your data with charts, tables, and metrics — all in one place.