src/components/lists/ShowList.vue

@@ -242,13 +242,13 @@
 												label="title"
 												track-by="id">
 											<template slot="tag" slot-scope="{ option, remove }">
-												<span class="tag">
+												<span class="tag" :style="{'background': '#' + option.hex_color}">
 													<span>{{ option.title }}</span>
 													<button class="delete is-small" @click="removeLabel(option)"></button>
 												</span>
 											</template>
 											<template slot="clear" slot-scope="props">
-												<div class="multiselect__clear" v-if="newLabel !== null && newLabel.id !== 0" @mousedown.prevent.stop="clearAllLabels(props.search)"></div>
+												<div class="multiselect__clear" v-if="taskEditTask.labels.length" @mousedown.prevent.stop="clearAllLabels(props.search)"></div>
 											</template>
 											<span slot="noResult">No label found. Change the search query <br/>or hit enter to create the label.</span>
 										</multiselect>
@@ -314,7 +314,6 @@
 	import UserModel from '../../models/user'
 	import UserService from '../../services/user'
 	import priorities from '../../models/priorities'
-	import LabelModel from '../../models/label'
 	import LabelTaskService from '../../services/labelTask'
 	import LabelService from '../../services/label'
 	import LabelTaskModel from '../../models/labelTask'
@@ -348,7 +347,6 @@
 				userService: UserService,
 				foundUsers: [],
 
-				newLabel: LabelModel,
 				labelService: LabelService,
 				labelTaskService: LabelTaskService,
 				foundLabels: [],
@@ -372,7 +370,6 @@
 			this.newAssignee = new UserModel()
 			this.labelService = new LabelService()
 			this.labelTaskService = new LabelTaskService()
-			this.newLabel = new LabelModel()
 			this.loadList()
 		},
 		watch: {

src/styles/tasks.scss

@@ -139,4 +139,12 @@
       }
     }
   }
+
+  .tag{
+    margin-right: 0.5em;
+
+    &:last-child{
+      margin-right: 0;
+    }
+  }
 }