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

Merged
lyubov-voloshko merged 14 commits into from
Feb 1, 2026
Merged

New alerts banners #1525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 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
2943ba7
Merge branch 'main' into new-alerts-banners
lyubov-voloshko Jan 27, 2026
19890cf
alerts: comment AI button and remove disabled property
lyubov-voloshko Jan 27, 2026
c880073
Merge branch 'new-alerts-banners' of https://github.com/karinakharche…
lyubov-voloshko Jan 27, 2026
34f5ead
alerts: fix alerts position in app
lyubov-voloshko Jan 30, 2026
5d0b979
alert component: fix styling
lyubov-voloshko Jan 30, 2026
491f430
fix banner component and add fix it on audit and settings pages
lyubov-voloshko Jan 30, 2026
6ba7242
alerts on exterior pages
lyubov-voloshko Feb 1, 2026
213e43c
Merge branch 'main' into new-alerts-banners
lyubov-voloshko Feb 1, 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
16 changes: 12 additions & 4 deletions frontend/src/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,18 +256,18 @@
width: 12px;
} */

.connection-name {
/* .connection-name {
position: absolute;
top: 6px;
left: 8px;
max-width: calc((100vw - 980px) / 2);
overflow: hidden;
text-overflow: ellipsis;
}
} */

.tab-icon {
/* .tab-icon {
margin-right: 8px;
}
} */
Comment on lines +259 to +270
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Commented-out CSS blocks were added (.connection-name, .tab-icon). If these styles are no longer needed, please delete them entirely; if they are needed, keep them enabled and update as required. Leaving large commented sections in the main stylesheet makes future maintenance harder.

Copilot uses AI. Check for mistakes.

.main-menu-content {
flex-grow: 1;
Expand All @@ -288,11 +288,19 @@
}

.content {
--top-margin: 4em;

display: grid;
grid-template-rows: 0 100%;
height: 100%;
}

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

.helpContainer {
position: fixed;
right: 16px;
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/app/components/audit/audit.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
flex-direction: column;
align-items: stretch;
margin: 0 auto;
height: 100%;
width: clamp(300px, 75vw, 1000px);
}

Expand Down Expand Up @@ -105,7 +106,8 @@ th.mat-header-cell, td.mat-cell {
}

.audit-banner {
margin-top: 60px;
margin: -60px calc((100vw - clamp(300px, 75vw, 1000px)) / -2) 0;
width: 100vw;
}

.hidden {
Expand Down
8 changes: 8 additions & 0 deletions ...tend/src/app/components/company-member-invitation/company-member-invitation.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
:host app-alert:not(:empty) {
--alert-margin: 24px;

position: absolute;
top: var(--mat-toolbar-standard-height);
width: calc(100% - 48px);
}
Comment on lines +1 to +7
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector app-alert:not(:empty) is not a reliable way to detect “alert is showing” with Angular components (the host typically contains comment nodes even when the *ngIf inside the component is false), so this rule will effectively apply all the time. Prefer a dedicated class on <app-alert> (or an input/HostBinding on the alert component) instead of :empty/:not(:empty).

Copilot uses AI. Check for mistakes.

.wrapper {
display: flex;
flex-direction: column;
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/app/components/company/company.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
:host app-alert:not(:empty) {
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector app-alert:not(:empty) is not a reliable way to detect “alert is showing” with Angular components (the host typically contains comment nodes even when the *ngIf inside the component is false), so this rule will effectively apply all the time. Prefer a dedicated class on <app-alert> (or an input/HostBinding on the alert component) instead of :empty/:not(:empty).

Suggested change
:host app-alert:not(:empty) {
:host app-alert {

Copilot uses AI. Check for mistakes.
--alert-margin: 24px;
}

.companyPage {
margin: 3em auto;
margin: var(--top-margin) auto;
padding: 0 clamp(200px, 20vw, 300px);
}

Expand Down
1 change: 0 additions & 1 deletion frontend/src/app/components/company/company.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ import { orderBy } from "lodash-es";
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class CompanyComponent {

CompanyMemberRole = CompanyMemberRole;
public isSaas = (environment as any).saas;
public company: Company = null;
Expand Down
12 changes: 10 additions & 2 deletions frontend/src/app/components/connect-db/connect-db.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
:host app-alert:not(:empty) {
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector app-alert:not(:empty) is not a reliable way to detect “alert is showing” with Angular components (the host typically contains comment nodes even when the *ngIf inside the component is false), so this rule will effectively apply all the time. Prefer a dedicated class on <app-alert> (or an input/HostBinding on the alert component) instead of :empty/:not(:empty).

Suggested change
:host app-alert:not(:empty) {
:host app-alert {

Copilot uses AI. Check for mistakes.
--alert-margin: 24px;
}

.connectPage {
padding-top: 16px;
padding-bottom: 20px;
margin-top: var(--top-margin);
margin-bottom: 4em;
}

.form {
Expand Down Expand Up @@ -82,6 +86,10 @@
margin-bottom: 0;
}

.connectForm__ipAlert {
--alert-margin: 0;
}

.connectForm__title {
grid-column: 1 / span 3;
}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/components/connect-db/connect-db.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ <h1 class="mat-h1 connectForm__fullLine">
</div>

<ng-template #warningAlert>
<app-alert [alert]="warning">
<app-alert [alert]="warning" class="connectForm__ipAlert">
<div class="mat-body-1" style="margin-bottom: 0">
Please make sure our servers are able to access your database. <br/> Rocketadmin uses the IP address
<app-ip-address-button ip="18.221.81.73"></app-ip-address-button>
Expand Down
12 changes: 7 additions & 5 deletions frontend/src/app/components/connection-settings/connection-settings.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
.zapier-page {
padding: 32px max(calc(50vw - 325px), 10%);
:host app-alert:not(:empty) {
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector app-alert:not(:empty) is not a reliable way to detect “alert is showing” with Angular components (the host typically contains comment nodes even when the *ngIf inside the component is false), so this rule will effectively apply all the time. Prefer a dedicated class on <app-alert> (or an input/HostBinding on the alert component) instead of :empty/:not(:empty).

Suggested change
:host app-alert:not(:empty) {
:host app-alert {

Copilot uses AI. Check for mistakes.
--alert-margin: 24px;
}

.settings-page {
height: 100%;
margin: var(--top-margin) 0;
padding: 0 max(calc(50vw - 325px), 10%);
}

.mat-h1 {
margin-top: 2em !important;
margin-bottom: 1.5em !important;
}

Expand Down Expand Up @@ -163,8 +164,9 @@
margin-left: 20px;
}

.settings-banner ::ng-deep .banner-wrapper {
margin-top: 60px;
.settings-banner {
margin: -124px calc(max(calc(50vw - 325px), 10%) * -1) 0;
width: 100vw;
}

.error-details {
Expand Down
4 changes: 4 additions & 0 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
@@ -1,3 +1,7 @@
:host app-alert:not(:empty) {
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector app-alert:not(:empty) is not a reliable way to detect “alert is showing” with Angular components (the host typically contains comment nodes even when the *ngIf inside the component is false), so this rule will effectively apply all the time. If the intent is to set spacing only when an alert is displayed, use a dedicated class on the <app-alert> element and/or rely on the alert component itself to only apply margins when it renders content.

Suggested change
:host app-alert:not(:empty) {
:host app-alert {

Copilot uses AI. Check for mistakes.
--alert-margin: 24px;
}

.wrapper {
display: flex;
flex-direction: column;
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/app/components/connections-list/connections-list.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,11 @@ import { take } from 'rxjs/operators';
})
export class ConnectionsListComponent implements OnInit {

public testAlert = {
type: 'info' as const,
message: 'These connections are for demonstration purposes only. To create your own connections, please use the "Add Connection" button above.',
};

Comment on lines +41 to +45
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

testAlert is introduced but never used in the template. Please remove it before merge, or wire it into the template behind a clear demo-only condition/flag so it doesn’t become dead code in production.

Suggested change
public testAlert = {
type: 'info' as const,
message: 'These connections are for demonstration purposes only. To create your own connections, please use the "Add Connection" button above.',
};

Copilot uses AI. Check for mistakes.
public connections: Connection[] = null;
// public testConnections: Connection[] = null;
public titles: Object;
Expand Down
16 changes: 4 additions & 12 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,3 @@
:host {
margin-bottom: -60px;
}

.mat-sidenav-container {
height: 100%;
/* height: calc(100vh - 56px); */
Expand Down Expand Up @@ -91,17 +87,13 @@
.alerts {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 24px;
margin-bottom: 16px;
}

.server-alert {
display: block;
margin-top: 24px;
}

.alerts:empty,
.server-alert:empty {
margin-top: 0;
.alerts app-alert {
position: initial;
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This rule tries to disable position: sticky on <app-alert>, but the alert component itself sets :host { position: sticky; ... }. Depending on style insertion order and specificity, this may not reliably override the host styles, and top/margin from the alert component can still affect layout. Consider adding an explicit API for non-sticky alerts (e.g., an input or host class), or make positioning configurable via CSS variables so parent components can control it without fighting component styles.

Suggested change
position: initial;
position: static !important;
top: auto !important;
margin: 0 !important;

Copilot uses AI. Check for mistakes.
}

.error-details {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/components/dashboard/dashboard.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,8 +80,8 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
</mat-sidenav>
<mat-sidenav-content class="table-preview">
<div class="table-preview-content">
<app-alert class="server-alert"></app-alert>
<div class="alerts">
<app-alert></app-alert>
<app-alert *ngIf="dataSource.alert_settingsInfo" [alert]="dataSource.alert_settingsInfo"></app-alert>
<app-alert *ngIf="dataSource.alert_primaryKeysInfo" [alert]="dataSource.alert_primaryKeysInfo"></app-alert>
<app-alert *ngIf="dataSource.alert_widgetsWarning" [alert]="dataSource.alert_widgetsWarning"></app-alert>
Expand Down
7 changes: 7 additions & 0 deletions ...rc/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
:host app-alert:not(:empty) {
--alert-margin: 0;

top: 0;
margin-bottom: 16px;
}
Comment on lines +1 to +6
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector app-alert:not(:empty) is not a reliable way to detect “alert is showing” with Angular components (the host typically contains comment nodes even when the *ngIf inside the component is false), so this rule will effectively apply all the time. Prefer a dedicated class on <app-alert> (or an input/HostBinding on the alert component) instead of :empty/:not(:empty).

Copilot uses AI. Check for mistakes.

.drawer {
height: 100%;
}
Expand Down
6 changes: 5 additions & 1 deletion .../app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
:host app-alert:not(:empty) {
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector app-alert:not(:empty) is not a reliable way to detect “alert is showing” with Angular components (the host typically contains comment nodes even when the *ngIf inside the component is false), so this rule will effectively apply all the time. Prefer a dedicated class on <app-alert> (or an input/HostBinding on the alert component) instead of :empty/:not(:empty).

Suggested change
:host app-alert:not(:empty) {
:host app-alert {

Copilot uses AI. Check for mistakes.
--alert-margin: 24px;
}

.settings-page {
display: flex;
flex-direction: column;
align-items: center;
padding: 36px 0 0;
margin: 2.5em 0 0;
}

.settings-page .mat-mdc-form-field-bottom-align::before {
Expand Down
1 change: 0 additions & 1 deletion ...c/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@ import { normalizeTableName } from 'src/app/lib/normalize';
]
})
export class DbTableSettingsComponent implements OnInit {

public connectionID: string | null = null;
public tableName: string | null = null;
public displayTableName: string | null = null;
Expand Down
6 changes: 5 additions & 1 deletion ...rc/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
:host app-alert:not(:empty) {
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector app-alert:not(:empty) is not a reliable way to detect “alert is showing” with Angular components (the host typically contains comment nodes even when the *ngIf inside the component is false), so this rule will effectively apply all the time. Prefer a dedicated class on <app-alert> (or an input/HostBinding on the alert component) instead of :empty/:not(:empty).

Suggested change
:host app-alert:not(:empty) {
:host app-alert {

Copilot uses AI. Check for mistakes.
--alert-margin: 24px;
}

.wrapper {
min-width: 300px;
margin: 0 auto 16px;
Expand All @@ -7,7 +11,7 @@
.header {
display: flex;
justify-content: space-between;
margin: 36px 70px 24px 0;
margin: 2.5em 70px 24px 0;
}

.header-actions-box {
Expand Down
4 changes: 4 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,10 @@ 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',
// },
Comment on lines +301 to +304
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a commented-out action block left in the alert actions list. Please remove commented code or gate it behind a real feature flag/config so it doesn’t accumulate as dead code in this data source.

Suggested change
// {
// type: AlertActionType.Button,
// caption: 'AI generate',
// },

Copilot uses AI. Check for mistakes.
{
type: AlertActionType.Link,
caption: 'Settings',
Expand Down
6 changes: 5 additions & 1 deletion 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,14 +1,18 @@
:host app-alert:not(:empty) {
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector app-alert:not(:empty) is not a reliable way to detect “alert is showing” with Angular components (the host typically contains comment nodes even when the *ngIf inside the component is false), so this rule will effectively apply all the time. Prefer a dedicated class on <app-alert> (or an input/HostBinding on the alert component) instead of :empty/:not(:empty).

Suggested change
:host app-alert:not(:empty) {
:host app-alert {

Copilot uses AI. Check for mistakes.
--alert-margin: 24px;
}

.page {
display: flex;
height: 100%;
margin: 2.5em 0 16px;
}

.wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 36px 0 16px;
width: 100vw;
}

Expand Down
8 changes: 8 additions & 0 deletions frontend/src/app/components/email-change/email-change.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
:host app-alert:not(:empty) {
--alert-margin: 24px;

position: absolute;
top: var(--mat-toolbar-standard-height);
width: calc(100% - 48px);
}
Comment on lines +1 to +7
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector app-alert:not(:empty) is not a reliable way to detect “alert is showing” with Angular components (the host typically contains comment nodes even when the *ngIf inside the component is false), so this rule will effectively apply all the time. Prefer a dedicated class on <app-alert> (or an input/HostBinding on the alert component) instead of :empty/:not(:empty).

Copilot uses AI. Check for mistakes.

.wrapper {
display: flex;
flex-direction: column;
Expand Down
8 changes: 8 additions & 0 deletions frontend/src/app/components/email-verification/email-verification.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
:host app-alert:not(:empty) {
--alert-margin: 24px;

position: absolute;
top: var(--mat-toolbar-standard-height);
width: calc(100% - 48px);
}
Comment on lines +1 to +7
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector app-alert:not(:empty) is not a reliable way to detect “alert is showing” with Angular components (the host typically contains comment nodes even when the *ngIf inside the component is false), so this rule will effectively apply all the time. Prefer a dedicated class on <app-alert> (or an input/HostBinding on the alert component) instead of :empty/:not(:empty).

Copilot uses AI. Check for mistakes.

.loader {
display: flex;
align-items: center;
Expand Down
8 changes: 8 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,11 @@
:host app-alert:not(:empty) {
--alert-margin: 24px;

position: absolute;
top: var(--mat-toolbar-standard-height);
width: calc(100% - 48px);
}
Comment on lines +1 to +7
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector app-alert:not(:empty) is not a reliable way to detect “alert is showing” with Angular components (the host typically contains comment nodes even when the *ngIf inside the component is false), so this rule will effectively apply all the time. Prefer a dedicated class on <app-alert> (or an input/HostBinding on the alert component) instead of :empty/:not(:empty).

Copilot uses AI. Check for mistakes.

.wrapper {
height: calc(100vh - 56px);
padding: 16px;
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/app/components/password-change/password-change.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
:host app-alert:not(:empty) {
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector app-alert:not(:empty) is not a reliable way to detect “alert is showing” with Angular components (the host typically contains comment nodes even when the *ngIf inside the component is false), so this rule will effectively apply all the time. Prefer a dedicated class on <app-alert> (or an input/HostBinding on the alert component) instead of :empty/:not(:empty).

Suggested change
:host app-alert:not(:empty) {
:host app-alert {

Copilot uses AI. Check for mistakes.
--alert-margin: 24px;
}

.wrapper {
display: flex;
flex-direction: column;
Expand Down
8 changes: 8 additions & 0 deletions frontend/src/app/components/password-request/password-request.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
:host app-alert:not(:empty) {
--alert-margin: 24px;

position: absolute;
top: var(--mat-toolbar-standard-height);
width: calc(100% - 48px);
}
Comment on lines +1 to +7
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector app-alert:not(:empty) is not a reliable way to detect “alert is showing” with Angular components (the host typically contains comment nodes even when the *ngIf inside the component is false), so this rule will effectively apply all the time. Prefer a dedicated class on <app-alert> (or an input/HostBinding on the alert component) instead of :empty/:not(:empty).

Copilot uses AI. Check for mistakes.

.wrapper {
display: flex;
flex-direction: column;
Expand Down
1 change: 0 additions & 1 deletion frontend/src/app/components/password-request/password-request.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ import { UserService } from 'src/app/services/user.service';
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class PasswordRequestComponent implements OnInit {

public userEmail: string;
public companyId: string;
public submitting: boolean;
Expand Down
8 changes: 8 additions & 0 deletions frontend/src/app/components/password-reset/password-reset.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
:host app-alert:not(:empty) {
--alert-margin: 24px;

position: absolute;
top: var(--mat-toolbar-standard-height);
width: calc(100% - 48px);
}
Comment on lines +1 to +7
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector app-alert:not(:empty) is not a reliable way to detect “alert is showing” with Angular components (the host typically contains comment nodes even when the *ngIf inside the component is false), so this rule will effectively apply all the time. Prefer a dedicated class on <app-alert> (or an input/HostBinding on the alert component) instead of :empty/:not(:empty).

Copilot uses AI. Check for mistakes.

.wrapper {
display: flex;
flex-direction: column;
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/app/components/payment-form/payment-form.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
:host app-alert:not(:empty) {
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector app-alert:not(:empty) is not a reliable way to detect “alert is showing” with Angular components (the host typically contains comment nodes even when the *ngIf inside the component is false), so this rule will effectively apply all the time. Prefer a dedicated class on <app-alert> (or an input/HostBinding on the alert component) instead of :empty/:not(:empty).

Suggested change
:host app-alert:not(:empty) {
:host app-alert {

Copilot uses AI. Check for mistakes.
--alert-margin: 24px;
}

.payment-page {
margin: 3em auto;
margin: var(--top-margin) auto;
width: clamp(18.75em, 96%, 45em);
}

Expand Down
5 changes: 5 additions & 0 deletions frontend/src/app/components/payment-form/payment-form.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,11 @@ import plans from '../../consts/plans';
})
export class PaymentFormComponent implements OnInit {

public testAlert = {
type: 'info' as const,
message: 'This is a demo alert for the payment form.'
};

Comment on lines +43 to +47
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

testAlert is introduced but never used in the template. Please remove it before merge, or wire it into the template behind a clear demo-only condition/flag so it doesn’t become dead code in production.

Suggested change
public testAlert = {
type: 'info' as const,
message: 'This is a demo alert for the payment form.'
};

Copilot uses AI. Check for mistakes.
@ViewChild(StripePaymentElementComponent)
paymentElement: StripePaymentElementComponent;

Expand Down
Loading
Loading