✨ Add new version notification (#1977)

* add menu item

* implement versions modal

* fix up modal

* clean up badges

* implement key features

* fix up spacing

* add error message

* add notification icon

* fix notification

* fix bug when no updates

* address lint issues

* address multi line nodes

* add closing animation

* keep drawer open

* address design feedback

* address badge styling

* use grid for icons

* update cli to return version information

* set env variables

* add scss color variables

* address comments

* fix lint issue

* handle edge cases

* update scss variables, spacing

* update spacing

* build

* override top value for theme

* bolden version

* update config

* check endpoint exists

* handle long names

* set dates

* set title

* fix bug

* update warning

* remove unused component

* refactor components

* add fragments

* inherit styles

* fix icon size

* fix lint issues

* add cli dep

* address comments

* handle network error

* address empty case

* Revert "address comments"

480f969e07c3282c50bc326babbc5812baac5dae

* remove dependency

* build

* update variable names

* update variable names

* refactor verion card

* split out variables

* clean up impl

* clean up scss

* move from nodeview

* refactor out gift notification icon

* fix lint issues

* clean up variables

* update scss variables

* update info url

* Add instanceId to frontendSettings

* Use createHash from crypto module

* Add instanceId to store & send it as http header

* Fix lintings

* Fix interfaces & apply review changes

* Apply review changes

* add console message

* update text info

* update endpoint

* clean up interface

* address comments

* cleanup todo

* Update packages/cli/config/index.ts

Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com>

* update console message

* ⚡ Display node-name on hover

* ⚡ Formatting fix

Co-authored-by: MedAliMarz <servfrdali@yahoo.fr>
Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com>
Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>

packages/editor-ui/src/n8n-theme-variables.scss

@@ -28,6 +28,16 @@ $--custom-success-text : #40c351;
 $--custom-warning-background : #ffffe5;
 $--custom-warning-text : #eb9422;
 
+// Badge
+$--badge-danger-color: #f45959;
+$--badge-danger-background-color: #fef0f0;
+$--badge-danger-border-color: #fde2e2;
+$--badge-warning-background-color: rgba(255, 229, 100, 0.3);
+$--badge-warning-color: #6b5900;
+
+// Warning tooltip
+$--warning-tooltip-color: #ff8080;
+
 $--custom-node-view-background : #faf9fe;
 
 // Table
@@ -44,8 +54,18 @@ $--custom-input-border-shadow: 1px solid $--custom-input-border-color;
 
 $--header-height: 65px;
 
+// sidebar
 $--sidebar-width: 65px;
 $--sidebar-expanded-width: 200px;
+$--sidebar-inactive-color: #909399;
+$--sidebar-active-color: $--color-primary;
+
+// gifts notification
+$--gift-notification-active-color: $--color-primary;
+$--gift-notification-inner-color: $--color-primary;
+$--gift-notification-outer-color: #fff;
+
+// tags manager
 $--tags-manager-min-height: 300px;
 
 // based on element.io breakpoints
@@ -83,3 +103,23 @@ $--node-creator-description-color: #7d7d87;
 // trigger icon
 $--trigger-icon-border-color: #dcdfe6;
 $--trigger-icon-background-color: #fff;
+
+// drawer
+$--drawer-background-color: #fff;
+
+// updates-panel
+$--updates-panel-info-icon-color: #909399;
+$--updates-panel-info-url-color: $--color-primary;
+$--updates-panel-border: 1px #dbdfe7 solid;
+$--updates-panel-dark-background-color: #f8f9fb;
+$--updates-panel-description-text-color: #7d7d87;
+$--updates-panel-text-color: #555;
+
+// versions card
+$--version-card-name-text-color: #666;
+$--version-card-background-color: #fff;
+$--version-card-border: 1px #dbdfe7 solid;
+$--version-card-description-text-color: #7d7d87;
+$--version-card-release-date-text-color: #909399;
+$--version-card-box-shadow-color: rgba(109, 48, 40, 0.07);
+