feat: camelcase global components

2024-06-18 17:48:04 +02:00 · 2024-06-18 17:48:04 +02:00 · f36115871c
commit f36115871c
parent 1977a7bee0
74 changed files with 236 additions and 236 deletions
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@ -24,7 +24,7 @@ module.exports = {
 		// uncategorized rules:
 		'vue/component-api-style': ['error', ['script-setup']],
 		'vue/component-name-in-template-casing': ['error', 'PascalCase', {
-			'globals': ['RouterView', 'RouterLink'],
+			'globals': ['RouterView', 'RouterLink', 'Icon', 'Notifications', 'Modal', 'Card'],
 		}],
 		'vue/custom-event-name-casing': ['error', 'camelCase'],
 		'vue/define-macros-order': 'error',
--- a/frontend/src/components/date/DatemathHelp.vue
+++ b/frontend/src/components/date/DatemathHelp.vue
@ -1,5 +1,5 @@
 <template>
-	<card
+	<Card
 		class="has-no-shadow how-it-works-modal"
 		:title="$t('input.datemathHelp.title')"
 	>
@ -118,7 +118,7 @@
 				</tr>
 			</tbody>
 		</table>
-	</card>
+	</Card>
 </template>

 <script lang="ts" setup>
--- a/frontend/src/components/date/DatepickerWithRange.vue
+++ b/frontend/src/components/date/DatepickerWithRange.vue
@ -84,7 +84,7 @@
 							{{ $t('input.datemathHelp.learnhow') }}
 						</BaseButton>

-						<modal
+						<Modal
 							:enabled="showHowItWorks"
 							transition-name="fade"
 							:overflow="true"
@ -92,7 +92,7 @@
 							@close="() => showHowItWorks = false"
 						>
 							<DatemathHelp />
-						</modal>
+						</Modal>
 					</div>
 				</div>
 			</template>
--- a/frontend/src/components/date/DatepickerWithValues.vue
+++ b/frontend/src/components/date/DatepickerWithValues.vue
@ -61,7 +61,7 @@
 							{{ $t('input.datemathHelp.learnhow') }}
 						</BaseButton>

-						<modal
+						<Modal
 							:enabled="showHowItWorks"
 							transition-name="fade"
 							:overflow="true"
@ -69,7 +69,7 @@
 							@close="() => showHowItWorks = false"
 						>
 							<DatemathHelp />
-						</modal>
+						</Modal>
 					</div>
 				</div>
 			</template>
--- a/frontend/src/components/home/AddToHomeScreen.vue
+++ b/frontend/src/components/home/AddToHomeScreen.vue
@ -4,7 +4,7 @@
 		class="add-to-home-screen"
 		:class="{'has-update-available': hasUpdateAvailable}"
 	>
-		<icon
+		<Icon
 			icon="arrow-up-from-bracket"
 			class="add-icon"
 		/>
@ -15,7 +15,7 @@
 			class="hide-button"
 			@click="() => hideMessage = true"
 		>
-			<icon icon="x" />
+			<Icon icon="x" />
 		</BaseButton>
 	</div>
 </template>
--- a/frontend/src/components/home/ContentAuth.vue
+++ b/frontend/src/components/home/ContentAuth.vue
@ -5,7 +5,7 @@
 			class="menu-hide-button d-print-none"
 			@click="baseStore.setMenuActive(false)"
 		>
-			<icon icon="times" />
+			<Icon icon="times" />
 		</BaseButton>
 		<div
 			class="app-container"
@ -42,21 +42,21 @@
 					</keep-alive>
 				</RouterView>

-				<modal
+				<Modal
 					:enabled="typeof currentModal !== 'undefined'"
 					variant="scrolling"
 					class="task-detail-view-modal"
 					@close="closeModal()"
 				>
 					<component :is="currentModal" />
-				</modal>
+				</Modal>

 				<BaseButton
 					v-shortcut="'?'"
 					class="keyboard-shortcuts-button d-print-none"
 					@click="showKeyboardShortcuts()"
 				>
-					<icon icon="keyboard" />
+					<Icon icon="keyboard" />
 				</BaseButton>
 			</main>
 		</div>
--- a/frontend/src/components/home/DemoMode.vue
+++ b/frontend/src/components/home/DemoMode.vue
@ -21,7 +21,7 @@ const enabled = computed(() => configStore.demoModeEnabled && !hide.value)
 			class="hide-button"
 			@click="() => hide = true"
 		>
-			<icon icon="times" />
+			<Icon icon="times" />
 		</BaseButton>
 	</div>
 </template>
--- a/frontend/src/components/home/Navigation.vue
+++ b/frontend/src/components/home/Navigation.vue
@ -20,7 +20,7 @@
 						:to="{ name: 'home'}"
 					>
 						<span class="menu-item-icon icon">
-							<icon icon="calendar" />
+							<Icon icon="calendar" />
 						</span>
 						{{ $t('navigation.overview') }}
 					</RouterLink>
@ -31,7 +31,7 @@
 						:to="{ name: 'tasks.range'}"
 					>
 						<span class="menu-item-icon icon">
-							<icon :icon="['far', 'calendar-alt']" />
+							<Icon :icon="['far', 'calendar-alt']" />
 						</span>
 						{{ $t('navigation.upcoming') }}
 					</RouterLink>
@ -42,7 +42,7 @@
 						:to="{ name: 'projects.index'}"
 					>
 						<span class="menu-item-icon icon">
-							<icon icon="layer-group" />
+							<Icon icon="layer-group" />
 						</span>
 						{{ $t('project.projects') }}
 					</RouterLink>
@ -53,7 +53,7 @@
 						:to="{ name: 'labels.index'}"
 					>
 						<span class="menu-item-icon icon">
-							<icon icon="tags" />
+							<Icon icon="tags" />
 						</span>
 						{{ $t('label.title') }}
 					</RouterLink>
@ -64,7 +64,7 @@
 						:to="{ name: 'teams.index'}"
 					>
 						<span class="menu-item-icon icon">
-							<icon icon="users" />
+							<Icon icon="users" />
 						</span>
 						{{ $t('team.title') }}
 					</RouterLink>
--- a/frontend/src/components/home/ProjectsNavigationItem.vue
+++ b/frontend/src/components/home/ProjectsNavigationItem.vue
@ -9,7 +9,7 @@
 				class="collapse-project-button"
 				@click="childProjectsOpen = !childProjectsOpen"
 			>
-				<icon
+				<Icon
 					icon="chevron-down"
 					:class="{ 'project-is-collapsed': !childProjectsOpen }"
 				/>
@ -35,14 +35,14 @@
 						v-else-if="project.id < -1"
 						class="saved-filter-icon icon menu-item-icon"
 					>
-						<icon icon="filter" />
+						<Icon icon="filter" />
 					</span>
 					<span
 						v-if="project.id > 0"
 						class="icon menu-item-icon handle"
 						:class="{'has-color-bubble': project.hexColor !== ''}"
 					>
-						<icon icon="grip-lines" />
+						<Icon icon="grip-lines" />
 					</span>
 				</div>
 				<span class="project-menu-title">{{ getProjectTitle(project) }}</span>
@ -53,7 +53,7 @@
 				:class="{'is-favorite': project.isFavorite}"
 				@click="projectStore.toggleProjectFavorite(project)"
 			>
-				<icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
+				<Icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
 			</BaseButton>
 			<ProjectSettingsDropdown
 				class="menu-list-dropdown"
@ -64,7 +64,7 @@
 						class="menu-list-dropdown-trigger"
 						@click="toggleOpen"
 					>
-						<icon
+						<Icon
 							icon="ellipsis-h"
 							class="icon"
 						/>
--- a/frontend/src/components/home/TheNavigation.vue
+++ b/frontend/src/components/home/TheNavigation.vue
@ -28,7 +28,7 @@
 				:to="{ name: 'project.info', params: { projectId: currentProject.id } }"
 				class="project-title-button"
 			>
-				<icon icon="circle-info" />
+				<Icon icon="circle-info" />
 			</BaseButton>

 			<ProjectSettingsDropdown
@ -41,7 +41,7 @@
 						class="project-title-button"
 						@click="toggleOpen"
 					>
-						<icon
+						<Icon
 							icon="ellipsis-h"
 							class="icon"
 						/>
@ -75,7 +75,7 @@
 								transform: open ? 'rotate(180deg)' : 'rotate(0)',
 							}"
 						>
