From 7fb85dacecdae597180553036243ab845d50ede5 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 5 Apr 2023 09:09:00 +0200
Subject: [PATCH 01/13] feat: allow hiding the quick add magic help tooltip
 with a button

---
 src/components/tasks/add-task.vue                 | 15 +++++----------
 src/components/tasks/partials/quick-add-magic.vue |  3 +++
 src/i18n/lang/en.json                             |  1 +
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue
index 834709f70..00f2c24ce 100644
--- a/src/components/tasks/add-task.vue
+++ b/src/components/tasks/add-task.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="task-add" ref="taskAdd">
+	<div class="task-add">
 		<div class="add-task__field field is-grouped">
 			<p class="control has-icons-left is-expanded">
 				<textarea
@@ -32,11 +32,11 @@
 				</x-button>
 			</p>
 		</div>
-		<Expandable :open="errorMessage !== '' || taskAddFocused || taskAddHovered && debouncedTaskAddHovered">
+		<Expandable :open="errorMessage !== '' || showQuickAddMagicHelp">
 			<p class="pt-3 mt-0 help is-danger" v-if="errorMessage !== ''">
 				{{ errorMessage }}
 			</p>
-			<quick-add-magic v-else class="quick-add-magic" />
+			<quick-add-magic v-else class="quick-add-magic" @hide="() => showQuickAddMagicHelp = false"/>
 		</Expandable>
 	</div>
 </template>
@@ -44,7 +44,7 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {refDebounced, useElementHover, useFocusWithin} from '@vueuse/core'
+import {useLocalStorage} from '@vueuse/core'
 
 import {RELATION_KIND} from '@/types/IRelationKind'
 import type {ITask} from '@/modelTypes/ITask'
@@ -77,8 +77,6 @@ const {t} = useI18n({useScope: 'global'})
 const authStore = useAuthStore()
 const taskStore = useTaskStore()
 
-const taskAdd = ref<HTMLTextAreaElement | null>(null)
-
 // enable only if we don't have a modal
 // onStartTyping(() => {
 // 	if (newTaskInput.value === null || document.activeElement === newTaskInput.value) {
@@ -87,10 +85,7 @@ const taskAdd = ref<HTMLTextAreaElement | null>(null)
 // 	newTaskInput.value.focus()
 // })
 
-const { focused: taskAddFocused } = useFocusWithin(taskAdd)
-
-const taskAddHovered = useElementHover(taskAdd)
-const debouncedTaskAddHovered = refDebounced(taskAddHovered, 500)
+const showQuickAddMagicHelp = useLocalStorage('show-quick-add-magic', true)
 
 const errorMessage = ref('')
 
diff --git a/src/components/tasks/partials/quick-add-magic.vue b/src/components/tasks/partials/quick-add-magic.vue
index 488f04275..75c667e65 100644
--- a/src/components/tasks/partials/quick-add-magic.vue
+++ b/src/components/tasks/partials/quick-add-magic.vue
@@ -3,6 +3,7 @@
 		<p class="help has-text-grey">
 			{{ $t('task.quickAddMagic.hint') }}.
 			<ButtonLink @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</ButtonLink>
+			<ButtonLink @click="() => emit('hide')" class="ml-1">{{ $t('task.quickAddMagic.hide') }}</ButtonLink>
 		</p>
 		<modal
 			:enabled="visible"
@@ -97,6 +98,8 @@ import ButtonLink from '@/components/misc/ButtonLink.vue'
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {PREFIXES} from '@/modules/parseTaskText'
 
