Merge pull request #1525 from karinakharchenko/new-alerts-banners

lyubov-voloshko · web-flow · commit 1197d66b84a2 · 2026-02-02T00:20:00.000+02:00
New alerts banners
diff --git 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,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;
diff --git 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/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/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
@@ -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
@@ -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
@@ -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>
diff --git 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,14 @@
-.zapier-page {
-    padding: 32px max(calc(50vw - 325px), 10%);
+:host app-alert:not(:empty) {
+    --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;
 }
 
@@ -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/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
@@ -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
@@ -1,7 +1,3 @@
-:host {
-    margin-bottom: -60px;
-}
-
 .mat-sidenav-container {
     height: 100%;
     /* height: calc(100vh - 56px); */
@@ -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;
 }
 
 .error-details {
diff --git a/frontend/src/app/components/dashboard/dashboard.component.html b/frontend/src/app/components/dashboard/dashboard.component.html
@@ -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>
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
@@ -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
@@ -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
@@ -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
@@ -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/dashboard/db-tables-data-source.ts b/frontend/src/app/components/dashboard/db-tables-data-source.ts
@@ -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',
+                // },
                 {
                   type: AlertActionType.Link,
                   caption: 'Settings',
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
@@ -1,14 +1,18 @@
+:host app-alert:not(:empty) {
+    --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;
 }
 
diff --git 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
@@ -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
@@ -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 {
 	height: calc(100vh - 56px);
 	padding: 16px;
diff --git 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/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
@@ -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
@@ -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/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
@@ -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/registration/registration.component.css b/frontend/src/app/components/registration/registration.component.css
diff --git a/frontend/src/app/components/secrets/secrets.component.css b/frontend/src/app/components/secrets/secrets.component.css
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
diff --git a/frontend/src/app/components/ui-components/alert/alert.component.css b/frontend/src/app/components/ui-components/alert/alert.component.css
diff --git a/frontend/src/app/components/ui-components/banner/banner.component.css b/frontend/src/app/components/ui-components/banner/banner.component.css
diff --git a/frontend/src/app/components/ui-components/breadcrumbs/breadcrumbs.component.ts b/frontend/src/app/components/ui-components/breadcrumbs/breadcrumbs.component.ts
diff --git a/frontend/src/app/components/upgrade/upgrade.component.css b/frontend/src/app/components/upgrade/upgrade.component.css
diff --git a/frontend/src/app/components/upgrade/upgrade.component.html b/frontend/src/app/components/upgrade/upgrade.component.html
diff --git a/frontend/src/app/components/upgrade/upgrade.component.ts b/frontend/src/app/components/upgrade/upgrade.component.ts
diff --git a/frontend/src/app/components/user-settings/user-settings.component.css b/frontend/src/app/components/user-settings/user-settings.component.css
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
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`flex-direction: column;`
`4`	`4`	`align-items: stretch;`
`5`	`5`	`margin: 0 auto;`
	`6`	`+ height: 100%;`
`6`	`7`	`width: clamp(300px, 75vw, 1000px);`
`7`	`8`	`}`
`8`	`9`
`@@ -105,7 +106,8 @@ th.mat-header-cell, td.mat-cell {`
`105`	`106`	`}`
`106`	`107`
`107`	`108`	`.audit-banner {`
`108`		`- margin-top: 60px;`
	`109`	`+ margin: -60px calc((100vw - clamp(300px, 75vw, 1000px)) / -2) 0;`
	`110`	`+ width: 100vw;`
`109`	`111`	`}`
`110`	`112`
`111`	`113`	`.hidden {`
Original file line number	Diff line number	Diff line change
`@@ -1,13 +1,14 @@`
`1`		`-.zapier-page {`
`2`		`- padding: 32px max(calc(50vw - 325px), 10%);`
	`1`	`+:host app-alert:not(:empty) {`
	`2`	`+ --alert-margin: 24px;`
`3`	`3`	`}`
`4`	`4`
`5`	`5`	`.settings-page {`
	`6`	`+ height: 100%;`
	`7`	`+ margin: var(--top-margin) 0;`
`6`	`8`	`padding: 0 max(calc(50vw - 325px), 10%);`
`7`	`9`	`}`
`8`	`10`
`9`	`11`	`.mat-h1 {`
`10`		`- margin-top: 2em !important;`
`11`	`12`	`margin-bottom: 1.5em !important;`
`12`	`13`	`}`
`13`	`14`
`@@ -163,8 +164,9 @@`
`163`	`164`	`margin-left: 20px;`
`164`	`165`	`}`
`165`	`166`
`166`		`-.settings-banner ::ng-deep .banner-wrapper {`
`167`		`- margin-top: 60px;`
	`167`	`+.settings-banner {`
	`168`	`+ margin: -124px calc(max(calc(50vw - 325px), 10%) * -1) 0;`
	`169`	`+ width: 100vw;`
`168`	`170`	`}`
`169`	`171`
`170`	`172`	`.error-details {`