-							<icon icon="chevron-down" />
+							<Icon icon="chevron-down" />
 						</span>
 					</BaseButton>
 				</template>
--- a/frontend/src/components/input/Button.vue
+++ b/frontend/src/components/input/Button.vue
@ -13,7 +13,7 @@
 		}"
 	>
 		<template v-if="icon">
-			<icon
+			<Icon
 				v-if="showIconOnly"
 				:icon="icon"
 				:style="{'color': iconColor !== '' ? iconColor : undefined}"
@ -22,7 +22,7 @@
 				v-else
 				class="icon is-small"
 			>
-				<icon
+				<Icon
 					:icon="icon"
 					:style="{'color': iconColor !== '' ? iconColor : undefined}"
 				/>
--- a/frontend/src/components/input/DatepickerInline.vue
+++ b/frontend/src/components/input/DatepickerInline.vue
@ -4,7 +4,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('today')"
 	>
-		<span class="icon"><icon :icon="['far', 'calendar-alt']" /></span>
+		<span class="icon"><Icon :icon="['far', 'calendar-alt']" /></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.today') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span>
@ -14,7 +14,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('tomorrow')"
 	>
-		<span class="icon"><icon :icon="['far', 'sun']" /></span>
+		<span class="icon"><Icon :icon="['far', 'sun']" /></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.tomorrow') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span>
@ -24,7 +24,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('nextMonday')"
 	>