+const emit = defineEmits(['hide'])
+
 const visible = ref(false)
 const mode = ref(getQuickAddMagicMode())
 
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 6faaed9fb..6a868069f 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -738,6 +738,7 @@
     },
     "quickAddMagic": {
       "hint": "You can use Quick Add Magic",
+      "hide": "Hide",
       "what": "What?",
       "title": "Quick Add Magic",
       "intro": "When creating a task, you can use special keywords to directly add attributes to the newly created task. This allows to add commonly used attributes to tasks much faster.",

From 69895589636ee6369c9778f529bf1df953acb7b1 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 11 Apr 2023 19:09:32 +0200
Subject: [PATCH 02/13] feat: move quick add magic to a popup behind an icon

---
 src/components/misc/Icon.ts                   |  2 ++
 src/components/tasks/add-task.vue             | 11 ++------
 .../tasks/partials/quick-add-magic.vue        | 26 ++++++++++++-------
 src/i18n/lang/en.json                         |  4 +--
 4 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/components/misc/Icon.ts b/src/components/misc/Icon.ts
index b1ce58ee4..4f6698462 100644
--- a/src/components/misc/Icon.ts
+++ b/src/components/misc/Icon.ts
@@ -67,6 +67,7 @@ import {
 	faStar,
 	faSun,
 	faTimesCircle,
+	faCircleQuestion,
 } from '@fortawesome/free-regular-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
 
@@ -86,6 +87,7 @@ library.add(faCheckDouble)
 library.add(faChessKnight)
 library.add(faChevronDown)
 library.add(faCircleInfo)
+library.add(faCircleQuestion)
 library.add(faClock)
 library.add(faCloudDownloadAlt)
 library.add(faCloudUploadAlt)
diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue
index 00f2c24ce..fd2435fe1 100644
--- a/src/components/tasks/add-task.vue
+++ b/src/components/tasks/add-task.vue
@@ -16,6 +16,7 @@
 				<span class="icon is-small is-left">
 					<icon icon="tasks"/>
 				</span>
+				<quick-add-magic/>
 			</p>
 			<p class="control">
 				<x-button
@@ -32,11 +33,10 @@
 				</x-button>
 			</p>
 		</div>
-		<Expandable :open="errorMessage !== '' || showQuickAddMagicHelp">
+		<Expandable :open="errorMessage !== ''">
 			<p class="pt-3 mt-0 help is-danger" v-if="errorMessage !== ''">
 				{{ errorMessage }}
 			</p>
-			<quick-add-magic v-else class="quick-add-magic" @hide="() => showQuickAddMagicHelp = false"/>
 		</Expandable>
 	</div>
 </template>
@@ -44,7 +44,6 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useLocalStorage} from '@vueuse/core'
 
 import {RELATION_KIND} from '@/types/IRelationKind'
 import type {ITask} from '@/modelTypes/ITask'
@@ -85,8 +84,6 @@ const taskStore = useTaskStore()
 // 	newTaskInput.value.focus()
 // })
 
