New alerts banners #1525

karinakharchenko · 2026-01-22T16:14:20Z

- Update alert/banner styles with color-mix backgrounds (95% transparent) - Add warning type to banner component - Change colors: error (#B71C1C), warning (#F79008), info (#296EE9), success (#1B5E20) - Add 1px border and 4px border-radius to all alert types - Remove icon background, use theme color for icon - Reduce gap and left padding in alerts - Increase icon size from 18px to 24px - Add sticky alerts with 24px margins in user-settings - Add disabled button support to alerts - Add "AI generate" disabled button to settings info alert - Add white background for stroked buttons in error banner (light theme) Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Add 24px margins and adjusted sticky positioning for alerts - Applied to user-settings and db-table-row-edit components Co-Authored-By: Claude Opus 4.5 <[email protected]>

CLAassistant · 2026-01-22T16:14:28Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

…lors - Add alert margins to login and registration pages - Fix error alert/banner background: #F8E8E8 for light theme - Add backdrop blur for error in dark theme - Restructure error styles with proper media queries Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Add 40% dark overlay on banner.svg for better contrast Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Add background-color to banner-wrapper to prevent transparency issues - Adjust banner positioning with negative margin to eliminate gap under header - Add dark theme background color for content area Co-Authored-By: Claude Opus 4.5 <[email protected]>

Co-Authored-By: Claude Opus 4.5 <[email protected]>

…nko/rocketadmin into new-alerts-banners

Copilot

Pull request overview

Updates the frontend alert/banner UI to new visual designs and adjusts page layouts so alerts can be displayed consistently across many screens.

Changes:

Redesign app-alert and app-banner styling (colors, borders, blur, dark/light scheme handling).
Add page-level CSS hooks (--alert-margin, --top-margin) and update multiple pages to use them.
Minor layout refactors (spacing/margins) in several feature pages and dashboards.

Reviewed changes

Copilot reviewed 39 out of 39 changed files in this pull request and generated 27 comments.

Show a summary per file

File	Description
frontend/src/styles.scss	Minor formatting/newline adjustment.
frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.css	Adjust alert spacing for permissions dialog.
frontend/src/app/components/user-settings/user-settings.component.css	Set alert margin variable; switch page margin to `--top-margin`.
frontend/src/app/components/upgrade/upgrade.component.ts	Adds a demo-only `testAlert` property.
frontend/src/app/components/upgrade/upgrade.component.html	Layout refactor for plans header/table markup.
frontend/src/app/components/upgrade/upgrade.component.css	Introduce alert margin variable; use `--top-margin`.
frontend/src/app/components/ui-components/breadcrumbs/breadcrumbs.component.ts	Mark breadcrumbs component as standalone.
frontend/src/app/components/ui-components/banner/banner.component.css	Banner background/overlay redesign; theme-aware styles.
frontend/src/app/components/ui-components/alert/alert.component.css	Alert redesign + new sticky positioning/margin behavior.
frontend/src/app/components/skeletons/placeholder-company/placeholder-company.component.css	Use `--top-margin` for wrapper spacing.
frontend/src/app/components/secrets/secrets.component.css	Set alert margin variable; use `--top-margin`.
frontend/src/app/components/registration/registration.component.css	Add sticky positioning rules for registration alert.
frontend/src/app/components/payment-form/payment-form.component.ts	Adds a demo-only `testAlert` property.
frontend/src/app/components/payment-form/payment-form.component.css	Set alert margin variable; use `--top-margin`.
frontend/src/app/components/password-reset/password-reset.component.css	Set alert margin and absolute positioning for alert.
frontend/src/app/components/password-request/password-request.component.ts	Whitespace cleanup.
frontend/src/app/components/password-request/password-request.component.css	Set alert margin and absolute positioning for alert.
frontend/src/app/components/password-change/password-change.component.css	Set alert margin variable.
frontend/src/app/components/login/login.component.css	Set alert margin and absolute positioning for alert.
frontend/src/app/components/email-verification/email-verification.component.css	Set alert margin and absolute positioning for alert.
frontend/src/app/components/email-change/email-change.component.css	Set alert margin and absolute positioning for alert.
frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css	Adjust spacing; set alert margin variable.
frontend/src/app/components/dashboard/db-tables-data-source.ts	Leaves commented-out alert action stub.
frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css	Adjust spacing; set alert margin variable.
frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.ts	Whitespace cleanup.
frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css	Adjust spacing; set alert margin variable.
frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css	Set alert margin variable and spacing tweaks.
frontend/src/app/components/dashboard/dashboard.component.html	Restructure alert placement inside dashboard alerts container.
frontend/src/app/components/dashboard/dashboard.component.css	Update alerts layout/gap and override alert positioning.
frontend/src/app/components/connections-list/connections-list.component.ts	Adds a demo-only `testAlert` property.
frontend/src/app/components/connections-list/connections-list.component.css	Set alert margin variable.
frontend/src/app/components/connection-settings/connection-settings.component.css	Use `--top-margin`; adjust banner alignment and alert margin var.
frontend/src/app/components/connect-db/connect-db.component.html	Add class hook for alert styling in connect-db warning.
frontend/src/app/components/connect-db/connect-db.component.css	Set alert margin variable; adjust connect page spacing.
frontend/src/app/components/company/company.component.ts	Whitespace cleanup.
frontend/src/app/components/company/company.component.css	Set alert margin variable; use `--top-margin`.
frontend/src/app/components/company-member-invitation/company-member-invitation.component.css	Set alert margin and absolute positioning for alert.
frontend/src/app/components/audit/audit.component.css	Layout tweaks and banner full-width alignment changes.
frontend/src/app/app.component.css	Introduce `--top-margin`; dark background tweak; commented-out CSS blocks.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-01T22:27:27Z

frontend/src/app/app.component.css

+/* .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;
-}
+} */


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 · 2026-02-01T22:27:28Z

frontend/src/app/components/ui-components/alert/alert.component.css

 :host {
    position: sticky;
-    top: var(--mat-toolbar-standard-height);
+    top: calc(var(--mat-toolbar-standard-height) + 24px);
+    display: block;
+    margin: var(--alert-margin);


:host styles (sticky positioning + margin: var(--alert-margin)) apply even when no alert is rendered, because the component host always exists while only the inner .alert div is gated by *ngIf. This can create unintended layout spacing on pages that always include <app-alert></app-alert>. Consider moving the positioning/margins onto the .alert element (which only exists when currentAlert is truthy), or add a host class/HostBinding like has-alert and scope these styles to that class. Also add a fallback for --alert-margin (e.g. var(--alert-margin, 0)) to avoid invalidating the margin property when it’s unset.

Copilot · 2026-02-01T22:27:28Z

frontend/src/app/components/connections-list/connections-list.component.css

@@ -1,3 +1,7 @@
+:host app-alert:not(:empty) {


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 · 2026-02-01T22:27:28Z

frontend/src/app/components/password-reset/password-reset.component.css

+:host app-alert:not(:empty) {
+    --alert-margin: 24px;
+
+    position: absolute;
+    top: var(--mat-toolbar-standard-height);
+    width: calc(100% - 48px);
+}


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 · 2026-02-01T22:27:28Z

frontend/src/app/components/password-change/password-change.component.css

@@ -1,3 +1,7 @@
+:host app-alert:not(:empty) {


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 · 2026-02-01T22:27:33Z

frontend/src/app/components/connect-db/connect-db.component.css

@@ -1,6 +1,10 @@
+:host app-alert:not(:empty) {


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 · 2026-02-01T22:27:33Z

frontend/src/app/components/email-verification/email-verification.component.css

+:host app-alert:not(:empty) {
+    --alert-margin: 24px;
+
+    position: absolute;
+    top: var(--mat-toolbar-standard-height);
+    width: calc(100% - 48px);
+}


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 · 2026-02-01T22:27:34Z

...src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css

@@ -1,8 +1,12 @@
+:host app-alert:not(:empty) {


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 · 2026-02-01T22:27:34Z

...d/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css

+:host app-alert:not(:empty) {
+	--alert-margin: 0;
+
+	top: 0;
+	margin-bottom: 16px;
+}


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 · 2026-02-01T22:27:34Z

frontend/src/app/components/payment-form/payment-form.component.ts

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


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.'

};

karinakharchenko and others added 2 commits January 22, 2026 18:01

feat: add sticky alert margins to user-settings and row-edit pages

e5d189a

- Add 24px margins and adjusted sticky positioning for alerts - Applied to user-settings and db-table-row-edit components Co-Authored-By: Claude Opus 4.5 <[email protected]>

karinakharchenko and others added 6 commits January 23, 2026 11:19

feat: add dark overlay to banner wrapper background

b2188ed

- Add 40% dark overlay on banner.svg for better contrast Co-Authored-By: Claude Opus 4.5 <[email protected]>

Make banner background darker

2499f92

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Merge branch 'main' into new-alerts-banners

2943ba7

alerts: comment AI button and remove disabled property

19890cf

lyubov-voloshko requested review from lyubov-voloshko and removed request for lyubov-voloshko January 27, 2026 13:51

lyubov-voloshko added 6 commits January 27, 2026 13:52

Merge branch 'new-alerts-banners' of https://github.com/karinakharche…

c880073

…nko/rocketadmin into new-alerts-banners

alerts: fix alerts position in app

34f5ead

alert component: fix styling

5d0b979

fix banner component and add fix it on audit and settings pages

491f430

alerts on exterior pages

6ba7242

Merge branch 'main' into new-alerts-banners

213e43c

lyubov-voloshko marked this pull request as ready for review February 1, 2026 22:19

Copilot AI review requested due to automatic review settings February 1, 2026 22:19

lyubov-voloshko enabled auto-merge February 1, 2026 22:19

Copilot started reviewing on behalf of lyubov-voloshko February 1, 2026 22:19 View session

lyubov-voloshko merged commit 1197d66 into rocket-admin:main Feb 1, 2026
11 of 12 checks passed

Copilot AI reviewed Feb 1, 2026

View reviewed changes

Uh oh!

New alerts banners #1525

New alerts banners #1525

Uh oh!

Conversation

karinakharchenko commented Jan 22, 2026

Uh oh!

CLAassistant commented Jan 22, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants