imrpve

frontend/src/views/labels/ListLabels.vue

@@ -29,25 +29,23 @@
 
 		<div class="columns">
 			<div class="labels-list column">
-				<span
+				<RouterLink
 					v-for="label in labelStore.labelsArray"
 					:key="label.id"
+					:to="{name: 'home', query: {labels: label.id.toString()}}"
+					:style="getLabelStyles(label)"
+					class="tag"
 					:class="{'disabled': userInfo.id !== label.createdBy.id}"
-					class="label-item"
 				>
-					<RouterLink
-						:to="{name: 'home', query: {labels: label.id.toString()}}"
-						:style="getLabelStyles(label)"
-						class="tag tag-clickable"
-					>
-						<span>{{ label.title }}</span>
-					</RouterLink>
+					<span>{{ label.title }}</span>
 					<BaseButton
 						v-if="userInfo.id === label.createdBy.id"
-						class="delete is-small"
-						@click="editLabel(label)"
-					/>
-				</span>
+						class="label-edit-button is-small"
+						@click.stop.prevent="editLabel(label)"
+					>
+						<Icon icon="pen" class="icon"/>
+					</BaseButton>
+				</RouterLink>
 			</div>
 			<div
 				v-if="isLabelEdit"
@@ -207,23 +205,19 @@ function showDeleteDialoge(label: ILabel) {
 </script>
 
 <style lang="scss" scoped>
-.label-item {
-	display: inline-flex;
-	align-items: center;
-	gap: 0.25rem;
-	margin: 0.25rem;
-	
-	&.disabled {
-		opacity: 0.6;
-	}
-	
-	.tag-clickable {
-		cursor: pointer;
-		transition: opacity $transition;
-		
-		&:hover {
-			opacity: 0.8;
-		}
+.label-edit-button {
+	border-radius: 100%;
+	background-color: rgba(0,0,0,0.2);
+	width: 1rem;
+	height: 1rem;
+	display: flex;
+  	align-items: center;
+  	justify-content: center;
+	color: #fff; // always white
+	margin-inline-start: .25rem;
+
+	.icon {
+		height: .5rem;
 	}
 }
 </style>

frontend/src/views/tasks/ShowTasks.vue

@@ -6,7 +6,7 @@
 		<h3 class="mbe-2 title">
 			{{ pageTitle }}
 		</h3>
-		<div
+		<Message
 			v-if="filteredLabels.length > 0"
 			class="label-filter-info mbe-2"
 		>
@@ -30,7 +30,7 @@
 			>
 				<Icon icon="times" />
 			</BaseButton>
-		</div>
+		</Message>
 		<p
 			v-if="!showAll"
 			class="show-tasks-options"
@@ -103,6 +103,7 @@ import {setTitle} from '@/helpers/setTitle'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Icon from '@/components/misc/Icon'
+import Message from '@/components/misc/Message.vue'
 import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
 import SingleTaskInProject from '@/components/tasks/partials/SingleTaskInProject.vue'
 import DatepickerWithRange from '@/components/date/DatepickerWithRange.vue'
@@ -300,16 +301,7 @@ watchEffect(() => setTitle(pageTitle.value))
 }
 
 .label-filter-info {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	padding: 0.5rem;
-	background-color: var(--grey-100);
-	border-radius: $radius;
-	
-	.filter-label-text {
-		color: var(--grey-700);
-	}
+	margin-block-end: 1rem;
 	
 	.clear-filter-button {
 		margin-inline-start: auto;
@@ -319,5 +311,13 @@ watchEffect(() => setTitle(pageTitle.value))
 			color: var(--danger);
 		}
 	}
+
+	:deep(.message.info) {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+	}
 }
 </style>