feat: improve priority visibility

(cherry picked from commit d35454c099f1f4aceb513634b7c531272fa8d550)

frontend/src/components/misc/Icon.ts

@@ -28,7 +28,7 @@ import {
 	faDownload,
 	faEllipsisH,
 	faEllipsisV,
-	faExclamation,
+	faExclamationCircle,
 	faEye,
 	faEyeSlash,
 	faFile,
@@ -138,7 +138,7 @@ library.add(faCopy)
 library.add(faDownload)
 library.add(faEllipsisH)
 library.add(faEllipsisV)
-library.add(faExclamation)
+library.add(faExclamationCircle)
 library.add(faEye)
 library.add(faEyeSlash)
 library.add(faFillDrip)

frontend/src/components/tasks/partials/PriorityLabel.vue

@@ -1,14 +1,17 @@
 <template>
 	<span
 		v-if="!done && (showAll || priority >= priorities.HIGH)"
-		:class="{'not-so-high': priority === priorities.HIGH, 'high-priority': priority >= priorities.HIGH}"
+		:class="{
+			'not-so-high': priority === priorities.HIGH,
+			'high-priority': priority >= priorities.HIGH
+		}"
 		class="priority-label"
 	>
 		<span
 			v-if="priority >= priorities.HIGH"
 			class="icon"
 		>
-			<Icon icon="exclamation" />
+			<Icon icon="exclamation-circle" />
 		</span>
 		<span>
 			<template v-if="priority === priorities.UNSET">{{ $t('task.priority.unset') }}</template>
@@ -18,12 +21,6 @@
 			<template v-if="priority === priorities.URGENT">{{ $t('task.priority.urgent') }}</template>
 			<template v-if="priority === priorities.DO_NOW">{{ $t('task.priority.doNow') }}</template>
 		</span>
-		<span
-			v-if="priority === priorities.DO_NOW"
-			class="icon pr-0"
-		>
-			<Icon icon="exclamation" />
-		</span>
 	</span>
 </template>
 
@@ -42,18 +39,18 @@ withDefaults(defineProps<{
 </script>
 
 <style lang="scss" scoped>
-span.high-priority {
+.high-priority {
 	color: var(--danger);
 	width: auto !important; // To override the width set in tasks
+}
 
-	.icon {
-		vertical-align: top;
-		width: auto !important;
-		padding: 0 .5rem;
-	}
+.not-so-high {
+	color: var(--warning);
+}
 
-	&.not-so-high {
-		color: var(--warning);
-	}
+.icon {
+	vertical-align: top;
+	width: auto !important;
+	padding-right: .5rem;
 }
 </style>

frontend/src/views/tasks/TaskDetailView.vue

@@ -86,7 +86,7 @@
 							>
 								<!-- Priority -->
 								<div class="detail-title">
-									<Icon icon="exclamation" />
+									<Icon icon="exclamation-circle" />
 									{{ $t('task.attributes.priority') }}
 								</div>
 								<PrioritySelect
@@ -441,7 +441,7 @@
 						<x-button
 							v-shortcut="'p'"
 							variant="secondary"
-							icon="exclamation"
+							icon="exclamation-circle"
 							@click="setFieldActive('priority')"
 						>
 							{{ $t('task.detail.actions.priority') }}