Skip to content

New alerts banners #1525

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

Draft
karinakharchenko wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

New alerts banners #1525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6a92833
feat: redesign alert and banner components with new color scheme
karinakharchenko Jan 22, 2026
e5d189a
feat: add sticky alert margins to user-settings and row-edit pages
karinakharchenko Jan 22, 2026
c1686d3
feat: add alert styling for login/registration and fix error theme co…
karinakharchenko Jan 23, 2026
b2188ed
feat: add dark overlay to banner wrapper background
karinakharchenko Jan 23, 2026
92a42be
Fix banner background gap in dark theme
karinakharchenko Jan 23, 2026
2499f92
Make banner background darker
karinakharchenko Jan 23, 2026
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
6 changes: 6 additions & 0 deletions frontend/src/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,12 @@
height: 100%;
}

@media (prefers-color-scheme: dark) {
.main-menu-content_interior .content {
background-color: #212121;
}
}

.helpContainer {
position: fixed;
right: 16px;
Expand Down
8 changes: 8 additions & 0 deletions frontend/src/app/components/dashboard/dashboard.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
:host {
display: block;
height: 100%;
margin-bottom: -60px;
}

:host > app-banner {
display: block;
height: calc(100% + 48px);
margin-top: -48px;
}

.mat-sidenav-container {
height: 100%;
/* height: calc(100vh - 56px); */
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/app/components/dashboard/db-tables-data-source.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,6 +298,11 @@ export class TablesDataSource implements DataSource<Object> {
type: AlertType.Info,
message: 'Configure now to reveal advanced table functionality and features.',
actions: [
{
type: AlertActionType.Button,
caption: 'AI generate',
disabled: true
},
{
type: AlertActionType.Link,
caption: 'Settings',
Expand Down
8 changes: 8 additions & 0 deletions frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
:host > app-alert {
display: block;
position: sticky;
top: calc(var(--mat-toolbar-standard-height) + 24px);
margin: 24px 24px 0;
z-index: 2;
}

.page {
display: flex;
height: 100%;
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/app/components/login/login.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
:host > app-alert {
display: block;
margin: 24px;
}

.wrapper {
height: calc(100vh - 56px);
padding: 16px;
Expand Down
8 changes: 8 additions & 0 deletions frontend/src/app/components/registration/registration.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
.register-form-box > app-alert {
display: block;
position: sticky;
top: calc(var(--mat-toolbar-standard-height) + 24px);
margin: 0 0 24px;
z-index: 2;
}

.wrapper {
display: grid;
grid-template-columns: auto 62.5%;
Expand Down
67 changes: 56 additions & 11 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 @@ -6,11 +6,11 @@

.alert {
display: flex;
gap: 12px;
gap: 8px;
background-color: var(--bg-color);
border-left: 12px solid var(--alert-theme-color);
margin-bottom: 8px;
padding: 12px 16px;
padding: 12px 16px 12px 8px;
}

@media (prefers-color-scheme: dark) {
Expand Down Expand Up @@ -39,26 +39,71 @@
.alert_error {
--alert-theme-color: #B71C1C;
--alert-dark-theme-color: #E53935;
--alert-dark-theme-bg: rgba(229, 57, 53, 0.15);
border: 1px solid var(--alert-theme-color);
border-left: 12px solid var(--alert-theme-color);
border-radius: 4px;
z-index: 2;
}

@media (prefers-color-scheme: light) {
.alert_error {
--bg-color: #F8E8E8;
}
}

@media (prefers-color-scheme: dark) {
.alert_error {
--bg-color: color-mix(in hsl, #B71C1C, transparent 95%);
backdrop-filter: blur(10px);
}
}

.alert_error .alert__icon {
background: transparent;
color: var(--alert-theme-color);
}

.alert_warning {
--alert-theme-color: #FF6F00;
--alert-dark-theme-color: #FF6F00;
--alert-dark-theme-bg: rgba(255, 236, 179, 0.15);
--alert-theme-color: #F79008;
--alert-dark-theme-color: #F79008;
--bg-color: color-mix(in hsl, #F79008, transparent 95%);
--alert-dark-theme-bg: color-mix(in hsl, #F79008, transparent 95%);
border: 1px solid var(--alert-theme-color);
border-left: 12px solid var(--alert-theme-color);
border-radius: 4px;
}

.alert_warning .alert__icon {
background: transparent;
color: var(--alert-theme-color);
}

.alert_info {
--alert-theme-color: #01579B;
--alert-dark-theme-color: #00BCD4;
--alert-dark-theme-bg: rgba(0, 188, 212, 0.15);
--alert-theme-color: #296EE9;
--alert-dark-theme-color: #296EE9;
--bg-color: color-mix(in hsl, #296EE9, transparent 95%);
--alert-dark-theme-bg: color-mix(in hsl, #296EE9, transparent 95%);
border: 1px solid var(--alert-theme-color);
border-left: 12px solid var(--alert-theme-color);
border-radius: 4px;
}

.alert_info .alert__icon {
background: transparent;
color: var(--alert-theme-color);
}

.alert_success {
--alert-theme-color: #1B5E20;
--alert-dark-theme-color: #4CAF50;
--alert-dark-theme-bg: rgba(76, 175, 80, 0.15);
border: 1px solid var(--alert-theme-color);
border-left: 12px solid var(--alert-theme-color);
border-radius: 4px;
}

.alert_success .alert__icon {
background: transparent;
color: var(--alert-theme-color);
}

.alert__icon {
Expand All @@ -69,7 +114,7 @@
background: var(--alert-theme-color);
border-radius: 50%;
color: #fff;
font-size: 18px;
font-size: 24px;
height: 36px;
opacity: 0.9;
width: 36px;
Expand Down
1 change: 1 addition & 0 deletions frontend/src/app/components/ui-components/alert/alert.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<ng-container *ngFor="let action of currentAlert.actions">
<button mat-button type="button" *ngIf="action.type === 'button'"
attr.data-testid="alert-action-button"
[disabled]="action.disabled"
(click)="onButtonClick(currentAlert, action)">
{{action.caption}}
</button>
Expand Down
61 changes: 56 additions & 5 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
@@ -1,27 +1,39 @@
:host {
display: block;
height: 100%;
}

.banner-wrapper {
display: flex;
align-items: center;
justify-content: center;
background-image: url('../../../../assets/bg/banner.svg');
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('../../../../assets/bg/banner.svg');
background-color: #1a1a1a;
background-repeat: no-repeat;
/* background-position: left 125%, right -26%; */
background-size: cover;
height: 100%;
height: calc(100% + 1px);
margin-top: -1px;
}

.banner_error {
--alert-theme-color: #B71C1C;

z-index: 2;
}

.banner_info {
--alert-theme-color: #01579B;
--alert-theme-color: #296EE9;
}

.banner_success {
--alert-theme-color: #1B5E20;
}

.banner_warning {
--alert-theme-color: #F79008;
}

.banner-box {
background-color: var(--bg-color);
border-left: 12px solid var(--alert-theme-color);
Expand Down Expand Up @@ -51,4 +63,43 @@
justify-content: flex-end;
gap: 20px;
margin-top: 32px;
}

@media (prefers-color-scheme: light) {
.banner-box.banner_error {
--bg-color: #F8E8E8;
}

.banner-box.banner_error ::ng-deep [mat-stroked-button] {
background-color: #fff;
}
}

@media (prefers-color-scheme: dark) {
.banner-box.banner_error {
--bg-color: color-mix(in hsl, #B71C1C, transparent 95%);
backdrop-filter: blur(10px);
}
}

.banner-box.banner_error {
border: 1px solid var(--alert-theme-color);
border-left: 12px solid var(--alert-theme-color);
}

.banner-box.banner_info {
--bg-color: color-mix(in hsl, #296EE9, transparent 95%);
border: 1px solid var(--alert-theme-color);
border-left: 12px solid var(--alert-theme-color);
}

.banner-box.banner_warning {
--bg-color: color-mix(in hsl, #F79008, transparent 95%);
border: 1px solid var(--alert-theme-color);
border-left: 12px solid var(--alert-theme-color);
}

.banner-box.banner_success {
border: 1px solid var(--alert-theme-color);
border-left: 12px solid var(--alert-theme-color);
}
8 changes: 8 additions & 0 deletions frontend/src/app/components/user-settings/user-settings.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
:host > app-alert {
display: block;
position: sticky;
top: calc(var(--mat-toolbar-standard-height) + 24px);
margin: 24px 24px 0;
z-index: 2;
}

.page {
display: flex;
flex-direction: column;
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/app/models/alert.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ export interface AlertAction {
type: AlertActionType,
caption: string,
to?: string,
action?: (id: number) => void
action?: (id: number) => void,
disabled?: boolean
}

export interface Alert {
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,4 +98,5 @@ body {
display: block;
background-color: rgba(0, 0, 0, 0.06);
mix-blend-mode: difference;
}
}

Loading