feat: add Done component

src/components/tasks/partials/heading.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="heading">
 		<h1 class="title task-id">{{ textIdentifier }}</h1>
-		<div class="is-done" v-if="task.done">Done</div>
+		<Done class="heading__done" :is-done="task.done" />
 		<h1
 			class="title input"
 			:class="{'disabled': !canWrite}"
@@ -28,8 +28,13 @@
 <script>
 import {mapState} from 'vuex'
 
+import Done from '@/components/misc/Done.vue'
+
 export default {
 	name: 'heading',
+	components: {
+		Done,
+	},
 	data() {
 		return {
 			showSavedMessage: false,
@@ -90,3 +95,8 @@ export default {
 }
 </script>
 
+<style lang="scss" scoped>
+.heading__done {
+	margin-left: .5rem;
+}
+</style>

src/components/tasks/partials/kanban-card.vue

@@ -12,7 +12,7 @@
 		class="task loader-container draggable"
 	>
 		<span class="task-id">
-			<span class="is-done" v-if="task.done">Done</span>
+			<Done class="kanban-card__done" :is-done="task.done" variant="small" />
 			<template v-if="task.identifier === ''">
 				#{{ task.index }}
 			</template>
@@ -66,6 +66,7 @@
 import {playPop} from '../../../helpers/playPop'
 import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
 import User from '../../../components/misc/user'
+import Done from '@/components/misc/Done.vue'
 import Labels from '../../../components/tasks/partials/labels'
 import ChecklistSummary from './checklist-summary'
 
@@ -73,6 +74,7 @@ export default {
 	name: 'kanban-card',
 	components: {
 		ChecklistSummary,
+		Done,
 		PriorityLabel,
 		User,
 		Labels,
@@ -230,12 +232,6 @@ $task-background: $white;
 		display: flex;
 	}
 
-	.is-done {
-		font-size: .75rem;
-		padding: .2rem .3rem;
-		margin: 0 .25rem 0 0;
-	}
-
 	&.is-moving {
 		opacity: .5;
 	}
@@ -264,4 +260,8 @@ $task-background: $white;
 		}
 	}
 }
+
+.kanban-card__done {
+	margin-right: .25rem;
+}
 </style>