diff --git a/frontend/src/app/app.component.css b/frontend/src/app/app.component.css index c6f996e13..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; } @@ -19,6 +27,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; @@ -101,8 +115,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; @@ -263,11 +277,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 fcda84530..7f9377a1d 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: @@ -278,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; @@ -287,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); } } 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%; 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/app/services/connections.service.ts b/frontend/src/app/services/connections.service.ts index dfb5b389b..a2a6fdd12 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/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, 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..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: '#A63BFB', 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 };