Skip to content

Dark theme #1029

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
lyubov-voloshko merged 9 commits into from
Feb 18, 2025
Merged

Dark theme #1029

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
08dc90c
change accented color
lyubov-voloshko Feb 3, 2025
e458349
Merge branch 'main' into dark-theme
lyubov-voloshko Feb 16, 2025
5a76c10
dark theme: connections list and change accented color
lyubov-voloshko Feb 17, 2025
4388108
Merge branch 'main' into dark-theme
lyubov-voloshko Feb 17, 2025
9c82120
dark theme: header, footer, test connections =
lyubov-voloshko Feb 18, 2025
400fb58
dark theme: update Tables backgrounds
lyubov-voloshko Feb 18, 2025
02ea9da
Merge branch 'main' into dark-theme
lyubov-voloshko Feb 18, 2025
835c690
update and add dark theme for alerts, banners and warning color
lyubov-voloshko Feb 18, 2025
d92619a
Merge branch 'main' into dark-theme
lyubov-voloshko Feb 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 29 additions & 2 deletions frontend/src/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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;

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 */
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@
<a routerLink="/upgrade" *ngIf="isSaas && currentUser && currentUser.role === 'ADMIN'"
mat-flat-button color="accent"
data-testid="upgrade-header-link"
routerLinkActive="mat-accent" class="nav-bar__upgrade-button">
class="nav-bar__upgrade-button">
Upgrade
</a>

Expand Down
22 changes: 19 additions & 3 deletions frontend/src/app/components/connections-list/connections-list.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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;
Expand All @@ -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);

}
}
Expand Down
6 changes: 6 additions & 0 deletions frontend/src/app/components/dashboard/db-table-ai-panel/db-table-ai-panel.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
12 changes: 12 additions & 0 deletions frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
7 changes: 7 additions & 0 deletions frontend/src/app/components/dashboard/db-table/db-table.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down
34 changes: 29 additions & 5 deletions frontend/src/app/components/ui-components/alert/alert.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -74,6 +92,12 @@
margin-bottom: 8px;
}

@media (prefers-color-scheme: dark) {
.alert__title {
color: inherit;
}
}

.alert__text {
margin: 0;
}
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/app/components/ui-components/banner/banner.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/components/ui-components/user-password/user-password.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,5 +40,5 @@
<!-- <mat-error *ngIf="port.errors?.required && (port.invalid && port.touched)">Port should not be empty.</mat-error> -->
</mat-form-field>
<password-strength-meter [password]="value" [enableFeedback]="true"
[numberOfProgressBarItems]="5" [colors]="['#6F0015', '#FB2424', '#FFC400', '#64DD17', '#00C853']">
[numberOfProgressBarItems]="5" [colors]="['#6F0015', '#B71C1C', '#FFC400', '#64DD17', '#00C853']">
</password-strength-meter>
4 changes: 2 additions & 2 deletions frontend/src/app/services/connections.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' }});
}
}

Expand Down
5 changes: 5 additions & 0 deletions frontend/src/assets/bg/connections-list-left-decoration_dark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions frontend/src/assets/bg/connections-list-right-decoration_dark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions frontend/src/assets/icons/ai-rocket.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions frontend/src/custom-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<link rel="stylesheet" href="https://cdn.zapier.com/packages/partner-sdk/v0/zapier-elements/zapier-elements.css"/>
<!-- zapier -->
</head>
<body style="background-color: #303030; color: #ffffff;">
<body style="background-color: #212121; color: #ffffff;">
<app-root class="mainLayout mat-typography"></app-root>
</body>
</html>
2 changes: 1 addition & 1 deletion frontend/src/index.saas.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@
}
</style>
</head>
<body style="background-color: #303030; color: #ffffff;">
<body style="background-color: #212121; color: #ffffff;">
<div id="g_id_onload"
data-client_id="681163285738-e4l0lrv5vv7m616ucrfhnhso9r396lum.apps.googleusercontent.com"
data-auto_prompt="false">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const saasExtraProviders = (environment as any).saas ? [
},
] : [];
const colorConfig: IColorConfig<Palettes, Colors> = {
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 };
Expand Down
Loading