-		<span class="icon"><icon icon="coffee" /></span>
+		<span class="icon"><Icon icon="coffee" /></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.nextMonday') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span>
@ -34,7 +34,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('thisWeekend')"
 	>
-		<span class="icon"><icon icon="cocktail" /></span>
+		<span class="icon"><Icon icon="cocktail" /></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.thisWeekend') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span>
@ -44,7 +44,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('laterThisWeek')"
 	>
-		<span class="icon"><icon icon="chess-knight" /></span>
+		<span class="icon"><Icon icon="chess-knight" /></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.laterThisWeek') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span>
@ -54,7 +54,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('nextWeek')"
 	>
-		<span class="icon"><icon icon="forward" /></span>
+		<span class="icon"><Icon icon="forward" /></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.nextWeek') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span>
--- a/frontend/src/components/input/Multiselect.vue
+++ b/frontend/src/components/input/Multiselect.vue
@ -57,7 +57,7 @@
 					class="removal-button"
 					@click="resetSelectedValue"
 				>
-					<icon icon="times" />
+					<Icon icon="times" />
 				</BaseButton>
 			</div>
 		</div>
--- a/frontend/src/components/input/Password.vue
+++ b/frontend/src/components/input/Password.vue
@ -20,7 +20,7 @@
 			:aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
 			@click="togglePasswordFieldType"
 		>
-			<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'" />
+			<Icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'" />
 		</BaseButton>
 	</div>
 	<p
