Migrate nextcloud/vue component imports

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

22 files changed, 270 insertions, 270 deletions

diff --git a/src/App.vue b/src/App.vue
index 90d73b27..5ea13ab4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,15 +20,15 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<Content app-name="tasks">
+	<NcContent app-name="tasks">
 		<AppNavigation @click.native="closeAppSidebar($event)" />
 
-		<AppContent @click.native="closeAppSidebar($event)">
+		<NcAppContent @click.native="closeAppSidebar($event)">
 			<RouterView />
-		</AppContent>
+		</NcAppContent>
 
 		<RouterView name="sidebar" />
-	</Content>
+	</NcContent>
 </template>
 
 <script>
@@ -37,8 +37,8 @@ import client from './services/cdav.js'
 
 import { emit } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
-import AppContent from '@nextcloud/vue/dist/Components/AppContent'
-import Content from '@nextcloud/vue/dist/Components/Content'
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent'
+import NcContent from '@nextcloud/vue/dist/Components/NcContent'
 
 import { mapGetters } from 'vuex'
 
@@ -46,8 +46,8 @@ export default {
 	name: 'App',
 	components: {
 		AppNavigation,
-		AppContent,
-		Content,
+		NcAppContent,
+		NcContent,
 	},
 	computed: {
 		...mapGetters({
diff --git a/src/components/AppNavigation/AppNavigationSettings.vue b/src/components/AppNavigation/AppNavigationSettings.vue
index be21b32a..47c316f8 100644
--- a/src/components/AppNavigation/AppNavigationSettings.vue
+++ b/src/components/AppNavigation/AppNavigationSettings.vue
@@ -20,7 +20,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<AppNavigationSettings :title="appNavigationSettingsTitle">
+	<NcAppNavigationSettings :title="appNavigationSettingsTitle">
 		<div class="reactive">
 			<ul>
 				<li>
@@ -59,13 +59,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 				</li>
 			</ul>
 		</div>
-	</AppNavigationSettings>
+	</NcAppNavigationSettings>
 </template>
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import AppNavigationSettings from '@nextcloud/vue/dist/Components/AppNavigationSettings'
+import NcAppNavigationSettings from '@nextcloud/vue/dist/Components/NcAppNavigationSettings'
 
 import CalendarToday from 'vue-material-design-icons/CalendarToday'
 import CalendarWeek from 'vue-material-design-icons/CalendarWeek'
@@ -78,7 +78,7 @@ import { mapState, mapGetters, mapActions } from 'vuex'
 
 export default {
 	components: {
-		AppNavigationSettings,
+		NcAppNavigationSettings,
 		CalendarToday,
 		CalendarWeek,
 		CircleOutline,
diff --git a/src/components/AppNavigation/CalendarShare.vue b/src/components/AppNavigation/CalendarShare.vue
index b3239535..0972c1ac 100644
--- a/src/components/AppNavigation/CalendarShare.vue
+++ b/src/components/AppNavigation/CalendarShare.vue
@@ -30,7 +30,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 	<div class="calendar-shares">
 		<ul>
 			<li class="app-navigation-entry__multiselect">
-				<Multiselect id="users-groups-search"
+				<NcMultiselect id="users-groups-search"
 					:options="usersOrGroups"
 					:searchable="true"
 					:internal-search="false"
@@ -47,7 +47,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 					<template #noResult>
 						<span>{{ noResult }}</span>
 					</template>
-				</Multiselect>
+				</NcMultiselect>
 			</li>
 			<!-- list of user or groups calendar is shared with -->
 			<CalendarSharee v-for="sharee in calendar.shares"
@@ -66,7 +66,7 @@ import { urldecode } from '../../utils/url.js'
 import Axios from '@nextcloud/axios'
 import { translate as t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 
 import debounce from 'debounce'
 
@@ -74,7 +74,7 @@ export default {
 	name: 'CalendarShare',
 	components: {
 		CalendarSharee,
-		Multiselect,
+		NcMultiselect,
 	},
 	props: {
 		calendar: {
diff --git a/src/components/AppNavigation/CalendarSharee.vue b/src/components/AppNavigation/CalendarSharee.vue
index 779ee7d1..ea32884c 100644
--- a/src/components/AppNavigation/CalendarSharee.vue
+++ b/src/components/AppNavigation/CalendarSharee.vue
@@ -25,45 +25,45 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<AppNavigationItem :title="sharee.displayName">
+	<NcAppNavigationItem :title="sharee.displayName">
 		<template #icon>
 			<AccountMultiple v-if="sharee.isGroup"
 				:size="18"
 				class="avatar" />
 			<div v-else-if="sharee.isCircle" class="avatar icon-circles" />
-			<Avatar v-else
+			<NcAvatar v-else
 				:user="sharee.id"
 				:display-name="sharee.displayName"
 				:disable-menu="true" />
 		</template>
 
 		<template #counter>
-			<ActionCheckbox :disabled="loading"
+			<NcActionCheckbox :disabled="loading"
 				:checked="writeable"
 				@update:checked="editSharee">
 				{{ t('tasks', 'Can edit') }}
-			</ActionCheckbox>
+			</NcActionCheckbox>
 		</template>
 
 		<template #actions>
-			<ActionButton :disabled="loading"
+			<NcActionButton :disabled="loading"
 				@click.prevent.stop="deleteSharee">
 				<template #icon>
 					<Delete :size="20" />
 				</template>
 				{{ t('tasks', 'Unshare with {displayName}', { displayName: sharee.displayName }) }}
-			</ActionButton>
+			</NcActionButton>
 		</template>
-	</AppNavigationItem>
+	</NcAppNavigationItem>
 </template>
 
 <script>
 import { showError } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
 
 import AccountMultiple from 'vue-material-design-icons/AccountMultiple'
 import Delete from 'vue-material-design-icons/Delete'
@@ -71,10 +71,10 @@ import Delete from 'vue-material-design-icons/Delete'
 export default {
 	name: 'CalendarSharee',
 	components: {
-		ActionButton,
-		ActionCheckbox,
-		AppNavigationItem,
-		Avatar,
+		NcActionButton,
+		NcActionCheckbox,
+		NcAppNavigationItem,
+		NcAvatar,
 		AccountMultiple,
 		Delete,
 	},
diff --git a/src/components/AppNavigation/ListItemCalendar.vue b/src/components/AppNavigation/ListItemCalendar.vue
index 81f50bc1..8692f812 100644
--- a/src/components/AppNavigation/ListItemCalendar.vue
+++ b/src/components/AppNavigation/ListItemCalendar.vue
@@ -20,7 +20,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<AppNavigationItem :id="'list_' + calendar.id"
+	<NcAppNavigationItem :id="'list_' + calendar.id"
 		v-click-outside="{ handler: resetView, middleware: clickOutsideMiddleware }"
 		:calendar-id="calendar.id"
 		:to="{ name: 'calendars', params: { calendarId: calendar.id } }"
@@ -32,29 +32,29 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 		@dragenter.native="dragEnter"
 		@dragleave.native="dragLeave">
 		<template #icon>
-			<AppNavigationIconBullet :color="calendar.color" />
+			<NcAppNavigationIconBullet :color="calendar.color" />
 		</template>
 
 		<template v-if="!deleteTimeout" #counter>
-			<Actions v-if="calendar.canBeShared"
+			<NcActions v-if="calendar.canBeShared"
 				:class="{shared: hasShares}"
 				class="sharing">
-				<ActionButton @click="toggleShare">
+				<NcActionButton @click="toggleShare">
 					<template #icon>
 						<ShareVariant :size="20" />
 					</template>
 					{{ sharedWithTooltip }}
-				</ActionButton>
-			</Actions>
-			<Avatar v-if="calendar.isSharedWithMe && loadedOwnerPrincipal" :user="ownerUserId" :display-name="ownerDisplayname" />
+				</NcActionButton>
+			</NcActions>
+			<NcAvatar v-if="calendar.isSharedWithMe && loadedOwnerPrincipal" :user="ownerUserId" :display-name="ownerDisplayname" />
 			<div v-if="calendar.isSharedWithMe && !loadedOwnerPrincipal" class="icon icon-loading" />
-			<AppNavigationCounter v-if="calendarCount">
+			<NcAppNavigationCounter v-if="calendarCount">
 				{{ counterFormatter(calendarCount) }}
-			</AppNavigationCounter>
+			</NcAppNavigationCounter>
 		</template>
 
 		<template v-if="!deleteTimeout" #actions>
-			<ActionButton v-if="!calendar.readOnly"
+			<NcActionButton v-if="!calendar.readOnly"
 				class="edit-calendar"
 				:close-after-click="true"
 				@click="editCalendar">
@@ -62,8 +62,8 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					<Pencil :size="20" />
 				</template>
 				{{ t('tasks', 'Edit') }}
-			</ActionButton>
-			<ActionButton :close-after-click="true"
+			</NcActionButton>
+			<NcActionButton :close-after-click="true"
 				@click="copyCalDAVUrl($event, calendar)">
 				<template #icon>
 					<LinkVariant :size="20" />
@@ -73,15 +73,15 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					: copySuccess
 						? t('tasks', 'Copied')
 						: t('tasks', 'Cannot copy') }}
-			</ActionButton>
-			<ActionLink :close-after-click="true"
+			</NcActionButton>
+			<NcActionLink :close-after-click="true"
 				:href="exportUrl">
 				<template #icon>
 					<Download :size="20" />
 				</template>
 				{{ t('tasks', 'Export') }}
-			</ActionLink>
-			<ActionButton v-if="!calendar.readOnly || calendar.isSharedWithMe"
+			</NcActionLink>
+			<NcActionButton v-if="!calendar.readOnly || calendar.isSharedWithMe"
 				v-tooltip="{
 					placement: 'left',
 					boundariesElement: 'body',
@@ -95,16 +95,16 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					<Close :size="20" />
 				</template>
 				{{ !calendar.isSharedWithMe ? t('tasks', 'Delete') : t('tasks', 'Unshare') }}
-			</ActionButton>
+			</NcActionButton>
 		</template>
 
 		<template v-else #actions>
-			<ActionButton @click.prevent.stop="cancelDelete">
+			<NcActionButton @click.prevent.stop="cancelDelete">
 				<template #icon>
 					<Undo :size="20" />
 				</template>
 				{{ undoDeleteMessage }}
-			</ActionButton>
+			</NcActionButton>
 		</template>
 
 		<li>
@@ -134,7 +134,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 				<Colorpicker :selected-color="selectedColor" @color-selected="setColor(...arguments)" />
 			</div>
 		</li>
-	</AppNavigationItem>
+	</NcAppNavigationItem>
 </template>
 
 <script>
@@ -144,13 +144,13 @@ import ShareCalendar from './CalendarShare.vue'
 import { showSuccess, showError } from '@nextcloud/dialogs'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import { generateRemoteUrl } from '@nextcloud/router'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
-import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
-import AppNavigationIconBullet from '@nextcloud/vue/dist/Components/AppNavigationIconBullet'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
+import NcAppNavigationCounter from '@nextcloud/vue/dist/Components/NcAppNavigationCounter'
+import NcAppNavigationIconBullet from '@nextcloud/vue/dist/Components/NcAppNavigationIconBullet'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 
 import Close from 'vue-material-design-icons/Close'
@@ -170,13 +170,13 @@ export default {
 	components: {
 		Colorpicker,
 		ShareCalendar,
-		Avatar,
-		AppNavigationItem,
-		AppNavigationCounter,
-		AppNavigationIconBullet,
-		Actions,
-		ActionButton,
-		ActionLink,
+		NcAvatar,
+		NcAppNavigationItem,
+		NcAppNavigationCounter,
+		NcAppNavigationIconBullet,
+		NcActions,
+		NcActionButton,
+		NcActionLink,
 		Close,
 		Delete,
 		Download,
diff --git a/src/components/AppNavigation/Trashbin.vue b/src/components/AppNavigation/Trashbin.vue
index be67f232..2ed38b19 100644
--- a/src/components/AppNavigation/Trashbin.vue
+++ b/src/components/AppNavigation/Trashbin.vue
@@ -21,26 +21,26 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<AppNavigationItem :title="t('tasks', 'Trash bin')"
+	<NcAppNavigationItem :title="t('tasks', 'Trash bin')"
 		:pinned="true"
 		@click.prevent="onShow">
 		<template #icon>
 			<Delete :size="20" />
 		</template>
 		<template #extra>
-			<Modal v-if="showModal"
+			<NcModal v-if="showModal"
 				size="large"
 				@close="showModal = false">
 				<div class="modal__content">
-					<EmptyContent v-if="loading" icon="icon-loading">
+					<NcEmptyContent v-if="loading" icon="icon-loading">
 						{{ t('tasks', 'Loading deleted calendars, tasks and events.') }}
-					</EmptyContent>
-					<EmptyContent v-else-if="!items.length">
+					</NcEmptyContent>
+					<NcEmptyContent v-else-if="!items.length">
 						<template #icon>
 							<Delete :size="64" />
 						</template>
 						{{ t('tasks', 'You do not have any deleted calendars, tasks or events.') }}
-					</EmptyContent>
+					</NcEmptyContent>
 					<template v-else>
 						<h2>{{ t('tasks', 'Trash bin') }}</h2>
 						<div class="table">
@@ -70,20 +70,20 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 									<Moment class="timestamp" :timestamp="item.deletedAt" />
 								</div>
 								<div :key="`${item.url}action`" class="table__body">
-									<ButtonVue @click="restore(item)">
+									<NcButton @click="restore(item)">
 										<template #icon>
 											<Undo :size="20" />
 										</template>
 										{{ t('tasks','Restore') }}
-									</ButtonVue>
-									<Actions :force-menu="true">
-										<ActionButton @click="onDeletePermanently(item)">
+									</NcButton>
+									<NcActions :force-menu="true">
+										<NcActionButton @click="onDeletePermanently(item)">
 											<template #icon>
 												<Delete :size="20" />
 											</template>
 											{{ t('tasks','Delete permanently') }}
-										</ActionButton>
-									</Actions>
+										</NcActionButton>
+									</NcActions>
 								</div>
 							</template>
 						</div>
@@ -91,18 +91,18 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 							<p v-if="retentionDuration">
 								{{ n('tasks', 'Elements in the trash bin are deleted after {numDays} day', 'Elements in the trash bin are deleted after {numDays} days', retentionDuration, { numDays: retentionDuration }) }}
 							</p>
-							<ButtonVue type="primary" @click="onEmptyTrashBin()">
+							<NcButton type="primary" @click="onEmptyTrashBin()">
 								<template #icon>
 									<DeleteForever :size="20" />
 								</template>
 								{{ t('tasks','Empty trash bin') }}
-							</ButtonVue>
+							</NcButton>
 						</div>
 					</template>
 				</div>
-			</Modal>
+			</NcModal>
 		</template>
-	</AppNavigationItem>
+	</NcAppNavigationItem>
 </template>
 
 <script>
@@ -113,12 +113,12 @@ import logger from '../../utils/logger.js'
 import { showError } from '@nextcloud/dialogs'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal'
 
 import Delete from 'vue-material-design-icons/Delete'
 import DeleteForever from 'vue-material-design-icons/DeleteForever'
@@ -129,14 +129,14 @@ import { mapGetters } from 'vuex'
 export default {
 	name: 'Trashbin',
 	components: {
-		AppNavigationItem,
+		NcAppNavigationItem,
 		Delete,
-		EmptyContent,
-		Modal,
+		NcEmptyContent,
+		NcModal,
 		Moment,
-		Actions,
-		ActionButton,
-		ButtonVue,
+		NcActions,
+		NcActionButton,
+		NcButton,
 		DeleteForever,
 		Undo,
 	},
diff --git a/src/components/AppSidebar/CalendarPickerItem.vue b/src/components/AppSidebar/CalendarPickerItem.vue
index fa8f79f1..ba11ef7e 100644
--- a/src/components/AppSidebar/CalendarPickerItem.vue
+++ b/src/components/AppSidebar/CalendarPickerItem.vue
@@ -24,7 +24,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 
 <template>
 	<div class="property__item">
-		<Multiselect label="displayName"
+		<NcMultiselect label="displayName"
 			track-by="url"
 			:disabled="isDisabled"
 			:options="calendars"
@@ -43,7 +43,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					:is-shared-with-me="false"
 					:display-name="t('tasks', 'No calendar matches the search.')" />
 			</template>
-		</Multiselect>
+		</NcMultiselect>
 	</div>
 </template>
 
@@ -51,12 +51,12 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 import CalendarPickerOption from './CalendarPickerOption.vue'
 
 import { translate as t } from '@nextcloud/l10n'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 
 export default {
 	components: {
 		CalendarPickerOption,
-		Multiselect,
+		NcMultiselect,
 	},
 	props: {
 		calendar: {
diff --git a/src/components/AppSidebar/CalendarPickerOption.vue b/src/components/AppSidebar/CalendarPickerOption.vue
index ba208cfe..472793ce 100644
--- a/src/components/AppSidebar/CalendarPickerOption.vue
+++ b/src/components/AppSidebar/CalendarPickerOption.vue
@@ -31,7 +31,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			{{ displayName }}
 		</span>
 
-		<Avatar v-if="isSharedWithMe"
+		<NcAvatar v-if="isSharedWithMe"
 			class="calendar-picker-option__avatar"
 			:disable-menu="true"
 			:disable-tooltip="true"
@@ -42,11 +42,11 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
 export default {
 	name: 'CalendarPickerOption',
 	components: {
-		Avatar,
+		NcAvatar,
 	},
 	props: {
 		color: {
diff --git a/src/components/AppSidebar/DatetimePickerItem.vue b/src/components/AppSidebar/DatetimePickerItem.vue
index ab07f279..9589904c 100644
--- a/src/components/AppSidebar/DatetimePickerItem.vue
+++ b/src/components/AppSidebar/DatetimePickerItem.vue
@@ -36,7 +36,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 				{{ propertyString }}
 			</span>
 			<div v-if="editing" class="content__input">
-				<DatetimePicker :value="newValue"
+				<NcDatetimePicker :value="newValue"
 					:lang="lang"
 					:format="dateFormat"
 					:clearable="false"
@@ -46,7 +46,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					:placeholder="t('tasks', 'Set date')"
 					class="date"
 					@change="setDate" />
-				<DatetimePicker v-if="!allDay"
+				<NcDatetimePicker v-if="!allDay"
 					:value="newValue"
 					:lang="lang"
 					:format="timeFormat"
@@ -60,21 +60,21 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			</div>
 		</div>
 		<div class="item__actions">
-			<Actions v-show="editing" class="actions__set">
-				<ActionButton @click="setValue()">
+			<NcActions v-show="editing" class="actions__set">
+				<NcActionButton @click="setValue()">
 					<template #icon>
 						<Check :size="20" />
 					</template>
 					{{ t('tasks', 'Set date') }}
-				</ActionButton>
-			</Actions><Actions v-show="editing" class="actions__clear">
-				<ActionButton @click="clearValue">
+				</NcActionButton>
+			</NcActions><NcActions v-show="editing" class="actions__clear">
+				<NcActionButton @click="clearValue">
 					<template #icon>
 						<Delete :size="20" />
 					</template>
 					{{ t('tasks', 'Delete date') }}
-				</ActionButton>
-			</Actions>
+				</NcActionButton>
+			</NcActions>
 		</div>
 	</div>
 </template>
@@ -85,12 +85,12 @@ import { overdue } from '../../store/storeHelper.js'
 
 import { translate as t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import DatetimePicker from '@nextcloud/vue/dist/Components/DatetimePicker'
+import NcDatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker'
 
 export default {
 	name: 'DatetimePickerItem',
 	components: {
-		DatetimePicker,
+		NcDatetimePicker,
 	},
 	mixins: [editableItem],
 	props: {
diff --git a/src/components/AppSidebar/MultiselectItem.vue b/src/components/AppSidebar/MultiselectItem.vue
index 1b4ffd77..c0c32bb7 100644
--- a/src/components/AppSidebar/MultiselectItem.vue
+++ b/src/components/AppSidebar/MultiselectItem.vue
@@ -24,7 +24,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 
 <template>
 	<div class="property__item">
-		<Multiselect label="displayName"
+		<NcMultiselect label="displayName"
 			:disabled="isDisabled"
 			:options="options"
 			:value="value"
@@ -46,18 +46,18 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			<template #option="scope">
 				<MultiselectOption v-bind="scope.option" />
 			</template>
-		</Multiselect>
+		</NcMultiselect>
 	</div>
 </template>
 
 <script>
 import MultiselectOption from './MultiselectOption.vue'
 
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 
 export default {
 	components: {
-		Multiselect,
+		NcMultiselect,
 		MultiselectOption,
 	},
 	props: {
diff --git a/src/components/AppSidebar/SliderItem.vue b/src/components/AppSidebar/SliderItem.vue
index 9c03790e..ad7eaa4f 100644
--- a/src/components/AppSidebar/SliderItem.vue
+++ b/src/components/AppSidebar/SliderItem.vue
@@ -49,21 +49,21 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			</div>
 		</div>
 		<div class="item__actions">
-			<Actions v-show="editing" class="actions__set">
-				<ActionButton @click="setValue()">
+			<NcActions v-show="editing" class="actions__set">
+				<NcActionButton @click="setValue()">
 					<template #icon>
 						<Check :size="20" />
 					</template>
 					{{ t('tasks', 'Set value') }}
-				</ActionButton>
-			</Actions><Actions v-show="editing" class="actions__clear">
-				<ActionButton @click="clearValue">
+				</NcActionButton>
+			</NcActions><NcActions v-show="editing" class="actions__clear">
+				<NcActionButton @click="clearValue">
 					<template #icon>
 						<Delete :size="20" />
 					</template>
 					{{ t('tasks', 'Delete value') }}
-				</ActionButton>
-			</Actions>
+				</NcActionButton>
+			</NcActions>
 		</div>
 	</div>
 </template>
diff --git a/src/components/AppSidebar/TagsItem.vue b/src/components/AppSidebar/TagsItem.vue
index 940d20c1..dde6e7fd 100644
--- a/src/components/AppSidebar/TagsItem.vue
+++ b/src/components/AppSidebar/TagsItem.vue
@@ -24,7 +24,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 
 <template>
 	<div class="property__item">
-		<Multiselect :value="tags"
+		<NcMultiselect :value="tags"
 			:taggable="true"
 			:disabled="disabled"
 			:options="options"
@@ -45,7 +45,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			<template #noOptions>
 				{{ t('tasks', 'No tag available. Create one!') }}
 			</template>
-		</Multiselect>
+		</NcMultiselect>
 	</div>
 </template>
 
@@ -53,13 +53,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 import MultiselectOption from './MultiselectOption.vue'
 
 import { translate as t } from '@nextcloud/l10n'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 
 import Tag from 'vue-material-design-icons/Tag'
 
 export default {
 	components: {
-		Multiselect,
+		NcMultiselect,
 		MultiselectOption,
 		Tag,
 	},
diff --git a/src/components/DeleteCompletedModal.vue b/src/components/DeleteCompletedModal.vue
index 87dc97a9..c9651cce 100644
--- a/src/components/DeleteCompletedModal.vue
+++ b/src/components/DeleteCompletedModal.vue
@@ -21,15 +21,15 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 
 <template>
 	<div class="loadmore reactive">
-		<ButtonVue v-show="completedTasksCount"
+		<NcButton v-show="completedTasksCount"
 			type="tertiary"
 			@click="openModal">
 			<template #icon>
 				<Delete :size="20" />
 			</template>
 			{{ t('tasks', 'Delete all completed tasks.') }}
-		</ButtonVue>
-		<Modal v-if="modalOpen"
+		</NcButton>
+		<NcModal v-if="modalOpen"
 			size="normal"
 			:out-transition="true"
 			@close="closeModal">
@@ -39,14 +39,14 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					<h3>
 						{{ n('tasks', 'This will delete {taskCount} completed task and its subtasks from calendar "{calendar}".', 'This will delete {taskCount} completed tasks and their subtasks from calendar "{calendar}".', initialCompletedRootTasksCount, {taskCount: initialCompletedRootTasksCount, calendar: calendar.displayName}, { sanitize: false, escape: false }) }}
 					</h3>
-					<ButtonVue type="primary"
+					<NcButton type="primary"
 						class="delete-completed__button"
 						@click="deleteCompletedTasks">
 						<template #icon>
 							<Delete :size="20" />
 						</template>
 						{{ t('tasks', 'Delete completed tasks.') }}
-					</ButtonVue>
+					</NcButton>
 				</div>
 				<div v-else>
 					<h3>
@@ -66,14 +66,14 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					</p>
 				</div>
 			</div>
-		</Modal>
+		</NcModal>
 	</div>
 </template>
 
 <script>
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 
 import Delete from 'vue-material-design-icons/Delete'
@@ -82,9 +82,9 @@ import { mapGetters, mapActions } from 'vuex'
 
 export default {
 	components: {
-		ButtonVue,
+		NcButton,
 		Delete,
-		Modal,
+		NcModal,
 	},
 	directives: {
 		Tooltip,
diff --git a/src/components/LoadCompletedButton.vue b/src/components/LoadCompletedButton.vue
index 2395bd3d..1984700d 100644
--- a/src/components/LoadCompletedButton.vue
+++ b/src/components/LoadCompletedButton.vue
@@ -21,19 +21,19 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 
 <template>
 	<div v-show="!loadedCompleted" class="loadmore reactive">
-		<ButtonVue type="tertiary"
+		<NcButton type="tertiary"
 			@click="loadCompletedTasks">
 			<template #icon>
 				<CloudDownload :size="20" />
 			</template>
 			{{ t('tasks', 'Load all completed tasks.') }}
-		</ButtonVue>
+		</NcButton>
 	</div>
 </template>
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 
 import CloudDownload from 'vue-material-design-icons/CloudDownload'
 
@@ -41,7 +41,7 @@ import { mapActions } from 'vuex'
 
 export default {
 	components: {
-		ButtonVue,
+		NcButton,
 		CloudDownload,
 	},
 	props: {
diff --git a/src/components/SortorderDropdown.vue b/src/components/SortorderDropdown.vue
index 962aca47..8d063e62 100644
--- a/src/components/SortorderDropdown.vue
+++ b/src/components/SortorderDropdown.vue
@@ -20,7 +20,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<Actions class="sortorder reactive"
+	<NcActions class="sortorder reactive"
 		:title="t('tasks', 'Change sort order')"
 		container=".header"
 		menu-align="right">
@@ -33,7 +33,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 				class="sort-direction"
 				:size="18" />
 		</template>
-		<ActionButton v-for="order in orders"
+		<NcActionButton v-for="order in orders"
 			:key="order.id"
 			v-tooltip="{
 				placement: 'left',
@@ -54,14 +54,14 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					:size="18" />
 			</template>
 			{{ order.text }}
-		</ActionButton>
-	</Actions>
+		</NcActionButton>
+	</NcActions>
 </template>
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 
 import AnimationOutline from 'vue-material-design-icons/AnimationOutline'
@@ -81,8 +81,8 @@ import { mapGetters } from 'vuex'
 export default {
 	name: 'SortorderDropdown',
 	components: {
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 		AnimationOutline,
 		Bookmark,
 		CalendarStart,
diff --git a/src/components/TaskBody.vue b/src/components/TaskBody.vue
index 91a99106..4be3cf27 100644
--- a/src/components/TaskBody.vue
+++ b/src/components/TaskBody.vue
@@ -86,8 +86,8 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					<span class="date__short" :class="{ 'date__short--completed': task.completed }">{{ dueDateShort }}</span>
 					<span class="date__long" :class="{ 'date__long--date-only': task.allDay && !task.completed, 'date__long--completed': task.completed }">{{ dueDateLong }}</span>
 				</div>
-				<Actions v-if="task.deleteCountdown === null" class="reactive no-nav" menu-align="right">
-					<ActionButton v-if="!task.calendar.readOnly"
+				<NcActions v-if="task.deleteCountdown === null" class="reactive no-nav" menu-align="right">
+					<NcActionButton v-if="!task.calendar.readOnly"
 						:close-after-click="true"
 						class="reactive no-nav open-input"
 						@click="openSubtaskInput">
@@ -95,50 +95,50 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 							<Plus :size="20" />
 						</template>
 						{{ t('tasks', 'Add subtask') }}
-					</ActionButton>
-					<ActionButton v-if="Object.values(task.subTasks).length"
+					</NcActionButton>
+					<NcActionButton v-if="Object.values(task.subTasks).length"
 						class="reactive no-nav"
 						@click="toggleSubtasksVisibility(task)">
 						<template #icon>
 							<SortVariant :size="20" />
 						</template>
 						{{ task.hideSubtasks ? t('tasks', 'Show subtasks') : t('tasks', 'Hide subtasks') }}
-					</ActionButton>
-					<ActionButton v-if="hasCompletedSubtasks"
+					</NcActionButton>
+					<NcActionButton v-if="hasCompletedSubtasks"
 						class="reactive no-nav"
 						@click="toggleCompletedSubtasksVisibility(task)">
 						<template #icon>
 							<Eye :size="20" />
 						</template>
 						{{ task.hideCompletedSubtasks ? t('tasks', 'Show closed subtasks') : t('tasks', 'Hide closed subtasks') }}
-					</ActionButton>
-					<ActionButton v-if="!readOnly"
+					</NcActionButton>
+					<NcActionButton v-if="!readOnly"
 						class="reactive no-nav"
 						@click="scheduleTaskDeletion(task)">
 						<template #icon>
 							<Delete :size="20" />
 						</template>
 						{{ t('tasks', 'Delete task') }}
-					</ActionButton>
-				</Actions>
-				<Actions v-if="task.deleteCountdown !== null">
-					<ActionButton class="reactive no-nav"
+					</NcActionButton>
+				</NcActions>
+				<NcActions v-if="task.deleteCountdown !== null">
+					<NcActionButton class="reactive no-nav"
 						@click.prevent.stop="clearTaskDeletion(task)">
 						<template #icon>
 							<Undo :size="20" />
 						</template>
 						{{ n('tasks', 'Deleting the task in {countdown} second', 'Deleting the task in {countdown} seconds', task.deleteCountdown, { countdown: task.deleteCountdown }) }}
-					</ActionButton>
-				</Actions>
-				<Actions :disabled="readOnly" :class="[{ priority: task.priority }, priorityClass]" class="reactive no-nav">
-					<ActionButton :disabled="readOnly"
+					</NcActionButton>
+				</NcActions>
+				<NcActions :disabled="readOnly" :class="[{ priority: task.priority }, priorityClass]" class="reactive no-nav">
+					<NcActionButton :disabled="readOnly"
 						@click="toggleStarred(task)">
 						<template #icon>
 							<Star :size="20" />
 						</template>
 						{{ t('tasks', 'Toggle starred') }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 			</div>
 		</div>
 		<div class="task-item__subtasks">
@@ -173,8 +173,8 @@ import Task from '../models/task.js'
 import { emit } from '@nextcloud/event-bus'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import Linkify from '@nextcloud/vue/dist/Directives/Linkify'
 
 import Delete from 'vue-material-design-icons/Delete'
@@ -200,8 +200,8 @@ export default {
 		TaskCheckbox,
 		TaskStatusDisplay,
 		TaskDragContainer,
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 		Delete,
 		Eye,
 		Pin,
diff --git a/src/components/TaskCreateDialog.vue b/src/components/TaskCreateDialog.vue
index 055f4060..657940ce 100644
--- a/src/components/TaskCreateDialog.vue
+++ b/src/components/TaskCreateDialog.vue
@@ -26,10 +26,10 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<Modal class="task-selector" size="small" @close="close">
+	<NcModal class="task-selector" size="small" @close="close">
 		<div v-if="!creating && !created" id="modal-inner">
 			<div v-if="loading" class="loading-overlay">
-				<LoadingIcon :size="40" />
+				<NcLoadingIcon :size="40" />
 			</div>
 			<h3>{{ t('tasks', 'Create a new task') }}</h3>
 
@@ -52,40 +52,40 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					:disabled="loading" />
 			</div>
 			<div class="modal-buttons">
-				<ButtonVue @click="close">
+				<NcButton @click="close">
 					{{ t('tasks', 'Cancel') }}
-				</ButtonVue>
-				<ButtonVue :disabled="loading"
+				</NcButton>
+				<NcButton :disabled="loading"
 					type="primary"
 					@click="addTask">
 					{{ t('tasks', 'Create task') }}
-				</ButtonVue>
+				</NcButton>
 			</div>
 		</div>
 		<div v-else id="modal-inner">
-			<EmptyContent v-if="creating" key="creating">
+			<NcEmptyContent v-if="creating" key="creating">
 				{{ t('tasks', 'Creating the new task…') }}
 				<template #icon>
-					<LoadingIcon />
+					<NcLoadingIcon />
 				</template>
-			</EmptyContent>
-			<EmptyContent v-else-if="created" key="created">
+			</NcEmptyContent>
+			<NcEmptyContent v-else-if="created" key="created">
 				{{ t('tasks', '"{task}" was added to "{calendar}"', { task: pendingTitle, calendar: pendingCalendar.displayName }, undefined, { sanitize: false, escape: false }) }}
 				<template #icon>
 					<Check />
 				</template>
 				<template #desc>
 &nbsp;
-					<ButtonVue @click="close">
+					<NcButton @click="close">
 						{{ t('tasks', 'Close') }}
-					</ButtonVue>
-					<ButtonVue type="primary" @click="openNewTask">
+					</NcButton>
+					<NcButton type="primary" @click="openNewTask">
 						{{ t('tasks', 'Open task') }}
-					</ButtonVue>
+					</NcButton>
 				</template>
-			</EmptyContent>
+			</NcEmptyContent>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
@@ -95,10 +95,10 @@ import client from '../services/cdav.js'
 
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
-import LoadingIcon from '@nextcloud/vue/dist/Components/LoadingIcon'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal'
 
 import Check from 'vue-material-design-icons/Check'
 import TextBoxOutline from 'vue-material-design-icons/TextBoxOutline'
@@ -111,10 +111,10 @@ export default {
 	components: {
 		CalendarPickerItem,
 		Check,
-		ButtonVue,
-		EmptyContent,
-		LoadingIcon,
-		Modal,
+		NcButton,
+		NcEmptyContent,
+		NcLoadingIcon,
+		NcModal,
 		TextBoxOutline,
 		ViewHeadline,
 	},
diff --git a/src/components/TaskStatusDisplay.vue b/src/components/TaskStatusDisplay.vue
index b5e6b5be..67aaa234 100644
--- a/src/components/TaskStatusDisplay.vue
+++ b/src/components/TaskStatusDisplay.vue
@@ -20,8 +20,8 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<Actions v-if="status" :disabled="isDisabled">
-		<ActionButton :key="status.status" :disabled="isDisabled" @click="statusClicked">
+	<NcActions v-if="status" :disabled="isDisabled">
+		<NcActionButton :key="status.status" :disabled="isDisabled" @click="statusClicked">
 			<template #icon>
 				<AlertCircleOutline v-if="status.status==='error'" :size="20" class="status--error" />
 				<Check v-if="status.status==='success'" :size="20" class="status--success" />
@@ -29,13 +29,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 				<SyncAlert v-if="status.status==='conflict'" :size="20" class="status--conflict" />
 			</template>
 			{{ status.message }}
-		</ActionButton>
-	</Actions>
+		</NcActionButton>
+	</NcActions>
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 
 import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline'
 import Check from 'vue-material-design-icons/Check'
@@ -45,8 +45,8 @@ import SyncAlert from 'vue-material-design-icons/SyncAlert'
 export default {
 	name: 'TaskStatusDisplay',
 	components: {
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 		AlertCircleOutline,
 		Check,
 		Loading,
diff --git a/src/mixins/editableItem.js b/src/mixins/editableItem.js
index c8f9e602..58133c0b 100644
--- a/src/mixins/editableItem.js
+++ b/src/mixins/editableItem.js
@@ -21,8 +21,8 @@
  */
 import Task from '../models/task.js'
 
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 
 import Check from 'vue-material-design-icons/Check'
 import Delete from 'vue-material-design-icons/Delete'
@@ -31,8 +31,8 @@ import ClickOutside from 'v-click-outside'
 
 export default {
 	components: {
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 		Check,
 		Delete,
 	},
diff --git a/src/views/AppNavigation.vue b/src/views/AppNavigation.vue
index 44472296..43dea709 100644
--- a/src/views/AppNavigation.vue
+++ b/src/views/AppNavigation.vue
@@ -20,9 +20,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<AppNavigation>
+	<NcAppNavigation>
 		<template #list>
-			<AppNavigationItem v-for="collection in collections"
+			<NcAppNavigationItem v-for="collection in collections"
 				v-show="!hideCollection(collection)"
 				:id="'collection_' + collection.id"
 				:key="collection.id"
@@ -42,11 +42,11 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 						:size="20" />
 				</template>
 				<template #counter>
-					<AppNavigationCounter v-show="collectionCount(collection.id)">
+					<NcAppNavigationCounter v-show="collectionCount(collection.id)">
 						{{ counterFormatter(collectionCount(collection.id)) }}
-					</AppNavigationCounter>
+					</NcAppNavigationCounter>
 				</template>
-			</AppNavigationItem>
+			</NcAppNavigationItem>
 			<draggable class="draggable-container"
 				:set-data="setData"
 				v-bind="{swapThreshold: 0.30, delay: 500, delayOnTouchOnly: true, touchStartThreshold: 3}"
@@ -56,7 +56,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					:calendar="calendar"
 					@click.native="setInitialRoute(`/calendars/${calendar.id}`)" />
 			</draggable>
-			<AppNavigationItem v-click-outside="cancelCreate"
+			<NcAppNavigationItem v-click-outside="cancelCreate"
 				:title="t('tasks', 'Add List…')"
 				:class="{'collection--edit': creating}"
 				class="collection reactive"
@@ -92,13 +92,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 						<Colorpicker :selected-color="selectedColor" @color-selected="setColor(...arguments)" />
 					</div>
 				</li>
-			</AppNavigationItem>
+			</NcAppNavigationItem>
 			<Trashbin v-if="hasTrashBin" />
 		</template>
 		<template #footer>
 			<AppNavigationSettings />
 		</template>
-	</AppNavigation>
+	</NcAppNavigation>
 </template>
 
 <script>
@@ -108,9 +108,9 @@ import AppNavigationSettings from '../components/AppNavigation/AppNavigationSett
 import Trashbin from '../components/AppNavigation/Trashbin.vue'
 
 import { translate as t } from '@nextcloud/l10n'
-import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
-import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation'
+import NcAppNavigationCounter from '@nextcloud/vue/dist/Components/NcAppNavigationCounter'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 
 import CalendarToday from 'vue-material-design-icons/CalendarToday'
@@ -130,9 +130,9 @@ export default {
 		ListItemCalendar,
 		Colorpicker,
 		Trashbin,
-		AppNavigation,
-		AppNavigationItem,
-		AppNavigationCounter,
+		NcAppNavigation,
+		NcAppNavigationItem,
+		NcAppNavigationCounter,
 		AppNavigationSettings,
 		draggable,
 		CalendarToday,
diff --git a/src/views/AppSidebar.vue b/src/views/AppSidebar.vue
index 2cc0f6ff..3e57c1e8 100644
--- a/src/views/AppSidebar.vue
+++ b/src/views/AppSidebar.vue
@@ -20,7 +20,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<AppSidebar :title="title"
+	<NcAppSidebar :title="title"
 		:title-editable="editingTitle"
 		:linkify-title="true"
 		:subtitle="subtitle"
@@ -73,7 +73,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 		</template>
 
 		<template v-if="!task || (task && task.deleteCountdown === null)" #secondary-actions>
-			<ActionButton v-if="!readOnly"
+			<NcActionButton v-if="!readOnly"
 				@click="togglePinned(task)">
 				<template v-if="task.pinned" #icon>
 					<PinOff :size="20" />
@@ -82,8 +82,8 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					<Pin :size="20" />
 				</template>
 				{{ task.pinned ? t('tasks', 'Unpin') : t('tasks', 'Pin') }}
-			</ActionButton>
-			<ActionLink v-if="showInCalendar"
+			</NcActionButton>
+			<NcActionLink v-if="showInCalendar"
 				:href="calendarLink"
 				:close-after-click="true"
 				target="_blank">
@@ -91,38 +91,38 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					<Calendar :size="20" />
 				</template>
 				{{ t('tasks', 'Show in Calendar') }}
-			</ActionLink>
-			<ActionButton v-if="!readOnly"
+			</NcActionLink>
+			<NcActionButton v-if="!readOnly"
 				:close-after-click="true"
 				@click="editTitle(true)">
 				<template #icon>
 					<Pencil :size="20" />
 				</template>
 				{{ t('tasks', 'Edit title') }}
-			</ActionButton>
-			<ActionLink :href="downloadURL"
+			</NcActionButton>
+			<NcActionLink :href="downloadURL"
 				:close-after-click="true">
 				<template #icon>
 					<Download :size="20" />
 				</template>
 				{{ t('tasks', 'Export') }}
-			</ActionLink>
-			<ActionButton v-if="!readOnly"
+			</NcActionLink>
+			<NcActionButton v-if="!readOnly"
 				@click="scheduleTaskDeletion(task)">
 				<template #icon>
 					<Delete :size="20" />
 				</template>
 				{{ t('tasks', 'Delete') }}
-			</ActionButton>
+			</NcActionButton>
 		</template>
 		<template v-else #secondary-actions>
-			<ActionButton class="reactive no-nav"
+			<NcActionButton class="reactive no-nav"
 				@click.prevent.stop="clearTaskDeletion(task)">
 				<template #icon>
 					<Undo :size="20" />
 				</template>
 				{{ n('tasks', 'Deleting the task in {countdown} second', 'Deleting the task in {countdown} seconds', task.deleteCountdown, { countdown: task.deleteCountdown }) }}
-			</ActionButton>
+			</NcActionButton>
 		</template>
 
 		<template #tertiary-actions>
@@ -133,7 +133,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 				@toggle-completed="toggleCompleted(task)" />
 		</template>
 
-		<AppSidebarTab v-if="task"
+		<NcAppSidebarTab v-if="task"
 			id="app-sidebar-tab-details"
 			class="app-sidebar-tab"
 			:name="t('tasks', 'Details')"
@@ -191,12 +191,12 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					@add-tag="updateTag"
 					@set-tags="updateTags" />
 			</div>
-		</AppSidebarTab>
-		<EmptyContent v-else
+		</NcAppSidebarTab>
+		<NcEmptyContent v-else
 			:icon="taskStatusIcon">
 			{{ taskStatusLabel }}
-		</EmptyContent>
-		<AppSidebarTab v-if="task && (!readOnly || task.note)"
+		</NcEmptyContent>
+		<NcAppSidebarTab v-if="task && (!readOnly || task.note)"
 			id="app-sidebar-tab-notes"
 			class="app-sidebar-tab"
 			:name="t('tasks', 'Notes')"
@@ -209,24 +209,24 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 				:read-only="readOnly"
 				:task="task"
 				@set-value="({task, value}) => setNote({ task, note: value })" />
-		</AppSidebarTab>
-		<!-- <AppSidebarTab v-if="task"
+		</NcAppSidebarTab>
+		<!-- <NcAppSidebarTab v-if="task"
 			id="app-sidebar-tab-reminder"
 			class="app-sidebar-tab"
 			icon="icon-reminder"
 			:name="t('tasks', 'Reminders')"
 			:order="2">
 			Reminders
-		</AppSidebarTab>
-		<AppSidebarTab v-if="task"
+		</NcAppSidebarTab>
+		<NcAppSidebarTab v-if="task"
 			id="app-sidebar-tab-repeat"
 			class="app-sidebar-tab"
 			icon="icon-repeat"
 			:name="t('tasks', 'Repeat')"
 			:order="3">
 			Repeat
-		</AppSidebarTab> -->
-	</AppSidebar>
+		</NcAppSidebarTab> -->
+	</NcAppSidebar>
 </template>
 
 <script>
@@ -244,11 +244,11 @@ import Task from '../models/task.js'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
-import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar'
-import AppSidebarTab from '@nextcloud/vue/dist/Components/AppSidebarTab'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar'
+import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab'
 import { generateUrl } from '@nextcloud/router'
 
 import Calendar from 'vue-material-design-icons/Calendar'
@@ -269,10 +269,10 @@ import { mapGetters, mapActions } from 'vuex'
 
 export default {
 	components: {
-		AppSidebar,
-		AppSidebarTab,
-		ActionButton,
-		ActionLink,
+		NcAppSidebar,
+		NcAppSidebarTab,
+		NcActionButton,
+		NcActionLink,
 		CheckboxItem,
 		DatetimePickerItem,
 		Calendar,
@@ -288,7 +288,7 @@ export default {
 		Star,
 		TextBoxOutline,
 		Undo,
-		EmptyContent,
+		NcEmptyContent,
 		MultiselectItem,
 		SliderItem,
 		TagsItem,
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 20c73752..5a3f229c 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -23,7 +23,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
 	<div>
-		<DashboardWidget id="tasks_panel"
+		<NcDashboardWidget id="tasks_panel"
 			:items="filteredTasks.slice(0, hasTaskToday ? 6 : 4)"
 			:empty-content-message="t('tasks', 'No upcoming tasks')"
 			:show-more-text="t('tasks', 'upcoming tasks')"
@@ -31,7 +31,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			:show-items-and-empty-content="!hasTaskToday"
 			:half-empty-content-message="t('tasks', 'No tasks today')">
 			<template #default="{ item }">
-				<DashboardWidgetItem :main-text="item.summary"
+				<NcDashboardWidgetItem :main-text="item.summary"
 					:sub-text="formatSubtext(item)"
 					:target-url="getTasksAppUrl(item)">
 					<template #avatar>
@@ -40,28 +40,28 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 							:title="item.calendar.displayName" />
 					</template>
 					<template #actions>
-						<ActionButton v-if="!item.calendar.readOnly && !(item.calendar.isSharedWithMe && item.class !== 'PUBLIC')"
+						<NcActionButton v-if="!item.calendar.readOnly && !(item.calendar.isSharedWithMe && item.class !== 'PUBLIC')"
 							:close-after-click="true"
 							@click="onMarkAsDone(item)">
 							<template #icon>
 								<Check :size="20" decorative />
 							</template>
 							{{ t('tasks', 'Mark as done') }}
-						</ActionButton>
+						</NcActionButton>
 					</template>
-				</DashboardWidgetItem>
+				</NcDashboardWidgetItem>
 			</template>
 			<template #emptyContentIcon>
 				<TaskIcon />
 			</template>
-		</DashboardWidget>
+		</NcDashboardWidget>
 		<div v-if="!loading" class="center-button">
-			<ButtonVue @click="toggleAddTaskModel">
+			<NcButton @click="toggleAddTaskModel">
 				<template #icon>
 					<Plus :size="20" decorative />
 				</template>
 				{{ t('tasks', 'Create a new task') }}
-			</ButtonVue>
+			</NcButton>
 			<TaskCreateDialog v-if="showAddTaskModal" @close="toggleAddTaskModel" />
 		</div>
 	</div>
@@ -75,10 +75,10 @@ import { sort, isTaskInList } from '../store/storeHelper.js'
 
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import DashboardWidget from '@nextcloud/vue/dist/Components/DashboardWidget'
-import DashboardWidgetItem from '@nextcloud/vue/dist/Components/DashboardWidgetItem'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcDashboardWidget from '@nextcloud/vue/dist/Components/NcDashboardWidget'
+import NcDashboardWidgetItem from '@nextcloud/vue/dist/Components/NcDashboardWidgetItem'
 
 import Check from 'vue-material-design-icons/Check'
 import Plus from 'vue-material-design-icons/Plus'
@@ -88,11 +88,11 @@ import { mapGetters, mapActions } from 'vuex'
 export default {
 	name: 'Dashboard',
 	components: {
-		ActionButton,
-		ButtonVue,
+		NcActionButton,
+		NcButton,
 		Check,
-		DashboardWidget,
-		DashboardWidgetItem,
+		NcDashboardWidget,
+		NcDashboardWidgetItem,
 		TaskCreateDialog,
 		Plus,
 		TaskIcon,