-const showQuickAddMagicHelp = useLocalStorage('show-quick-add-magic', true)
-
 const errorMessage = ref('')
 
 function resetEmptyTitleError(e: KeyboardEvent) {
@@ -238,8 +235,4 @@ defineExpose({
 	white-space: nowrap;
 	text-overflow: ellipsis;
 }
-
-.quick-add-magic {
-	padding-top: 0.75rem;
-}
 </style>
diff --git a/src/components/tasks/partials/quick-add-magic.vue b/src/components/tasks/partials/quick-add-magic.vue
index 75c667e65..1eb123768 100644
--- a/src/components/tasks/partials/quick-add-magic.vue
+++ b/src/components/tasks/partials/quick-add-magic.vue
@@ -1,10 +1,13 @@
 <template>
 	<div v-if="mode !== 'disabled' && prefixes !== undefined">
-		<p class="help has-text-grey">
-			{{ $t('task.quickAddMagic.hint') }}.
-			<ButtonLink @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</ButtonLink>
-			<ButtonLink @click="() => emit('hide')" class="ml-1">{{ $t('task.quickAddMagic.hide') }}</ButtonLink>
-		</p>
+		<BaseButton
+			@click="() => visible = true"
+			class="icon is-small show-helper-text"
+			v-tooltip="$t('task.quickAddMagic.hint')"
+			:aria-label="$t('task.quickAddMagic.hint')"
+		>
+			<icon :icon="['far', 'circle-question']"/>
+		</BaseButton>
 		<modal
 			:enabled="visible"
 			@close="() => visible = false"
@@ -70,7 +73,7 @@
 					<li>17th ({{ $t('task.quickAddMagic.dateNth', {day: '17'}) }})</li>
 				</ul>
 				<p>{{ $t('task.quickAddMagic.dateTime', {time: 'at 17:00', timePM: '5pm'}) }}</p>
-				
+
 				<h3>{{ $t('task.quickAddMagic.repeats') }}</h3>
 				<p>{{ $t('task.quickAddMagic.repeatsDescription', {suffix: 'every {amount} {type}'}) }}</p>
 				<p>{{ $t('misc.forExample') }}</p>
@@ -93,15 +96,20 @@
 <script setup lang="ts">
 import {ref, computed} from 'vue'
 
-import ButtonLink from '@/components/misc/ButtonLink.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
 
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {PREFIXES} from '@/modules/parseTaskText'
 
-const emit = defineEmits(['hide'])
-
 const visible = ref(false)
 const mode = ref(getQuickAddMagicMode())
 
 const prefixes = computed(() => PREFIXES[mode.value])
 </script>
+
+<style scoped>
+.show-helper-text {
+	right: 0;
+	pointer-events: auto !important;
+}
+</style>
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 6a868069f..96da68f2a 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -737,9 +737,7 @@
       "invalidAmount": "Please enter more than 0."
     },
     "quickAddMagic": {
-      "hint": "You can use Quick Add Magic",
-      "hide": "Hide",
-      "what": "What?",
+      "hint": "You can use Quick Add Magic. Click to learn more.",
       "title": "Quick Add Magic",
       "intro": "When creating a task, you can use special keywords to directly add attributes to the newly created task. This allows to add commonly used attributes to tasks much faster.",
       "multiple": "You can use this multiple times.",

From 2c9693a83eeca832d49d519c5676ae30569628ca Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 12 Apr 2023 09:50:00 +0200
Subject: [PATCH 03/13] chore: remove wrapper div

---
 src/components/tasks/partials/quick-add-magic.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/tasks/partials/quick-add-magic.vue b/src/components/tasks/partials/quick-add-magic.vue
index 1eb123768..5b3f954f0 100644
--- a/src/components/tasks/partials/quick-add-magic.vue
+++ b/src/components/tasks/partials/quick-add-magic.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-if="mode !== 'disabled' && prefixes !== undefined">
+	<template v-if="mode !== 'disabled' && prefixes !== undefined">
 		<BaseButton
 			@click="() => visible = true"
 			class="icon is-small show-helper-text"
@@ -90,7 +90,7 @@
 				</ul>
 			</card>
 		</modal>
-	</div>
+	</template>
 </template>
 
 <script setup lang="ts">

From a6cdf6c4bdceb1168f20e9d049c2e66f40c98aa1 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 12 Apr 2023 10:05:18 +0200
Subject: [PATCH 04/13] fix: improve tooltip icon contrast

---
 src/components/tasks/partials/quick-add-magic.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/tasks/partials/quick-add-magic.vue b/src/components/tasks/partials/quick-add-magic.vue
index 5b3f954f0..031493e6a 100644
--- a/src/components/tasks/partials/quick-add-magic.vue
+++ b/src/components/tasks/partials/quick-add-magic.vue
@@ -111,5 +111,6 @@ const prefixes = computed(() => PREFIXES[mode.value])
 .show-helper-text {
 	right: 0;
 	pointer-events: auto !important;
+	color: inherit !important;
 }
 </style>

From 21746088012f4fe0f750ed5e5cac916d506fb17b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 12 Apr 2023 10:05:31 +0200
Subject: [PATCH 05/13] fix: improve tooltip text

---
 src/i18n/lang/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 96da68f2a..dee4a9f32 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -737,7 +737,7 @@
       "invalidAmount": "Please enter more than 0."
     },
     "quickAddMagic": {
-      "hint": "You can use Quick Add Magic. Click to learn more.",
+      "hint": "Use magic prefixes to define due dates, assignees and other task properties.",
       "title": "Quick Add Magic",
       "intro": "When creating a task, you can use special keywords to directly add attributes to the newly created task. This allows to add commonly used attributes to tasks much faster.",
       "multiple": "You can use this multiple times.",

From abb51284269d84de14d0a156c386c63dc596b9ab Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 12 Apr 2023 18:24:59 +0200
Subject: [PATCH 06/13] feat: add transition to input icons

---
 src/components/tasks/partials/quick-add-magic.vue | 3 +--
 src/styles/theme/form.scss                        | 8 +++++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/tasks/partials/quick-add-magic.vue b/src/components/tasks/partials/quick-add-magic.vue
index 031493e6a..3cdb76387 100644
--- a/src/components/tasks/partials/quick-add-magic.vue
+++ b/src/components/tasks/partials/quick-add-magic.vue
@@ -107,10 +107,9 @@ const mode = ref(getQuickAddMagicMode())
 const prefixes = computed(() => PREFIXES[mode.value])
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .show-helper-text {
 	right: 0;
 	pointer-events: auto !important;
-	color: inherit !important;
 }
 </style>
diff --git a/src/styles/theme/form.scss b/src/styles/theme/form.scss
index 86c78f2fd..dc2ac1205 100644
--- a/src/styles/theme/form.scss
+++ b/src/styles/theme/form.scss
@@ -57,7 +57,7 @@
 }
 
 .field.has-addons .control .select select {
-    height: 100%;
+  height: 100%;
 }
 
 .control.has-icons-left .icon,
@@ -103,3 +103,9 @@ h1, h2, h3 {
     height: auto;
   }
 }
+
+// Global style, because the rest of this styling is imported from bulma
+.control.has-icons-left .icon,
+.control.has-icons-right .icon {
+  transition: all $transition;
+}