--- a/frontend/src/components/input/Reactions.vue
+++ b/frontend/src/components/input/Reactions.vue
@ -157,7 +157,7 @@ async function toggleReaction(value: string) {
 			class="reaction-button"
 			@click.stop="toggleEmojiPicker"
 		>
-			<icon :icon="['far', 'face-laugh']" />
+			<Icon :icon="['far', 'face-laugh']" />
 		</BaseButton>
 		<CustomTransition name="fade">
 			<VuemojiPicker
--- a/frontend/src/components/input/editor/CommandsList.vue
+++ b/frontend/src/components/input/editor/CommandsList.vue
@ -8,7 +8,7 @@
 				:class="{ 'is-selected': index === selectedIndex }"
 				@click="selectItem(index)"
 			>
-				<icon :icon="item.icon" />
+				<Icon :icon="item.icon" />
 				<div class="description">
 					<p>{{ item.title }}</p>
 					<p>{{ item.description }}</p>
--- a/frontend/src/components/input/editor/EditorToolbar.vue
+++ b/frontend/src/components/input/editor/EditorToolbar.vue
@ -8,7 +8,7 @@
 				@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-header']" />
+					<Icon :icon="['fa', 'fa-header']" />
 					<span class="icon__lower-text">1</span>
 				</span>
 			</BaseButton>
@ -19,7 +19,7 @@
 				@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-header']" />
+					<Icon :icon="['fa', 'fa-header']" />
 					<span class="icon__lower-text">2</span>
 				</span>
 			</BaseButton>
@ -30,7 +30,7 @@
 				@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-header']" />
+					<Icon :icon="['fa', 'fa-header']" />
 					<span class="icon__lower-text">3</span>
 				</span>
 			</BaseButton>
@ -44,7 +44,7 @@
 				@click="editor.chain().focus().toggleBold().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-bold']" />
+					<Icon :icon="['fa', 'fa-bold']" />
 				</span>
 			</BaseButton>
 			<BaseButton
@ -54,7 +54,7 @@
 				@click="editor.chain().focus().toggleItalic().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-italic']" />
+					<Icon :icon="['fa', 'fa-italic']" />
 				</span>
 			</BaseButton>
 			<BaseButton
@ -64,7 +64,7 @@
 				@click="editor.chain().focus().toggleUnderline().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-underline']" />
+					<Icon :icon="['fa', 'fa-underline']" />
 				</span>
 			</BaseButton>
 			<BaseButton
@ -74,7 +74,7 @@
 				@click="editor.chain().focus().toggleStrike().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-strikethrough']" />
+					<Icon :icon="['fa', 'fa-strikethrough']" />
 				</span>
 			</BaseButton>
 		</div>
@ -87,7 +87,7 @@
 				@click="editor.chain().focus().toggleCodeBlock().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-code']" />
+					<Icon :icon="['fa', 'fa-code']" />
 				</span>
 			</BaseButton>
 			<BaseButton
@ -97,7 +97,7 @@
 				@click="editor.chain().focus().toggleBlockquote().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-quote-right']" />
+					<Icon :icon="['fa', 'fa-quote-right']" />
 				</span>
 			</BaseButton>
 		</div>
@ -110,7 +110,7 @@
 				@click="editor.chain().focus().toggleBulletList().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-list-ul']" />
+					<Icon :icon="['fa', 'fa-list-ul']" />
 				</span>
 			</BaseButton>
 			<BaseButton
@ -120,7 +120,7 @@
 				@click="editor.chain().focus().toggleOrderedList().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-list-ol']" />
+					<Icon :icon="['fa', 'fa-list-ol']" />
 				</span>
 			</BaseButton>
 			<BaseButton
@ -130,7 +130,7 @@
 				@click="editor.chain().focus().toggleTaskList().run()"
 			>
 				<span class="icon">
-					<icon icon="fa-list-check" />
+					<Icon icon="fa-list-check" />
 				</span>
 			</BaseButton>
 		</div>
@ -142,7 +142,7 @@
 				@click="e => emit('imageUploadClicked', e)"
 			>
 				<span class="icon">
-					<icon icon="fa-image" />
+					<Icon icon="fa-image" />
 				</span>
 			</BaseButton>
 		</div>
@ -156,7 +156,7 @@
 				@click="setLink"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-link']" />
+					<Icon :icon="['fa', 'fa-link']" />
 				</span>
 			</BaseButton>
 			<BaseButton
@ -167,7 +167,7 @@
 				@click="editor.chain().focus().setParagraph().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-paragraph']" />
+					<Icon :icon="['fa', 'fa-paragraph']" />
 				</span>
 			</BaseButton>

@ -177,7 +177,7 @@
 				@click="editor.chain().focus().setHorizontalRule().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-ruler-horizontal']" />
+					<Icon :icon="['fa', 'fa-ruler-horizontal']" />
 				</span>
 			</BaseButton>
 		</div>
@ -189,7 +189,7 @@
 				@click="editor.chain().focus().undo().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-undo']" />
+					<Icon :icon="['fa', 'fa-undo']" />
 				</span>
 			</BaseButton>
 			<BaseButton
@ -198,7 +198,7 @@
 				@click="editor.chain().focus().redo().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-redo']" />
+					<Icon :icon="['fa', 'fa-redo']" />
 				</span>
 			</BaseButton>
 		</div>
@ -212,7 +212,7 @@
 				@click="toggleTableMode"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-table']" />
+					<Icon :icon="['fa', 'fa-table']" />
 				</span>
 			</BaseButton>
 			<div
--- a/frontend/src/components/input/editor/TipTap.vue
+++ b/frontend/src/components/input/editor/TipTap.vue
@ -19,7 +19,7 @@
 				:class="{ 'is-active': editor.isActive('bold') }"
 				@click="editor.chain().focus().toggleBold().run()"
 			>
-				<icon :icon="['fa', 'fa-bold']" />
+				<Icon :icon="['fa', 'fa-bold']" />
 			</BaseButton>
 			<BaseButton
 				v-tooltip="$t('input.editor.italic')"
@ -27,7 +27,7 @@
 				:class="{ 'is-active': editor.isActive('italic') }"
 				@click="editor.chain().focus().toggleItalic().run()"
 			>
-				<icon :icon="['fa', 'fa-italic']" />
+				<Icon :icon="['fa', 'fa-italic']" />
 			</BaseButton>
 			<BaseButton
 				v-tooltip="$t('input.editor.underline')"
@ -35,7 +35,7 @@
 				:class="{ 'is-active': editor.isActive('underline') }"
 				@click="editor.chain().focus().toggleUnderline().run()"
 			>
-				<icon :icon="['fa', 'fa-underline']" />
+				<Icon :icon="['fa', 'fa-underline']" />
 			</BaseButton>
 			<BaseButton
 				v-tooltip="$t('input.editor.strikethrough')"
@ -43,7 +43,7 @@
 				:class="{ 'is-active': editor.isActive('strike') }"
 				@click="editor.chain().focus().toggleStrike().run()"
 			>
-				<icon :icon="['fa', 'fa-strikethrough']" />
+				<Icon :icon="['fa', 'fa-strikethrough']" />
 			</BaseButton>
 			<BaseButton
 				v-tooltip="$t('input.editor.code')"
@ -51,7 +51,7 @@
 				:class="{ 'is-active': editor.isActive('code') }"
 				@click="editor.chain().focus().toggleCode().run()"
 			>
-				<icon :icon="['fa', 'fa-code']" />
+				<Icon :icon="['fa', 'fa-code']" />
 			</BaseButton>
 			<BaseButton
 				v-tooltip="$t('input.editor.link')"
@ -59,7 +59,7 @@
 				:class="{ 'is-active': editor.isActive('link') }"
 				@click="setLink"
 			>
-				<icon :icon="['fa', 'fa-link']" />
+				<Icon :icon="['fa', 'fa-link']" />
 			</BaseButton>
 		</BubbleMenu>

--- a/frontend/src/components/misc/Card.vue
+++ b/frontend/src/components/misc/Card.vue
@ -18,7 +18,7 @@
 				@click="$emit('close')"
 			>	
 				<span class="icon">
-					<icon :icon="closeIcon" />
+					<Icon :icon="closeIcon" />
 				</span>
 			</BaseButton>
 		</header>
--- a/frontend/src/components/misc/CreateEdit.vue
+++ b/frontend/src/components/misc/CreateEdit.vue
@ -1,10 +1,10 @@
 <template>
-	<modal
+	<Modal
 		:overflow="true"
 		:wide="wide"
 		@close="$router.back()"
 	>
-		<card
+		<Card
 			:title="title"
 			:shadow="false"
 			:padding="false"
@ -45,8 +45,8 @@
 					</x-button>
 				</slot>
 			</template>
-		</card>
-	</modal>
+		</Card>
+	</Modal>
 </template>

 <script setup lang="ts">
--- a/frontend/src/components/misc/Dropdown.vue
+++ b/frontend/src/components/misc/Dropdown.vue
@ -13,7 +13,7 @@
 				class="dropdown-trigger is-flex"
 				@click="toggleOpen"
 			>
-				<icon
+				<Icon
 					:icon="triggerIcon"
 					class="icon"
 				/>
--- a/frontend/src/components/misc/Modal.vue
+++ b/frontend/src/components/misc/Modal.vue
@ -31,7 +31,7 @@
 							class="close"
 							@click="$emit('close')"
 						>
-							<icon icon="times" />
+							<Icon icon="times" />
 						</BaseButton>

 						<slot>
--- a/frontend/src/components/misc/Notification.vue
+++ b/frontend/src/components/misc/Notification.vue
@ -1,5 +1,5 @@
 <template>
-	<notifications
+	<Notifications
 		position="bottom left"
 		:max="2"
 		class="global-notification"
@ -44,7 +44,7 @@
 				</div>
 			</div>
 		</template>
-	</notifications>
+	</Notifications>
 </template>

 <style scoped>
--- a/frontend/src/components/misc/OpenQuickActions.vue
+++ b/frontend/src/components/misc/OpenQuickActions.vue
@ -35,6 +35,6 @@ function openQuickActions() {
 		:title="$t('keyboardShortcuts.quickSearch')"
 		@click="openQuickActions"
 	>
-		<icon icon="search" />
+		<Icon icon="search" />
 	</BaseButton>
 </template>
--- a/frontend/src/components/misc/Subscription.vue
+++ b/frontend/src/components/misc/Subscription.vue
@ -26,7 +26,7 @@
 		@click="changeSubscription"
 	>
 		<span class="icon">
-			<icon :icon="iconName" />
+			<Icon :icon="iconName" />
 		</span>
 		{{ buttonText }}
 	</BaseButton>
--- a/frontend/src/components/misc/keyboard-shortcuts/index.vue
+++ b/frontend/src/components/misc/keyboard-shortcuts/index.vue
@ -1,6 +1,6 @@
 <template>
-	<modal @close="close()">
-		<card
+	<Modal @close="close()">
+		<Card
 			class="has-background-white keyboard-shortcuts"
 			:shadow="false"
 			:title="$t('keyboardShortcuts.title')"
@ -43,8 +43,8 @@
 					</template>
 				</dl>
 			</template>
-		</card>
-	</modal>
+		</Card>
+	</Modal>
 </template>

 <script lang="ts" setup>
--- a/frontend/src/components/notifications/Notifications.vue
+++ b/frontend/src/components/notifications/Notifications.vue
@ -13,7 +13,7 @@
 					v-if="unreadNotifications > 0"
 					class="unread-indicator"
 				/>
-				<icon icon="bell" />
+				<Icon icon="bell" />
 			</BaseButton>
 		</slot>

--- a/frontend/src/components/project/ProjectSettingsDropdown.vue
+++ b/frontend/src/components/project/ProjectSettingsDropdown.vue
@ -9,7 +9,7 @@
 					class="dropdown-trigger"
 					@click="triggerProps.toggleOpen"
 				>
-					<icon
+					<Icon
 						icon="ellipsis-h"
 						class="icon"
 					/>
--- a/frontend/src/components/project/partials/FilterPopup.vue
+++ b/frontend/src/components/project/partials/FilterPopup.vue
@ -7,7 +7,7 @@
 	>
 		{{ $t('filters.title') }}
 	</x-button>
-	<modal
+	<Modal
 		:enabled="modalOpen"
 		transition-name="fade"
 		:overflow="true"
@ -22,7 +22,7 @@
 			@update:modelValue="emitChanges"
 			@showResultsButtonClicked="() => modalOpen = false"
 		/>
-	</modal>
+	</Modal>
 </template>

 <script setup lang="ts">
--- a/frontend/src/components/project/partials/Filters.vue
+++ b/frontend/src/components/project/partials/Filters.vue
@ -1,5 +1,5 @@
 <template>
-	<card
+	<Card
 		class="filters has-overflow"
 		:title="hasTitle ? $t('filters.title') : ''"
 		role="search"
@ -40,7 +40,7 @@
 				{{ $t('filters.showResults') }}
 			</x-button>
 		</template>
-	</card>
+	</Card>
 </template>

 <script lang="ts">
--- a/frontend/src/components/project/partials/ProjectCard.vue
+++ b/frontend/src/components/project/partials/ProjectCard.vue
@ -28,7 +28,7 @@
 				v-if="project.id < -1"
 				class="saved-filter-icon icon"
 			>
-				<icon icon="filter" />
+				<Icon icon="filter" />
 			</span>
 			{{ getProjectTitle(project) }}
 		</div>
@ -47,7 +47,7 @@
 			:class="{'is-favorite': project.isFavorite}"
 			@click.prevent.stop="projectStore.toggleProjectFavorite(project)"
 		>
-			<icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
+			<Icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
 		</BaseButton>
 	</div>
 </template>
--- a/frontend/src/components/project/views/ProjectGantt.vue
+++ b/frontend/src/components/project/views/ProjectGantt.vue
@ -5,7 +5,7 @@
 		:view-id
 	>
 		<template #default>
-			<card :has-content="false">
+			<Card :has-content="false">
 				<div class="gantt-options">
 					<div class="field">
 						<label
@ -44,10 +44,10 @@
 						{{ $t('project.gantt.showTasksWithoutDates') }}
 					</FancyCheckbox>
 				</div>
-			</card>
+			</Card>

 			<div class="gantt-chart-container">
-				<card
+				<Card
 					:has-content="false"
 					:padding="false"
 					class="has-overflow"
@ -64,7 +64,7 @@
 						v-if="canWrite"
 						@createTask="addGanttTask"
 					/>
-				</card>
+				</Card>
 			</div>
 		</template>
 	</ProjectWrapper>
--- a/frontend/src/components/project/views/ProjectKanban.vue
+++ b/frontend/src/components/project/views/ProjectKanban.vue
@ -45,7 +45,7 @@
 										v-tooltip="$t('project.kanban.doneBucketHint')"
 										class="icon is-small has-text-success mr-2"
 									>
-										<icon icon="check-double" />
+										<Icon icon="check-double" />
 									</span>
 									<h2
 										class="title input"
@ -246,7 +246,7 @@
 					</div>
 				</div>

-				<modal
+				<Modal
 					:enabled="showBucketDeleteModal"
 					@close="showBucketDeleteModal = false"
 					@submit="deleteBucket()"
@ -261,7 +261,7 @@
 							{{ $t('project.kanban.deleteBucketText2') }}
 						</p>
 					</template>
-				</modal>
+				</Modal>
 			</div>
 		</template>
 	</ProjectWrapper>
--- a/frontend/src/components/project/views/ProjectList.vue
+++ b/frontend/src/components/project/views/ProjectList.vue
@ -19,7 +19,7 @@
 				:class="{ 'is-loading': loading }"
 				class="loader-container is-max-width-desktop list-view"
 			>
-				<card
+				<Card
 					:padding="false"
 					:has-content="false"
 					class="has-overflow"
@ -73,7 +73,7 @@
 							>
 								<template v-if="canWrite">
 									<span class="icon handle">
-										<icon icon="grip-lines" />
+										<Icon icon="grip-lines" />
 									</span>
 								</template>
 							</SingleTaskInProject>
@ -84,7 +84,7 @@
 						:total-pages="totalPages"
 						:current-page="currentPage"
 					/>
-				</card>
+				</Card>
 			</div>
 		</template>
 	</ProjectWrapper>
--- a/frontend/src/components/project/views/ProjectTable.vue
+++ b/frontend/src/components/project/views/ProjectTable.vue
@ -18,7 +18,7 @@
 						</x-button>
 					</template>
 					<template #content="{isOpen}">
-						<card
+						<Card
 							class="columns-filter"
 							:class="{'is-open': isOpen}"
 						>
@ -64,7 +64,7 @@
 							<FancyCheckbox v-model="activeColumns.createdBy">
 								{{ $t('task.attributes.createdBy') }}
 							</FancyCheckbox>
-						</card>
+						</Card>
 					</template>
 				</Popup>
 				<FilterPopup v-model="params" />
@ -76,7 +76,7 @@
 				:class="{'is-loading': loading}"
 				class="loader-container"
 			>
-				<card
+				<Card
 					:padding="false"
 					:has-content="false"
 				>
@ -260,7 +260,7 @@
 						:total-pages="totalPages"
 						:current-page="currentPage"
 					/>
-				</card>
+				</Card>
 			</div>
 		</template>
 	</ProjectWrapper>
--- a/frontend/src/components/project/views/ViewEditForm.vue
+++ b/frontend/src/components/project/views/ViewEditForm.vue
@ -193,7 +193,7 @@ function handleBubbleSave() {
 						class="is-danger"
 						@click.prevent="() => view.bucketConfiguration.splice(index, 1)"
 					>
-						<icon icon="trash-alt" />
+						<Icon icon="trash-alt" />
 					</button>
 					<div class="filter-bucket-form">
 						<div class="field">
--- a/frontend/src/components/quick-actions/QuickActions.vue
+++ b/frontend/src/components/quick-actions/QuickActions.vue
@ -1,5 +1,5 @@
 <template>
-	<modal
+	<Modal
 		:enabled="active"
 		:overflow="isNewTaskCommand"
 		@close="closeQuickActions"
@ -81,7 +81,7 @@
 				</div>
 			</div>
 		</div>
-	</modal>
+	</Modal>
 </template>

 <script setup lang="ts">
--- a/frontend/src/components/sharing/LinkSharing.vue
+++ b/frontend/src/components/sharing/LinkSharing.vue
@ -129,19 +129,19 @@
 							<p class="mb-2">
 								<template v-if="s.right === RIGHTS.ADMIN">
 									<span class="icon is-small">
-										<icon icon="lock" />
+										<Icon icon="lock" />
 									</span>&nbsp;
 									{{ $t('project.share.right.admin') }}
 								</template>
 								<template v-else-if="s.right === RIGHTS.READ_WRITE">
 									<span class="icon is-small">
-										<icon icon="pen" />
+										<Icon icon="pen" />
 									</span>&nbsp;
 									{{ $t('project.share.right.readWrite') }}
 								</template>
 								<template v-else>
 									<span class="icon is-small">
-										<icon icon="users" />
+										<Icon icon="users" />
 									</span>&nbsp;
 									{{ $t('project.share.right.read') }}
 								</template>
@ -163,7 +163,7 @@
 										@click="copy(getShareLink(s.hash, selectedView[s.id]))"
 									>
 										<span class="icon">
-											<icon icon="paste" />
+											<Icon icon="paste" />
 										</span>
 									</x-button>
 								</div>
@ -199,7 +199,7 @@
 			</table>
 		</div>

-		<modal
+		<Modal
 			:enabled="showDeleteModal"
 			@close="showDeleteModal = false"
 			@submit="remove(projectId)"
@ -211,7 +211,7 @@
 			<template #text>
 				<p>{{ $t('project.share.links.removeText') }}</p>
 			</template>
-		</modal>
+		</Modal>
 	</div>
 </template>

--- a/frontend/src/components/sharing/UserTeam.vue
+++ b/frontend/src/components/sharing/UserTeam.vue
@ -73,19 +73,19 @@
 					<td class="type">
 						<template v-if="s.right === RIGHTS.ADMIN">
 							<span class="icon is-small">
-								<icon icon="lock" />
+								<Icon icon="lock" />
 							</span>
 							{{ $t('project.share.right.admin') }}
 						</template>
 						<template v-else-if="s.right === RIGHTS.READ_WRITE">
 							<span class="icon is-small">
-								<icon icon="pen" />
+								<Icon icon="pen" />
 							</span>
 							{{ $t('project.share.right.readWrite') }}
 						</template>
 						<template v-else>
 							<span class="icon is-small">
-								<icon icon="users" />
+								<Icon icon="users" />
 							</span>
 							{{ $t('project.share.right.read') }}
 						</template>
@ -139,7 +139,7 @@
 			{{ $t('project.share.userTeam.notShared', {type: shareTypeNames}) }}
 		</Nothing>

-		<modal
+		<Modal
 			:enabled="showDeleteModal"
 			@close="showDeleteModal = false"
 			@submit="deleteSharable()"
@ -152,7 +152,7 @@
 			<template #text>
 				<p>{{ $t('project.share.userTeam.removeText', {type: shareTypeName, sharable: sharableName}) }}</p>
 			</template>
-		</modal>
+		</Modal>
 	</div>
 </template>

--- a/frontend/src/components/tasks/AddTask.vue
+++ b/frontend/src/components/tasks/AddTask.vue
@ -17,7 +17,7 @@
 					@keydown.enter="handleEnter"
 				/>
 				<span class="icon is-small is-left">
-					<icon icon="tasks" />
+					<Icon icon="tasks" />
 				</span>
 				<QuickAddMagic :highlight-hint-icon="taskAddHovered" />
 			</p>
--- a/frontend/src/components/tasks/partials/AssigneeList.vue
+++ b/frontend/src/components/tasks/partials/AssigneeList.vue
@ -44,7 +44,7 @@ const hasDelete = computed(() => typeof remove !== 'undefined' && !disabled)
 				class="remove-assignee"
 				@click="remove(user)"
 			>
-				<icon icon="times" />
+				<Icon icon="times" />
 			</BaseButton>
 		</span>