From 003fbca9518fa7fa135c7a602a5ba87d32e7aa17 Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Thu, 1 Jul 2021 17:42:01 +0200
Subject: [PATCH] clean up badges

---
 .../editor-ui/src/components/VersionCard.vue  | 33 ++++++++++++++++---
 .../src/components/VersionsModal.vue          |  4 +--
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/packages/editor-ui/src/components/VersionCard.vue b/packages/editor-ui/src/components/VersionCard.vue
index cdebcd8930..44132f4a52 100644
--- a/packages/editor-ui/src/components/VersionCard.vue
+++ b/packages/editor-ui/src/components/VersionCard.vue
@@ -4,13 +4,14 @@
 			<div :class="$style.name">
 				Version {{version.name}}
 			</div>
+			<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>
 			<div :class="$style.released">
 				Released {{releaseDate}}
 			</div>
 		</div>
 		<div>
-			<div v-html="version.description" :class="$style.description">
-			</div>
+			<div v-html="version.description" :class="$style.description"></div>
 			<div :class="$style.nodes" v-if="version.nodes && version.nodes.length > 0">
 				<NodeIcon 
 					v-for="node in version.nodes"
@@ -52,12 +53,17 @@ export default Vue.extend({
 
 	.header {
 		display: flex;
+		flex-wrap: wrap;
 		border-bottom: 1px solid #DBDFE7;
-		padding-bottom: 15px;
+		padding-bottom: 10px;
+
+		> * {
+			margin-right: 5px;
+			margin-bottom: 5px;
+		}
 	}
 
 	.name {
-		flex-grow: 1;
 		font-weight: 600;
 		font-size: 16px;
 		line-height: 18px;
@@ -72,13 +78,32 @@ export default Vue.extend({
 	}
 
 	.released {
+		flex-grow: 1;
 		font-size: 12px;
 		line-height: 18px;
 		color: #909399;
+		text-align: right;
 	}
 
 	.nodes {
 		display: flex;
 		margin-top: 20px;
 	}
+
+	.security-update {
+		line-height: 18px;
+		max-height: 18px;
+	}
+
+	.breaking-change {
+		background-color: rgba(255, 229, 100, 0.3);
+		color: #6B5900;
+		border: none;
+		font-size: 11px;
+		line-height: 18px;
+		max-height: 18px;
+		font-weight: 400;
+		display: flex;
+		align-items: center;
+	}
 </style>
diff --git a/packages/editor-ui/src/components/VersionsModal.vue b/packages/editor-ui/src/components/VersionsModal.vue
index 42cc3f51f5..ef0d829c39 100644
--- a/packages/editor-ui/src/components/VersionsModal.vue
+++ b/packages/editor-ui/src/components/VersionsModal.vue
@@ -10,7 +10,7 @@
 		</template>
 		<template slot="content">
 			<section :class="$style['header-content']">
-				<p>You’re on {{ currentVersion.name }}, which is <strong>{{currentReleaseDate}}</strong> and {{ nextVersions.length }} version{{nextVersions.length > 1 ? 's' : ''}} behind the latest and greatest n8n</p>	
+				<p>You’re on {{ currentVersion.name }}, which was released <strong>{{currentReleaseDate}}</strong> and {{ 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">
 					<font-awesome-icon icon="info-circle"></font-awesome-icon>
@@ -56,7 +56,7 @@ export default Vue.extend({
 			'currentVersion',
 		]),
 		currentReleaseDate() {
-			return format(this.currentVersion.createdAt).replace('ago', 'old');
+			return format(this.currentVersion.createdAt);
 		},
 	},
 });