From 55c6bdab25b93a3b426b3cc7e2fe1da7b142ee1f Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Wed, 7 Jul 2021 14:51:24 +0200
Subject: [PATCH] address design feedback

---
 .../editor-ui/src/components/MainSidebar.vue  |  6 ++--
 packages/editor-ui/src/components/Modals.vue  |  6 ++--
 .../{VersionsModal.vue => UpdatesPanel.vue}   | 14 ++++++----
 .../editor-ui/src/components/VersionCard.vue  | 28 +++++++++++--------
 packages/editor-ui/src/modules/ui.ts          |  2 +-
 packages/editor-ui/src/views/NodeView.vue     |  4 +--
 6 files changed, 34 insertions(+), 26 deletions(-)
 rename packages/editor-ui/src/components/{VersionsModal.vue => UpdatesPanel.vue} (91%)

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index b1be79eff9b..8a8b9ec6e27 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -128,7 +128,7 @@
 				<MenuItemsIterator :items="sidebarMenuBottomItems" :root="true"/>
 
 				<div class="foot-menu-items">
-					<el-menu-item index="updates" class="updates" v-if="hasVersionUpdates" @click="openVersionsModal">
+					<el-menu-item index="updates" class="updates" v-if="hasVersionUpdates" @click="openUpdatesPanel">
 						<div class="gift-container">
 							<div class="gift-icon">
 								<font-awesome-icon icon="gift"/>