From 422d7fc693caf886a49d03ff48b56ae6ce825356 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 12 Apr 2023 18:30:59 +0200
Subject: [PATCH 07/13] feat: highlight hint icon when hovering the input

---
 src/components/tasks/add-task.vue                 | 8 ++++++--
 src/components/tasks/partials/quick-add-magic.vue | 9 +++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue
index fd2435fe1..a467bf0ac 100644
--- a/src/components/tasks/add-task.vue
+++ b/src/components/tasks/add-task.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="task-add">
+	<div class="task-add" ref="taskAdd">
 		<div class="add-task__field field is-grouped">
 			<p class="control has-icons-left is-expanded">
 				<textarea
@@ -16,7 +16,7 @@
 				<span class="icon is-small is-left">
 					<icon icon="tasks"/>
 				</span>
-				<quick-add-magic/>
+				<quick-add-magic :highlight-hint-icon="taskAddHovered"/>
 			</p>
 			<p class="control">
 				<x-button
@@ -44,6 +44,7 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
+import {useElementHover} from '@vueuse/core'
 
 import {RELATION_KIND} from '@/types/IRelationKind'
 import type {ITask} from '@/modelTypes/ITask'
@@ -84,6 +85,9 @@ const taskStore = useTaskStore()
 // 	newTaskInput.value.focus()
 // })
 
