From 541f608d3c451ba46acf59d09c64e2b96277c9b0 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sat, 15 Jun 2024 14:11:06 +0200
Subject: [PATCH] feat(components): align component name casing fancycheckbox

---
 .../e2e/project/project-view-gantt.spec.ts    |  2 +-
 .../e2e/project/project-view-table.spec.ts    |  4 +-
 frontend/cypress/e2e/task/task.spec.ts        |  2 +-
 frontend/src/components/base/BaseCheckbox.vue |  2 +-
 ...kbox.story.vue => FancyCheckbox.story.vue} |  2 +-
 .../{fancycheckbox.vue => FancyCheckbox.vue}  | 20 +++----
 .../components/project/partials/filters.vue   |  6 +-
 .../components/project/views/ProjectGantt.vue |  6 +-
 .../components/project/views/ProjectTable.vue | 58 +++++++++----------
 .../tasks/partials/relatedTasks.vue           |  6 +-
 .../tasks/partials/singleTaskInProject.vue    |  6 +-
 frontend/src/views/project/ListProjects.vue   |  6 +-
 .../src/views/project/settings/webhooks.vue   |  6 +-
 frontend/src/views/tasks/ShowTasks.vue        | 10 ++--
 frontend/src/views/teams/EditTeam.vue         |  6 +-
 frontend/src/views/teams/NewTeam.vue          |  6 +-
 .../src/views/user/settings/ApiTokens.vue     | 10 ++--
 17 files changed, 79 insertions(+), 79 deletions(-)
 rename frontend/src/components/input/{fancycheckbox.story.vue => FancyCheckbox.story.vue} (97%)
 rename frontend/src/components/input/{fancycheckbox.vue => FancyCheckbox.vue} (76%)

diff --git a/frontend/cypress/e2e/project/project-view-gantt.spec.ts b/frontend/cypress/e2e/project/project-view-gantt.spec.ts
index 507588d29..cc289b544 100644
--- a/frontend/cypress/e2e/project/project-view-gantt.spec.ts
+++ b/frontend/cypress/e2e/project/project-view-gantt.spec.ts
@@ -52,7 +52,7 @@ describe('Project View Gantt', () => {
 		})
 		cy.visit('/projects/1/2')
 
-		cy.get('.gantt-options .fancycheckbox')
+		cy.get('.gantt-options .fancy-checkbox')
 			.contains('Show tasks which don\'t have dates set')
 			.click()
 