@@ -328,8 +328,8 @@ export default mixins(
 			openTagManager() {
 				this.$store.dispatch('ui/openTagsManagerModal');
 			},
-			openVersionsModal() {
-				this.$store.dispatch('ui/openVersionsModal');
+			openUpdatesPanel() {
+				this.$store.dispatch('ui/openUpdatesPanel');
 			},
 			async stopExecution () {
 				const executionId = this.$store.getters.activeExecutionId;
diff --git a/packages/editor-ui/src/components/Modals.vue b/packages/editor-ui/src/components/Modals.vue
index 2f0cf38f82d..83f836abd29 100644
--- a/packages/editor-ui/src/components/Modals.vue
+++ b/packages/editor-ui/src/components/Modals.vue
@@ -26,7 +26,7 @@
 		</ModalRoot>
 		<ModalRoot :name="VERSIONS_MODAL_KEY" :keepAlive="true">
 			<template v-slot="{ modalName, open }">
-				<VersionsModal
+				<UpdatesPanel
 					:modalName="modalName"
 					:visible="open"
 				/>
@@ -43,7 +43,7 @@ import TagsManager from "@/components/TagsManager/TagsManager.vue";
 import DuplicateWorkflowDialog from "@/components/DuplicateWorkflowDialog.vue";
 import WorkflowOpen from "@/components/WorkflowOpen.vue";
 import ModalRoot from "./ModalRoot.vue";
-import VersionsModal from "./VersionsModal.vue";
+import UpdatesPanel from "./UpdatesPanel.vue";
 
 export default Vue.extend({
 	name: "Modals",
@@ -52,7 +52,7 @@ export default Vue.extend({
 		DuplicateWorkflowDialog,
 		WorkflowOpen,
 		ModalRoot,
-		VersionsModal,
+		UpdatesPanel,
 	},
 	data: () => ({
 		DUPLICATE_MODAL_KEY,
diff --git a/packages/editor-ui/src/components/VersionsModal.vue b/packages/editor-ui/src/components/UpdatesPanel.vue
similarity index 91%
rename from packages/editor-ui/src/components/VersionsModal.vue
rename to packages/editor-ui/src/components/UpdatesPanel.vue
index 2e3cd7e69cc..e5023db6d84 100644
--- a/packages/editor-ui/src/components/VersionsModal.vue
+++ b/packages/editor-ui/src/components/UpdatesPanel.vue
@@ -5,13 +5,13 @@
 		:drawer="true"
 		:visible="visible"
 		drawerDirection="ltr"
-		drawerWidth="480px"
+		drawerWidth="520px"
 	>
 		<template slot="header">
 			<p :class="$style.title"> We’ve been busy ✨</p>
 		</template>
 		<template slot="content">
-			<section :class="$style['header-content']">
+			<section :class="$style['description']">
 				<p>You’re on {{ currentVersion.name }}, which was released <strong>{{currentReleaseDate}}</strong> and is {{ nextVersions.length }} version{{nextVersions.length > 1 ? 's' : ''}} behind the latest and greatest n8n</p>	
 
 				<a :class="$style.update" :href="UPDATE_INFO_URL" v-if="UPDATE_INFO_URL" target="_blank">
@@ -41,7 +41,7 @@ import VersionCard from './VersionCard.vue';
 import { UPDATE_INFO_URL } from '@/constants';
 
 export default Vue.extend({
-	name: 'VersionsModal',
+	name: 'UpdatesPanel',
 	components: {
 		Modal,
 		VersionCard,
@@ -65,14 +65,15 @@ export default Vue.extend({
 </script>
 
 <style module lang="scss">
-	.header-content {
+	.description {
 		padding: 0px 30px;
 		margin-bottom: 30px;
 
 		p {
-			font-size: 16px;
+			font-size: 14px;
 			line-height: 22px;
 			color: #7D7D87;
+			font-weight: 400;
 		}
 
 		div {
@@ -98,7 +99,7 @@ export default Vue.extend({
 		height: 100%;
 		padding: 30px;
 		overflow-y: scroll;
-		padding-bottom: 140px;
+		padding-bottom: 220px;
 	}
 
 	.versions-card {
@@ -107,6 +108,7 @@ export default Vue.extend({
 
 	.update {
 		text-decoration: none;
+		font-size: 14px;
 
 		svg {
 			color: #909399;
diff --git a/packages/editor-ui/src/components/VersionCard.vue b/packages/editor-ui/src/components/VersionCard.vue
index 82e4b959e82..c679bdd0ad3 100644
--- a/packages/editor-ui/src/components/VersionCard.vue
+++ b/packages/editor-ui/src/components/VersionCard.vue
@@ -5,12 +5,12 @@
 				<div :class="$style.name">
 					Version {{version.name}}
 				</div>
-				<el-tooltip class="item" effect="light" content=" " placement="top" v-if="version.hasSecurityIssue">
+				<el-tooltip effect="light" content=" " placement="top" v-if="version.hasSecurityIssue">
 					<div slot="content">This version has a security issue.<br/>It is listed here for completeness.</div>
 					<font-awesome-icon :class="$style['security-flag']" icon="exclamation-triangle"></font-awesome-icon>
 				</el-tooltip>
-				<el-tag type="danger" v-if="version.hasSecurityFix" size="small" :class="$style['security-update']">Security Update</el-tag>
-				<el-tag v-if="version.hasBreakingChange" size="small" :class="$style['breaking-change']">Breaking Change</el-tag>
+				<el-tag type="danger" v-if="version.hasSecurityFix" size="small" :class="$style['security-update']">Security update</el-tag>
+				<el-tag v-if="version.hasBreakingChange" size="small" :class="$style['breaking-change']">Breaking changes</el-tag>
 			</div>
 			<div :class="$style.released">
 				Released {{releaseDate}}
@@ -20,7 +20,6 @@
 			<div v-html="version.description" :class="$style.description"></div>
 			<div :class="$style.nodes" v-if="version.nodes && version.nodes.length > 0">
 				<NodeIcon 
-					:class="$style['node-icon']"
 					v-for="node in version.nodes"
 					:key="node.name"
 					:nodeType="node"
@@ -38,7 +37,7 @@ import NodeIcon from './NodeIcon.vue';
 
 export default Vue.extend({
 	components: { NodeIcon },
-	name: 'VersionsModal',
+	name: 'UpdatesPanel',
 	props: ['version'],
 	computed: {
 		releaseDate() {
@@ -57,6 +56,10 @@ export default Vue.extend({
 		padding: 15px;
 		padding-bottom: 10px;
 		text-decoration: none;
+
+		&:hover {
+			box-shadow: 0px 2px 10px rgba(109, 48, 40, 0.07);
+		}
 	}
 
 	.header {
@@ -88,6 +91,7 @@ export default Vue.extend({
 
 	.description {
 		font-size: 14px;
+		font-weight: 400;
 		line-height: 19px;
 		color: #7D7D87;
 		margin-top: 15px;
@@ -103,6 +107,11 @@ export default Vue.extend({
 		display: flex;
 		margin-top: 20px;
 		flex-wrap: wrap;
+
+		> div {
+			margin-right: 15px;
+			margin-bottom: 5px;
+		}
 	}
 
 	.security-update {
@@ -110,11 +119,6 @@ export default Vue.extend({
 		max-height: 18px;
 	}
 
-	.node-icon {
-		margin-right: 15px;
-		margin-bottom: 5px;
-	}
-
 	.breaking-change {
 		background-color: rgba(255, 229, 100, 0.3);
 		color: #6B5900;
@@ -128,6 +132,8 @@ export default Vue.extend({
 	}
 
 	.security-flag {
-		color: red;
+		font-size: 14px;
+		height: 18px;
+		color: #ff8080;
 	}
 </style>
diff --git a/packages/editor-ui/src/modules/ui.ts b/packages/editor-ui/src/modules/ui.ts
index 88a236b84e7..651131311ab 100644
--- a/packages/editor-ui/src/modules/ui.ts
+++ b/packages/editor-ui/src/modules/ui.ts
@@ -64,7 +64,7 @@ const module: Module<IUiState, IRootState> = {
 		openDuplicateModal: async (context: ActionContext<IUiState, IRootState>) => {
 			context.commit('openModal', DUPLICATE_MODAL_KEY);
 		},
-		openVersionsModal: async (context: ActionContext<IUiState, IRootState>) => {
+		openUpdatesPanel: async (context: ActionContext<IUiState, IRootState>) => {
 			context.commit('openModal', VERSIONS_MODAL_KEY);
 		},
 	},
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 4380a30492a..77766c81071 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -2247,10 +2247,10 @@ export default mixins(
 							message = `Please update to version ${fixVersion} or higher.`;
 						}
 
-						message = `${message}<br/><a class="primary-color">More info</a>`;
+						message = `${message} <a class="primary-color">More info</a>`;
 						this.$showWarning('Critical Update', message, {
 							onClick: () => {
-								this.$store.dispatch('ui/openVersionsModal');
+								this.$store.dispatch('ui/openUpdatesPanel');
 							},
 							closeOnClick: true,
 							customClass: 'clickable',