From 5b2f96cc6aa7d37a4c3832862e8b4138521020a2 Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Thu, 8 Jul 2021 13:02:21 +0200
Subject: [PATCH] update scss variables, spacing

---
 packages/editor-ui/src/components/MainSidebar.vue  | 4 ++--
 packages/editor-ui/src/components/UpdatesPanel.vue | 2 +-
 packages/editor-ui/src/components/VersionCard.vue  | 2 +-
 packages/editor-ui/src/n8n-theme-variables.scss    | 4 ++++
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 1652b68934..4fb98cd52c 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -637,7 +637,7 @@ a.logo {
 			border-radius: 50%;
 			color: $--sidebar-active-color;
 			position: absolute;
-			background-color: #fff;
+			background-color: $--sidebar-gift-notification-outer-color;
 			z-index: 9999;
 			left: 75%;
 			display: flex;
@@ -648,7 +648,7 @@ a.logo {
 			div {
 				height: 6px;
 				width: 6px;
-				background-color: $--color-primary;
+				background-color: $--sidebar-gift-notification-inner-color;
 				border-radius: 50%;
 			}
 		}
diff --git a/packages/editor-ui/src/components/UpdatesPanel.vue b/packages/editor-ui/src/components/UpdatesPanel.vue
index 1556eaa269..c7f37b5bfc 100644
--- a/packages/editor-ui/src/components/UpdatesPanel.vue
+++ b/packages/editor-ui/src/components/UpdatesPanel.vue
@@ -77,7 +77,7 @@ export default Vue.extend({
 			line-height: 22px;
 			color: $--updates-panel-description-text-color;
 			font-weight: 400;
-			margin: 0 0 30px 0;
+			margin: 0 0 16px 0;
 		}
 
 		div {
diff --git a/packages/editor-ui/src/components/VersionCard.vue b/packages/editor-ui/src/components/VersionCard.vue
index 6d03279356..53495b95e9 100644
--- a/packages/editor-ui/src/components/VersionCard.vue
+++ b/packages/editor-ui/src/components/VersionCard.vue
@@ -54,7 +54,7 @@ export default Vue.extend({
 
 <style module lang="scss">
 	.card {
-		background-color: #fff;
+		background-color: $--version-card-background-color;
 		border: $--version-card-border;
 		border-radius: 8px;
 		display: block;
diff --git a/packages/editor-ui/src/n8n-theme-variables.scss b/packages/editor-ui/src/n8n-theme-variables.scss
index 72dddbf70c..f31744f651 100644
--- a/packages/editor-ui/src/n8n-theme-variables.scss
+++ b/packages/editor-ui/src/n8n-theme-variables.scss
@@ -49,6 +49,8 @@ $--sidebar-width: 65px;
 $--sidebar-expanded-width: 200px;
 $--sidebar-inactive-color: #909399;
 $--sidebar-active-color: $--color-primary;
+$--sidebar-gift-notification-inner-color: $--color-primary;
+$--sidebar-gift-notification-outer-color: #fff;
 
 $--tags-manager-min-height: 300px;
 
@@ -101,6 +103,7 @@ $--updates-panel-text-color: #555555;
 
 // versions card
 $--version-card-name-text-color: #666666;
+$--version-card-background-color: #fff;
 $--version-card-border: 1px #dbdfe7 solid;
 $--version-card-description-text-color: #7d7d87;
 $--version-card-release-date-text-color: #909399;
@@ -111,3 +114,4 @@ $--version-card-breaking-change-background-color: rgba(255, 229, 100, 0.3);
 $--version-card-breaking-change-color: #6b5900;
 $--version-card-security-flag-color: #ff8080;
 $--version-card-box-shadow-color: rgba(109, 48, 40, 0.07);
+