From 08dc90c2e9145196a60dafe59e8a5b8fbd95917a Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Mon, 3 Feb 2025 20:11:32 +0200 Subject: [PATCH 1/5] change accented color --- frontend/src/custom-theme.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/custom-theme.scss b/frontend/src/custom-theme.scss index 2ca248f8a..3d3dc4f2b 100644 --- a/frontend/src/custom-theme.scss +++ b/frontend/src/custom-theme.scss @@ -8,14 +8,14 @@ $md-app-primary-color: palette.createpalette('primaryPalette'); $md-app-accented-color: palette.createpalette('accentedPalette'); $md-app-warn-color: palette.createpalette('warnPalette'); $md-app-white-color: palette.createpalette('whitePalette'); -$md-app-accented-dark-color: palette.createpalette('accentedDarkPalette'); +// $md-app-accented-dark-color: palette.createpalette('accentedDarkPalette'); $md-app-warn-dark-color: palette.createpalette('warnDarkPalette'); $custom-palette-primary: mat.m2-define-palette($md-app-primary-color); $custom-palette-accent: mat.m2-define-palette($md-app-accented-color); $custom-palette-warn: mat.m2-define-palette($md-app-warn-color); $custom-palette-white: mat.m2-define-palette($md-app-white-color); -$custom-palette-accented-dark: mat.m2-define-palette($md-app-accented-dark-color); +// $custom-palette-accented-dark: mat.m2-define-palette($md-app-accented-dark-color); $custom-palette-warn-dark: mat.m2-define-palette($md-app-warn-dark-color); html { @@ -119,7 +119,7 @@ $custom-light-theme: mat.m2-define-light-theme(( $custom-dark-theme: mat.m2-define-dark-theme(( color: ( primary: $custom-palette-white, - accent: $custom-palette-accented-dark, + accent: $custom-palette-accent, warn: $custom-palette-warn-dark, ), density: -3, From 5a76c103d460d8626ea511a5576eaf0906c8cf0a Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Mon, 17 Feb 2025 10:14:50 +0200 Subject: [PATCH 2/5] dark theme: connections list and change accented color --- frontend/src/app/app.component.css | 13 +++++++++++++ .../connections-list.component.css | 16 ++++++++++++++++ frontend/src/app/services/connections.service.ts | 4 ++-- .../bg/connections-list-left-decoration_dark.svg | 5 +++++ .../connections-list-right-decoration_dark.svg | 5 +++++ frontend/src/assets/icons/ai-rocket.svg | 6 +++--- frontend/src/index.html | 2 +- frontend/src/index.saas.html | 2 +- frontend/src/main.ts | 2 +- 9 files changed, 47 insertions(+), 8 deletions(-) create mode 100644 frontend/src/assets/bg/connections-list-left-decoration_dark.svg create mode 100644 frontend/src/assets/bg/connections-list-right-decoration_dark.svg diff --git a/frontend/src/app/app.component.css b/frontend/src/app/app.component.css index c6f996e13..51a00f650 100644 --- a/frontend/src/app/app.component.css +++ b/frontend/src/app/app.component.css @@ -19,6 +19,12 @@ background-color: #212121; } +@media (prefers-color-scheme: dark) { + .nav-bar { + border-bottom: 1px solid #303030; + } +} + .nav-bar_interior { --mat-toolbar-standard-height: 44px !important; @@ -239,6 +245,13 @@ .tab-content-wrapper { flex: 1 0 auto; + background-color: #fff; +} + +@media (prefers-color-scheme: dark) { + .tab-content-wrapper { + background-color: #212121; + } } .content { diff --git a/frontend/src/app/components/connections-list/connections-list.component.css b/frontend/src/app/components/connections-list/connections-list.component.css index fcda84530..58ff6df04 100644 --- a/frontend/src/app/components/connections-list/connections-list.component.css +++ b/frontend/src/app/components/connections-list/connections-list.component.css @@ -12,6 +12,15 @@ padding: 72px max(calc(50vw - 535px), 10%) 24px; } + +@media (prefers-color-scheme: dark) { + .wrapper { + background-image: + url('../../../assets/bg/connections-list-left-decoration_dark.svg'), + url('../../../assets/bg/connections-list-right-decoration_dark.svg'); + } +} + @media (width <= 600px) { .wrapper { padding: 48px 9vw; @@ -150,6 +159,13 @@ transition: border 200ms, box-shadow 200ms; } +@media (prefers-color-scheme: dark) { + .connection { + background-color: #000; + border: 1px solid #313131; + } +} + .connection:hover { border: 1px solid var(--color-primaryPalette-500); box-shadow: diff --git a/frontend/src/app/services/connections.service.ts b/frontend/src/app/services/connections.service.ts index a3d54a98d..0eca52c6c 100644 --- a/frontend/src/app/services/connections.service.ts +++ b/frontend/src/app/services/connections.service.ts @@ -153,14 +153,14 @@ export class ConnectionsService { } else { this.connectionLogo = null; this.companyName = null; - this._themeService.updateColors({ palettes: { primaryPalette: '#212121', accentedPalette: '#A63BFB' }}); + this._themeService.updateColors({ palettes: { primaryPalette: '#212121', accentedPalette: '#C177FC' }}); } }); } else { this.connection = {...this.connectionInitialState}; this.connectionLogo = null; this.companyName = null; - this._themeService.updateColors({ palettes: { primaryPalette: '#212121', accentedPalette: '#A63BFB' }}); + this._themeService.updateColors({ palettes: { primaryPalette: '#212121', accentedPalette: '#C177FC' }}); } } diff --git a/frontend/src/assets/bg/connections-list-left-decoration_dark.svg b/frontend/src/assets/bg/connections-list-left-decoration_dark.svg new file mode 100644 index 000000000..59f38e035 --- /dev/null +++ b/frontend/src/assets/bg/connections-list-left-decoration_dark.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/assets/bg/connections-list-right-decoration_dark.svg b/frontend/src/assets/bg/connections-list-right-decoration_dark.svg new file mode 100644 index 000000000..87511a6c5 --- /dev/null +++ b/frontend/src/assets/bg/connections-list-right-decoration_dark.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/assets/icons/ai-rocket.svg b/frontend/src/assets/icons/ai-rocket.svg index 0facec0f6..07793dd35 100644 --- a/frontend/src/assets/icons/ai-rocket.svg +++ b/frontend/src/assets/icons/ai-rocket.svg @@ -1,6 +1,6 @@ - - - + + + diff --git a/frontend/src/index.html b/frontend/src/index.html index 0281f67a3..e615b7324 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -21,7 +21,7 @@ - + diff --git a/frontend/src/index.saas.html b/frontend/src/index.saas.html index 42de57176..20f0b81ee 100644 --- a/frontend/src/index.saas.html +++ b/frontend/src/index.saas.html @@ -143,7 +143,7 @@ } - +
diff --git a/frontend/src/main.ts b/frontend/src/main.ts index d1f6c87b2..25990df02 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -43,7 +43,7 @@ const saasExtraProviders = (environment as any).saas ? [ }, ] : []; const colorConfig: IColorConfig = { - palettes: { primaryPalette: '#212121', accentedPalette: '#A63BFB', warnPalette: '#FB2424', whitePalette: '#FFFFFF', accentedDarkPalette: '#C176FC', warnDarkPalette: '#B01919' }, + palettes: { primaryPalette: '#212121', accentedPalette: '#C177FC', warnPalette: '#FB2424', whitePalette: '#FFFFFF', accentedDarkPalette: '#C176FC', warnDarkPalette: '#B01919' }, simpleColors: { myColorName: '#2e959a' }, }; type Palettes = { primaryPalette: string, accentedPalette: string, warnPalette: string, whitePalette: string, accentedDarkPalette: string, warnDarkPalette: string }; From 9c8212009e4e65ed5e2a427163c3bd0d8c56431c Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Tue, 18 Feb 2025 13:42:47 +0200 Subject: [PATCH 3/5] dark theme: header, footer, test connections = --- frontend/src/app/app.component.css | 17 +++++++++++++++-- frontend/src/app/app.component.html | 2 +- .../connections-list.component.css | 6 +++--- 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/frontend/src/app/app.component.css b/frontend/src/app/app.component.css index 51a00f650..17e898828 100644 --- a/frontend/src/app/app.component.css +++ b/frontend/src/app/app.component.css @@ -107,8 +107,8 @@ } .nav-bar__upgrade-button { - --mdc-filled-button-label-text-color: #424242; - --mdc-filled-button-container-color: #fff; + /* --mdc-filled-button-label-text-color: #424242; */ + --mdc-filled-button-label-text-color: #fff !important; --mdc-filled-button-container-height: 28px; margin-right: -8px; @@ -276,11 +276,24 @@ height: 60px; } +@media (prefers-color-scheme: dark) { + .footer { + background: #212121; + border-top: 1px solid #303030; + } +} + .footer__text { color: rgba(0,0,0,0.5); font-size: 0.875em; } +@media (prefers-color-scheme: dark) { + .footer__text { + color: #fff; + } +} + ::ng-deep .visually-hidden { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index ca8b27d66..0a92a596a 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -108,7 +108,7 @@ + class="nav-bar__upgrade-button"> Upgrade diff --git a/frontend/src/app/components/connections-list/connections-list.component.css b/frontend/src/app/components/connections-list/connections-list.component.css index 58ff6df04..7f9377a1d 100644 --- a/frontend/src/app/components/connections-list/connections-list.component.css +++ b/frontend/src/app/components/connections-list/connections-list.component.css @@ -294,7 +294,7 @@ display: flex; align-items: center; justify-content: center; - background-image: radial-gradient(var(--mat-sidenav-content-background-color) 1em, var(--icon-box-color) 1em); + background-image: radial-gradient(#fff 1em, var(--icon-box-color) 1em); border-radius: 4px; height: 36px; margin-right: 12px; @@ -303,14 +303,14 @@ @media (prefers-color-scheme: light) { .testConnectionLink__iconBox { - --icon-box-color: #E8F1EA; + --icon-box-color: var(--color-accentedDarkPalette-700); } } @media (prefers-color-scheme: dark) { .testConnectionLink__iconBox { - --icon-box-color: #292929; + --icon-box-color: var(--color-accentedDarkPalette-500); } } From 400fb58336681347c299fae482d73d8272313c3e Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Tue, 18 Feb 2025 15:20:47 +0200 Subject: [PATCH 4/5] dark theme: update Tables backgrounds --- frontend/src/app/app.component.css | 15 ++++++++------- .../db-table-ai-panel.component.css | 6 ++++++ .../db-table-row-view.component.css | 12 ++++++++++++ .../dashboard/db-table/db-table.component.css | 7 +++++++ 4 files changed, 33 insertions(+), 7 deletions(-) diff --git a/frontend/src/app/app.component.css b/frontend/src/app/app.component.css index 17e898828..0bb21b0c3 100644 --- a/frontend/src/app/app.component.css +++ b/frontend/src/app/app.component.css @@ -10,6 +10,14 @@ } } +@media (prefers-color-scheme: dark) { + .main-menu-container { + --mat-sidenav-content-background-color: #212121; + --mat-sidenav-container-background-color: #212121; + --mat-sidenav-container-divider-color: #303030; + } +} + .main-menu-sidenav { width: 60vw; } @@ -245,13 +253,6 @@ .tab-content-wrapper { flex: 1 0 auto; - background-color: #fff; -} - -@media (prefers-color-scheme: dark) { - .tab-content-wrapper { - background-color: #212121; - } } .content { diff --git a/frontend/src/app/components/dashboard/db-table-ai-panel/db-table-ai-panel.component.css b/frontend/src/app/components/dashboard/db-table-ai-panel/db-table-ai-panel.component.css index d628458e1..34265e2e4 100644 --- a/frontend/src/app/components/dashboard/db-table-ai-panel/db-table-ai-panel.component.css +++ b/frontend/src/app/components/dashboard/db-table-ai-panel/db-table-ai-panel.component.css @@ -41,6 +41,12 @@ z-index: 0; } +@media (prefers-color-scheme: dark) { + .ai-panel-sidebar-content { + border-left: 1px solid var(--mat-sidenav-container-divider-color); + } +} + @media (width <= 600px) { .ai-panel-sidebar-content { left: 0; diff --git a/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.css b/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.css index d3ec66e6d..dc20dbd78 100644 --- a/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.css +++ b/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.css @@ -16,6 +16,12 @@ width: clamp(200px, 22vw, 400px); } +@media (prefers-color-scheme: dark) { + .row-preview-sidebar_open { + border-left: 1px solid var(--mat-sidenav-container-divider-color); + } +} + @media (width <= 600px) { .row-preview-sidebar_open { width: 0; @@ -53,6 +59,12 @@ border-bottom: solid 1px rgba(0, 0, 0, 0.12); } +@media (prefers-color-scheme: dark) { + .row-preview-sidebar__field:not(:last-child) { + border-bottom: solid 1px rgba(255, 255, 255, 0.04); + } +} + .row-preview-sidebar__image { width: 100%; margin-top: 8px; diff --git a/frontend/src/app/components/dashboard/db-table/db-table.component.css b/frontend/src/app/components/dashboard/db-table/db-table.component.css index 1aeec38d5..f3eed8346 100644 --- a/frontend/src/app/components/dashboard/db-table/db-table.component.css +++ b/frontend/src/app/components/dashboard/db-table/db-table.component.css @@ -201,6 +201,13 @@ margin-bottom: 24px; } +@media (prefers-color-scheme: dark) { + .table-surface { + --mat-table-background-color: #171717; + --mat-paginator-container-background-color: #171717; + } +} + .table-box { overflow-x: auto; width: 100%; From 835c69012ddd0db1b577914b3a4f977fc3720f5e Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Tue, 18 Feb 2025 20:13:08 +0200 Subject: [PATCH 5/5] update and add dark theme for alerts, banners and warning color --- .../ui-components/alert/alert.component.css | 34 ++++++++++++++++--- .../ui-components/banner/banner.component.css | 6 ++-- .../user-password.component.html | 2 +- frontend/src/main.ts | 2 +- 4 files changed, 34 insertions(+), 10 deletions(-) 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 3d2ee12d5..1b298b197 100644 --- a/frontend/src/app/components/ui-components/alert/alert.component.css +++ b/frontend/src/app/components/ui-components/alert/alert.component.css @@ -12,7 +12,11 @@ @media (prefers-color-scheme: dark) { .alert { - --bg-color: #292929; + --bg-color: var(--alert-dark-theme-bg); + border-top: 1px solid var(--alert-dark-theme-color); + border-right: 1px solid var(--alert-dark-theme-color); + border-bottom: 1px solid var(--alert-dark-theme-color); + border-left: 12px solid var(--alert-dark-theme-color); } } @@ -30,20 +34,28 @@ } .alert_error { - --alert-theme-color: #FB2424; + --alert-theme-color: #B71C1C; + --alert-dark-theme-color: #E53935; + --alert-dark-theme-bg: rgba(229, 57, 53, 0.15); z-index: 2; } .alert_warning { - --alert-theme-color: #EF6C00; + --alert-theme-color: #FF6F00; + --alert-dark-theme-color: #FF6F00; + --alert-dark-theme-bg: rgba(255, 236, 179, 0.15); } .alert_info { - --alert-theme-color: #0288D1; + --alert-theme-color: #01579B; + --alert-dark-theme-color: #00BCD4; + --alert-dark-theme-bg: rgba(0, 188, 212, 0.15); } .alert_success { - --alert-theme-color: #2E7D32; + --alert-theme-color: #1B5E20; + --alert-dark-theme-color: #4CAF50; + --alert-dark-theme-bg: rgba(76, 175, 80, 0.15); } .alert__icon { @@ -60,6 +72,12 @@ width: 36px; } +@media (prefers-color-scheme: dark) { + .alert__icon { + background: var(--alert-dark-theme-color); + } +} + .alert__message { flex: 1; display: flex; @@ -74,6 +92,12 @@ margin-bottom: 8px; } +@media (prefers-color-scheme: dark) { + .alert__title { + color: inherit; + } +} + .alert__text { margin: 0; } 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 753772f83..b0a317690 100644 --- a/frontend/src/app/components/ui-components/banner/banner.component.css +++ b/frontend/src/app/components/ui-components/banner/banner.component.css @@ -10,16 +10,16 @@ } .banner_error { - --alert-theme-color: #FB2424; + --alert-theme-color: #B71C1C; z-index: 2; } .banner_info { - --alert-theme-color: #0288D1; + --alert-theme-color: #01579B; } .banner_success { - --alert-theme-color: #2E7D32; + --alert-theme-color: #1B5E20; } .banner-box { diff --git a/frontend/src/app/components/ui-components/user-password/user-password.component.html b/frontend/src/app/components/ui-components/user-password/user-password.component.html index bc0e0485d..302c1b8e8 100644 --- a/frontend/src/app/components/ui-components/user-password/user-password.component.html +++ b/frontend/src/app/components/ui-components/user-password/user-password.component.html @@ -40,5 +40,5 @@ + [numberOfProgressBarItems]="5" [colors]="['#6F0015', '#B71C1C', '#FFC400', '#64DD17', '#00C853']"> diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 25990df02..3a56a084d 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -43,7 +43,7 @@ const saasExtraProviders = (environment as any).saas ? [ }, ] : []; const colorConfig: IColorConfig = { - palettes: { primaryPalette: '#212121', accentedPalette: '#C177FC', warnPalette: '#FB2424', whitePalette: '#FFFFFF', accentedDarkPalette: '#C176FC', warnDarkPalette: '#B01919' }, + palettes: { primaryPalette: '#212121', accentedPalette: '#C177FC', warnPalette: '#B71C1C', whitePalette: '#FFFFFF', accentedDarkPalette: '#C176FC', warnDarkPalette: '#B01919' }, simpleColors: { myColorName: '#2e959a' }, }; type Palettes = { primaryPalette: string, accentedPalette: string, warnPalette: string, whitePalette: string, accentedDarkPalette: string, warnDarkPalette: string };