From 4c8eb49e3947b0e903778ff216f1da76ee223650 Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Wed, 1 Apr 2026 15:52:33 +0000 Subject: [PATCH 1/4] add purple color to dark theme and update Automations colors --- .../db-table-actions.component.css | 42 ++++++++----------- frontend/src/custom-theme.scss | 1 + 2 files changed, 18 insertions(+), 25 deletions(-) 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 7e4cb388d..3c604b4f8 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 @@ -862,25 +862,24 @@ .trigger-pills__or { font-size: 11px; font-weight: 500; - color: #5a5a70; + color: rgba(255, 255, 255, 0.64); text-transform: uppercase; letter-spacing: 0.03em; } @media (prefers-color-scheme: light) { .trigger-pills__or { - color: #94a3b8; + color: rgba(0, 0, 0, 0.64); } } .trigger-pill { display: inline-flex; align-items: center; - gap: 7px; + gap: 8px; padding: 7px 14px; - border-radius: 8px; - border: 1px solid #2a2a3a; - background: #0f0f18; + border-radius: 4px; + border: 1px solid var(--mat-button-outlined-outline-color); font-size: 12px; font-weight: 600; cursor: pointer; @@ -903,17 +902,16 @@ .trigger-pill--add-row { color: color-mix(in srgb, var(--success-color), transparent 40%); } .trigger-pill--update-row { color: color-mix(in srgb, var(--info-color), transparent 40%); } .trigger-pill--delete-row { color: color-mix(in srgb, var(--error-color), transparent 40%); } -.trigger-pill--custom { color: #8660b0; } +.trigger-pill--custom { color: color-mix(in srgb, var(--alternative-color), transparent 40%); } /* Full saturation when active */ .trigger-pill--add-row.trigger-pill--active { color: var(--success-color); } .trigger-pill--update-row.trigger-pill--active { color: var(--info-color); } .trigger-pill--delete-row.trigger-pill--active { color: var(--error-color); } -.trigger-pill--custom.trigger-pill--active { color: #c084fc; } +.trigger-pill--custom.trigger-pill--active { color: var(--alternative-color); } .trigger-pill:hover { - border-color: #3a3a50; - background: #161620; + background: rgba(255, 255, 255, 0.036); } /* Active states */ @@ -936,31 +934,25 @@ } .trigger-pill--custom.trigger-pill--active { - border-color: #c084fc; - background: color-mix(in srgb, #c084fc, transparent 90%); - box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.25), 0 0 12px rgba(192, 132, 252, 0.08); + border-color: var(--alternative-color); + background: color-mix(in srgb, var(--alternative-color), transparent 90%); + box-shadow: 0 0 0 1px color-mix(in srgb, var(--alternative-color), transparent 75%), 0 0 12px color-mix(in srgb, var(--alternative-color), transparent 92%); } /* Light mode overrides */ @media (prefers-color-scheme: light) { - .trigger-pill { - background: #ffffff; - border-color: #e2e8f0; - } - .trigger-pill--add-row { color: color-mix(in srgb, var(--success-color), transparent 35%); } .trigger-pill--update-row { color: color-mix(in srgb, var(--info-color), transparent 35%); } .trigger-pill--delete-row { color: color-mix(in srgb, var(--error-color), transparent 35%); } - .trigger-pill--custom { color: #9878bf; } + .trigger-pill--custom { color: color-mix(in srgb, var(--alternative-color), transparent 35%); } .trigger-pill--add-row.trigger-pill--active { color: var(--success-color); } .trigger-pill--update-row.trigger-pill--active { color: var(--info-color); } .trigger-pill--delete-row.trigger-pill--active { color: var(--error-color); } - .trigger-pill--custom.trigger-pill--active { color: #9333ea; } + .trigger-pill--custom.trigger-pill--active { color: var(--alternative-color); } .trigger-pill:hover { - border-color: #cbd5e1; - background: #f8fafc; + background: rgba(0, 0, 0, 0.036); } .trigger-pill--add-row.trigger-pill--active { @@ -982,9 +974,9 @@ } .trigger-pill--custom.trigger-pill--active { - border-color: #9333ea; - background: #faf5ff; - box-shadow: 0 0 0 1px rgba(147, 51, 234, 0.25); + border-color: var(--alternative-color); + background: color-mix(in srgb, var(--alternative-color), transparent 92%); + box-shadow: 0 0 0 1px color-mix(in srgb, var(--alternative-color), transparent 75%); } } diff --git a/frontend/src/custom-theme.scss b/frontend/src/custom-theme.scss index 645095eb7..af0e69a09 100644 --- a/frontend/src/custom-theme.scss +++ b/frontend/src/custom-theme.scss @@ -52,6 +52,7 @@ html { --warning-color: #f79008; --info-color: #296ee9; --success-color: #4caf50; + --alternative-color: #c084fc; } .mat-datepicker-content { From f6fa7cd7e418151eb35a190f258e164809d81730 Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Thu, 2 Apr 2026 18:17:47 +0000 Subject: [PATCH 2/4] create angular color palettes for error, warning, info, siccess and alternative colors and update them across the project --- .../components/company/company.component.css | 16 +-- .../db-table-actions.component.css | 126 ++++++++-------- .../db-table-actions.component.ts | 6 +- .../db-folder-delete-dialog.component.css | 12 +- .../db-folder-edit-dialog.component.css | 55 +++---- .../db-folder-edit-dialog.component.html | 3 +- .../db-tables-list.component.css | 134 ------------------ .../ui-components/alert/alert.component.css | 8 +- .../ui-components/banner/banner.component.css | 8 +- .../boolean/boolean.component.css | 20 +-- .../boolean/boolean.component.css | 20 +-- .../user-password/user-password.component.css | 4 +- .../cedar-policy-editor-dialog.component.css | 4 +- .../cedar-policy-list.component.css | 36 +++-- .../app/components/users/users.component.css | 4 +- .../src/app/services/connections.service.ts | 76 +++++++++- frontend/src/custom-theme.scss | 26 ++-- frontend/src/main.ts | 12 ++ 18 files changed, 244 insertions(+), 326 deletions(-) diff --git a/frontend/src/app/components/company/company.component.css b/frontend/src/app/components/company/company.component.css index 8f7c25fb5..23dbbed2e 100644 --- a/frontend/src/app/components/company/company.component.css +++ b/frontend/src/app/components/company/company.component.css @@ -109,23 +109,11 @@ } .company-member-cell_accessed { - color: #1b5e20; -} - -@media (prefers-color-scheme: dark) { - .company-member-cell_accessed { - color: #4caf50; - } + color: var(--color-successPalette-500); } .company-member-cell_not-accessed { - color: #b71c1c; -} - -@media (prefers-color-scheme: dark) { - .company-member-cell_not-accessed { - color: #e53935; - } + color: var(--color-warnPalette-500); } .company-member-cell_content-center { 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 3c604b4f8..42b53bdef 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 @@ -442,7 +442,7 @@ .example-flow__badge--when { background: #ede9fe; - color: #6d28d9; + color: var(--color-alternativePalette-500); } .example-flow__badge--action { @@ -504,30 +504,30 @@ } .example-trigger__icon-box--add { - background: color-mix(in srgb, var(--success-color), transparent 80%); - color: var(--success-color); + background: color-mix(in srgb, var(--color-successPalette-500), transparent 80%); + color: var(--color-successPalette-500); } .example-trigger__icon-box--update { - background: color-mix(in srgb, var(--info-color), transparent 80%); - color: var(--info-color); + background: color-mix(in srgb, var(--color-infoPalette-500), transparent 80%); + color: var(--color-infoPalette-500); } .example-trigger__icon-box--delete { - background: color-mix(in srgb, var(--error-color), transparent 80%); - color: var(--error-color); + background: color-mix(in srgb, var(--color-warnPalette-500), transparent 80%); + color: var(--color-warnPalette-500); } .example-trigger__icon-box--custom { - background: color-mix(in srgb, var(--alternative-color), transparent 80%); - color: var(--alternative-color); + background: color-mix(in srgb, var(--color-alternativePalette-500), transparent 80%); + color: var(--color-alternativePalette-500); } @media (prefers-color-scheme: dark) { - .example-trigger__icon-box--add { background: color-mix(in srgb, var(--success-color), transparent 88%); color: var(--success-color); } - .example-trigger__icon-box--update { background: color-mix(in srgb, var(--info-color), transparent 88%); color: var(--info-color); } - .example-trigger__icon-box--delete { background: color-mix(in srgb, var(--error-color), transparent 88%); color: var(--error-color); } - .example-trigger__icon-box--custom { background: color-mix(in srgb, var(--alternative-color), transparent 88%); color: var(--alternative-color); } + .example-trigger__icon-box--add { background: color-mix(in srgb, var(--color-successPalette-500), transparent 88%); color: var(--color-successPalette-500); } + .example-trigger__icon-box--update { background: color-mix(in srgb, var(--color-infoPalette-500), transparent 88%); color: var(--color-infoPalette-500); } + .example-trigger__icon-box--delete { background: color-mix(in srgb, var(--color-warnPalette-500), transparent 88%); color: var(--color-warnPalette-500); } + .example-trigger__icon-box--custom { background: color-mix(in srgb, var(--color-alternativePalette-500), transparent 88%); color: var(--color-alternativePalette-500); } } .example-trigger__text { @@ -862,14 +862,14 @@ .trigger-pills__or { font-size: 11px; font-weight: 500; - color: rgba(255, 255, 255, 0.64); + color: rgba(255, 255, 255, 0.24); text-transform: uppercase; letter-spacing: 0.03em; } @media (prefers-color-scheme: light) { .trigger-pills__or { - color: rgba(0, 0, 0, 0.64); + color: rgba(0, 0, 0, 0.32); } } @@ -880,6 +880,7 @@ padding: 7px 14px; border-radius: 4px; border: 1px solid var(--mat-button-outlined-outline-color); + background: #0f0f18; font-size: 12px; font-weight: 600; cursor: pointer; @@ -899,16 +900,10 @@ } /* Default colored text & icons per type (muted when not selected) */ -.trigger-pill--add-row { color: color-mix(in srgb, var(--success-color), transparent 40%); } -.trigger-pill--update-row { color: color-mix(in srgb, var(--info-color), transparent 40%); } -.trigger-pill--delete-row { color: color-mix(in srgb, var(--error-color), transparent 40%); } -.trigger-pill--custom { color: color-mix(in srgb, var(--alternative-color), transparent 40%); } - -/* Full saturation when active */ -.trigger-pill--add-row.trigger-pill--active { color: var(--success-color); } -.trigger-pill--update-row.trigger-pill--active { color: var(--info-color); } -.trigger-pill--delete-row.trigger-pill--active { color: var(--error-color); } -.trigger-pill--custom.trigger-pill--active { color: var(--alternative-color); } +.trigger-pill--add-row { color: var(--color-successDarkPalette-700); } +.trigger-pill--update-row { color: var(--color-infoPalette-700); } +.trigger-pill--delete-row { color: var(--color-warnDarkPalette-700); } +.trigger-pill--custom { color: var(--color-alternativeDarkPalette-700); } .trigger-pill:hover { background: rgba(255, 255, 255, 0.036); @@ -916,67 +911,72 @@ /* Active states */ .trigger-pill--add-row.trigger-pill--active { - border-color: var(--success-color); - background: color-mix(in srgb, var(--success-color), transparent 90%); - box-shadow: 0 0 0 1px color-mix(in srgb, var(--success-color), transparent 75%), 0 0 12px color-mix(in srgb, var(--success-color), transparent 92%); + border-color: var(--color-successDarkPalette-500); + background: var(--color-successDarkPalette-900); + box-shadow: 0 0 0 1px var(--color-successDarkPalette-800), 0 0 12px var(--color-successDarkPalette-900); + color: var(--color-successDarkPalette-500); } .trigger-pill--update-row.trigger-pill--active { - border-color: var(--info-color); - background: color-mix(in srgb, var(--info-color), transparent 90%); - box-shadow: 0 0 0 1px color-mix(in srgb, var(--info-color), transparent 75%), 0 0 12px color-mix(in srgb, var(--info-color), transparent 92%); + border-color: var(--color-infoPalette-500); + background: var(--color-infoPalette-900); + box-shadow: 0 0 0 1px var(--color-infoPalette-800), 0 0 12px var(--color-infoPalette-900); + color: var(--color-infoPalette-500); } .trigger-pill--delete-row.trigger-pill--active { - border-color: var(--error-color); - background: color-mix(in srgb, var(--error-color), transparent 90%); - box-shadow: 0 0 0 1px color-mix(in srgb, var(--error-color), transparent 75%), 0 0 12px color-mix(in srgb, var(--error-color), transparent 92%); + border-color: var(--color-warnDarkPalette-500); + background: var(--color-warnDarkPalette-900); + box-shadow: 0 0 0 1px var(--color-warnDarkPalette-800), 0 0 12px var(--color-warnDarkPalette-900); + color: var(--color-warnDarkPalette-500); } .trigger-pill--custom.trigger-pill--active { - border-color: var(--alternative-color); - background: color-mix(in srgb, var(--alternative-color), transparent 90%); - box-shadow: 0 0 0 1px color-mix(in srgb, var(--alternative-color), transparent 75%), 0 0 12px color-mix(in srgb, var(--alternative-color), transparent 92%); + border-color: var(--color-alternativeDarkPalette-500); + background: var(--color-alternativeDarkPalette-900); + box-shadow: 0 0 0 1px var(--color-alternativeDarkPalette-800), 0 0 12px var(--color-alternativeDarkPalette-900); + color: var(--color-alternativeDarkPalette-500); } /* Light mode overrides */ @media (prefers-color-scheme: light) { - .trigger-pill--add-row { color: color-mix(in srgb, var(--success-color), transparent 35%); } - .trigger-pill--update-row { color: color-mix(in srgb, var(--info-color), transparent 35%); } - .trigger-pill--delete-row { color: color-mix(in srgb, var(--error-color), transparent 35%); } - .trigger-pill--custom { color: color-mix(in srgb, var(--alternative-color), transparent 35%); } - - .trigger-pill--add-row.trigger-pill--active { color: var(--success-color); } - .trigger-pill--update-row.trigger-pill--active { color: var(--info-color); } - .trigger-pill--delete-row.trigger-pill--active { color: var(--error-color); } - .trigger-pill--custom.trigger-pill--active { color: var(--alternative-color); } + /* Default colored text & icons per type (muted when not selected) */ + .trigger-pill--add-row { color: var(--color-successPalette-300); background-color: transparent; } + .trigger-pill--update-row { color: var(--color-infoPalette-300); background-color: transparent; } + .trigger-pill--delete-row { color: var(--color-warnPalette-300); background-color: transparent; } + .trigger-pill--custom { color: var(--color-alternativePalette-300); background-color: transparent; } .trigger-pill:hover { - background: rgba(0, 0, 0, 0.036); + background: rgba(255, 255, 255, 0.036); } + /* Active states */ .trigger-pill--add-row.trigger-pill--active { - border-color: var(--success-color); - background: color-mix(in srgb, var(--success-color), transparent 92%); - box-shadow: 0 0 0 1px color-mix(in srgb, var(--success-color), transparent 75%); + border-color: var(--color-successPalette-500); + background: var(--color-successPalette-100); + box-shadow: 0 0 0 1px var(--color-successPalette-100), 0 0 12px var(--color-successPalette-50); + color: var(--color-successPalette-500); } .trigger-pill--update-row.trigger-pill--active { - border-color: var(--info-color); - background: color-mix(in srgb, var(--info-color), transparent 92%); - box-shadow: 0 0 0 1px color-mix(in srgb, var(--info-color), transparent 75%); + border-color: var(--color-infoPalette-500); + background: var(--color-infoPalette-100); + box-shadow: 0 0 0 1px var(--color-infoPalette-100), 0 0 12px var(--color-infoPalette-50); + color: var(--color-infoPalette-500); } .trigger-pill--delete-row.trigger-pill--active { - border-color: var(--error-color); - background: color-mix(in srgb, var(--error-color), transparent 92%); - box-shadow: 0 0 0 1px color-mix(in srgb, var(--error-color), transparent 75%); + border-color: var(--color-warnPalette-500); + background: var(--color-warnPalette-100); + box-shadow: 0 0 0 1px var(--color-warnPalette-100), 0 0 12px var(--color-warnPalette-50); + color: var(--color-warnPalette-500); } .trigger-pill--custom.trigger-pill--active { - border-color: var(--alternative-color); - background: color-mix(in srgb, var(--alternative-color), transparent 92%); - box-shadow: 0 0 0 1px color-mix(in srgb, var(--alternative-color), transparent 75%); + border-color: var(--color-alternativePalette-500); + background: var(--color-alternativePalette-100); + box-shadow: 0 0 0 1px var(--color-alternativePalette-100), 0 0 12px var(--color-alternativePalette-50); + color: var(--color-alternativePalette-500); } } @@ -1032,6 +1032,14 @@ color: var(--color-accentedPalette-100-contrast); } +@media (prefers-color-scheme: dark) { + .affects-row ::ng-deep .mat-button-toggle-checked, + .action-methods ::ng-deep .mat-button-toggle-checked { + background-color: var(--color-accentedPalette-800); + color: var(--color-accentedPalette-800-contrast); + } +} + /* ── Action methods ── */ .action-methods { diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.ts index 5f4ec10f7..e4c2b4438 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.ts +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.ts @@ -121,9 +121,9 @@ export class DbTableActionsComponent implements OnInit { ]; public triggerMeta: Record = { - [EventType.AddRow]: { icon: 'add_circle_outline', desc: 'Fires when a new row is inserted', color: '#4caf50' }, - [EventType.UpdateRow]: { icon: 'edit', desc: 'Fires when an existing row is modified', color: '#2196f3' }, - [EventType.DeleteRow]: { icon: 'delete_outline', desc: 'Fires when a row is removed', color: '#e53935' }, + [EventType.AddRow]: { icon: 'add_circle_outline', desc: 'Fires when a new row is inserted', color: 'var(--color-successPalette-500)' }, + [EventType.UpdateRow]: { icon: 'edit', desc: 'Fires when an existing row is modified', color: 'var(--color-infoPalette-500)' }, + [EventType.DeleteRow]: { icon: 'delete_outline', desc: 'Fires when a row is removed', color: 'var(--color-warnPalette-500)' }, [EventType.Custom]: { icon: 'tune', desc: 'Manual trigger with custom button', color: '#9c27b0' }, }; public selectedEvents: string[] = []; 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 ea3453502..a923dc1c6 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 @@ -7,13 +7,13 @@ align-items: flex-start; gap: 12px; padding: 12px 16px; - background-color: color-mix(in hsl, #296ee9, transparent 95%); + background-color: var(--color-infoPalette-50); border-radius: 4px; margin-bottom: 20px; } .info-icon { - color: #296ee9; + color: var(--color-infoPalette-500); font-size: 20px; width: 20px; height: 20px; @@ -30,14 +30,10 @@ /* Dark mode support */ @media (prefers-color-scheme: dark) { .folder-info { - background-color: color-mix(in hsl, #296ee9, transparent 75%); - } - - .info-icon { - color: #296ee9; + background-color: var(--color-infoPalette-800); } .info-text { - color: #e0e0e0; + color: rgba(255, 255, 255, 0.72); } } diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-folder-edit-dialog/db-folder-edit-dialog.component.css b/frontend/src/app/components/dashboard/db-tables-list/db-folder-edit-dialog/db-folder-edit-dialog.component.css index 8734040a3..6d960bb62 100644 --- a/frontend/src/app/components/dashboard/db-tables-list/db-folder-edit-dialog/db-folder-edit-dialog.component.css +++ b/frontend/src/app/components/dashboard/db-tables-list/db-folder-edit-dialog/db-folder-edit-dialog.component.css @@ -6,15 +6,9 @@ .folder-name-section { margin-bottom: 20px; + margin-top: 20px; padding-bottom: 16px; - border-bottom: 1px solid #e0e0e0; -} - -.folder-name-section h4 { - margin: 0 0 12px 0; - font-size: 14px; - font-weight: 500; - color: #666; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .folder-name-field { @@ -24,14 +18,14 @@ .folder-color-section { margin-bottom: 20px; padding-bottom: 16px; - border-bottom: 1px solid #e0e0e0; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .folder-color-section h4 { margin: 0 0 12px 0; font-size: 14px; font-weight: 500; - color: #666; + color: rgba(0, 0, 0, 0.64); } .color-radio-group { @@ -98,7 +92,7 @@ margin: 0 0 12px 0; font-size: 14px; font-weight: 500; - color: #666; + color: rgba(0, 0, 0, 0.64); } .table-list { @@ -110,7 +104,7 @@ justify-content: space-between; align-items: center; padding: 12px 8px; - border-bottom: 1px solid #e0e0e0; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); transition: background-color 0.2s ease; } @@ -125,7 +119,6 @@ .table-name { flex: 1; font-size: 14px; - color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -142,40 +135,36 @@ } .add-button { - color: #4caf50; + color: var(--color-successPalette-500); background-color: transparent; } .add-button:hover { - background-color: rgba(76, 175, 80, 0.1); + background-color: var(--color-successPalette-50); } .remove-button { - color: #f44336; + color: var(--color-warnPalette-500); background-color: transparent; } .remove-button:hover { - background-color: rgba(244, 67, 54, 0.1); + background-color: var(--color-warnPalette-50); } /* Dark mode support */ @media (prefers-color-scheme: dark) { .folder-name-section { - border-bottom-color: #424242; - } - - .folder-name-section h4 { - color: #999; + border-bottom-color: rgba(255, 255, 255, 0.12); } .folder-color-section { - border-bottom-color: #424242; + border-bottom-color: rgba(255, 255, 255, 0.12); } .folder-color-section h4, .tables-section h4 { - color: #999; + color: rgba(255, 255, 255, 0.72); } .color-swatch { @@ -199,14 +188,26 @@ } .table-item { - border-bottom-color: #424242; + border-bottom-color: rgba(255, 255, 255, 0.12); } .table-item:hover { background-color: rgba(255, 255, 255, 0.04); } - .table-name { - color: #ccc; + .add-button { + color: var(--color-successDarkPalette-500); + } + + .add-button:hover { + background-color: var(--color-successDarkPalette-900); + } + + .remove-button { + color: var(--color-warnDarkPalette-500); + } + + .remove-button:hover { + background-color: var(--color-warnDarkPalette-900); } } 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 192a338e4..48bd1eb3b 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 @@ -5,13 +5,12 @@

-

Folder name

+ Folder name The "All Tables" folder cannot be renamed 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 cdce0f075..c0d0821fe 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 @@ -905,140 +905,6 @@ border-bottom: none; } -/* Edit Tables Dialog specific styles */ -.edit-tables-dialog .dialog-content { - max-width: 450px; - width: 90%; -} - -.edit-tables-dialog .dialog-body { - max-height: 400px; - overflow-y: auto; -} - -.edit-tables-dialog .table-list { - margin-top: 16px; -} - -.edit-tables-dialog .table-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 12px 0; - border-bottom: 1px solid #e0e0e0; - transition: background-color 0.2s ease; - padding-left: 4px; - padding-right: 4px; -} - -.edit-tables-dialog .table-item:hover { - background-color: rgba(0, 0, 0, 0.04); -} - -.edit-tables-dialog .table-item:last-child { - border-bottom: none; -} - -.edit-tables-dialog .table-name { - flex: 1; - font-size: 14px; - color: #333; -} - -.edit-tables-dialog .action-button { - min-width: 60px; - height: 32px; - font-size: 12px; - font-weight: 500; - border-radius: 4px; - border: none; -} - -.edit-tables-dialog .add-button { - color: #4caf50; - background-color: transparent; -} - -.edit-tables-dialog .add-button:hover { - background-color: rgba(76, 175, 80, 0.1); -} - -.edit-tables-dialog .remove-button { - color: #f44336; - background-color: transparent; -} - -.edit-tables-dialog .remove-button:hover { - background-color: rgba(244, 67, 54, 0.1); -} - -.edit-tables-dialog .folder-color-section { - margin-bottom: 20px; - padding-bottom: 16px; - border-bottom: 1px solid #e0e0e0; -} - -.edit-tables-dialog .folder-color-section h4 { - margin: 0 0 8px 0; - font-size: 14px; - font-weight: 500; - color: #666; -} - -.edit-tables-dialog .color-row { - display: flex; - gap: 8px; - flex-wrap: wrap; -} - -.edit-tables-dialog .tables-section h4 { - margin: 0 0 2px 0; - font-size: 14px; - font-weight: 500; - color: #666; -} - -.edit-tables-dialog .color-option { - width: 32px; - height: 32px; - border-radius: 50%; - border: 2px solid #e0e0e0; - cursor: pointer; - transition: all 0.2s ease; - position: relative; -} - -.edit-tables-dialog .color-option:hover { - transform: scale(1.1); - border-color: #999; -} - -.edit-tables-dialog .color-option.selected { - border-color: #333; - border-width: 3px; - transform: scale(1.15); -} - -.edit-tables-dialog .color-option.selected::after { - content: "✓"; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; - font-weight: bold; - font-size: 12px; - text-shadow: 0 0 2px rgba(0, 0, 0, 0.8); -} - -.dialog-actions { - display: flex; - justify-content: flex-end; - gap: 8px; - padding: 16px 20px; - border-top: 1px solid #e0e0e0; -} - /* CDK Drag-Drop reordering styles */ .table-drag-handle { color: #bdbdbd; diff --git a/frontend/src/app/components/ui-components/alert/alert.component.css b/frontend/src/app/components/ui-components/alert/alert.component.css index 7fb7d8b48..942136434 100644 --- a/frontend/src/app/components/ui-components/alert/alert.component.css +++ b/frontend/src/app/components/ui-components/alert/alert.component.css @@ -33,22 +33,22 @@ } .alert_error { - --alert-theme-color: var(--error-color); + --alert-theme-color: var(--color-warnPalette-500); --bg-color: var(--error-background-color); } .alert_warning { - --alert-theme-color: var(--warning-color); + --alert-theme-color: var(--color-warningPalette-500); --bg-color: var(--warning-background-color); } .alert_info { - --alert-theme-color: var(--info-color); + --alert-theme-color: var(--color-infoPalette-500); --bg-color: var(--info-background-color); } .alert_success { - --alert-theme-color: var(--success-color); + --alert-theme-color: var(--color-successPalette-500); --bg-color: var(--success-background-color); } diff --git a/frontend/src/app/components/ui-components/banner/banner.component.css b/frontend/src/app/components/ui-components/banner/banner.component.css index d84ff3d65..9fc8bbc75 100644 --- a/frontend/src/app/components/ui-components/banner/banner.component.css +++ b/frontend/src/app/components/ui-components/banner/banner.component.css @@ -29,22 +29,22 @@ } .banner_error { - --alert-theme-color: var(--error-color); + --alert-theme-color: var(--color-warnPalette-500); --bg-color: var(--error-background-color); } .banner_warning { - --alert-theme-color: var(--warning-color); + --alert-theme-color: var(--color-warningPalette-500); --bg-color: var(--warning-background-color); } .banner_info { - --alert-theme-color: var(--info-color); + --alert-theme-color: var(--color-infoPalette-500); --bg-color: var(--info-background-color); } .banner_success { - --alert-theme-color: var(--success-color); + --alert-theme-color: var(--color-successPalette-500); --bg-color: var(--success-background-color); } diff --git a/frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.css b/frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.css index 30d4073c1..8aa0f1d9b 100644 --- a/frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.css +++ b/frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.css @@ -2,22 +2,10 @@ transform: scale(0.85); } -@media (prefers-color-scheme: light) { - .boolean-icon-true { - color: #1b5e20; - } - - .boolean-icon-false { - color: #b71c1c; - } +.boolean-icon-true { + color: var(--color-successPalette-500); } -@media (prefers-color-scheme: dark) { - .boolean-icon-true { - color: #4caf50; - } - - .boolean-icon-false { - color: #e53935; - } +.boolean-icon-false { + color: var(--color-warnPalette-500); } diff --git a/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.css b/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.css index 30d4073c1..8aa0f1d9b 100644 --- a/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.css +++ b/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.css @@ -2,22 +2,10 @@ transform: scale(0.85); } -@media (prefers-color-scheme: light) { - .boolean-icon-true { - color: #1b5e20; - } - - .boolean-icon-false { - color: #b71c1c; - } +.boolean-icon-true { + color: var(--color-successPalette-500); } -@media (prefers-color-scheme: dark) { - .boolean-icon-true { - color: #4caf50; - } - - .boolean-icon-false { - color: #e53935; - } +.boolean-icon-false { + color: var(--color-warnPalette-500); } diff --git a/frontend/src/app/components/ui-components/user-password/user-password.component.css b/frontend/src/app/components/ui-components/user-password/user-password.component.css index 431124627..c03808c4a 100644 --- a/frontend/src/app/components/ui-components/user-password/user-password.component.css +++ b/frontend/src/app/components/ui-components/user-password/user-password.component.css @@ -15,9 +15,9 @@ } .error { - color: #e53935; + color: var(--color-warnPalette-500); } .success { - color: #43a047; + color: var(--color-successPalette-500); } diff --git a/frontend/src/app/components/users/cedar-policy-editor-dialog/cedar-policy-editor-dialog.component.css b/frontend/src/app/components/users/cedar-policy-editor-dialog/cedar-policy-editor-dialog.component.css index 17807de4b..497bb2335 100644 --- a/frontend/src/app/components/users/cedar-policy-editor-dialog/cedar-policy-editor-dialog.component.css +++ b/frontend/src/app/components/users/cedar-policy-editor-dialog/cedar-policy-editor-dialog.component.css @@ -21,11 +21,11 @@ align-items: center; gap: 16px; padding: 12px 16px; - border: 1px solid var(--warning-color); + border: 1px solid var(--color-warningPalette-500); margin-bottom: 12px; border-radius: 4px; background: var(--warning-background-color); - color: var(--warning-color); + color: var(--color-warningPalette-500); font-size: 13px; } diff --git a/frontend/src/app/components/users/cedar-policy-list/cedar-policy-list.component.css b/frontend/src/app/components/users/cedar-policy-list/cedar-policy-list.component.css index 7a3e2ecbe..ad14ada02 100644 --- a/frontend/src/app/components/users/cedar-policy-list/cedar-policy-list.component.css +++ b/frontend/src/app/components/users/cedar-policy-list/cedar-policy-list.component.css @@ -64,13 +64,13 @@ } .policy-group__icon-box--general { - background: color-mix(in srgb, var(--warning-color), transparent 85%); - color: var(--warning-color); + background: var(--color-warningPalette-100); + color: var(--color-warningPalette-500); } .policy-group__icon-box--connection { - background: color-mix(in srgb, var(--alternative-color), transparent 85%); - color: var(--alternative-color); + background: var(--color-alternativePalette-100); + color: var(--color-alternativePalette-500); } .policy-group__icon-box--group { @@ -79,21 +79,33 @@ } .policy-group__icon-box--table { - background: color-mix(in srgb, var(--success-color), transparent 85%); - color: var(--success-color); + background: var(--color-successPalette-100); + color: var(--color-successPalette-500); } .policy-group__icon-box--dashboard { - background: color-mix(in srgb, var(--info-color), transparent 85%); - color: var(--info-color); + background: var(--color-infoPalette-100); + color: var(--color-infoPalette-500); } @media (prefers-color-scheme: dark) { - .policy-group__icon-box--general { background: rgba(245, 158, 11, 0.15); color: #fbbf24; } - .policy-group__icon-box--connection { background: rgba(139, 92, 246, 0.15); color: #a78bfa; } + .policy-group__icon-box--general { + background: var(--color-warningPalette-900); + color: var(--color-warningPalette-500); + } + .policy-group__icon-box--connection { + background: var(--color-alternativeDarkPalette-900); + color: var(--color-alternativeDarkPalette-500); + } .policy-group__icon-box--group { background: rgba(6, 182, 212, 0.15); color: #22d3ee; } - .policy-group__icon-box--table { background: rgba(16, 185, 129, 0.15); color: #34d399; } - .policy-group__icon-box--dashboard { background: rgba(59, 130, 246, 0.15); color: #60a5fa; } + .policy-group__icon-box--table { + background: var(--color-successDarkPalette-900); + color: var(--color-successDarkPalette-500); + } + .policy-group__icon-box--dashboard { + background: var(--color-infoPalette-900); + color: var(--color-infoPalette-500); + } } .policy-group__label { diff --git a/frontend/src/app/components/users/users.component.css b/frontend/src/app/components/users/users.component.css index a5f857f28..cdd58c670 100644 --- a/frontend/src/app/components/users/users.component.css +++ b/frontend/src/app/components/users/users.component.css @@ -69,8 +69,8 @@ header { letter-spacing: 0.5px; padding: 2px 6px; border-radius: 10px; - background: color-mix(in srgb, var(--alternative-color), transparent 88%); - color: var(--alternative-color); + background: color-mix(in srgb, var(--color-alternativePalette-500), transparent 88%); + color: var(--color-alternativePalette-500); margin-left: 8px; } diff --git a/frontend/src/app/services/connections.service.ts b/frontend/src/app/services/connections.service.ts index f88872747..aa3414889 100644 --- a/frontend/src/app/services/connections.service.ts +++ b/frontend/src/app/services/connections.service.ts @@ -18,7 +18,19 @@ interface LogParams { chunkSize?: number; } -type Palettes = { primaryPalette: string; accentedPalette: string }; +type Palettes = { + primaryPalette?: string; + accentedPalette?: string; + warnPalette?: string; + whitePalette?: string; + warnDarkPalette?: string; + warningPalette?: string; + infoPalette?: string; + successPalette?: string; + alternativePalette?: string; + successDarkPalette?: string; + alternativeDarkPalette?: string; +}; type Colors = { myColorName: string }; @Injectable({ @@ -159,17 +171,45 @@ export class ConnectionsService { palettes: { primaryPalette: res.connectionProperties.primary_color, accentedPalette: res.connectionProperties.secondary_color, + warningPalette: '#f79008', + infoPalette: '#296ee9', + successPalette: '#1b5e20', + alternativePalette: '#6d28d9', + successDarkPalette: '#4caf50', + alternativeDarkPalette: '#c084fc', }, }); } else { this.isCustomAccentedColor = false; - this._themeService.updateColors({ palettes: { primaryPalette: '#212121', accentedPalette: '#2563eb' } }); + this._themeService.updateColors({ + palettes: { + primaryPalette: '#212121', + accentedPalette: '#2563eb', + warningPalette: '#f79008', + infoPalette: '#296ee9', + successPalette: '#1b5e20', + alternativePalette: '#6d28d9', + successDarkPalette: '#4caf50', + alternativeDarkPalette: '#c084fc', + }, + }); } }); } else { this.connection = { ...this.connectionInitialState }; this.isCustomAccentedColor = false; - this._themeService.updateColors({ palettes: { primaryPalette: '#212121', accentedPalette: '#2563eb' } }); + this._themeService.updateColors({ + palettes: { + primaryPalette: '#212121', + accentedPalette: '#2563eb', + warningPalette: '#f79008', + infoPalette: '#296ee9', + successPalette: '#1b5e20', + alternativePalette: '#6d28d9', + successDarkPalette: '#4caf50', + alternativeDarkPalette: '#c084fc', + }, + }); } console.log('this.defaultDisplayTable'); @@ -271,11 +311,28 @@ export class ConnectionsService { palettes: { primaryPalette: res.connectionProperties.primary_color, accentedPalette: res.connectionProperties.secondary_color, + warningPalette: '#f79008', + infoPalette: '#296ee9', + successPalette: '#1b5e20', + alternativePalette: '#6d28d9', + successDarkPalette: '#4caf50', + alternativeDarkPalette: '#c084fc', }, }); } else { this.defaultDisplayTable = null; - this._themeService.updateColors({ palettes: { primaryPalette: '#212121', accentedPalette: '#2563eb' } }); + this._themeService.updateColors({ + palettes: { + primaryPalette: '#212121', + accentedPalette: '#2563eb', + warningPalette: '#f79008', + infoPalette: '#296ee9', + successPalette: '#1b5e20', + alternativePalette: '#6d28d9', + successDarkPalette: '#4caf50', + alternativeDarkPalette: '#c084fc', + }, + }); } return { ...res, connection }; }), @@ -446,7 +503,16 @@ export class ConnectionsService { map((res: any) => { if (res) { this._themeService.updateColors({ - palettes: { primaryPalette: res.primary_color, accentedPalette: res.secondary_color }, + palettes: { + primaryPalette: res.primary_color, + accentedPalette: res.secondary_color, + warningPalette: '#f79008', + infoPalette: '#296ee9', + successPalette: '#1b5e20', + alternativePalette: '#6d28d9', + successDarkPalette: '#4caf50', + alternativeDarkPalette: '#c084fc', + }, }); } return res; diff --git a/frontend/src/custom-theme.scss b/frontend/src/custom-theme.scss index af0e69a09..0f2970e55 100644 --- a/frontend/src/custom-theme.scss +++ b/frontend/src/custom-theme.scss @@ -28,17 +28,11 @@ html { --surface-dark-color: #202020 !important; --mat-toolbar-container-background-color: var(--surface-dark-color) !important; - --error-color: var(--color-warnPalette-500); - --warning-color: #f79008; - --info-color: #296ee9; - --success-color: #1b5e20; - --alternative-color: #6d28d9; - - --error-background-color: color-mix(in hsl, var(--error-color), transparent 95%); - --warning-background-color: color-mix(in hsl, var(--warning-color), transparent 95%); - --info-background-color: color-mix(in hsl, var(--info-color), transparent 95%); - --success-background-color: color-mix(in hsl, var(--success-color), transparent 95%); - --alternative-background-color: color-mix(in hsl, var(--alternative-color), transparent 95%); + --error-background-color: color-mix(in hsl, var(--color-warnPalette-500), transparent 95%); + --warning-background-color: color-mix(in hsl, var(--color-warningPalette-500), transparent 95%); + --info-background-color: color-mix(in hsl, var(--color-infoPalette-500), transparent 95%); + --success-background-color: color-mix(in hsl, var(--color-successPalette-500), transparent 95%); + --alternative-background-color: color-mix(in hsl, var(--color-alternativePalette-500), transparent 95%); } @media (prefers-color-scheme: dark) { @@ -48,11 +42,11 @@ html { --mat-paginator-container-background-color: var(--surface-dark-color) !important; --mat-snack-bar-button-color: var(--color-accentedPalette-500) !important; - --error-color: var(--color-warnDarkPalette-500); - --warning-color: #f79008; - --info-color: #296ee9; - --success-color: #4caf50; - --alternative-color: #c084fc; + --error-background-color: color-mix(in hsl, var(--color-warnDarkPalette-500), transparent 95%); + --warning-background-color: color-mix(in hsl, var(--color-warningPalette-500), transparent 95%); + --info-background-color: color-mix(in hsl, var(--color-infoPalette-500), transparent 95%); + --success-background-color: color-mix(in hsl, var(--color-successDarkPalette-500), transparent 95%); + --alternative-background-color: color-mix(in hsl, var(--color-alternativeDarkPalette-500), transparent 95%); } .mat-datepicker-content { diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 771da16b0..7a0be06b5 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -49,6 +49,12 @@ const colorConfig: IColorConfig = { warnPalette: '#B71C1C', whitePalette: '#FFFFFF', warnDarkPalette: '#E53935', + warningPalette: '#f79008', + infoPalette: '#296ee9', + successPalette: '#1b5e20', + alternativePalette: '#6d28d9', + successDarkPalette: '#4caf50', + alternativeDarkPalette: '#c084fc', }, simpleColors: { myColorName: '#2e959a' }, }; @@ -58,6 +64,12 @@ type Palettes = { warnPalette: string; whitePalette: string; warnDarkPalette: string; + warningPalette: string; + infoPalette: string; + successPalette: string; + alternativePalette: string; + successDarkPalette: string; + alternativeDarkPalette: string; }; type Colors = { myColorName: string }; From 326f1175bfdfa7e7d5146ef4a68806422c96ef30 Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Thu, 2 Apr 2026 18:21:55 +0000 Subject: [PATCH 3/4] add rule to claude for color usage --- frontend/CLAUDE.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/frontend/CLAUDE.md b/frontend/CLAUDE.md index 231c5164a..f91990fe2 100644 --- a/frontend/CLAUDE.md +++ b/frontend/CLAUDE.md @@ -301,9 +301,16 @@ Custom launcher `ChromeHeadlessCustom` is configured for CI with flags `--no-san ## 🎨 Styling & Theming +### Color Usage Rule +**Only use colors from the generated palettes defined in `src/main.ts` (`colorConfig`).** Do not hardcode arbitrary color values in components or stylesheets. Instead, reference the palette CSS variables generated by `@brumeilde/ngx-theme` from these palettes: +- `primaryPalette`, `accentedPalette`, `warnPalette`, `whitePalette`, `warnDarkPalette` +- `warningPalette`, `infoPalette`, `successPalette`, `alternativePalette` +- `successDarkPalette`, `alternativeDarkPalette` +- Simple colors: `myColorName` + ### Material Design - Uses Material Design 2 (M2) APIs -- Custom theme with light/dark mode support +- Custom theme with light/dark mode support - SCSS preprocessing with Material theme presets - Custom theme files: `src/custom-theme.scss`, `src/styles.scss` From 8574500bf89c1260e751c2fc3f1edf90fa3f8c5c Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Fri, 3 Apr 2026 09:01:38 +0000 Subject: [PATCH 4/4] fix unit tests --- frontend/src/app/services/connections.service.spec.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/services/connections.service.spec.ts b/frontend/src/app/services/connections.service.spec.ts index d6ebf7dd0..24edf4416 100644 --- a/frontend/src/app/services/connections.service.spec.ts +++ b/frontend/src/app/services/connections.service.spec.ts @@ -650,7 +650,16 @@ describe('ConnectionsService', () => { const res = await promise; expect(res).toEqual(connectionSettingsNetwork); expect(mockThemeService.updateColors).toHaveBeenCalledWith({ - palettes: { primaryPalette: '#123456', accentedPalette: '#654321' }, + palettes: { + primaryPalette: '#123456', + accentedPalette: '#654321', + warningPalette: '#f79008', + infoPalette: '#296ee9', + successPalette: '#1b5e20', + alternativePalette: '#6d28d9', + successDarkPalette: '#4caf50', + alternativeDarkPalette: '#c084fc', + }, }); });