From 6a92833219d19216256280c0ca9a9a0f19476e3a Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Thu, 22 Jan 2026 18:01:18 +0200 Subject: [PATCH 01/11] feat: redesign alert and banner components with new color scheme - 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 --- .../dashboard/db-tables-data-source.ts | 5 ++ .../ui-components/alert/alert.component.css | 56 +++++++++++++++---- .../ui-components/alert/alert.component.html | 1 + .../ui-components/banner/banner.component.css | 37 +++++++++++- .../user-settings/user-settings.component.css | 8 +++ frontend/src/app/models/alert.ts | 3 +- 6 files changed, 96 insertions(+), 14 deletions(-) diff --git a/frontend/src/app/components/dashboard/db-tables-data-source.ts b/frontend/src/app/components/dashboard/db-tables-data-source.ts index 0ff513fb5..a39bb8f7a 100644 --- a/frontend/src/app/components/dashboard/db-tables-data-source.ts +++ b/frontend/src/app/components/dashboard/db-tables-data-source.ts @@ -298,6 +298,11 @@ export class TablesDataSource implements DataSource { 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', diff --git a/frontend/src/app/components/ui-components/alert/alert.component.css b/frontend/src/app/components/ui-components/alert/alert.component.css index 450b916d6..64124f67b 100644 --- a/frontend/src/app/components/ui-components/alert/alert.component.css +++ b/frontend/src/app/components/ui-components/alert/alert.component.css @@ -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) { @@ -39,26 +39,60 @@ .alert_error { --alert-theme-color: #B71C1C; --alert-dark-theme-color: #E53935; - --alert-dark-theme-bg: rgba(229, 57, 53, 0.15); + --bg-color: color-mix(in hsl, #B71C1C, transparent 95%); + --alert-dark-theme-bg: color-mix(in hsl, #B71C1C, transparent 95%); + border: 1px solid var(--alert-theme-color); + border-left: 12px solid var(--alert-theme-color); + border-radius: 4px; z-index: 2; } +.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 { @@ -69,7 +103,7 @@ background: var(--alert-theme-color); border-radius: 50%; color: #fff; - font-size: 18px; + font-size: 24px; height: 36px; opacity: 0.9; width: 36px; diff --git a/frontend/src/app/components/ui-components/alert/alert.component.html b/frontend/src/app/components/ui-components/alert/alert.component.html index e9113c84d..9792d91b9 100644 --- a/frontend/src/app/components/ui-components/alert/alert.component.html +++ b/frontend/src/app/components/ui-components/alert/alert.component.html @@ -18,6 +18,7 @@ diff --git a/frontend/src/app/components/ui-components/banner/banner.component.css b/frontend/src/app/components/ui-components/banner/banner.component.css index b0a317690..5bdf5be4e 100644 --- a/frontend/src/app/components/ui-components/banner/banner.component.css +++ b/frontend/src/app/components/ui-components/banner/banner.component.css @@ -11,17 +11,21 @@ .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); @@ -51,4 +55,33 @@ justify-content: flex-end; gap: 20px; margin-top: 32px; +} + +.banner-box.banner_error { + --bg-color: color-mix(in hsl, #B71C1C, transparent 95%); + border: 1px solid var(--alert-theme-color); + border-left: 12px solid var(--alert-theme-color); +} + +@media (prefers-color-scheme: light) { + .banner-box.banner_error ::ng-deep [mat-stroked-button] { + background-color: #fff; + } +} + +.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); } \ No newline at end of file diff --git a/frontend/src/app/components/user-settings/user-settings.component.css b/frontend/src/app/components/user-settings/user-settings.component.css index c88f52132..18310972f 100644 --- a/frontend/src/app/components/user-settings/user-settings.component.css +++ b/frontend/src/app/components/user-settings/user-settings.component.css @@ -1,3 +1,11 @@ +:host > app-alert { + display: block; + position: sticky; + top: calc(var(--mat-toolbar-standard-height) + 24px); + margin: 0 24px; + z-index: 2; +} + .page { display: flex; flex-direction: column; diff --git a/frontend/src/app/models/alert.ts b/frontend/src/app/models/alert.ts index 530a97aab..b7954833b 100644 --- a/frontend/src/app/models/alert.ts +++ b/frontend/src/app/models/alert.ts @@ -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 { From e5d189ac968fff84e3fc41dd389acec75b2eadf5 Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Thu, 22 Jan 2026 18:12:07 +0200 Subject: [PATCH 02/11] feat: add sticky alert margins to user-settings and row-edit pages - 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 --- .../db-table-row-edit/db-table-row-edit.component.css | 8 ++++++++ .../components/user-settings/user-settings.component.css | 2 +- frontend/src/styles.scss | 3 ++- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css index 0cf057427..3ef23e0de 100644 --- a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css +++ b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css @@ -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%; diff --git a/frontend/src/app/components/user-settings/user-settings.component.css b/frontend/src/app/components/user-settings/user-settings.component.css index 18310972f..596242627 100644 --- a/frontend/src/app/components/user-settings/user-settings.component.css +++ b/frontend/src/app/components/user-settings/user-settings.component.css @@ -2,7 +2,7 @@ display: block; position: sticky; top: calc(var(--mat-toolbar-standard-height) + 24px); - margin: 0 24px; + margin: 24px 24px 0; z-index: 2; } diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 352c83157..94e915b48 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -98,4 +98,5 @@ body { display: block; background-color: rgba(0, 0, 0, 0.06); mix-blend-mode: difference; -} \ No newline at end of file +} + From c1686d39765699c9bc9004351b5750b389da56b6 Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Fri, 23 Jan 2026 11:19:10 +0200 Subject: [PATCH 03/11] feat: add alert styling for login/registration and fix error theme colors - 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 --- .../app/components/login/login.component.css | 5 +++++ .../registration/registration.component.css | 8 +++++++ .../ui-components/alert/alert.component.css | 15 +++++++++++-- .../ui-components/banner/banner.component.css | 22 ++++++++++++++----- 4 files changed, 42 insertions(+), 8 deletions(-) diff --git a/frontend/src/app/components/login/login.component.css b/frontend/src/app/components/login/login.component.css index 4a5c61f92..6488fdba1 100644 --- a/frontend/src/app/components/login/login.component.css +++ b/frontend/src/app/components/login/login.component.css @@ -1,3 +1,8 @@ +:host > app-alert { + display: block; + margin: 24px; +} + .wrapper { height: calc(100vh - 56px); padding: 16px; diff --git a/frontend/src/app/components/registration/registration.component.css b/frontend/src/app/components/registration/registration.component.css index 1079fb769..78492b1a8 100644 --- a/frontend/src/app/components/registration/registration.component.css +++ b/frontend/src/app/components/registration/registration.component.css @@ -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%; diff --git a/frontend/src/app/components/ui-components/alert/alert.component.css b/frontend/src/app/components/ui-components/alert/alert.component.css index 64124f67b..63c76583e 100644 --- a/frontend/src/app/components/ui-components/alert/alert.component.css +++ b/frontend/src/app/components/ui-components/alert/alert.component.css @@ -39,14 +39,25 @@ .alert_error { --alert-theme-color: #B71C1C; --alert-dark-theme-color: #E53935; - --bg-color: color-mix(in hsl, #B71C1C, transparent 95%); - --alert-dark-theme-bg: color-mix(in hsl, #B71C1C, transparent 95%); 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); diff --git a/frontend/src/app/components/ui-components/banner/banner.component.css b/frontend/src/app/components/ui-components/banner/banner.component.css index 5bdf5be4e..309c266c6 100644 --- a/frontend/src/app/components/ui-components/banner/banner.component.css +++ b/frontend/src/app/components/ui-components/banner/banner.component.css @@ -57,18 +57,28 @@ margin-top: 32px; } -.banner-box.banner_error { - --bg-color: color-mix(in hsl, #B71C1C, transparent 95%); - border: 1px solid var(--alert-theme-color); - border-left: 12px solid var(--alert-theme-color); -} - @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); From b2188ed882426d85a98f6494a9df834296649f28 Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Fri, 23 Jan 2026 14:35:25 +0200 Subject: [PATCH 04/11] feat: add dark overlay to banner wrapper background - Add 40% dark overlay on banner.svg for better contrast Co-Authored-By: Claude Opus 4.5 --- .../app/components/ui-components/banner/banner.component.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/components/ui-components/banner/banner.component.css b/frontend/src/app/components/ui-components/banner/banner.component.css index 309c266c6..11eec7097 100644 --- a/frontend/src/app/components/ui-components/banner/banner.component.css +++ b/frontend/src/app/components/ui-components/banner/banner.component.css @@ -2,9 +2,10 @@ 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-repeat: no-repeat; - /* background-position: left 125%, right -26%; */ background-size: cover; height: 100%; } From 92a42be02f81961cbd1ec0f1a541c501f8a4f99b Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Fri, 23 Jan 2026 16:23:22 +0200 Subject: [PATCH 05/11] Fix banner background gap in dark theme - 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 --- frontend/src/app/app.component.css | 6 ++++++ .../src/app/components/dashboard/dashboard.component.css | 8 ++++++++ .../components/ui-components/banner/banner.component.css | 9 ++++++++- 3 files changed, 22 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/app.component.css b/frontend/src/app/app.component.css index b8d6362ef..3ffce5b17 100644 --- a/frontend/src/app/app.component.css +++ b/frontend/src/app/app.component.css @@ -293,6 +293,12 @@ height: 100%; } +@media (prefers-color-scheme: dark) { + .main-menu-content_interior .content { + background-color: #212121; + } +} + .helpContainer { position: fixed; right: 16px; diff --git a/frontend/src/app/components/dashboard/dashboard.component.css b/frontend/src/app/components/dashboard/dashboard.component.css index 55bfbcf55..da64a7f4b 100644 --- a/frontend/src/app/components/dashboard/dashboard.component.css +++ b/frontend/src/app/components/dashboard/dashboard.component.css @@ -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); */ diff --git a/frontend/src/app/components/ui-components/banner/banner.component.css b/frontend/src/app/components/ui-components/banner/banner.component.css index 11eec7097..a0ea5ee63 100644 --- a/frontend/src/app/components/ui-components/banner/banner.component.css +++ b/frontend/src/app/components/ui-components/banner/banner.component.css @@ -1,3 +1,8 @@ +:host { + display: block; + height: 100%; +} + .banner-wrapper { display: flex; align-items: center; @@ -5,9 +10,11 @@ background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../../../../assets/bg/banner.svg'); + background-color: #2E2E2E; background-repeat: no-repeat; background-size: cover; - height: 100%; + height: calc(100% + 1px); + margin-top: -1px; } .banner_error { From 2499f92f956ae8d4ed38333537646b88ef2b4b44 Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Fri, 23 Jan 2026 16:26:03 +0200 Subject: [PATCH 06/11] Make banner background darker Co-Authored-By: Claude Opus 4.5 --- .../app/components/ui-components/banner/banner.component.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/components/ui-components/banner/banner.component.css b/frontend/src/app/components/ui-components/banner/banner.component.css index a0ea5ee63..5a52f776d 100644 --- a/frontend/src/app/components/ui-components/banner/banner.component.css +++ b/frontend/src/app/components/ui-components/banner/banner.component.css @@ -10,7 +10,7 @@ background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../../../../assets/bg/banner.svg'); - background-color: #2E2E2E; + background-color: #1a1a1a; background-repeat: no-repeat; background-size: cover; height: calc(100% + 1px); From 19890cfbcfa3c2504a309ed3e0194f7b5f574f2e Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Tue, 27 Jan 2026 13:50:04 +0000 Subject: [PATCH 07/11] alerts: comment AI button and remove disabled property --- .../app/components/dashboard/db-tables-data-source.ts | 9 ++++----- .../components/ui-components/alert/alert.component.html | 1 - frontend/src/app/models/alert.ts | 3 +-- 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/frontend/src/app/components/dashboard/db-tables-data-source.ts b/frontend/src/app/components/dashboard/db-tables-data-source.ts index c461ebc38..ea8852f62 100644 --- a/frontend/src/app/components/dashboard/db-tables-data-source.ts +++ b/frontend/src/app/components/dashboard/db-tables-data-source.ts @@ -298,11 +298,10 @@ export class TablesDataSource implements DataSource { type: AlertType.Info, message: 'Configure now to reveal advanced table functionality and features.', actions: [ - { - type: AlertActionType.Button, - caption: 'AI generate', - disabled: true - }, + // { + // type: AlertActionType.Button, + // caption: 'AI generate', + // }, { type: AlertActionType.Link, caption: 'Settings', diff --git a/frontend/src/app/components/ui-components/alert/alert.component.html b/frontend/src/app/components/ui-components/alert/alert.component.html index 9792d91b9..e9113c84d 100644 --- a/frontend/src/app/components/ui-components/alert/alert.component.html +++ b/frontend/src/app/components/ui-components/alert/alert.component.html @@ -18,7 +18,6 @@ diff --git a/frontend/src/app/models/alert.ts b/frontend/src/app/models/alert.ts index b7954833b..530a97aab 100644 --- a/frontend/src/app/models/alert.ts +++ b/frontend/src/app/models/alert.ts @@ -15,8 +15,7 @@ export interface AlertAction { type: AlertActionType, caption: string, to?: string, - action?: (id: number) => void, - disabled?: boolean + action?: (id: number) => void } export interface Alert { From 34f5eadbbe405088c9baee4a4eaa34945f365945 Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Fri, 30 Jan 2026 14:50:24 +0000 Subject: [PATCH 08/11] alerts: fix alerts position in app --- frontend/src/app/app.component.css | 10 +- .../components/company/company.component.css | 6 +- .../components/company/company.component.ts | 1 - .../connect-db/connect-db.component.css | 12 +- .../connect-db/connect-db.component.html | 2 +- .../connection-settings.component.css | 6 +- .../connections-list.component.css | 4 + .../connections-list.component.ts | 5 + .../dashboard/dashboard.component.css | 24 +- .../dashboard/dashboard.component.html | 2 +- .../db-table-actions.component.css | 7 + .../db-table-settings.component.css | 6 +- .../db-table-settings.component.ts | 1 - .../db-table-widgets.component.css | 6 +- .../db-table-row-edit.component.css | 10 +- .../password-change.component.css | 4 + .../payment-form/payment-form.component.css | 6 +- .../payment-form/payment-form.component.ts | 5 + .../components/secrets/secrets.component.css | 6 +- .../placeholder-company.component.css | 2 +- .../ui-components/alert/alert.component.css | 5 +- .../breadcrumbs/breadcrumbs.component.ts | 1 + .../components/upgrade/upgrade.component.css | 14 +- .../components/upgrade/upgrade.component.html | 244 +++++++++--------- .../components/upgrade/upgrade.component.ts | 4 + .../user-settings/user-settings.component.css | 10 +- .../permissions-add-dialog.component.css | 5 +- 27 files changed, 220 insertions(+), 188 deletions(-) diff --git a/frontend/src/app/app.component.css b/frontend/src/app/app.component.css index 3ffce5b17..6c03ef7e0 100644 --- a/frontend/src/app/app.component.css +++ b/frontend/src/app/app.component.css @@ -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; -} +} */ .main-menu-content { flex-grow: 1; @@ -288,6 +288,8 @@ } .content { + --top-margin: 4em; + display: grid; grid-template-rows: 0 100%; height: 100%; diff --git a/frontend/src/app/components/company/company.component.css b/frontend/src/app/components/company/company.component.css index ea18f5bb7..7ab24b864 100644 --- a/frontend/src/app/components/company/company.component.css +++ b/frontend/src/app/components/company/company.component.css @@ -1,5 +1,9 @@ +:host app-alert:not(:empty) { + --alert-margin: 24px; +} + .companyPage { - margin: 3em auto; + margin: var(--top-margin) auto; padding: 0 clamp(200px, 20vw, 300px); } diff --git a/frontend/src/app/components/company/company.component.ts b/frontend/src/app/components/company/company.component.ts index 3e40c2352..0a7cba3a3 100644 --- a/frontend/src/app/components/company/company.component.ts +++ b/frontend/src/app/components/company/company.component.ts @@ -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; diff --git a/frontend/src/app/components/connect-db/connect-db.component.css b/frontend/src/app/components/connect-db/connect-db.component.css index 0e8d0562f..d0ce93990 100644 --- a/frontend/src/app/components/connect-db/connect-db.component.css +++ b/frontend/src/app/components/connect-db/connect-db.component.css @@ -1,6 +1,10 @@ +:host app-alert:not(:empty) { + --alert-margin: 24px; +} + .connectPage { - padding-top: 16px; - padding-bottom: 20px; + margin-top: var(--top-margin); + margin-bottom: 4em; } .form { @@ -82,6 +86,10 @@ margin-bottom: 0; } +.connectForm__ipAlert { + --alert-margin: 0; +} + .connectForm__title { grid-column: 1 / span 3; } diff --git a/frontend/src/app/components/connect-db/connect-db.component.html b/frontend/src/app/components/connect-db/connect-db.component.html index 1ebc60b40..09ccab159 100644 --- a/frontend/src/app/components/connect-db/connect-db.component.html +++ b/frontend/src/app/components/connect-db/connect-db.component.html @@ -60,7 +60,7 @@

