From 5d04872f9cb0b18d4d6670609c44a60525e2e3e7 Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Thu, 26 Feb 2026 12:59:21 +0200 Subject: [PATCH 1/7] UI improvements: sidebar groups, branding dark theme, invite dialog fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Group profile sidebar items by category (General, Customization, Security, Developer) with labels and dividers - Hide profile sidebar on mobile (≤600px) to match tables sidebar behavior - Fix branding dark theme preview color (#212121 → #191919) and overlay (rgba(25,25,25,0.64)) - Fix invite member dialog role description color in dark theme - Rename "Show demo admin panels" to "Show Demo panels for all members" Co-Authored-By: Claude Opus 4.6 --- .../branding/branding.component.css | 8 +++- .../branding/branding.component.html | 2 +- .../components/company/company.component.html | 2 +- .../invite-member-dialog.component.css | 6 +++ .../profile-sidebar.component.css | 40 +++++++++++++++---- .../profile-sidebar.component.html | 30 +++++++++----- 6 files changed, 68 insertions(+), 20 deletions(-) diff --git a/frontend/src/app/components/branding/branding.component.css b/frontend/src/app/components/branding/branding.component.css index 61a756909..f2bbc0297 100644 --- a/frontend/src/app/components/branding/branding.component.css +++ b/frontend/src/app/components/branding/branding.component.css @@ -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; @@ -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); } } 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/profile/profile-sidebar/profile-sidebar.component.css b/frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.css index 17534d645..8896b0ae0 100644 --- a/frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.css +++ b/frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.css @@ -17,7 +17,7 @@ @media (prefers-color-scheme: dark) { .profile-sidebar { - background-color: var(--color-primaryPalette-900); + background-color: #212121; } } @@ -94,14 +94,40 @@ color: var(--color-accentedPalette-500); } -/* Mobile styles */ -@media (width <= 768px) { - .profile-sidebar { - width: 56px; - min-width: 56px; +.sidebar-group-label { + display: block; + font-size: 11px; + font-weight: 600; + letter-spacing: 0.3px; + color: rgba(0, 0, 0, 0.4); + padding: 12px 16px 4px; +} + +@media (prefers-color-scheme: dark) { + .sidebar-group-label { + color: rgba(255, 255, 255, 0.35); } +} + +.sidebar-divider { + height: 1px; + background-color: rgba(0, 0, 0, 0.08); + margin: 4px 16px; +} - .sidebar-toggle-button:not(.sidebar-toggle-button_collapsed) { +.sidebar-divider_collapsed { + margin: 4px 8px; +} + +@media (prefers-color-scheme: dark) { + .sidebar-divider { + background-color: rgba(255, 255, 255, 0.08); + } +} + +/* Mobile styles */ +@media (width <= 600px) { + .profile-sidebar { display: none; } } diff --git a/frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.html b/frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.html index 2e7a48052..9c722a22e 100644 --- a/frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.html +++ b/frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.html @@ -18,6 +18,7 @@ + General payments Subscription + +
+ Customization palette Branding + +
+ Security security SAML SSO - - vpn_key - API Keys - key Secrets + +
+ Developer + + vpn_key + API Keys + Date: Thu, 26 Feb 2026 15:21:32 +0200 Subject: [PATCH 2/7] Fix dark theme issues: mermaid charts, widget dot, snackbar button - Initialize mermaid with dark theme when OS prefers dark mode - Add CSS fallback for chart text/labels visibility in dark theme - Change widget indicator dot to accent color in both themes - Make snackbar button use accent color in dark theme for contrast Co-Authored-By: Claude Opus 4.6 --- .../db-table-ai-panel.component.css | 17 +++++++++++++++++ .../db-table-ai-panel.component.ts | 8 +++++++- .../db-table-view/db-table-view.component.css | 8 +++++++- frontend/src/custom-theme.scss | 1 + 4 files changed, 32 insertions(+), 2 deletions(-) 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..5db03eedd 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 @@ -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; + } +} 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-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css index dcfff60a5..ba298d59f 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,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); + } +} + .action-button_disabled { --mat-theme-text-disabled-on-background: rgba(0, 0, 0, 0.78); diff --git a/frontend/src/custom-theme.scss b/frontend/src/custom-theme.scss index a7a7a6b6d..16910e26a 100644 --- a/frontend/src/custom-theme.scss +++ b/frontend/src/custom-theme.scss @@ -31,6 +31,7 @@ html { --mat-expansion-container-background-color: #202020 !important; --mat-table-background-color: #202020 !important; --mat-paginator-container-background-color: #202020 !important; + --mat-snack-bar-button-color: var(--color-accentedPalette-500) !important; } .mat-datepicker-content { From f35a72601f48a14ad74d8447f0349b549f000da0 Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Thu, 26 Feb 2026 17:16:50 +0200 Subject: [PATCH 3/7] Unify dark theme background (#191919) across all pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add #191919 background to dashboards list, dashboard view, panels list, panel edit - Add #191919 background to profile pages: account, company, branding, SSO, secrets, API keys, upgrade, zapier - Update dashboards sidebar to #212121 and hide on mobile (≤600px) - Set snackbar button to accent color in dark theme Co-Authored-By: Claude Opus 4.6 --- .../src/app/components/api-keys/api-keys.component.css | 6 ++++++ .../charts/chart-edit/chart-edit.component.css | 6 ++++++ .../charts/charts-list/charts-list.component.css | 6 ++++++ .../src/app/components/company/company.component.css | 6 ++++++ .../dashboard-view/dashboard-view.component.css | 6 ++++++ .../dashboards-list/dashboards-list.component.css | 6 ++++++ .../dashboards-sidebar.component.css | 9 ++------- .../src/app/components/secrets/secrets.component.css | 6 ++++++ frontend/src/app/components/sso/sso.component.css | 6 ++++++ .../src/app/components/upgrade/upgrade.component.css | 6 ++++++ .../user-settings/user-settings.component.css | 10 ++++++++++ .../src/app/components/zapier/zapier.component.css | 6 ++++++ 12 files changed, 72 insertions(+), 7 deletions(-) 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..fc34f145e 100644 --- a/frontend/src/app/components/api-keys/api-keys.component.css +++ b/frontend/src/app/components/api-keys/api-keys.component.css @@ -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; diff --git a/frontend/src/app/components/charts/chart-edit/chart-edit.component.css b/frontend/src/app/components/charts/chart-edit/chart-edit.component.css index 2498f2107..63911f6a5 100644 --- a/frontend/src/app/components/charts/chart-edit/chart-edit.component.css +++ b/frontend/src/app/components/charts/chart-edit/chart-edit.component.css @@ -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; diff --git a/frontend/src/app/components/charts/charts-list/charts-list.component.css b/frontend/src/app/components/charts/charts-list/charts-list.component.css index 9edad5e00..49f48d3fa 100644 --- a/frontend/src/app/components/charts/charts-list/charts-list.component.css +++ b/frontend/src/app/components/charts/charts-list/charts-list.component.css @@ -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); diff --git a/frontend/src/app/components/company/company.component.css b/frontend/src/app/components/company/company.component.css index 610ca3fef..f7666c81f 100644 --- a/frontend/src/app/components/company/company.component.css +++ b/frontend/src/app/components/company/company.component.css @@ -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; 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..9ac866aa5 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 @@ -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; 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..a5f3d6fe5 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 @@ -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); diff --git a/frontend/src/app/components/dashboards/dashboards-sidebar/dashboards-sidebar.component.css b/frontend/src/app/components/dashboards/dashboards-sidebar/dashboards-sidebar.component.css index be5437aca..6f61fa853 100644 --- a/frontend/src/app/components/dashboards/dashboards-sidebar/dashboards-sidebar.component.css +++ b/frontend/src/app/components/dashboards/dashboards-sidebar/dashboards-sidebar.component.css @@ -17,7 +17,7 @@ @media (prefers-color-scheme: dark) { .dashboards-sidebar { - background-color: var(--color-primaryPalette-900); + background-color: #212121; } } @@ -81,13 +81,8 @@ } /* Mobile styles */ -@media (width <= 768px) { +@media (width <= 600px) { .dashboards-sidebar { - width: 56px; - min-width: 56px; - } - - .sidebar-toggle-button:not(.sidebar-toggle-button_collapsed) { display: none; } } diff --git a/frontend/src/app/components/secrets/secrets.component.css b/frontend/src/app/components/secrets/secrets.component.css index 10f6b7ecd..0c67faa98 100644 --- a/frontend/src/app/components/secrets/secrets.component.css +++ b/frontend/src/app/components/secrets/secrets.component.css @@ -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; diff --git a/frontend/src/app/components/sso/sso.component.css b/frontend/src/app/components/sso/sso.component.css index d8c90e1a8..0c5f62ad8 100644 --- a/frontend/src/app/components/sso/sso.component.css +++ b/frontend/src/app/components/sso/sso.component.css @@ -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; diff --git a/frontend/src/app/components/upgrade/upgrade.component.css b/frontend/src/app/components/upgrade/upgrade.component.css index 56c7feab2..056c23f08 100644 --- a/frontend/src/app/components/upgrade/upgrade.component.css +++ b/frontend/src/app/components/upgrade/upgrade.component.css @@ -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; diff --git a/frontend/src/app/components/user-settings/user-settings.component.css b/frontend/src/app/components/user-settings/user-settings.component.css index 4df8164f2..9d0f3c3c4 100644 --- a/frontend/src/app/components/user-settings/user-settings.component.css +++ b/frontend/src/app/components/user-settings/user-settings.component.css @@ -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; @@ -108,6 +114,10 @@ .api-key-list-item:hover { background: var(--color-primaryPalette-500); } + + ::ng-deep .user-settings__section-heading mat-icon[svgIcon] svg path { + fill: #ffffff; + } } @media (prefers-color-scheme: light) { diff --git a/frontend/src/app/components/zapier/zapier.component.css b/frontend/src/app/components/zapier/zapier.component.css index 1078d7e79..36bc6a6ef 100644 --- a/frontend/src/app/components/zapier/zapier.component.css +++ b/frontend/src/app/components/zapier/zapier.component.css @@ -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; From c116b41eacfb497857afe427e5e036b3753c39e0 Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Fri, 27 Feb 2026 11:47:23 +0200 Subject: [PATCH 4/7] Improve dashboard cards: SVG illustration, panel previews, light theme styling Co-Authored-By: Claude Opus 4.6 --- .../dashboards-list.component.css | 77 +++++++++++++------ .../dashboards-list.component.html | 45 +++++++++-- .../dashboards-list.component.ts | 2 + 3 files changed, 94 insertions(+), 30 deletions(-) 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 a5f3d6fe5..be32cc8dd 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 @@ -96,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; } } @@ -124,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 */ @@ -244,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 { 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.

 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 188cae8b4..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 @@ -120,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-sidebar/dashboards-sidebar.component.css b/frontend/src/app/components/dashboards/dashboards-sidebar/dashboards-sidebar.component.css index 6f61fa853..f6565b527 100644 --- a/frontend/src/app/components/dashboards/dashboards-sidebar/dashboards-sidebar.component.css +++ b/frontend/src/app/components/dashboards/dashboards-sidebar/dashboards-sidebar.component.css @@ -5,33 +5,31 @@ border-right: 1px solid var(--mat-sidenav-container-divider-color); display: flex; flex-direction: column; - background-color: var(--color-primaryPalette-50); overflow: hidden; } +@media (prefers-color-scheme: dark) { + .dashboards-sidebar { + background-color: var(--surface-dark-color); + } +} + .dashboards-sidebar_initialized { transition: width 0.2s ease-in-out, min-width 0.2s ease-in-out; } -@media (prefers-color-scheme: dark) { - .dashboards-sidebar { - background-color: #212121; - } -} - .dashboards-sidebar_collapsed { width: 56px; min-width: 56px; } .sidebar-toggle-button { - margin: 12px; - display: flex; - align-items: center; - justify-content: flex-end; - gap: 4px; + align-self: flex-start; + margin-top: 8px; + margin-left: 12px; + margin-bottom: 8px; } .sidebar-toggle-button_collapsed { diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css index 1f7401d7f..eb0150a2e 100644 --- a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css +++ b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css @@ -170,7 +170,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 - 260px), 2%); @@ -195,12 +195,14 @@ @media (prefers-color-scheme: dark) { .actions { --shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.5), 0 2px 2px 0 rgba(0, 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, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + --background-color: #fff; } } diff --git a/frontend/src/app/components/feature-notification/feature-notification.component.css b/frontend/src/app/components/feature-notification/feature-notification.component.css index eea3f9919..72183fc9a 100644 --- a/frontend/src/app/components/feature-notification/feature-notification.component.css +++ b/frontend/src/app/components/feature-notification/feature-notification.component.css @@ -14,7 +14,7 @@ @media (prefers-color-scheme: dark) { .feature-notification { - background-color: #202020; + background-color: var(--surface-dark-color); } } diff --git a/frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.css b/frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.css index 8896b0ae0..0d8c5243f 100644 --- a/frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.css +++ b/frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.css @@ -5,33 +5,30 @@ border-right: 1px solid var(--mat-sidenav-container-divider-color); display: flex; flex-direction: column; - background-color: var(--color-primaryPalette-50); overflow: hidden; } +@media (prefers-color-scheme: dark) { + .profile-sidebar { + background-color: var(--surface-dark-color); + } +} + .profile-sidebar_initialized { transition: width 0.2s ease-in-out, min-width 0.2s ease-in-out; } -@media (prefers-color-scheme: dark) { - .profile-sidebar { - background-color: #212121; - } -} - .profile-sidebar_collapsed { width: 56px; min-width: 56px; } .sidebar-toggle-button { - margin: 12px; - display: flex; - align-items: center; - justify-content: flex-end; - gap: 4px; + align-self: flex-start; + margin-top: 8px; + margin-left: 12px; } .sidebar-toggle-button_collapsed { diff --git a/frontend/src/app/components/upgrade/upgrade.component.css b/frontend/src/app/components/upgrade/upgrade.component.css index 0e0a947cc..a657e1b47 100644 --- a/frontend/src/app/components/upgrade/upgrade.component.css +++ b/frontend/src/app/components/upgrade/upgrade.component.css @@ -150,7 +150,7 @@ @media (prefers-color-scheme: dark) { .plan-header { - background-color: #202020; + background-color: var(--surface-dark-color); } .plan-header_current { diff --git a/frontend/src/app/components/user-settings/user-settings.component.html b/frontend/src/app/components/user-settings/user-settings.component.html index c09678e65..a0dfca5c6 100644 --- a/frontend/src/app/components/user-settings/user-settings.component.html +++ b/frontend/src/app/components/user-settings/user-settings.component.html @@ -99,7 +99,7 @@

[disabled]="submittingChangedShowTestConnections || isDemo" [(ngModel)]="showTestConnections" (change)="changeShowTestConnections($event.checked)"> - Show demo admin panels + Show Demo admin panels

diff --git a/frontend/src/custom-theme.scss b/frontend/src/custom-theme.scss index 16910e26a..4687ad29f 100644 --- a/frontend/src/custom-theme.scss +++ b/frontend/src/custom-theme.scss @@ -24,13 +24,16 @@ html { --mat-button-outlined-container-shape: 4px; --mat-button-text-container-shape: 4px; --mat-form-field-outlined-container-shape: 4px !important; + + --surface-dark-color: #202020 !important; + --mat-toolbar-container-background-color: var(--surface-dark-color) !important; } @media (prefers-color-scheme: dark) { html { - --mat-expansion-container-background-color: #202020 !important; - --mat-table-background-color: #202020 !important; - --mat-paginator-container-background-color: #202020 !important; + --mat-expansion-container-background-color: var(--surface-dark-color) !important; + --mat-table-background-color: var(--surface-dark-color) !important; + --mat-paginator-container-background-color: var(--surface-dark-color) !important; --mat-snack-bar-button-color: var(--color-accentedPalette-500) !important; } From e2c66b87be0c319fc2c4d47b9961e767b969b7f5 Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Thu, 5 Mar 2026 14:47:33 +0000 Subject: [PATCH 7/7] remove unused css --- .../saved-filters-dialog.component.css | 29 ------------------- 1 file changed, 29 deletions(-) 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 983cfc3b2..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;