feat(editor): Implement new banners framework (#6603)

* ⚡ Implemented new grid row - banners
* ✨ Fixing node creator and executions sidebar position after layout update
* 💄 Added configurable round corners to the Callout component
* ⚡ Fixing mouse position detection and main tab bar position
* ⚡ Implemented basic banner component structure
* ⚡ Implemented banner state and dismiss logic
* ⚡ Fixing grid layout. Updating banners height state dynamically
* ⚡ Fix zoom to fit position, mouse position in demo mode and callout vertical alignment
* ⚡ Implementing proper trial banners logic
* 💄 Only showing execution usage data once the sidebar is fully expanded
* ✨ Implemented permanent/temporary dismiss logic for v1 flag
* ⚡ Minor refactoring of banner logic
* ⚡ Updating permanent dismiss logic to work with all banners
* 👕 Fixing linting errors
* ✔️ Updating Callout component test snapshots
* 💄 Tweaking zoom to fit position
* ✔️ Updating testing endpoints to use new store data
* ✅ Added banners unit tests
* ✔️ Fixing failing banner tests
* ✅ Added more banner tests
* ⚡ Updating banners dimensions on resize, removing leftover code
* ✔️ Removing store import from API file
* 👕 Fixing lint errors
* ⚡ Updating migration files
* ⚡ Using query parameters in migrations
* 👌 Addressing design review feedback
* ⚡ Updating upgrade plan button click
* ⚡ Updating the migrations syntax
* 👌 Updating permanent banner dismiss endpoint and back-end logic
* 👌 Refactoring trial banner component and ui store
* 👌 Addressing more points from code review
* 👌 Moving DOM logic from the store
* ✔️ Updated callout component snapshots
* 👌 Updating mysql migration file
* ✔️ Updating e2e test canvas coordinates after setting it's position to absolute
* 👌 Addressing back-end review feedback
* 👌 Improving typing around banners
* 👕 Fixing lint errors

packages/design-system/src/components/N8nCallout/Callout.vue

@@ -2,7 +2,7 @@
 	<div :class="classes" role="alert">
 		<div :class="$style.messageSection">
 			<div :class="$style.icon" v-if="!iconless">
-				<n8n-icon :icon="getIcon" :size="theme === 'secondary' ? 'medium' : 'large'" />
+				<n8n-icon :icon="getIcon" :size="getIconSize" />
 			</div>
 			<n8n-text size="small">
 				<slot />
@@ -42,7 +42,10 @@ export default defineComponent({
 		},
 		icon: {
 			type: String,
-			default: 'info-circle',
+		},
+		iconSize: {
+			type: String,
+			default: 'medium',
 		},
 		iconless: {
 			type: Boolean,
@@ -50,9 +53,9 @@ export default defineComponent({
 		slim: {
 			type: Boolean,
 		},
-		overrideIcon: {
+		roundCorners: {
 			type: Boolean,
-			default: false,
+			default: true,
 		},
 	},
 	computed: {
@@ -62,16 +65,20 @@ export default defineComponent({
 				this.$style.callout,
 				this.$style[this.theme],
 				this.slim ? this.$style.slim : '',
+				this.roundCorners ? this.$style.round : '',
 			];
 		},
 		getIcon(): string {
-			if (this.overrideIcon) return this.icon;
-
-			if (Object.keys(CALLOUT_DEFAULT_ICONS).includes(this.theme)) {
-				return CALLOUT_DEFAULT_ICONS[this.theme];
+			return this.icon ?? CALLOUT_DEFAULT_ICONS?.[this.theme] ?? CALLOUT_DEFAULT_ICONS.info;
+		},
+		getIconSize(): string {
+			if (this.iconSize) {
+				return this.iconSize;
 			}
-
-			return this.icon;
+			if (this.theme === 'secondary') {
+				return 'medium';
+			}
+			return 'large';
 		},
 	},
 });
@@ -84,7 +91,6 @@ export default defineComponent({
 	font-size: var(--font-size-2xs);
 	padding: var(--spacing-xs);
 	border: var(--border-width-base) var(--border-style-base);
-	border-radius: var(--border-radius-base);
 	align-items: center;
 	line-height: var(--font-line-height-loose);
 
@@ -94,6 +100,10 @@ export default defineComponent({
 	}
 }
 
+.round {
+	border-radius: var(--border-radius-base);
+}
+
 .messageSection {
 	display: flex;
 	align-items: center;
@@ -102,7 +112,7 @@ export default defineComponent({
 .info,
 .custom {
 	border-color: var(--color-foreground-base);
-	background-color: var(--color-background-light);
+	background-color: var(--color-foreground-xlight);
 	color: var(--color-info);
 }
 
@@ -125,7 +135,8 @@ export default defineComponent({
 }
 
 .icon {
-	margin-right: var(--spacing-xs);
+	line-height: 1;
+	margin-right: var(--spacing-2xs);
 }
 
 .secondary {