- +
Please make sure our servers are able to access your database.
Rocketadmin uses the IP address diff --git a/frontend/src/app/components/connection-settings/connection-settings.component.css b/frontend/src/app/components/connection-settings/connection-settings.component.css index 3468578f1..de7f5f921 100644 --- a/frontend/src/app/components/connection-settings/connection-settings.component.css +++ b/frontend/src/app/components/connection-settings/connection-settings.component.css @@ -1,13 +1,13 @@ -.zapier-page { - padding: 32px max(calc(50vw - 325px), 10%); +:host app-alert:not(:empty) { + --alert-margin: 24px; } .settings-page { + margin: var(--top-margin) 0; padding: 0 max(calc(50vw - 325px), 10%); } .mat-h1 { - margin-top: 2em !important; margin-bottom: 1.5em !important; } diff --git a/frontend/src/app/components/connections-list/connections-list.component.css b/frontend/src/app/components/connections-list/connections-list.component.css index d1a03e4f3..bc3253c96 100644 --- a/frontend/src/app/components/connections-list/connections-list.component.css +++ b/frontend/src/app/components/connections-list/connections-list.component.css @@ -1,3 +1,7 @@ +:host app-alert:not(:empty) { + --alert-margin: 24px; +} + .wrapper { display: flex; flex-direction: column; diff --git a/frontend/src/app/components/connections-list/connections-list.component.ts b/frontend/src/app/components/connections-list/connections-list.component.ts index f97fcd671..552fc0ea9 100644 --- a/frontend/src/app/components/connections-list/connections-list.component.ts +++ b/frontend/src/app/components/connections-list/connections-list.component.ts @@ -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.', + }; + public connections: Connection[] = null; // public testConnections: Connection[] = null; public titles: Object; diff --git a/frontend/src/app/components/dashboard/dashboard.component.css b/frontend/src/app/components/dashboard/dashboard.component.css index da64a7f4b..1f50c8bf6 100644 --- a/frontend/src/app/components/dashboard/dashboard.component.css +++ b/frontend/src/app/components/dashboard/dashboard.component.css @@ -1,15 +1,3 @@ -: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); */ @@ -99,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; } .error-details { diff --git a/frontend/src/app/components/dashboard/dashboard.component.html b/frontend/src/app/components/dashboard/dashboard.component.html index 4990d2469..7d9e0eae5 100644 --- a/frontend/src/app/components/dashboard/dashboard.component.html +++ b/frontend/src/app/components/dashboard/dashboard.component.html @@ -80,8 +80,8 @@

Rocketadmin can not find any tables

-
+ diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css index 81d1971f2..f8547187b 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css @@ -1,3 +1,10 @@ +:host app-alert:not(:empty) { + --alert-margin: 0; + + top: 0; + margin-bottom: 16px; +} + .drawer { height: 100%; } diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css index fa12f4272..fde57c8b3 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css @@ -1,8 +1,12 @@ +:host app-alert:not(:empty) { + --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 { diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.ts index 7fe2cbe3f..9cc36b4e2 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.ts +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.ts @@ -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; diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css index f88fa9c1b..501c07724 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css @@ -1,3 +1,7 @@ +:host app-alert:not(:empty) { + --alert-margin: 24px; +} + .wrapper { min-width: 300px; margin: 0 auto 16px; @@ -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 { diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css index 3ef23e0de..1f7401d7f 100644 --- a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css +++ b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css @@ -1,14 +1,11 @@ -:host > app-alert { - display: block; - position: sticky; - top: calc(var(--mat-toolbar-standard-height) + 24px); - margin: 24px 24px 0; - z-index: 2; +:host app-alert:not(:empty) { + --alert-margin: 24px; } .page { display: flex; height: 100%; + margin: 2.5em 0 16px; } .wrapper { @@ -16,7 +13,6 @@ display: flex; flex-direction: column; align-items: center; - padding: 36px 0 16px; width: 100vw; } diff --git a/frontend/src/app/components/password-change/password-change.component.css b/frontend/src/app/components/password-change/password-change.component.css index ef0980cc3..352cad7e3 100644 --- a/frontend/src/app/components/password-change/password-change.component.css +++ b/frontend/src/app/components/password-change/password-change.component.css @@ -1,3 +1,7 @@ +:host app-alert:not(:empty) { + --alert-margin: 24px; +} + .wrapper { display: flex; flex-direction: column; diff --git a/frontend/src/app/components/payment-form/payment-form.component.css b/frontend/src/app/components/payment-form/payment-form.component.css index e85bc7e80..65eae206f 100644 --- a/frontend/src/app/components/payment-form/payment-form.component.css +++ b/frontend/src/app/components/payment-form/payment-form.component.css @@ -1,5 +1,9 @@ +:host app-alert:not(:empty) { + --alert-margin: 24px; +} + .payment-page { - margin: 3em auto; + margin: var(--top-margin) auto; width: clamp(18.75em, 96%, 45em); } diff --git a/frontend/src/app/components/payment-form/payment-form.component.ts b/frontend/src/app/components/payment-form/payment-form.component.ts index 87e4fbb22..faab816d0 100644 --- a/frontend/src/app/components/payment-form/payment-form.component.ts +++ b/frontend/src/app/components/payment-form/payment-form.component.ts @@ -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.' + }; + @ViewChild(StripePaymentElementComponent) paymentElement: StripePaymentElementComponent; diff --git a/frontend/src/app/components/secrets/secrets.component.css b/frontend/src/app/components/secrets/secrets.component.css index c62246a46..fe5ed3b60 100644 --- a/frontend/src/app/components/secrets/secrets.component.css +++ b/frontend/src/app/components/secrets/secrets.component.css @@ -1,5 +1,9 @@ +:host app-alert:not(:empty) { + --alert-margin: 24px; +} + .secrets-page { - margin: 3em auto; + margin: var(--top-margin) auto; padding: 0 clamp(200px, 20vw, 300px); } diff --git a/frontend/src/app/components/skeletons/placeholder-company/placeholder-company.component.css b/frontend/src/app/components/skeletons/placeholder-company/placeholder-company.component.css index 0d5df72dc..ab2225faa 100644 --- a/frontend/src/app/components/skeletons/placeholder-company/placeholder-company.component.css +++ b/frontend/src/app/components/skeletons/placeholder-company/placeholder-company.component.css @@ -1,5 +1,5 @@ .wrapper { - margin: 3em auto; + margin: var(--top-margin) auto; padding: 0 clamp(200px, 20vw, 300px); width: 100%; } diff --git a/frontend/src/app/components/ui-components/alert/alert.component.css b/frontend/src/app/components/ui-components/alert/alert.component.css index 63c76583e..2b0963595 100644 --- a/frontend/src/app/components/ui-components/alert/alert.component.css +++ b/frontend/src/app/components/ui-components/alert/alert.component.css @@ -1,6 +1,8 @@ :host { position: sticky; - top: var(--mat-toolbar-standard-height); + top: calc(var(--mat-toolbar-standard-height) + 24px); + display: block; + margin: var(--alert-margin); z-index: 2; } @@ -9,7 +11,6 @@ gap: 8px; background-color: var(--bg-color); border-left: 12px solid var(--alert-theme-color); - margin-bottom: 8px; padding: 12px 16px 12px 8px; } diff --git a/frontend/src/app/components/ui-components/breadcrumbs/breadcrumbs.component.ts b/frontend/src/app/components/ui-components/breadcrumbs/breadcrumbs.component.ts index 2d537462f..78696d02e 100644 --- a/frontend/src/app/components/ui-components/breadcrumbs/breadcrumbs.component.ts +++ b/frontend/src/app/components/ui-components/breadcrumbs/breadcrumbs.component.ts @@ -9,6 +9,7 @@ import { MatButtonModule } from '@angular/material/button'; selector: 'app-breadcrumbs', templateUrl: './breadcrumbs.component.html', styleUrls: ['./breadcrumbs.component.css'], + standalone: true, imports: [CommonModule, RouterModule, MatIconModule, MatButtonModule] }) export class BreadcrumbsComponent implements OnInit { diff --git a/frontend/src/app/components/upgrade/upgrade.component.css b/frontend/src/app/components/upgrade/upgrade.component.css index 128998579..f03b677b5 100644 --- a/frontend/src/app/components/upgrade/upgrade.component.css +++ b/frontend/src/app/components/upgrade/upgrade.component.css @@ -1,18 +1,18 @@ -.upgrade-box { +:host app-alert:not(:empty) { + --alert-margin: 24px; +} + +/* .upgrade-box { margin-top: 53px; } .upgrade-box__title { margin-bottom: 20px; text-align: center; -} - -.page { - padding: 16px; -} +} */ .plans { - margin: 2em auto; + margin: var(--top-margin) auto; width: clamp(300px, 90%, 840px); } diff --git a/frontend/src/app/components/upgrade/upgrade.component.html b/frontend/src/app/components/upgrade/upgrade.component.html index 2b106f97d..96e6661a6 100644 --- a/frontend/src/app/components/upgrade/upgrade.component.html +++ b/frontend/src/app/components/upgrade/upgrade.component.html @@ -10,141 +10,137 @@

Manage plans

--> -
-
-
-
- +
+
+
+ +
+

+ Manage plans +

- -
-

- Manage plans -

-
- -
-
- {{plan.name}} - Recommended -
-
- ${{ plan.price }}/monthly -
- - per each 10 users - up to 3 users - - + + + - - - - - Upgrade - - - Downgrade - - -
- - + + Upgrade + + + Downgrade + + +
+ + -
+
-

Databases

+

Databases

- - - - - - - - + + + --> - - - - - -
+ Users + - {{element[plan.key]}} - all_inclusive - {{element[plan.key]}}person -
+ + + {{element[plan.key]}} + all_inclusive + {{element[plan.key]}}person + + + + + -

Users

+

Users

- - - - - - - - - - - -
- ✓ - {{element[plan.key]}} -
+ + + + + + + + + + + +
+ ✓ + {{element[plan.key]}} +
-

Features

+

Features

- - - - - - - - - - - -
- ✓ - {{element[plan.key]}} -
-
+ + + + + + + + + + + +
+ ✓ + {{element[plan.key]}} +
\ No newline at end of file diff --git a/frontend/src/app/components/upgrade/upgrade.component.ts b/frontend/src/app/components/upgrade/upgrade.component.ts index f94e259fb..981cd27d8 100644 --- a/frontend/src/app/components/upgrade/upgrade.component.ts +++ b/frontend/src/app/components/upgrade/upgrade.component.ts @@ -28,6 +28,10 @@ import plans from '../../consts/plans'; styleUrls: ['./upgrade.component.css'] }) export class UpgradeComponent implements OnInit { + public testAlert = { + type: 'info' as const, + message: 'This is a demo alert for the upgrade page.' + }; public currentPlan = { key: PlanKey.Free, price: 0, diff --git a/frontend/src/app/components/user-settings/user-settings.component.css b/frontend/src/app/components/user-settings/user-settings.component.css index 596242627..7706a72f6 100644 --- a/frontend/src/app/components/user-settings/user-settings.component.css +++ b/frontend/src/app/components/user-settings/user-settings.component.css @@ -1,15 +1,11 @@ -:host > app-alert { - display: block; - position: sticky; - top: calc(var(--mat-toolbar-standard-height) + 24px); - margin: 24px 24px 0; - z-index: 2; +:host app-alert:not(:empty) { + --alert-margin: 24px; } .page { display: flex; flex-direction: column; - margin: 3em auto; + margin: var(--top-margin) auto; max-width: 520px; min-width: 300px; width: 96%; diff --git a/frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.css b/frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.css index 51f8d0f71..44a869288 100644 --- a/frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.css +++ b/frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.css @@ -10,8 +10,9 @@ } .permissions-alert { - position: relative; - top: -8px; + --alert-margin: 0 0 20px; + + top: 0; } .permissions-form ::ng-deep .mat-mdc-dialog-content { From 5d0b9799205f62a85831065cfffd60aefbdc8724 Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Fri, 30 Jan 2026 15:46:32 +0000 Subject: [PATCH 09/11] alert component: fix styling --- .../ui-components/alert/alert.component.css | 68 +++---------------- 1 file changed, 10 insertions(+), 58 deletions(-) diff --git a/frontend/src/app/components/ui-components/alert/alert.component.css b/frontend/src/app/components/ui-components/alert/alert.component.css index 2b0963595..77a6d34e4 100644 --- a/frontend/src/app/components/ui-components/alert/alert.component.css +++ b/frontend/src/app/components/ui-components/alert/alert.component.css @@ -10,23 +10,22 @@ display: flex; gap: 8px; background-color: var(--bg-color); + backdrop-filter: blur(4px); + border-top: 1px solid var(--alert-theme-color); + border-right: 1px solid var(--alert-theme-color); + border-bottom: 1px solid var(--alert-theme-color); border-left: 12px solid var(--alert-theme-color); + border-radius: 4px; padding: 12px 16px 12px 8px; } @media (prefers-color-scheme: dark) { .alert { - --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); - } -} - -@media (prefers-color-scheme: light) { - .alert { - --bg-color: #F4F4F4; + backdrop-filter: blur(2px); } } @@ -40,71 +39,25 @@ .alert_error { --alert-theme-color: #B71C1C; --alert-dark-theme-color: #E53935; - 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); + --bg-color: color-mix(in hsl, #B71C1C, transparent 95%); } .alert_warning { --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: #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; - 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); + --bg-color: color-mix(in hsl, #1B5E20, transparent 95%); } .alert__icon { @@ -112,9 +65,8 @@ display: flex; align-items: center; justify-content: center; - background: var(--alert-theme-color); border-radius: 50%; - color: #fff; + color: var(--alert-theme-color); font-size: 24px; height: 36px; opacity: 0.9; @@ -123,7 +75,7 @@ @media (prefers-color-scheme: dark) { .alert__icon { - background: var(--alert-dark-theme-color); + color: var(--alert-dark-theme-color); } } From 491f4309bcc7dabaa24863fb3c29c78709c3b9ad Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Fri, 30 Jan 2026 16:38:25 +0000 Subject: [PATCH 10/11] fix banner component and add fix it on audit and settings pages --- .../app/components/audit/audit.component.css | 4 +- .../connection-settings.component.css | 6 +- .../ui-components/banner/banner.component.css | 96 +++++++------------ 3 files changed, 41 insertions(+), 65 deletions(-) diff --git a/frontend/src/app/components/audit/audit.component.css b/frontend/src/app/components/audit/audit.component.css index 4e5bf39de..b638496bb 100644 --- a/frontend/src/app/components/audit/audit.component.css +++ b/frontend/src/app/components/audit/audit.component.css @@ -3,6 +3,7 @@ flex-direction: column; align-items: stretch; margin: 0 auto; + height: 100%; width: clamp(300px, 75vw, 1000px); } @@ -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 { diff --git a/frontend/src/app/components/connection-settings/connection-settings.component.css b/frontend/src/app/components/connection-settings/connection-settings.component.css index de7f5f921..ab3cdcad6 100644 --- a/frontend/src/app/components/connection-settings/connection-settings.component.css +++ b/frontend/src/app/components/connection-settings/connection-settings.component.css @@ -3,6 +3,7 @@ } .settings-page { + height: 100%; margin: var(--top-margin) 0; padding: 0 max(calc(50vw - 325px), 10%); } @@ -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 { diff --git a/frontend/src/app/components/ui-components/banner/banner.component.css b/frontend/src/app/components/ui-components/banner/banner.component.css index 5a52f776d..c23f14165 100644 --- a/frontend/src/app/components/ui-components/banner/banner.component.css +++ b/frontend/src/app/components/ui-components/banner/banner.component.css @@ -7,35 +7,58 @@ display: flex; align-items: center; justify-content: center; - 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-size: cover; + background-position: center, center; + background-repeat: no-repeat, no-repeat; + background-size: 100%, cover; height: calc(100% + 1px); margin-top: -1px; } +@media (prefers-color-scheme: light) { + .banner-wrapper { + background-image: + linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), + url('../../../../assets/bg/banner.svg'); + } +} + +@media (prefers-color-scheme: dark) { + .banner-wrapper { + background-image: + linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), + url('../../../../assets/bg/banner.svg'); + background-color: #1a1a1a; + } +} + .banner_error { --alert-theme-color: #B71C1C; - z-index: 2; + --alert-dark-theme-color: #E53935; + --bg-color: color-mix(in hsl, #B71C1C, transparent 95%); +} + +.banner_warning { + --alert-theme-color: #F79008; + --alert-dark-theme-color: #F79008; + --bg-color: color-mix(in hsl, #F79008, transparent 95%); } .banner_info { --alert-theme-color: #296EE9; + --alert-dark-theme-color: #296EE9; + --bg-color: color-mix(in hsl, #296EE9, transparent 95%); } .banner_success { --alert-theme-color: #1B5E20; -} - -.banner_warning { - --alert-theme-color: #F79008; + --alert-dark-theme-color: #4CAF50; + --bg-color: color-mix(in hsl, #1B5E20, transparent 95%); } .banner-box { background-color: var(--bg-color); + backdrop-filter: blur(2px); + border: 1px solid var(--alert-theme-color); border-left: 12px solid var(--alert-theme-color); border-radius: 4px; box-shadow: @@ -46,60 +69,9 @@ width: clamp(300px, 50vw, 450px); } -@media (prefers-color-scheme: dark) { - .banner-box { - --bg-color: #292929; - } -} - -@media (prefers-color-scheme: light) { - .banner-box { - --bg-color: #F4F4F4; - } -} - .banner-box ::ng-deep .error-actions { display: flex; 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); } \ No newline at end of file From 6ba7242c92bc34971fa2d051e521d3b9d314ecc3 Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Sun, 1 Feb 2026 22:08:43 +0000 Subject: [PATCH 11/11] alerts on exterior pages --- .../company-member-invitation.component.css | 8 ++++++++ .../components/email-change/email-change.component.css | 8 ++++++++ .../email-verification/email-verification.component.css | 8 ++++++++ frontend/src/app/components/login/login.component.css | 9 ++++++--- .../password-request/password-request.component.css | 8 ++++++++ .../password-request/password-request.component.ts | 1 - .../password-reset/password-reset.component.css | 8 ++++++++ 7 files changed, 46 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/components/company-member-invitation/company-member-invitation.component.css b/frontend/src/app/components/company-member-invitation/company-member-invitation.component.css index d544a8533..e67c1974c 100644 --- a/frontend/src/app/components/company-member-invitation/company-member-invitation.component.css +++ b/frontend/src/app/components/company-member-invitation/company-member-invitation.component.css @@ -1,3 +1,11 @@ +:host app-alert:not(:empty) { + --alert-margin: 24px; + + position: absolute; + top: var(--mat-toolbar-standard-height); + width: calc(100% - 48px); +} + .wrapper { display: flex; flex-direction: column; diff --git a/frontend/src/app/components/email-change/email-change.component.css b/frontend/src/app/components/email-change/email-change.component.css index 69ab34602..8ac2b23cf 100644 --- a/frontend/src/app/components/email-change/email-change.component.css +++ b/frontend/src/app/components/email-change/email-change.component.css @@ -1,3 +1,11 @@ +:host app-alert:not(:empty) { + --alert-margin: 24px; + + position: absolute; + top: var(--mat-toolbar-standard-height); + width: calc(100% - 48px); +} + .wrapper { display: flex; flex-direction: column; diff --git a/frontend/src/app/components/email-verification/email-verification.component.css b/frontend/src/app/components/email-verification/email-verification.component.css index 0408196c0..500691aa6 100644 --- a/frontend/src/app/components/email-verification/email-verification.component.css +++ b/frontend/src/app/components/email-verification/email-verification.component.css @@ -1,3 +1,11 @@ +:host app-alert:not(:empty) { + --alert-margin: 24px; + + position: absolute; + top: var(--mat-toolbar-standard-height); + width: calc(100% - 48px); +} + .loader { display: flex; align-items: center; diff --git a/frontend/src/app/components/login/login.component.css b/frontend/src/app/components/login/login.component.css index 6488fdba1..793f9b777 100644 --- a/frontend/src/app/components/login/login.component.css +++ b/frontend/src/app/components/login/login.component.css @@ -1,6 +1,9 @@ -:host > app-alert { - display: block; - margin: 24px; +:host app-alert:not(:empty) { + --alert-margin: 24px; + + position: absolute; + top: var(--mat-toolbar-standard-height); + width: calc(100% - 48px); } .wrapper { diff --git a/frontend/src/app/components/password-request/password-request.component.css b/frontend/src/app/components/password-request/password-request.component.css index 9b5316a7a..cad2ee910 100644 --- a/frontend/src/app/components/password-request/password-request.component.css +++ b/frontend/src/app/components/password-request/password-request.component.css @@ -1,3 +1,11 @@ +:host app-alert:not(:empty) { + --alert-margin: 24px; + + position: absolute; + top: var(--mat-toolbar-standard-height); + width: calc(100% - 48px); +} + .wrapper { display: flex; flex-direction: column; diff --git a/frontend/src/app/components/password-request/password-request.component.ts b/frontend/src/app/components/password-request/password-request.component.ts index a83310474..5370a2dd9 100644 --- a/frontend/src/app/components/password-request/password-request.component.ts +++ b/frontend/src/app/components/password-request/password-request.component.ts @@ -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; diff --git a/frontend/src/app/components/password-reset/password-reset.component.css b/frontend/src/app/components/password-reset/password-reset.component.css index ee15ed067..fb191a75c 100644 --- a/frontend/src/app/components/password-reset/password-reset.component.css +++ b/frontend/src/app/components/password-reset/password-reset.component.css @@ -1,3 +1,11 @@ +:host app-alert:not(:empty) { + --alert-margin: 24px; + + position: absolute; + top: var(--mat-toolbar-standard-height); + width: calc(100% - 48px); +} + .wrapper { display: flex; flex-direction: column;