New alerts banners by karinakharchenko · Pull Request #1525 · rocket-admin/rocketadmin

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 <noreply@anthropic.com>

- 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 <noreply@anthropic.com>

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 <noreply@anthropic.com>

- Add 40% dark overlay on banner.svg for better contrast Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- 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 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

…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

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

 :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

@@ -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

+: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

@@ -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

@@ -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

+: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

@@ -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

+: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

+  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 <noreply@anthropic.com>

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 <noreply@anthropic.com>

Make banner background darker

2499f92

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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!

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!

4 participants