Skip to content

Dark theme fixes and dashboard cards UI improvements #1642

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
karinakharchenko wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Dark theme fixes and dashboard cards UI improvements #1642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5d04872
UI improvements: sidebar groups, branding dark theme, invite dialog f…
karinakharchenko Feb 26, 2026
09d6832
Fix dark theme issues: mermaid charts, widget dot, snackbar button
karinakharchenko Feb 26, 2026
f35a726
Unify dark theme background (#191919) across all pages
karinakharchenko Feb 26, 2026
c116b41
Improve dashboard cards: SVG illustration, panel previews, light them…
karinakharchenko Feb 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions frontend/src/app/components/api-keys/api-keys.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@
overflow-y: auto;
}

@media (prefers-color-scheme: dark) {
.profile-main {
background-color: #191919;
}
}

::ng-deep .profile-main > app-alert {
position: relative;
top: 0;
Expand Down
8 changes: 7 additions & 1 deletion frontend/src/app/components/branding/branding.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@
overflow-y: auto;
}

@media (prefers-color-scheme: dark) {
.profile-main {
background-color: #191919;
}
}

::ng-deep .profile-main > app-alert {
position: relative;
top: 0;
Expand Down Expand Up @@ -123,7 +129,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);
}
}

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/components/branding/branding.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ <h1 class="mat-h1 branding-page-header">Branding</h1>
<path *ngIf="!whiteLabelSettings.favicon" d="M1490.41 415.663H1458.31C1453.55 415.663 1451.18 411.963 1452.96 407.647L1464.85 379.283C1467.23 373.117 1463.66 366.951 1457.12 366.951H1427.4C1423.83 366.951 1420.86 369.418 1419.67 372.501L1404.81 406.414C1402.43 412.58 1405.4 416.896 1411.34 416.896H1442.26C1445.83 416.896 1448.8 418.746 1449.99 421.829L1464.26 455.742C1466.04 460.058 1463.66 463.758 1458.31 463.758H1386.97C1384 463.758 1381.03 466.224 1379.24 468.691L1366.76 501.987C1363.79 508.153 1366.76 514.319 1373.89 514.319H1444.04C1447.01 514.319 1449.99 511.236 1451.18 508.153L1467.23 471.157C1468.42 467.458 1471.39 465.608 1474.36 465.608H1505.87C1511.82 465.608 1514.79 460.675 1511.82 455.125L1498.74 421.212C1497.55 418.746 1493.98 416.279 1491.01 416.279L1490.41 415.663Z" fill="white"/>
</g>

<rect x="0" y="1482" width="100%" height="600" fill="#212121" />
<rect x="0" y="1482" width="100%" height="600" fill="#191919" />

<image *ngIf="whiteLabelSettings.logo"
x="100"
Expand Down
6 changes: 6 additions & 0 deletions frontend/src/app/components/charts/chart-edit/chart-edit.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,12 @@
flex-direction: column;
}

@media (prefers-color-scheme: dark) {
.chart-edit-main {
background-color: #191919;
}
}

.chart-edit-page {
display: flex;
flex-direction: column;
Expand Down
6 changes: 6 additions & 0 deletions frontend/src/app/components/charts/charts-list/charts-list.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@
overflow-y: auto;
}

@media (prefers-color-scheme: dark) {
.charts-main {
background-color: #191919;
}
}

.charts-page {
margin: 3em auto;
padding: 0 clamp(40px, 5vw, 100px);
Expand Down
6 changes: 6 additions & 0 deletions frontend/src/app/components/company/company.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@
overflow-y: auto;
}

@media (prefers-color-scheme: dark) {
.profile-main {
background-color: #191919;
}
}

::ng-deep .profile-main > app-alert {
position: relative;
top: 0;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/components/company/company.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@ <h2 class="heading-2 tableHeader__heading">Members <span *ngIf="currentPlan ===
[disabled]="isDemo"
[(ngModel)]="company.show_test_connections"
(change)="changeShowTestConnections($event.checked)">
Show demo admin panels
Show Demo panels for all members
Copy link

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

UI copy uses title-case mid-sentence ("Show Demo..."). If the product copy standard is sentence case elsewhere, consider changing this to "Show demo panels for all members" for consistency/readability.

Suggested change
Show Demo panels for all members
Show demo panels for all members

Copilot uses AI. Check for mistakes.
</mat-slide-toggle>
</div>
</div>
Expand Down
6 changes: 6 additions & 0 deletions frontend/src/app/components/company/invite-member-dialog/invite-member-dialog.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,9 @@
margin-top: 2px;
}

@media (prefers-color-scheme: dark) {
.role-option__description {
color: rgba(255,255,255,0.7);
}
}

17 changes: 17 additions & 0 deletions .../app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -911,3 +911,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;
}
}
8 changes: 7 additions & 1 deletion ...c/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
});
Comment on lines +113 to +117
Copy link

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

window.matchMedia is called without an existence check. In some environments (unit tests / older browsers / non-window contexts) this can throw and prevent the AI panel from rendering. Align with other code in the repo (e.g. window.matchMedia?.(...)) and fall back to light/default when unavailable.

Copilot uses AI. Check for mistakes.
//@ts-expect-error dynamic load of mermaid
window.mermaid = mermaid.default ?? mermaid;
window.mermaid = mermaidAPI;
}

ngOnDestroy() {
Expand Down
8 changes: 7 additions & 1 deletion frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,12 +150,18 @@
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;
}

@media (prefers-color-scheme: dark) {
.action_active::after {
background: var(--color-accentedPalette-500);
}
}

Comment on lines +159 to +164
Copy link

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The @media (prefers-color-scheme: dark) override for .action_active::after sets the same background value as the base rule, making it redundant and harder to maintain. Consider removing the media block or changing the base/dark values so the override is meaningful.

Suggested change
@media (prefers-color-scheme: dark) {
.action_active::after {
background: var(--color-accentedPalette-500);
}
}

Copilot uses AI. Check for mistakes.
.action-button_disabled {
--mat-theme-text-disabled-on-background: rgba(0, 0, 0, 0.78);

Expand Down
6 changes: 6 additions & 0 deletions frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@ app-dashboard-view .dashboard-view-page {
flex-direction: column;
}

@media (prefers-color-scheme: dark) {
app-dashboard-view .dashboard-view-page {
background-color: #191919;
}
}

app-dashboard-view .dashboard-header {
display: flex;
align-items: center;
Expand Down
83 changes: 59 additions & 24 deletions frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@
overflow-y: auto;
}

@media (prefers-color-scheme: dark) {
.dashboards-main {
background-color: #191919;
}
}

.dashboards-page {
margin: 3em auto;
padding: 0 clamp(40px, 5vw, 100px);
Expand Down Expand Up @@ -90,19 +96,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;
}
}

Expand All @@ -118,33 +134,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 */
Expand Down Expand Up @@ -238,28 +273,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 {
Expand Down
45 changes: 39 additions & 6 deletions frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,39 @@ <h1 class="mat-h1">Dashboards</h1>
<app-placeholder-dashboards *ngIf="loading()"></app-placeholder-dashboards>

<div *ngIf="!loading() && filteredDashboards().length === 0" class="no-dashboards">
<mat-icon class="no-dashboards-icon">dashboard</mat-icon>
<h3>No dashboards found</h3>
<svg class="no-dashboards-illustration" viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Back card -->
<rect class="illust-card-back" x="30" y="8" width="60" height="44" rx="6"/>
<rect class="illust-detail" x="38" y="16" width="20" height="3" rx="1.5"/>
<rect class="illust-detail" x="38" y="23" width="36" height="2" rx="1"/>
<rect class="illust-detail" x="38" y="28" width="28" height="2" rx="1"/>

<!-- Middle card -->
<rect class="illust-card-mid" x="20" y="22" width="60" height="44" rx="6"/>
<rect class="illust-detail" x="28" y="30" width="18" height="3" rx="1.5"/>
<rect class="illust-detail" x="28" y="37" width="32" height="2" rx="1"/>
<rect class="illust-detail" x="28" y="42" width="24" height="2" rx="1"/>

<!-- Front card -->
<rect class="illust-card-front" x="10" y="38" width="60" height="52" rx="7"/>
<rect class="illust-detail-accent" x="18" y="46" width="22" height="3" rx="1.5"/>
<rect class="illust-detail" x="18" y="53" width="16" height="2" rx="1"/>

<!-- Mini line chart -->
<defs>
<linearGradient id="emptyChartGrad" x1="18" y1="62" x2="18" y2="82">
<stop offset="0%" stop-color="#3b82f6" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#3b82f6" stop-opacity="0"/>
</linearGradient>
</defs>
<path d="M18,78 L28,72 L38,75 L48,65 L58,68" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.9"/>
<path d="M18,78 L28,72 L38,75 L48,65 L58,68 L58,82 L18,82 Z" fill="url(#emptyChartGrad)"/>
<circle cx="48" cy="65" r="2.5" fill="#3b82f6" opacity="0.9"/>
<circle cx="58" cy="68" r="2.5" fill="#3b82f6" opacity="0.9"/>
</svg>
<h3>No dashboards yet</h3>
<p *ngIf="searchQuery()">No dashboards match your search criteria.</p>
<p *ngIf="!searchQuery()">Create your first dashboard to visualize your data.</p>
<p *ngIf="!searchQuery()">Dashboards help you visualize your data with charts, tables, and metrics — all in one place.</p>
<button mat-flat-button color="primary"
(click)="openCreateDialog()"
data-testid="create-dashboard-button">
Expand All @@ -58,8 +87,12 @@ <h3>No dashboards found</h3>
<a [routerLink]="['/dashboards', connectionId(), dashboard.id]"
(click)="trackViewDashboardOpened()"
class="dashboard-preview">
<div class="preview-placeholder">
<mat-icon class="preview-placeholder-icon">dashboard</mat-icon>
<div *ngIf="!dashboard.widgets?.length" class="preview-placeholder">
<mat-icon class="preview-placeholder-icon" fontSet="material-symbols-outlined">dashboard</mat-icon>
<span class="preview-placeholder-hint">Connect your first panel</span>
</div>
<div *ngIf="dashboard.widgets?.length" class="preview-chart">
<app-chart-mini-preview [chartType]="'line'"></app-chart-mini-preview>
</div>
</a>

Expand Down Expand Up @@ -103,7 +136,7 @@ <h3>No dashboards found</h3>
<div class="dashboard-meta">
<span class="dashboard-widgets-count">
<mat-icon class="meta-icon">widgets</mat-icon>
{{dashboard.widgets?.length || 0}} widgets
{{dashboard.widgets?.length || 0}} panels
</span>
<span class="dashboard-updated">
{{dashboard.updated_at | date:'mediumDate'}}
Expand Down
Loading
Loading