diff --git a/frontend/cypress/e2e/project/project-view-table.spec.ts b/frontend/cypress/e2e/project/project-view-table.spec.ts
index 53cee4418..5084a5f0c 100644
--- a/frontend/cypress/e2e/project/project-view-table.spec.ts
+++ b/frontend/cypress/e2e/project/project-view-table.spec.ts
@@ -24,10 +24,10 @@ describe('Project View Table', () => {
 		cy.get('.project-table .filter-container .button')
 			.contains('Columns')
 			.click()
-		cy.get('.project-table .filter-container .card.columns-filter .card-content .fancycheckbox')
+		cy.get('.project-table .filter-container .card.columns-filter .card-content .fancy-checkbox')
 			.contains('Priority')
 			.click()
-		cy.get('.project-table .filter-container .card.columns-filter .card-content .fancycheckbox')
+		cy.get('.project-table .filter-container .card.columns-filter .card-content .fancy-checkbox')
 			.contains('Done')
 			.click()
 
diff --git a/frontend/cypress/e2e/task/task.spec.ts b/frontend/cypress/e2e/task/task.spec.ts
index 552da0fda..b3a8a6e0e 100644
--- a/frontend/cypress/e2e/task/task.spec.ts
+++ b/frontend/cypress/e2e/task/task.spec.ts
@@ -97,7 +97,7 @@ describe('Task', () => {
 		TaskFactory.create(1)
 
 		cy.visit('/projects/1/1')
-		cy.get('.tasks .task .fancycheckbox')
+		cy.get('.tasks .task .fancy-checkbox')
 			.first()
 			.click()
 		cy.get('.global-notification')
diff --git a/frontend/src/components/base/BaseCheckbox.vue b/frontend/src/components/base/BaseCheckbox.vue
index aa7778a11..f269016b5 100644
--- a/frontend/src/components/base/BaseCheckbox.vue
+++ b/frontend/src/components/base/BaseCheckbox.vue
@@ -45,7 +45,7 @@ const emit = defineEmits<{
   (event: 'update:modelValue', value: boolean): void
 }>()
 
-const checkboxId = ref(`fancycheckbox_${createRandomID()}`)
+const checkboxId = ref(`checkbox_${createRandomID()}`)
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/components/input/fancycheckbox.story.vue b/frontend/src/components/input/FancyCheckbox.story.vue
similarity index 97%
rename from frontend/src/components/input/fancycheckbox.story.vue
rename to frontend/src/components/input/FancyCheckbox.story.vue
index 23c1dde9e..bea3f27ee 100644
--- a/frontend/src/components/input/fancycheckbox.story.vue
+++ b/frontend/src/components/input/FancyCheckbox.story.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import {ref} from 'vue'
 import {logEvent} from 'histoire/client'
-import FancyCheckbox from './fancycheckbox.vue'
+import FancyCheckbox from './FancyCheckbox.vue'
 
 const isDisabled = ref<boolean | undefined>()
 
diff --git a/frontend/src/components/input/fancycheckbox.vue b/frontend/src/components/input/FancyCheckbox.vue
similarity index 76%
rename from frontend/src/components/input/fancycheckbox.vue
rename to frontend/src/components/input/FancyCheckbox.vue
index c55363fe1..fc68bfdf7 100644
--- a/frontend/src/components/input/fancycheckbox.vue
+++ b/frontend/src/components/input/FancyCheckbox.vue
@@ -1,6 +1,6 @@
 <template>
 	<BaseCheckbox
-		class="fancycheckbox"
+		class="fancy-checkbox"
 		:class="{
 			'is-disabled': disabled,
 			'is-block': isBlock,
@@ -9,10 +9,10 @@
 		:model-value="modelValue"
 		@update:modelValue="value => emit('update:modelValue', value)"
 	>
-		<CheckboxIcon class="fancycheckbox__icon" />
+		<CheckboxIcon class="fancy-checkbox__icon" />
 		<span
 			v-if="$slots.default"
-			class="fancycheckbox__content"
+			class="fancy-checkbox__content"
 		>
 			<slot />
 		</span>
@@ -44,7 +44,7 @@ const emit = defineEmits<{
 
 
 <style lang="scss" scoped>
-.fancycheckbox {
+.fancy-checkbox {
   display: inline-block;
   padding-right: 5px;
   padding-top: 3px;
@@ -55,13 +55,13 @@ const emit = defineEmits<{
 	}
 }
 
-.fancycheckbox__content {
+.fancy-checkbox__content {
 	font-size: 0.8rem;
 	vertical-align: top;
 	padding-left: .5rem;
 }
 
-.fancycheckbox__icon:deep() {
+.fancy-checkbox__icon:deep() {
 	position: relative;
 	z-index: 1;
 	stroke: var(--stroke-color, #c8ccd4);
@@ -74,8 +74,8 @@ const emit = defineEmits<{
 	}
 }
 
-.fancycheckbox:not(:has(input:disabled)):hover .fancycheckbox__icon,
-.fancycheckbox:has(input:checked) .fancycheckbox__icon {
+.fancy-checkbox:not(:has(input:disabled)):hover .fancy-checkbox__icon,
+.fancy-checkbox:has(input:checked) .fancy-checkbox__icon {
 	--stroke-color: var(--primary);
 }
 </style>
@@ -84,13 +84,13 @@ const emit = defineEmits<{
 // Since css-has-pseudo doesn't work with deep classes,
 // the following rules can't be scoped
 
-.fancycheckbox:has(:not(input:checked)) .fancycheckbox__icon {
+.fancy-checkbox:has(:not(input:checked)) .fancy-checkbox__icon {
 	path {
 		transition-delay: 0.05s;
 	}
 }
 
-.fancycheckbox:has(input:checked) .fancycheckbox__icon {
+.fancy-checkbox:has(input:checked) .fancy-checkbox__icon {
 	path {
 		stroke-dashoffset: 60;
 	}
diff --git a/frontend/src/components/project/partials/filters.vue b/frontend/src/components/project/partials/filters.vue
index 14edc480e..1d687eac5 100644
--- a/frontend/src/components/project/partials/filters.vue
+++ b/frontend/src/components/project/partials/filters.vue
@@ -11,12 +11,12 @@
 		/>
 
 		<div class="field is-flex is-flex-direction-column">
-			<Fancycheckbox
+			<FancyCheckbox
 				v-model="params.filter_include_nulls"
 				@blur="change()"
 			>
 				{{ $t('filters.attributes.includeNulls') }}
-			</Fancycheckbox>
+			</FancyCheckbox>
 		</div>
 
 		<FilterInputDocs />
@@ -49,7 +49,7 @@ export const ALPHABETICAL_SORT = 'title'
 
 <script setup lang="ts">
 import {computed, ref, watch} from 'vue'
-import Fancycheckbox from '@/components/input/fancycheckbox.vue'
+import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
 import FilterInput from '@/components/project/partials/FilterInput.vue'
 import {useRoute} from 'vue-router'
 import type {TaskFilterParams} from '@/services/taskCollection'
diff --git a/frontend/src/components/project/views/ProjectGantt.vue b/frontend/src/components/project/views/ProjectGantt.vue
index 1cfc80fd8..bde0683c1 100644
--- a/frontend/src/components/project/views/ProjectGantt.vue
+++ b/frontend/src/components/project/views/ProjectGantt.vue
@@ -37,12 +37,12 @@
 							</x-button>
 						</div>
 					</div>
-					<Fancycheckbox
+					<FancyCheckbox
 						v-model="filters.showTasksWithoutDates"
 						is-block
 					>
 						{{ $t('project.gantt.showTasksWithoutDates') }}
-					</Fancycheckbox>
+					</FancyCheckbox>
 				</div>
 			</card>
 
@@ -81,7 +81,7 @@ import {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
 
 import Foo from '@/components/misc/flatpickr/Flatpickr.vue'
 import ProjectWrapper from '@/components/project/ProjectWrapper.vue'
-import Fancycheckbox from '@/components/input/fancycheckbox.vue'
+import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
 import TaskForm from '@/components/tasks/TaskForm.vue'
 
 import {createAsyncComponent} from '@/helpers/createAsyncComponent'
diff --git a/frontend/src/components/project/views/ProjectTable.vue b/frontend/src/components/project/views/ProjectTable.vue
index c1fa1e126..31bb1a96d 100644
--- a/frontend/src/components/project/views/ProjectTable.vue
+++ b/frontend/src/components/project/views/ProjectTable.vue
@@ -22,48 +22,48 @@
 							class="columns-filter"
 							:class="{'is-open': isOpen}"
 						>
-							<Fancycheckbox v-model="activeColumns.index">
+							<FancyCheckbox v-model="activeColumns.index">
 								#
-							</Fancycheckbox>
-							<Fancycheckbox v-model="activeColumns.done">
+							</FancyCheckbox>
+							<FancyCheckbox v-model="activeColumns.done">
 								{{ $t('task.attributes.done') }}
-							</Fancycheckbox>
-							<Fancycheckbox v-model="activeColumns.title">
+							</FancyCheckbox>
+							<FancyCheckbox v-model="activeColumns.title">
 								{{ $t('task.attributes.title') }}
-							</Fancycheckbox>
-							<Fancycheckbox v-model="activeColumns.priority">
+							</FancyCheckbox>
+							<FancyCheckbox v-model="activeColumns.priority">
 								{{ $t('task.attributes.priority') }}
-							</Fancycheckbox>
-							<Fancycheckbox v-model="activeColumns.labels">
+							</FancyCheckbox>
+							<FancyCheckbox v-model="activeColumns.labels">
 								{{ $t('task.attributes.labels') }}
-							</Fancycheckbox>
-							<Fancycheckbox v-model="activeColumns.assignees">
+							</FancyCheckbox>
+							<FancyCheckbox v-model="activeColumns.assignees">
 								{{ $t('task.attributes.assignees') }}
-							</Fancycheckbox>
-							<Fancycheckbox v-model="activeColumns.dueDate">
+							</FancyCheckbox>
+							<FancyCheckbox v-model="activeColumns.dueDate">
 								{{ $t('task.attributes.dueDate') }}
-							</Fancycheckbox>
-							<Fancycheckbox v-model="activeColumns.startDate">
+							</FancyCheckbox>
+							<FancyCheckbox v-model="activeColumns.startDate">
 								{{ $t('task.attributes.startDate') }}
-							</Fancycheckbox>
-							<Fancycheckbox v-model="activeColumns.endDate">
+							</FancyCheckbox>
+							<FancyCheckbox v-model="activeColumns.endDate">
 								{{ $t('task.attributes.endDate') }}
-							</Fancycheckbox>
-							<Fancycheckbox v-model="activeColumns.percentDone">
+							</FancyCheckbox>
+							<FancyCheckbox v-model="activeColumns.percentDone">
 								{{ $t('task.attributes.percentDone') }}
-							</Fancycheckbox>
-							<Fancycheckbox v-model="activeColumns.doneAt">
+							</FancyCheckbox>
+							<FancyCheckbox v-model="activeColumns.doneAt">
 								{{ $t('task.attributes.doneAt') }}
-							</Fancycheckbox>
-							<Fancycheckbox v-model="activeColumns.created">
+							</FancyCheckbox>
+							<FancyCheckbox v-model="activeColumns.created">
 								{{ $t('task.attributes.created') }}
-							</Fancycheckbox>
-							<Fancycheckbox v-model="activeColumns.updated">
+							</FancyCheckbox>
+							<FancyCheckbox v-model="activeColumns.updated">
 								{{ $t('task.attributes.updated') }}
-							</Fancycheckbox>
-							<Fancycheckbox v-model="activeColumns.createdBy">
+							</FancyCheckbox>
+							<FancyCheckbox v-model="activeColumns.createdBy">
 								{{ $t('task.attributes.createdBy') }}
-							</Fancycheckbox>
+							</FancyCheckbox>
 						</card>
 					</template>
 				</Popup>
@@ -277,7 +277,7 @@ import User from '@/components/misc/user.vue'
 import PriorityLabel from '@/components/tasks/partials/priorityLabel.vue'
 import Labels from '@/components/tasks/partials/labels.vue'
 import DateTableCell from '@/components/tasks/partials/date-table-cell.vue'
-import Fancycheckbox from '@/components/input/fancycheckbox.vue'
+import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
 import Sort from '@/components/tasks/partials/Sort.vue'
 import FilterPopup from '@/components/project/partials/filter-popup.vue'
 import Pagination from '@/components/misc/Pagination.vue'
diff --git a/frontend/src/components/tasks/partials/relatedTasks.vue b/frontend/src/components/tasks/partials/relatedTasks.vue
index 9ec64e919..b94d6d155 100644
--- a/frontend/src/components/tasks/partials/relatedTasks.vue
+++ b/frontend/src/components/tasks/partials/relatedTasks.vue
@@ -120,7 +120,7 @@
 					class="task"
 				>
 					<div class="is-flex is-align-items-center">
-						<Fancycheckbox
+						<FancyCheckbox
 							v-model="task.done"
 							class="task-done-checkbox"
 							@update:modelValue="toggleTaskDone(t)"
@@ -199,7 +199,7 @@ import TaskRelationModel from '@/models/taskRelation'
 import CustomTransition from '@/components/misc/CustomTransition.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/Multiselect.vue'
-import Fancycheckbox from '@/components/input/fancycheckbox.vue'
+import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
 
 import {error, success} from '@/message'
 import {useTaskStore} from '@/stores/tasks'
@@ -469,7 +469,7 @@ async function toggleTaskDone(task: ITask) {
 	padding: 0.5rem;
 }
 
-// FIXME: The height of the actual checkbox in the <Fancycheckbox/> component is too much resulting in a 
+// FIXME: The height of the actual checkbox in the <FancyCheckbox/> component is too much resulting in a 
 //  weired positioning of the checkbox. Setting the height here is a workaround until we fix the styling 
 //  of the component.
 .task-done-checkbox {
diff --git a/frontend/src/components/tasks/partials/singleTaskInProject.vue b/frontend/src/components/tasks/partials/singleTaskInProject.vue
index 38b780de0..bf527f96a 100644
--- a/frontend/src/components/tasks/partials/singleTaskInProject.vue
+++ b/frontend/src/components/tasks/partials/singleTaskInProject.vue
@@ -8,7 +8,7 @@
 			@mouseup.stop.self="openTaskDetail"
 			@mousedown.stop.self="focusTaskLink"
 		>
-			<Fancycheckbox
+			<FancyCheckbox
 				v-model="task.done"
 				:disabled="(isArchived || disabled) && !canMarkAsDone"
 				@update:modelValue="markAsDone"
@@ -189,7 +189,7 @@ import ChecklistSummary from '@/components/tasks/partials/checklist-summary.vue'
 
 import ProgressBar from '@/components/misc/ProgressBar.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
-import Fancycheckbox from '@/components/input/fancycheckbox.vue'
+import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
 import ColorBubble from '@/components/misc/ColorBubble.vue'
 import CustomTransition from '@/components/misc/CustomTransition.vue'
 
@@ -472,7 +472,7 @@ function focusTaskLink() {
 		opacity: 1;
 	}
 
-	:deep(.fancycheckbox) {
+	:deep(.fancy-checkbox) {
 		height: 18px;
 		padding-top: 0;
 		padding-right: .5rem;
diff --git a/frontend/src/views/project/ListProjects.vue b/frontend/src/views/project/ListProjects.vue
index 5529ae98f..782f2290b 100644
--- a/frontend/src/views/project/ListProjects.vue
+++ b/frontend/src/views/project/ListProjects.vue
@@ -5,12 +5,12 @@
 		:class="{'is-loading': loading}"
 	>
 		<header class="project-header">
-			<Fancycheckbox
+			<FancyCheckbox
 				v-model="showArchived"
 				v-cy="'show-archived-check'"
 			>
 				{{ $t('project.showArchived') }}
-			</Fancycheckbox>
+			</FancyCheckbox>
 
 			<div class="action-buttons">
 				<x-button
@@ -40,7 +40,7 @@
 import {computed} from 'vue'
 import {useI18n} from 'vue-i18n'
 
-import Fancycheckbox from '@/components/input/fancycheckbox.vue'
+import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
 import ProjectCardGrid from '@/components/project/partials/ProjectCardGrid.vue'
 
 import {useTitle} from '@/composables/useTitle'
diff --git a/frontend/src/views/project/settings/webhooks.vue b/frontend/src/views/project/settings/webhooks.vue
index fe5b9409f..8c2fa5315 100644
--- a/frontend/src/views/project/settings/webhooks.vue
+++ b/frontend/src/views/project/settings/webhooks.vue
@@ -21,7 +21,7 @@ import {formatDateShort} from '@/helpers/time/formatDate'
 import User from '@/components/misc/user.vue'
 import WebhookModel from '@/models/webhook'
 import BaseButton from '@/components/base/BaseButton.vue'
-import Fancycheckbox from '@/components/input/fancycheckbox.vue'
+import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
 import {success} from '@/message'
 import {isValidHttpUrl} from '@/helpers/isValidHttpUrl'
 
@@ -192,7 +192,7 @@ function validateSelectedEvents() {
 					{{ $t('project.webhooks.eventsHint') }}
 				</p>
 				<div class="control">
-					<Fancycheckbox
+					<FancyCheckbox
 						v-for="event in availableEvents"
 						:key="event"
 						v-model="newWebhookEvents[event]"
@@ -200,7 +200,7 @@ function validateSelectedEvents() {
 						@update:modelValue="validateSelectedEvents"
 					>
 						{{ event }}
-					</Fancycheckbox>
+					</FancyCheckbox>
 				</div>
 				<p
 					v-if="!selectedEventsValid"
diff --git a/frontend/src/views/tasks/ShowTasks.vue b/frontend/src/views/tasks/ShowTasks.vue
index f2220fdfb..128768bf7 100644
--- a/frontend/src/views/tasks/ShowTasks.vue
+++ b/frontend/src/views/tasks/ShowTasks.vue
@@ -22,19 +22,19 @@
 					</x-button>
 				</template>
 			</DatepickerWithRange>
-			<Fancycheckbox
+			<FancyCheckbox
 				:model-value="showNulls"
 				class="mr-2"
 				@update:modelValue="setShowNulls"
 			>
 				{{ $t('task.show.noDates') }}
-			</Fancycheckbox>
-			<Fancycheckbox
+			</FancyCheckbox>
+			<FancyCheckbox
 				:model-value="showOverdue"
 				@update:modelValue="setShowOverdue"
 			>
 				{{ $t('task.show.overdue') }}
-			</Fancycheckbox>
+			</FancyCheckbox>
 		</p>
 		<template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo">
 			<h3 class="has-text-centered mt-6">
@@ -76,7 +76,7 @@ import {useI18n} from 'vue-i18n'
 import {formatDate} from '@/helpers/time/formatDate'
 import {setTitle} from '@/helpers/setTitle'
 
-import Fancycheckbox from '@/components/input/fancycheckbox.vue'
+import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
 import SingleTaskInProject from '@/components/tasks/partials/singleTaskInProject.vue'
 import DatepickerWithRange from '@/components/date/DatepickerWithRange.vue'
 import {DATE_RANGES} from '@/components/date/dateRanges'
diff --git a/frontend/src/views/teams/EditTeam.vue b/frontend/src/views/teams/EditTeam.vue
index ff8beeca2..b44583af0 100644
--- a/frontend/src/views/teams/EditTeam.vue
+++ b/frontend/src/views/teams/EditTeam.vue
@@ -45,13 +45,13 @@
 						class="control is-expanded"
 						:class="{ 'is-loading': teamService.loading }"
 					>
-						<Fancycheckbox
+						<FancyCheckbox
 							v-model="team.isPublic"
 							:disabled="teamMemberService.loading || undefined"
 							:class="{ 'disabled': teamService.loading }"
 						>
 							{{ $t('team.attributes.isPublicDescription') }}
-						</Fancycheckbox>
+						</FancyCheckbox>
 					</div>
 				</div>
 				<div class="field">
@@ -263,7 +263,7 @@ import {useI18n} from 'vue-i18n'
 import {useRoute, useRouter} from 'vue-router'
 
 import Editor from '@/components/input/AsyncEditor'
-import Fancycheckbox from '@/components/input/fancycheckbox.vue'
+import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
 import Multiselect from '@/components/input/Multiselect.vue'
 import User from '@/components/misc/user.vue'
 
diff --git a/frontend/src/views/teams/NewTeam.vue b/frontend/src/views/teams/NewTeam.vue
index 62b475345..7a998c49b 100644
--- a/frontend/src/views/teams/NewTeam.vue
+++ b/frontend/src/views/teams/NewTeam.vue
@@ -37,12 +37,12 @@
 				class="control is-expanded"
 				:class="{ 'is-loading': teamService.loading }"
 			>
-				<Fancycheckbox
+				<FancyCheckbox
 					v-model="team.isPublic"
 					:class="{ 'disabled': teamService.loading }"
 				>
 					{{ $t('team.attributes.isPublicDescription') }}
-				</Fancycheckbox>
+				</FancyCheckbox>
 			</div>
 		</div>
 		<p
@@ -66,7 +66,7 @@ import TeamModel from '@/models/team'
 import TeamService from '@/services/team'
 
 import CreateEdit from '@/components/misc/CreateEdit.vue'
-import Fancycheckbox from '@/components/input/fancycheckbox.vue'
+import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
 
 import {useTitle} from '@/composables/useTitle'
 import {useRouter} from 'vue-router'
diff --git a/frontend/src/views/user/settings/ApiTokens.vue b/frontend/src/views/user/settings/ApiTokens.vue
index 963f8bf16..61b2ef294 100644
--- a/frontend/src/views/user/settings/ApiTokens.vue
+++ b/frontend/src/views/user/settings/ApiTokens.vue
@@ -5,7 +5,7 @@ import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
 import XButton from '@/components/input/button.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import ApiTokenModel from '@/models/apiTokenModel'
-import Fancycheckbox from '@/components/input/fancycheckbox.vue'
+import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
 import {MILLISECONDS_A_DAY} from '@/constants/date'
 import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
@@ -299,26 +299,26 @@ function toggleGroupPermissionsFromChild(group: string, checked: boolean) {
 					<template
 						v-if="Object.keys(routes).length >= 1"
 					>
-						<Fancycheckbox
+						<FancyCheckbox
 							v-model="newTokenPermissionsGroup[group]"
 							class="mr-2 is-capitalized has-text-weight-bold"
 							@update:modelValue="checked => selectPermissionGroup(group, checked)"
 						>
 							{{ formatPermissionTitle(group) }}
-						</Fancycheckbox>
+						</FancyCheckbox>
 						<br>
 					</template>
 					<template
 						v-for="(paths, route) in routes"
 						:key="group+'-'+route"
 					>
-						<Fancycheckbox
+						<FancyCheckbox
 							v-model="newTokenPermissions[group][route]"
 							class="ml-4 mr-2 is-capitalized"
 							@update:modelValue="checked => toggleGroupPermissionsFromChild(group, checked)"
 						>
 							{{ formatPermissionTitle(route) }}
-						</Fancycheckbox>
+						</FancyCheckbox>
 						<br>
 					</template>
 				</div>