+const taskAdd = ref<HTMLTextAreaElement | null>(null)
+const taskAddHovered = useElementHover(taskAdd)
+
 const errorMessage = ref('')
 
 function resetEmptyTitleError(e: KeyboardEvent) {
diff --git a/src/components/tasks/partials/quick-add-magic.vue b/src/components/tasks/partials/quick-add-magic.vue
index 3cdb76387..95bc2bf8e 100644
--- a/src/components/tasks/partials/quick-add-magic.vue
+++ b/src/components/tasks/partials/quick-add-magic.vue
@@ -5,6 +5,7 @@
 			class="icon is-small show-helper-text"
 			v-tooltip="$t('task.quickAddMagic.hint')"
 			:aria-label="$t('task.quickAddMagic.hint')"
+			:class="{'is-highlighted': highlightHintIcon}"
 		>
 			<icon :icon="['far', 'circle-question']"/>
 		</BaseButton>
@@ -104,6 +105,10 @@ import {PREFIXES} from '@/modules/parseTaskText'
 const visible = ref(false)
 const mode = ref(getQuickAddMagicMode())
 
+const props = defineProps<{
+	highlightHintIcon: boolean,
+}>()
+
 const prefixes = computed(() => PREFIXES[mode.value])
 </script>
 
@@ -111,5 +116,9 @@ const prefixes = computed(() => PREFIXES[mode.value])
 .show-helper-text {
 	right: 0;
 	pointer-events: auto !important;
+	
+	&.is-highlighted {
+		color: inherit !important;
+	}
 }
 </style>

From c294f9d28d3e793f8151265d5a16ed2fc53aea92 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Fri, 14 Apr 2023 14:15:48 +0200
Subject: [PATCH 08/13] fix: lint

---
 src/components/tasks/partials/quick-add-magic.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/tasks/partials/quick-add-magic.vue b/src/components/tasks/partials/quick-add-magic.vue
index 95bc2bf8e..476a70ae3 100644
--- a/src/components/tasks/partials/quick-add-magic.vue
+++ b/src/components/tasks/partials/quick-add-magic.vue
@@ -105,7 +105,7 @@ import {PREFIXES} from '@/modules/parseTaskText'
 const visible = ref(false)
 const mode = ref(getQuickAddMagicMode())
 
-const props = defineProps<{
+defineProps<{
 	highlightHintIcon: boolean,
 }>()
 

From a4c8fccb115f019840025659c7a8a4bac31eee04 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 14 Apr 2023 15:56:09 +0200
Subject: [PATCH 09/13] chore: remove nesting

---
 src/components/tasks/partials/quick-add-magic.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/tasks/partials/quick-add-magic.vue b/src/components/tasks/partials/quick-add-magic.vue
index 476a70ae3..dacc3f8f0 100644
--- a/src/components/tasks/partials/quick-add-magic.vue
+++ b/src/components/tasks/partials/quick-add-magic.vue
@@ -116,9 +116,10 @@ const prefixes = computed(() => PREFIXES[mode.value])
 .show-helper-text {
 	right: 0;
 	pointer-events: auto !important;
-	
-	&.is-highlighted {
-		color: inherit !important;
-	}
+
+}
+
+.is-highlighted {
+	color: inherit !important;
 }
 </style>

From 7110c9a5ceb58e6e9675c0f91ddb34c9ab8f2cbc Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 14 Apr 2023 16:03:12 +0200
Subject: [PATCH 10/13] chore: move positioning css

---
 src/components/tasks/add-task.vue                 | 6 ++++++
 src/components/tasks/partials/quick-add-magic.vue | 2 --
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue
index a467bf0ac..09a952e7f 100644
--- a/src/components/tasks/add-task.vue
+++ b/src/components/tasks/add-task.vue
@@ -240,3 +240,9 @@ defineExpose({
 	text-overflow: ellipsis;
 }
 </style>
+
+<style>
+button.show-helper-text {
+	right: 0;
+}
+</style>
diff --git a/src/components/tasks/partials/quick-add-magic.vue b/src/components/tasks/partials/quick-add-magic.vue
index dacc3f8f0..5d0f8e536 100644
--- a/src/components/tasks/partials/quick-add-magic.vue
+++ b/src/components/tasks/partials/quick-add-magic.vue
@@ -114,9 +114,7 @@ const prefixes = computed(() => PREFIXES[mode.value])
 
 <style lang="scss" scoped>
 .show-helper-text {
-	right: 0;
 	pointer-events: auto !important;
-
 }
 
 .is-highlighted {

From 21ad8301f28ba838c577acb72cb66ea00e176876 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 14 Apr 2023 21:19:14 +0200
Subject: [PATCH 11/13] chore: add comment on overriding

---
 src/components/tasks/partials/quick-add-magic.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/tasks/partials/quick-add-magic.vue b/src/components/tasks/partials/quick-add-magic.vue
index 5d0f8e536..39582e0c3 100644
--- a/src/components/tasks/partials/quick-add-magic.vue
+++ b/src/components/tasks/partials/quick-add-magic.vue
@@ -114,6 +114,7 @@ const prefixes = computed(() => PREFIXES[mode.value])
 
 <style lang="scss" scoped>
 .show-helper-text {
+	// Bulma adds pointer-events: none to the icon so we need to override it back here.
 	pointer-events: auto !important;
 }
 

From dfa6cd777bc5d03cf88d62db9008aa0b366aa806 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 14 Apr 2023 21:20:07 +0200
Subject: [PATCH 12/13] fix: add more padding to the textarea

---
 src/components/tasks/add-task.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue
index 09a952e7f..4c8f98940 100644
--- a/src/components/tasks/add-task.vue
+++ b/src/components/tasks/add-task.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="task-add" ref="taskAdd">
 		<div class="add-task__field field is-grouped">
-			<p class="control has-icons-left is-expanded">
+			<p class="control has-icons-left has-icons-right is-expanded">
 				<textarea
 					class="add-task-textarea input"
 					:class="{'textarea-empty': newTaskTitle === ''}"

From 25c3b7bcbfb4ddc2163092ed7c1d5e4758967f1b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 14 Apr 2023 21:21:49 +0200
Subject: [PATCH 13/13] chore: move styles to components

---
 src/components/tasks/add-task.vue | 5 +++++
 src/styles/theme/form.scss        | 6 ------
 src/views/project/ProjectList.vue | 5 +++++
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue
index 4c8f98940..4c18f10b2 100644
--- a/src/components/tasks/add-task.vue
+++ b/src/components/tasks/add-task.vue
@@ -239,6 +239,11 @@ defineExpose({
 	white-space: nowrap;
 	text-overflow: ellipsis;
 }
+
+.control.has-icons-left .icon,
+.control.has-icons-right .icon {
+	transition: all $transition;
+}
 </style>
 
 <style>
diff --git a/src/styles/theme/form.scss b/src/styles/theme/form.scss
index dc2ac1205..5d43501d9 100644
--- a/src/styles/theme/form.scss
+++ b/src/styles/theme/form.scss
@@ -103,9 +103,3 @@ h1, h2, h3 {
     height: auto;
   }
 }
-
-// Global style, because the rest of this styling is imported from bulma
-.control.has-icons-left .icon,
-.control.has-icons-right .icon {
-  transition: all $transition;
-}
diff --git a/src/views/project/ProjectList.vue b/src/views/project/ProjectList.vue
index 1cce8e512..07b4450a4 100644
--- a/src/views/project/ProjectList.vue
+++ b/src/views/project/ProjectList.vue
@@ -301,4 +301,9 @@ function prepareFiltersAndLoadTasks() {
   border: none;
   box-shadow: none;
 }
+
+.control.has-icons-left .icon,
+.control.has-icons-right .icon {
+	transition: all $transition;
+}
 </style>
\ No newline at end of file