dep/nextcloud-vue-6

Signed-off-by: dartcafe <github@dartcafe.de>

56 files changed, 434 insertions, 433 deletions

diff --git a/src/js/components/Actions/ActionChangeView.vue b/src/js/components/Actions/ActionChangeView.vue
index f7897a08..ba3a071b 100644
--- a/src/js/components/Actions/ActionChangeView.vue
+++ b/src/js/components/Actions/ActionChangeView.vue
@@ -22,20 +22,20 @@
 
 <template>
 	<div class="action change-view">
-		<VueButton v-tooltip="caption"
+		<NcButton v-tooltip="caption"
 			type="tertiary"
 			@click="clickAction()">
 			<template #icon>
 				<ListViewIcon v-if="viewMode === 'table-view'" />
 				<TableViewIcon v-else />
 			</template>
-		</VueButton>
+		</NcButton>
 	</div>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { Button as VueButton } from '@nextcloud/vue'
+import { NcButton } from '@nextcloud/vue'
 import { emit } from '@nextcloud/event-bus'
 import ListViewIcon from 'vue-material-design-icons/ViewListOutline.vue' // view-sequential-outline
 import TableViewIcon from 'vue-material-design-icons/Table.vue' // view-comfy-outline
@@ -46,7 +46,7 @@ export default {
 	components: {
 		ListViewIcon,
 		TableViewIcon,
-		VueButton,
+		NcButton,
 	},
 
 	computed: {
diff --git a/src/js/components/Actions/ActionDelete.vue b/src/js/components/Actions/ActionDelete.vue
index 7c82bf6c..2adddd9f 100644
--- a/src/js/components/Actions/ActionDelete.vue
+++ b/src/js/components/Actions/ActionDelete.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div class="">
-		<VueButton type="tertiary">
+		<NcButton type="tertiary">
 			<template #icon>
 				<UndoIcon v-if="deleteTimeout"
 					v-tooltip="countdownTitle"
@@ -33,12 +33,12 @@
 					:size="iconSize"
 					@click="deleteItem()" />
 			</template>
-		</VueButton>
+		</NcButton>
 	</div>
 </template>
 
 <script>
-import { Button as VueButton } from '@nextcloud/vue'
+import { NcButton } from '@nextcloud/vue'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 import UndoIcon from 'vue-material-design-icons/ArrowULeftTop.vue'
 
@@ -47,7 +47,7 @@ export default {
 	components: {
 		DeleteIcon,
 		UndoIcon,
-		VueButton,
+		NcButton,
 	},
 
 	props: {
diff --git a/src/js/components/Actions/ActionSendConfirmedOptions.vue b/src/js/components/Actions/ActionSendConfirmedOptions.vue
index 88f83f6a..fe36c6d0 100644
--- a/src/js/components/Actions/ActionSendConfirmedOptions.vue
+++ b/src/js/components/Actions/ActionSendConfirmedOptions.vue
@@ -24,12 +24,12 @@
 	<div class="action send-confirmations">
 		<div class="confirmation-button">
 			<h2>{{ headerCaption }}</h2>
-			<VueButton v-tooltip="caption" @click="clickAction()">
+			<NcButton v-tooltip="caption" @click="clickAction()">
 				<template #icon>
 					<EmailCheckIcon />
 				</template>
 				{{ t('polls', 'Send confirmation emails') }}
-			</VueButton>
+			</NcButton>
 		</div>
 		<div v-if="confirmations" class="confirmation-info">
 			<div v-if="confirmations.sent" class="sent-confirmations">
@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import { Button as VueButton } from '@nextcloud/vue'
+import { NcButton } from '@nextcloud/vue'
 import EmailCheckIcon from 'vue-material-design-icons/EmailCheck.vue' // view-comfy-outline
 import { showError, showSuccess } from '@nextcloud/dialogs'
 
@@ -62,7 +62,7 @@ export default {
 
 	components: {
 		EmailCheckIcon,
-		VueButton,
+		NcButton,
 	},
 
 	data() {
diff --git a/src/js/components/Actions/ActionSortOptions.vue b/src/js/components/Actions/ActionSortOptions.vue
index 33a59d8a..e69c5c0d 100644
--- a/src/js/components/Actions/ActionSortOptions.vue
+++ b/src/js/components/Actions/ActionSortOptions.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div class="action sort-options">
-		<VueButton v-tooltip="caption"
+		<NcButton v-tooltip="caption"
 			type="tertiary"
 			@click="clickAction()">
 			<template #icon>
@@ -30,13 +30,13 @@
 				<SortByOriginalOrderIcon v-else-if="isRanked && pollType === 'textPoll'" />
 				<SortByRankIcon v-else />
 			</template>
-		</VueButton>
+		</NcButton>
 	</div>
 </template>
 
 <script>
 import { mapState, mapMutations } from 'vuex'
-import { Button as VueButton } from '@nextcloud/vue'
+import { NcButton } from '@nextcloud/vue'
 import SortByOriginalOrderIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
 import SortByRankIcon from 'vue-material-design-icons/FormatListNumbered.vue'
 import SortByDateOptionIcon from 'vue-material-design-icons/SortClockAscendingOutline.vue'
@@ -48,7 +48,7 @@ export default {
 		SortByRankIcon,
 		SortByOriginalOrderIcon,
 		SortByDateOptionIcon,
-		VueButton,
+		NcButton,
 	},
 
 	computed: {
diff --git a/src/js/components/Actions/ActionToggleSidebar.vue b/src/js/components/Actions/ActionToggleSidebar.vue
index abef1a46..4e7087b9 100644
--- a/src/js/components/Actions/ActionToggleSidebar.vue
+++ b/src/js/components/Actions/ActionToggleSidebar.vue
@@ -22,18 +22,18 @@
 
 <template>
 	<div class="action toggle-sidebar">
-		<VueButton v-tooltip="caption"
+		<NcButton v-tooltip="caption"
 			type="tertiary"
 			@click="clickAction()">
 			<template #icon>
 				<SidebarIcon />
 			</template>
-		</VueButton>
+		</NcButton>
 	</div>
 </template>
 
 <script>
-import { Button as VueButton } from '@nextcloud/vue'
+import { NcButton } from '@nextcloud/vue'
 import { emit } from '@nextcloud/event-bus'
 import SidebarIcon from 'vue-material-design-icons/TextAccount.vue' // view-comfy-outline
 
@@ -42,7 +42,7 @@ export default {
 
 	components: {
 		SidebarIcon,
-		VueButton,
+		NcButton,
 	},
 
 	data() {
diff --git a/src/js/components/Activity/ActivityItem.vue b/src/js/components/Activity/ActivityItem.vue
index 40ebe82b..2d082658 100644
--- a/src/js/components/Activity/ActivityItem.vue
+++ b/src/js/components/Activity/ActivityItem.vue
@@ -32,7 +32,7 @@
 <script>
 import moment from '@nextcloud/moment'
 import { RichText } from '@nextcloud/vue-richtext'
-import { UserBubble } from '@nextcloud/vue'
+import { NcUserBubble } from '@nextcloud/vue'
 import SimpleLink from '../../helpers/SimpleLink.js'
 import GuestBubble from '../../helpers/GuestBubble.js'
 
@@ -77,7 +77,7 @@ export default {
 					break
 				case 'user':
 					parameters[key] = {
-						component: UserBubble,
+						component: NcUserBubble,
 						props: {
 							user: parameters[key].id,
 							displayName: parameters[key].name,
diff --git a/src/js/components/Base/Badge.vue b/src/js/components/Base/BadgeDiv.vue
index 81648a87..145e9861 100644
--- a/src/js/components/Base/Badge.vue
+++ b/src/js/components/Base/BadgeDiv.vue
@@ -33,7 +33,7 @@
 
 <script>
 export default {
-	name: 'Badge',
+	name: 'BadgeDiv',
 	props: {
 		tag: {
 			type: String,
diff --git a/src/js/components/Base/RadioGroupDiv.vue b/src/js/components/Base/RadioGroupDiv.vue
index bb8de9e1..80615fc1 100644
--- a/src/js/components/Base/RadioGroupDiv.vue
+++ b/src/js/components/Base/RadioGroupDiv.vue
@@ -22,7 +22,7 @@
 
 <template lang="html">
 	<div class="radio-group-div">
-		<CheckboxRadioSwitch v-for="(option, index) in options"
+		<NcCheckboxRadioSwitch v-for="(option, index) in options"
 			:key="option.value"
 			:checked.sync="selectedValue"
 			:value="option.value"
@@ -30,12 +30,12 @@
 			type="radio"
 			@update:checked="$emit('input', option.value)">
 			{{ option.label }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 	</div>
 </template>
 
 <script>
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
 const RandId = () => Math.random().toString(36).replace(/[^a-z]+/g, '').slice(2, 12)
 
@@ -43,7 +43,7 @@ export default {
 	name: 'RadioGroupDiv',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	props: {
diff --git a/src/js/components/Calendar/CalendarPeek.vue b/src/js/components/Calendar/CalendarPeek.vue
index abd66033..b808f5aa 100644
--- a/src/js/components/Calendar/CalendarPeek.vue
+++ b/src/js/components/Calendar/CalendarPeek.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<Popover class="calendar-peek">
+	<NcPopover class="calendar-peek">
 		<template v-if="events.length" #trigger>
 			<div class="calendar-peek__conflict icon icon-calendar" />
 			<p class="calendar-peek__caption">
@@ -34,14 +34,14 @@
 				:calendar-event="eventItem"
 				:option="option" />
 		</div>
-	</Popover>
+	</NcPopover>
 </template>
 n
 <script>
 
 import { mapState } from 'vuex'
 import { orderBy } from 'lodash'
-import { Popover } from '@nextcloud/vue'
+import { NcPopover } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
 import CalendarInfo from '../Calendar/CalendarInfo.vue'
 import { showError } from '@nextcloud/dialogs'
@@ -51,7 +51,7 @@ export default {
 
 	components: {
 		CalendarInfo,
-		Popover,
+		NcPopover,
 	},
 
 	props: {
diff --git a/src/js/components/Configuration/ConfigAdminAccess.vue b/src/js/components/Configuration/ConfigAdminAccess.vue
index 395393b6..e06bf4f5 100644
--- a/src/js/components/Configuration/ConfigAdminAccess.vue
+++ b/src/js/components/Configuration/ConfigAdminAccess.vue
@@ -21,20 +21,20 @@
   -->
 
 <template>
-	<CheckboxRadioSwitch :checked.sync="adminAccess" type="switch">
+	<NcCheckboxRadioSwitch :checked.sync="adminAccess" type="switch">
 		{{ label }}
-	</CheckboxRadioSwitch>
+	</NcCheckboxRadioSwitch>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'ConfigAdminAccess',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	data() {
diff --git a/src/js/components/Configuration/ConfigAllowComment.vue b/src/js/components/Configuration/ConfigAllowComment.vue
index 7982d6b1..4e67553c 100644
--- a/src/js/components/Configuration/ConfigAllowComment.vue
+++ b/src/js/components/Configuration/ConfigAllowComment.vue
@@ -21,20 +21,20 @@
   -->
 
 <template>
-	<CheckboxRadioSwitch :checked.sync="allowComment" type="switch">
+	<NcCheckboxRadioSwitch :checked.sync="allowComment" type="switch">
 		{{ t('polls', 'Allow Comments') }}
-	</CheckboxRadioSwitch>
+	</NcCheckboxRadioSwitch>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'ConfigAllowComment',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	computed: {
diff --git a/src/js/components/Configuration/ConfigAllowMayBe.vue b/src/js/components/Configuration/ConfigAllowMayBe.vue
index e55945fc..b0b2566f 100644
--- a/src/js/components/Configuration/ConfigAllowMayBe.vue
+++ b/src/js/components/Configuration/ConfigAllowMayBe.vue
@@ -21,20 +21,20 @@
   -->
 
 <template>
-	<CheckboxRadioSwitch :checked.sync="allowMaybe" type="switch">
+	<NcCheckboxRadioSwitch :checked.sync="allowMaybe" type="switch">
 		{{ label }}
-	</CheckboxRadioSwitch>
+	</NcCheckboxRadioSwitch>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'ConfigAllowMayBe',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	data() {
diff --git a/src/js/components/Configuration/ConfigAnonymous.vue b/src/js/components/Configuration/ConfigAnonymous.vue
index 35c876ff..e542ba2e 100644
--- a/src/js/components/Configuration/ConfigAnonymous.vue
+++ b/src/js/components/Configuration/ConfigAnonymous.vue
@@ -21,20 +21,20 @@
   -->
 
 <template>
-	<CheckboxRadioSwitch :checked.sync="anonymous" type="switch">
+	<NcCheckboxRadioSwitch :checked.sync="anonymous" type="switch">
 		{{ t('polls', 'Anonymous poll') }}
-	</CheckboxRadioSwitch>
+	</NcCheckboxRadioSwitch>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'ConfigAnonymous',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	computed: {
diff --git a/src/js/components/Configuration/ConfigAutoReminder.vue b/src/js/components/Configuration/ConfigAutoReminder.vue
index 17bfe6a6..2a514424 100644
--- a/src/js/components/Configuration/ConfigAutoReminder.vue
+++ b/src/js/components/Configuration/ConfigAutoReminder.vue
@@ -22,16 +22,16 @@
 
 <template>
 	<div class="auto-reminder-switch">
-		<CheckboxRadioSwitch :checked.sync="autoReminder" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="autoReminder" type="switch">
 			{{ t('polls', 'Use Autoreminder') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<Popover>
 			<template #trigger>
-				<Actions>
-					<ActionButton icon="icon-info">
+				<NcActions>
+					<NcActionButton icon="icon-info">
 						{{ t('polls', 'Autoreminder informations') }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 			</template>
 			<AutoReminderInformation />
 		</Popover>
@@ -40,15 +40,15 @@
 
 <script>
 import { mapState } from 'vuex'
-import { Actions, ActionButton, Popover, CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcActions, NcActionButton, Popover, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'ConfigAutoReminder',
 
 	components: {
-		CheckboxRadioSwitch,
-		Actions,
-		ActionButton,
+		NcCheckboxRadioSwitch,
+		NcActions,
+		NcActionButton,
 		Popover,
 		AutoReminderInformation: () => import('./AutoReminderInformation.vue'),
 	},
diff --git a/src/js/components/Configuration/ConfigClosing.vue b/src/js/components/Configuration/ConfigClosing.vue
index 925fbbeb..3f950346 100644
--- a/src/js/components/Configuration/ConfigClosing.vue
+++ b/src/js/components/Configuration/ConfigClosing.vue
@@ -22,24 +22,24 @@
 
 <template>
 	<div>
-		<VueButton @click="toggleClosed()">
+		<NcButton @click="toggleClosed()">
 			<template #icon>
 				<OpenPollIcon v-if="closed" />
 				<ClosePollIcon v-else />
 			</template>
 			{{ closed ? t('polls', 'Reopen poll'): t('polls', 'Close poll') }}
-		</VueButton>
-		<CheckboxRadioSwitch v-show="!closed" :checked.sync="useExpire" type="switch">
+		</NcButton>
+		<NcCheckboxRadioSwitch v-show="!closed" :checked.sync="useExpire" type="switch">
 			{{ t('polls', 'Poll closing date') }}
-		</CheckboxRadioSwitch>
-		<DatetimePicker v-show="useExpire && !closed" v-model="expire" v-bind="expirationDatePicker" />
+		</NcCheckboxRadioSwitch>
+		<NcDatetimePicker v-show="useExpire && !closed" v-model="expire" v-bind="expirationDatePicker" />
 	</div>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex'
 import moment from '@nextcloud/moment'
-import { Button as VueButton, DatetimePicker, CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcButton, NcDatetimePicker, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import OpenPollIcon from 'vue-material-design-icons/LockOpenVariant.vue'
 import ClosePollIcon from 'vue-material-design-icons/Lock.vue'
 
@@ -49,9 +49,9 @@ export default {
 	components: {
 		OpenPollIcon,
 		ClosePollIcon,
-		CheckboxRadioSwitch,
-		DatetimePicker,
-		VueButton,
+		NcCheckboxRadioSwitch,
+		NcDatetimePicker,
+		NcButton,
 	},
 
 	data() {
diff --git a/src/js/components/Configuration/ConfigOptionLimit.vue b/src/js/components/Configuration/ConfigOptionLimit.vue
index 48738834..a1087e63 100644
--- a/src/js/components/Configuration/ConfigOptionLimit.vue
+++ b/src/js/components/Configuration/ConfigOptionLimit.vue
@@ -22,9 +22,9 @@
 
 <template>
 	<div>
-		<CheckboxRadioSwitch :checked.sync="useOptionLimit" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="useOptionLimit" type="switch">
 			{{ t('polls', 'Limit "Yes" votes per option') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
 		<InputDiv v-if="optionLimit"
 			v-model="optionLimit"
@@ -33,25 +33,25 @@
 			inputmode="numeric"
 			use-num-modifiers />
 
-		<CheckboxRadioSwitch v-if="optionLimit"
+		<NcCheckboxRadioSwitch v-if="optionLimit"
 			class="indented"
 			:checked.sync="hideBookedUp"
 			type="switch">
 			{{ t('polls', 'Hide not available Options') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 	</div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import InputDiv from '../Base/InputDiv.vue'
 
 export default {
 	name: 'ConfigOptionLimit',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 		InputDiv,
 	},
 
diff --git a/src/js/components/Configuration/ConfigProposals.vue b/src/js/components/Configuration/ConfigProposals.vue
index 1e5f0427..03c8b4ee 100644
--- a/src/js/components/Configuration/ConfigProposals.vue
+++ b/src/js/components/Configuration/ConfigProposals.vue
@@ -22,30 +22,30 @@
 
 <template>
 	<div>
-		<CheckboxRadioSwitch :checked.sync="allowProposals" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="allowProposals" type="switch">
 			{{ t('polls', 'Allow Proposals') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
-		<CheckboxRadioSwitch v-show="proposalsAllowed" :checked.sync="proposalExpiration" type="switch">
+		<NcCheckboxRadioSwitch v-show="proposalsAllowed" :checked.sync="proposalExpiration" type="switch">
 			{{ t('polls', 'Proposal closing date') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
-		<DatetimePicker v-show="proposalExpiration && proposalsAllowed" v-model="pollExpire" v-bind="expirationDatePicker" />
+		<NcDatetimePicker v-show="proposalExpiration && proposalsAllowed" v-model="pollExpire" v-bind="expirationDatePicker" />
 	</div>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex'
 import moment from '@nextcloud/moment'
-import { CheckboxRadioSwitch, DatetimePicker } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch, NcDatetimePicker } from '@nextcloud/vue'
 import { writePoll } from '../../mixins/writePoll.js'
 
 export default {
 	name: 'ConfigProposals',
 
 	components: {
-		CheckboxRadioSwitch,
-		DatetimePicker,
+		NcCheckboxRadioSwitch,
+		NcDatetimePicker,
 	},
 
 	mixins: [writePoll],
diff --git a/src/js/components/Configuration/ConfigUseNo.vue b/src/js/components/Configuration/ConfigUseNo.vue
index dccac3fa..73ea9da8 100644
--- a/src/js/components/Configuration/ConfigUseNo.vue
+++ b/src/js/components/Configuration/ConfigUseNo.vue
@@ -21,20 +21,20 @@
   -->
 
 <template>
-	<CheckboxRadioSwitch :checked.sync="deleteVoteOnNo" type="switch">
+	<NcCheckboxRadioSwitch :checked.sync="deleteVoteOnNo" type="switch">
 		{{ label }}
-	</CheckboxRadioSwitch>
+	</NcCheckboxRadioSwitch>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'ConfigUseNo',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	data() {
diff --git a/src/js/components/Configuration/ConfigVoteLimit.vue b/src/js/components/Configuration/ConfigVoteLimit.vue
index 871aa248..5597f1d2 100644
--- a/src/js/components/Configuration/ConfigVoteLimit.vue
+++ b/src/js/components/Configuration/ConfigVoteLimit.vue
@@ -22,9 +22,9 @@
 
 <template>
 	<div>
-		<CheckboxRadioSwitch :checked.sync="useVoteLimit" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="useVoteLimit" type="switch">
 			{{ t('polls', 'Limit "Yes" votes per user') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
 		<InputDiv v-if="voteLimit"
 			v-model="voteLimit"
@@ -37,14 +37,14 @@
 
 <script>
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import InputDiv from '../Base/InputDiv.vue'
 
 export default {
 	name: 'ConfigVoteLimit',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 		InputDiv,
 	},
 
diff --git a/src/js/components/Export/ExportPoll.vue b/src/js/components/Export/ExportPoll.vue
index 14e9d153..04f2edfa 100644
--- a/src/js/components/Export/ExportPoll.vue
+++ b/src/js/components/Export/ExportPoll.vue
@@ -21,45 +21,45 @@
   -->

 

 <template lang="html">

-	<Actions>

+	<NcActions>

 		<template #icon>

 			<ExportIcon />

 		</template>

-		<ActionButton close-after-click @click="exportFile('xlsx')">

+		<NcActionButton close-after-click @click="exportFile('xlsx')">

 			<template #icon>

 				<ExcelIcon />

 			</template>

 			{{ t('polls', 'Download Excel spreadsheet') }}

-		</ActionButton>

+		</NcActionButton>

 

-		<ActionButton close-after-click @click="exportFile('ods')">

+		<NcActionButton close-after-click @click="exportFile('ods')">

 			<template #icon>

 				<FileTableIcon />

 			</template>

 			{{ t('polls', 'Download Open Document spreadsheet') }}

-		</ActionButton>

+		</NcActionButton>

 

-		<ActionButton close-after-click @click="exportFile('csv')">

+		<NcActionButton close-after-click @click="exportFile('csv')">

 			<template #icon>

 				<CsvIcon />

 			</template>

 			{{ t('polls', 'Download CSV file') }}

-		</ActionButton>

+		</NcActionButton>

 

-		<ActionButton close-after-click @click="exportFile('html')">

+		<NcActionButton close-after-click @click="exportFile('html')">

 			<template #icon>

 				<XmlIcon />

 			</template>

 			{{ t('polls', 'Download HTML file') }}

-		</ActionButton>

-	</Actions>

+		</NcActionButton>

+	</NcActions>

 </template>

 

 <script>

 import { mapGetters, mapState } from 'vuex'

 import { saveAs } from 'file-saver'

 import { utils as xlsxUtils, write as xlsxWrite } from 'xlsx'

-import { Actions, ActionButton } from '@nextcloud/vue'

+import { NcActions, NcActionButton } from '@nextcloud/vue'

 import ExcelIcon from 'vue-material-design-icons/MicrosoftExcel.vue'

 import FileTableIcon from 'vue-material-design-icons/FileTableOutline.vue'

 import CsvIcon from 'vue-material-design-icons/FileDelimited.vue'

@@ -69,8 +69,8 @@ import ExportIcon from 'vue-material-design-icons/FileDownloadOutline.vue'
 export default {

 	name: 'ExportPoll',

 	components: {

-		Actions,

-		ActionButton,

+		NcActions,

+		NcActionButton,

 		CsvIcon,

 		ExcelIcon,

 		FileTableIcon,

diff --git a/src/js/components/Navigation/PollNavigationItems.vue b/src/js/components/Navigation/PollNavigationItems.vue
index d22e02cb..b7b60111 100644
--- a/src/js/components/Navigation/PollNavigationItems.vue
+++ b/src/js/components/Navigation/PollNavigationItems.vue
@@ -21,7 +21,7 @@
   -->
 
 <template lang="html">
-	<AppNavigationItem :title="poll.title"
+	<NcAppNavigationItem :title="poll.title"
 		:to="{name: 'vote', params: {id: poll.id}}"
 		:class="{ closed: closed }">
 		<template #icon>
@@ -29,46 +29,46 @@
 			<DatePollIcon v-else />
 		</template>
 		<template #actions>
-			<ActionButton v-if="isPollCreationAllowed"
+			<NcActionButton v-if="isPollCreationAllowed"
 				@click="$emit('clone-poll')">
 				<template #icon>
 					<ClonePollIcon />
 				</template>
 				{{ t('polls', 'Clone poll') }}
-			</ActionButton>
+			</NcActionButton>
 
-			<ActionButton v-if="poll.allowEdit && !poll.deleted"
+			<NcActionButton v-if="poll.allowEdit && !poll.deleted"
 				@click="$emit('toggle-archive')">
 				<template #icon>
 					<ArchivePollIcon />
 				</template>
 				{{ t('polls', 'Archive poll') }}
-			</ActionButton>
+			</NcActionButton>
 
-			<ActionButton v-if="poll.allowEdit && poll.deleted"
+			<NcActionButton v-if="poll.allowEdit && poll.deleted"
 				@click="$emit('toggle-archive')">
 				<template #icon>
 					<RestorePollIcon />
 				</template>
 				{{ t('polls', 'Restore poll') }}
-			</ActionButton>
+			</NcActionButton>
 
-			<ActionButton v-if="poll.allowEdit && poll.deleted"
+			<NcActionButton v-if="poll.allowEdit && poll.deleted"
 				class="danger"
 				@click="$emit('delete-poll')">
 				<template #icon>
 					<DeletePollIcon />
 				</template>
 				{{ t('polls', 'Delete poll') }}
-			</ActionButton>
+			</NcActionButton>
 		</template>
-	</AppNavigationItem>
+	</NcAppNavigationItem>
 </template>
 
 <script>
 
 import { mapState, mapGetters } from 'vuex'
-import { ActionButton, AppNavigationItem } from '@nextcloud/vue'
+import { NcActionButton, NcAppNavigationItem } from '@nextcloud/vue'
 import DeletePollIcon from 'vue-material-design-icons/Delete.vue'
 import ClonePollIcon from 'vue-material-design-icons/ContentCopy.vue'
 import ArchivePollIcon from 'vue-material-design-icons/Archive.vue'
@@ -80,8 +80,8 @@ export default {
 	name: 'PollNavigationItems',
 
 	components: {
-		ActionButton,
-		AppNavigationItem,
+		NcActionButton,
+		NcAppNavigationItem,
 		DeletePollIcon,
 		ClonePollIcon,
 		ArchivePollIcon,
diff --git a/src/js/components/Options/OptionCloneDate.vue b/src/js/components/Options/OptionCloneDate.vue
index 3487aeef..74cca26a 100644
--- a/src/js/components/Options/OptionCloneDate.vue
+++ b/src/js/components/Options/OptionCloneDate.vue
@@ -26,7 +26,7 @@
 		<p>{{ t('polls', 'Create a sequence of date options starting with {dateOption}.', { dateOption: dateBaseOptionString }) }}</p>
 
 		<h3> {{ t('polls', 'Step unit') }} </h3>
-		<Multiselect v-model="sequence.unit"
+		<NcMultiselect v-model="sequence.unit"
 			:options="dateUnits"
 			label="name"
 			track-by="value" />
@@ -46,13 +46,13 @@
 		</div>
 
 		<div class="modal__buttons">
-			<VueButton @click="$emit('close')">
+			<NcButton @click="$emit('close')">
 				{{ t('polls', 'Cancel') }}
-			</VueButton>
+			</NcButton>
 
-			<VueButton type="primary" @click="createSequence()">
+			<NcButton type="primary" @click="createSequence()">
 				{{ t('polls', 'OK') }}
-			</VueButton>
+			</NcButton>
 		</div>
 	</div>
 </template>
@@ -60,7 +60,7 @@
 <script>
 
 import moment from '@nextcloud/moment'
-import { Button as VueButton, Multiselect } from '@nextcloud/vue'
+import { NcButton, NcMultiselect } from '@nextcloud/vue'
 import { dateUnits } from '../../mixins/dateMixins.js'
 import InputDiv from '../Base/InputDiv.vue'
 
@@ -69,8 +69,8 @@ export default {
 
 	components: {
 		InputDiv,
-		Multiselect,
-		VueButton,
+		NcMultiselect,
+		NcButton,
 	},
 
 	mixins: [dateUnits],
diff --git a/src/js/components/Options/OptionItemOwner.vue b/src/js/components/Options/OptionItemOwner.vue
index bc79d716..ed4f1ec9 100644
--- a/src/js/components/Options/OptionItemOwner.vue
+++ b/src/js/components/Options/OptionItemOwner.vue
@@ -26,7 +26,7 @@
 			:title="t('polls', 'Delete option')"
 			@delete="removeOption(option)" />
 
-		<Avatar v-else-if="option.owner.userId && option.owner.userId !== pollOwner"
+		<NcAvatar v-else-if="option.owner.userId && option.owner.userId !== pollOwner"
 			:user="option.owner.userId"
 			:display-name="option.owner.displayName"
 			:is-no-user="option.owner.isNoUser"
@@ -38,7 +38,7 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { Avatar } from '@nextcloud/vue'
+import { NcAvatar } from '@nextcloud/vue'
 import { removeOption } from '../../mixins/optionMixins.js'
 import ActionDelete from '../Actions/ActionDelete.vue'
 
@@ -46,7 +46,7 @@ export default {
 	name: 'OptionItemOwner',
 
 	components: {
-		Avatar,
+		NcAvatar,
 		ActionDelete,
 	},
 
diff --git a/src/js/components/Options/OptionsDate.vue b/src/js/components/Options/OptionsDate.vue
index 707e8ab6..292b8a60 100644
--- a/src/js/components/Options/OptionsDate.vue
+++ b/src/js/components/Options/OptionsDate.vue
@@ -41,15 +41,15 @@
 						:title="t('polls', 'Delete option')"
 						@delete="removeOption(option)" />
 
-					<Actions v-if="!closed" class="action">
-						<ActionButton v-if="!closed" @click="cloneOptionModal(option)">
+					<NcActions v-if="!closed" class="action">
+						<NcActionButton v-if="!closed" @click="cloneOptionModal(option)">
 							<template #icon>
 								<CloneDateIcon />
 							</template>
 							{{ t('polls', 'Clone option') }}
-						</ActionButton>
-					</Actions>
-					<VueButton v-if="closed"
+						</NcActionButton>
+					</NcActions>
+					<NcVueButton v-if="closed"
 						v-tooltip="option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option')"
 						type="tertiary"
 						@click="confirmOption(option)">
@@ -57,12 +57,12 @@
 							<UnconfirmIcon v-if="option.confirmed" />
 							<ConfirmIcon v-else />
 						</template>
-					</VueButton>
+					</NcVueButton>
 				</template>
 			</OptionItem>
 		</transition-group>
 
-		<EmptyContent v-else>
+		<NcEmptyContent v-else>
 			<template #icon>
 				<DatePollIcon />
 			</template>
@@ -72,17 +72,17 @@
 			</template>
 
 			{{ t('polls', 'No vote options') }}
-		</EmptyContent>
+		</NcEmptyContent>
 
-		<Modal v-if="cloneModal" size="small" :can-close="false">
+		<NcModal v-if="cloneModal" size="small" :can-close="false">
 			<OptionCloneDate :option="optionToClone" class="modal__content" @close="closeModal()" />
-		</Modal>
+		</NcModal>
 	</div>
 </template>
 
 <script>
 import { mapGetters, mapState } from 'vuex'
-import { Actions, ActionButton, Button as VueButton, EmptyContent, Modal } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcVueButton, NcEmptyContent, NcModal } from '@nextcloud/vue'
 import ActionDelete from '../Actions/ActionDelete.vue'
 import OptionCloneDate from './OptionCloneDate.vue'
 import OptionItem from './OptionItem.vue'
@@ -100,14 +100,14 @@ export default {
 		CloneDateIcon,
 		ConfirmIcon,
 		UnconfirmIcon,
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 		ActionDelete,
-		EmptyContent,
-		Modal,
+		NcEmptyContent,
+		NcModal,
 		OptionCloneDate,
 		OptionItem,
-		VueButton,
+		NcVueButton,
 		DatePollIcon,
 		OptionItemOwner: () => import('./OptionItemOwner.vue'),
 	},
diff --git a/src/js/components/Options/OptionsDateAdd.vue b/src/js/components/Options/OptionsDateAdd.vue
index 48c691da..3ffb768d 100644
--- a/src/js/components/Options/OptionsDateAdd.vue
+++ b/src/js/components/Options/OptionsDateAdd.vue
@@ -21,25 +21,25 @@
   -->
 
 <template>
-	<DatetimePicker v-model="pickerSelection"
+	<NcDatetimePicker v-model="pickerSelection"
 		v-bind="pickerOptions"
 		:open.sync="pickerOpen"
 		style="width: inherit;"
 		@change="changedDate"
 		@pick="pickedDate">
 		<template #input>
-			<VueButton type="primary" :aria-label="buttonAriaLabel">
+			<NcButton type="primary" :aria-label="buttonAriaLabel">
 				<template #icon>
 					<AddDateIcon />
 				</template>
 				<span v-if="caption"> {{ caption }} </span>
-			</VueButton>
+			</NcButton>
 		</template>
 
 		<template #header>
-			<CheckboxRadioSwitch :checked.sync="useRange" class="range" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="useRange" class="range" type="switch">
 				{{ t('polls', 'Select range') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 			<div class="picker-buttons">
 				<button v-if="useTime" @click="toggleTimePanel">
 					{{ showTimePanel
@@ -71,14 +71,15 @@
 				{{ t('polls', 'Pick a day.') }}
 			</div>
 		</template>
-	</DateTimePicker>
+		</DateTimePicker>
+	</ncdatetimepicker>
 </template>
 
 <script>
 
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
-import { Button as VueButton, CheckboxRadioSwitch, DatetimePicker } from '@nextcloud/vue'
+import { NcButton, NcCheckboxRadioSwitch, NcDatetimePicker } from '@nextcloud/vue'
 import FlexSpacer from '../Base/FlexSpacer.vue'
 import AddDateIcon from 'vue-material-design-icons/CalendarPlus.vue'
 
@@ -87,9 +88,9 @@ export default {
 
 	components: {
 		AddDateIcon,
-		VueButton,
-		CheckboxRadioSwitch,
-		DatetimePicker,
+		NcButton,
+		NcCheckboxRadioSwitch,
+		NcDatetimePicker,
 		FlexSpacer,
 	},
 
diff --git a/src/js/components/Options/OptionsDateShift.vue b/src/js/components/Options/OptionsDateShift.vue
index b3bfcd4f..2b9226bf 100644
--- a/src/js/components/Options/OptionsDateShift.vue
+++ b/src/js/components/Options/OptionsDateShift.vue
@@ -27,17 +27,17 @@
 		</div>
 		<div v-else class="select-unit">
 			<InputDiv v-model="shift.step" use-num-modifiers />
-			<Multiselect v-model="shift.unit"
+			<NcMultiselect v-model="shift.unit"
 				:options="dateUnits"
 				label="name"
 				track-by="value" />
-			<VueButton class="submit"
+			<NcButton class="submit"
 				type="tertiary"
 				@click="shiftDates(shift)">
 				<template #icon>
 					<SubmitIcon />
 				</template>
-			</VueButton>
+			</NcButton>
 		</div>
 	</div>
 </template>
@@ -46,7 +46,7 @@
 
 import { mapState, mapGetters } from 'vuex'
 import InputDiv from '../Base/InputDiv.vue'
-import { Button as VueButton, Multiselect } from '@nextcloud/vue'
+import { NcButton, NcMultiselect } from '@nextcloud/vue'
 import { dateUnits } from '../../mixins/dateMixins.js'
 import SubmitIcon from 'vue-material-design-icons/ArrowRight.vue'
 
@@ -56,8 +56,8 @@ export default {
 	components: {
 		SubmitIcon,
 		InputDiv,
-		Multiselect,
-		VueButton,
+		NcMultiselect,
+		NcButton,
 	},
 
 	mixins: [dateUnits],
diff --git a/src/js/components/Options/OptionsText.vue b/src/js/components/Options/OptionsText.vue
index b842d7b2..a990550c 100644
--- a/src/js/components/Options/OptionsText.vue
+++ b/src/js/components/Options/OptionsText.vue
@@ -44,7 +44,7 @@
 						<ActionDelete v-if="!closed"
 							:title="t('polls', 'Delete option')"
 							@delete="removeOption(option)" />
-						<VueButton v-if="closed"
+						<NcButton v-if="closed"
 							v-tooltip="option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option')"
 							type="tertiary"
 							@click="confirmOption(option)">
@@ -52,13 +52,13 @@
 								<UnconfirmIcon v-if="option.confirmed" />
 								<ConfirmIcon v-else />
 							</template>
-						</VueButton>
+						</NcButton>
 					</template>
 				</OptionItem>
 			</transition-group>
 		</draggable>
 
-		<EmptyContent v-else>
+		<NcEmptyContent v-else>
 			<template #icon>
 				<TextPollIcon />
 			</template>
@@ -68,13 +68,13 @@
 			</template>
 
 			{{ t('polls', 'No vote options') }}
-		</EmptyContent>
+		</NcEmptyContent>
 	</div>
 </template>
 
 <script>
 import { mapGetters, mapState } from 'vuex'
-import { Button as VueButton, EmptyContent } from '@nextcloud/vue'
+import { NcButton, NcEmptyContent } from '@nextcloud/vue'
 import draggable from 'vuedraggable'
 import ActionDelete from '../Actions/ActionDelete.vue'
 import OptionItem from './OptionItem.vue'
@@ -91,11 +91,11 @@ export default {
 		ConfirmIcon,
 		UnconfirmIcon,
 		ActionDelete,
-		EmptyContent,
+		NcEmptyContent,
 		draggable,
 		OptionItem,
 		OptionItemOwner,
-		VueButton,
+		NcButton,
 		TextPollIcon,
 		OptionsTextAdd: () => import('./OptionsTextAdd.vue'),
 	},
diff --git a/src/js/components/Options/OptionsTextAddBulk.vue b/src/js/components/Options/OptionsTextAddBulk.vue
index 6d652634..9b2481d7 100644
--- a/src/js/components/Options/OptionsTextAddBulk.vue
+++ b/src/js/components/Options/OptionsTextAddBulk.vue
@@ -22,16 +22,16 @@
 
 <template>
 	<div>
-		<Actions>
-			<ActionButton @click="showModal = true">
+		<NcActions>
+			<NcActionButton @click="showModal = true">
 				<template #icon>
 					<PasteIcon />
 				</template>
 				{{ caption }}
-			</ActionButton>
-		</Actions>
+			</NcActionButton>
+		</NcActions>
 
-		<Modal v-if="showModal" size="small" :can-close="false">
+		<NcModal v-if="showModal" size="small" :can-close="false">
 			<div class="option-clone-date modal__content">
 				<h2>{{ t('polls', 'Create multiple options at once') }}</h2>
 
@@ -42,22 +42,22 @@
 					:placeholder="placeholder" />
 
 				<div class="modal__buttons">
-					<VueButton @click="showModal = false">
+					<NcButton @click="showModal = false">
 						{{ t('polls', 'Close') }}
-					</VueButton>
+					</NcButton>
 
-					<VueButton type="primary" @click="addOptionsList()">
+					<NcButton type="primary" @click="addOptionsList()">
 						{{ t('polls', 'OK') }}
-					</VueButton>
+					</NcButton>
 				</div>
 			</div>
-		</Modal>
+		</NcModal>
 	</div>
 </template>
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import { Actions, ActionButton, Button as VueButton, Modal } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcButton, NcModal } from '@nextcloud/vue'
 import PasteIcon from 'vue-material-design-icons/ClipboardTextMultiple.vue'
 
 export default {
@@ -65,10 +65,10 @@ export default {
 
 	components: {
 		PasteIcon,
-		Actions,
-		ActionButton,
-		Modal,
-		VueButton,
+		NcActions,
+		NcActionButton,
+		NcModal,
+		NcButton,
 	},
 
 	props: {
diff --git a/src/js/components/Poll/PollHeaderButtons.vue b/src/js/components/Poll/PollHeaderButtons.vue
index f6f2e9e4..691595c4 100644
--- a/src/js/components/Poll/PollHeaderButtons.vue
+++ b/src/js/components/Poll/PollHeaderButtons.vue
@@ -23,17 +23,17 @@
 <template>
 	<div class="poll-header-buttons">
 		<UserMenu v-if="showUserMenu" />
-		<Popover>
+		<NcPopover>
 			<template #trigger>
-				<VueButton v-tooltip="t('polls', 'Poll informations')"
+				<NcButton v-tooltip="t('polls', 'Poll informations')"
 					type="tertiary">
 					<template #icon>
 						<PollInformationIcon />
 					</template>
-				</VueButton>
+				</NcButton>
 			</template>
 			<PollInformation />
-		</Popover>
+		</NcPopover>
 		<ExportPoll v-if="allowPollDownload" />
 		<ActionToggleSidebar v-if="allowEdit || allowComment" />
 	</div>
@@ -41,7 +41,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import { Button as VueButton, Popover } from '@nextcloud/vue'
+import { NcButton, NcPopover } from '@nextcloud/vue'
 import { emit } from '@nextcloud/event-bus'
 import ActionToggleSidebar from '../Actions/ActionToggleSidebar.vue'
 import PollInformationIcon from 'vue-material-design-icons/InformationOutline.vue'
@@ -51,8 +51,8 @@ export default {
 	components: {
 		ActionToggleSidebar,
 		PollInformationIcon,
-		Popover,
-		VueButton,
+		NcPopover,
+		NcButton,
 		UserMenu: () => import('../User/UserMenu.vue'),
 		ExportPoll: () => import('../Export/ExportPoll.vue'),
 		PollInformation: () => import('../Poll/PollInformation.vue'),
diff --git a/src/js/components/Poll/PollInformation.vue b/src/js/components/Poll/PollInformation.vue
index 8ad64fd8..33ed4a0b 100644
--- a/src/js/components/Poll/PollInformation.vue
+++ b/src/js/components/Poll/PollInformation.vue
@@ -22,119 +22,119 @@
 
 <template lang="html">
 	<div class="poll-information">
-		<Badge>
+		<BadgeDiv>
 			<template #icon>
 				<OwnerIcon />
 			</template>
-			{{ t('polls', 'Poll owner:') }} <UserBubble v-if="poll.owner.userId" :user="poll.owner.userId" :display-name="poll.owner.displayName" />
-		</Badge>
-		<Badge>
+			{{ t('polls', 'Poll owner:') }} <NcUserBubble v-if="poll.owner.userId" :user="poll.owner.userId" :display-name="poll.owner.displayName" />
+		</BadgeDiv>
+		<BadgeDiv>
 			<template #icon>
 				<PrivatePollIcon v-if="access === 'private'" />
 				<OpenPollIcon v-else />
 			</template>
 			{{ accessCaption }}
-		</Badge>
-		<Badge>
+		</BadgeDiv>
+		<BadgeDiv>
 			<template #icon>
 				<CreationIcon />
 			</template>
 			{{ t('polls', 'Created {dateRelative}', { dateRelative: dateCreatedRelative }) }}
-		</Badge>
-		<Badge v-if="poll.expire">
+		</BadgeDiv>
+		<BadgeDiv v-if="poll.expire">
 			<template #icon>
 				<ClosedIcon />
 			</template>
 			{{ t('polls', 'Closing: {dateRelative}', {dateRelative: dateExpiryRelative}) }}
-		</Badge>
-		<Badge v-if="poll.anonymous">
+		</BadgeDiv>
+		<BadgeDiv v-if="poll.anonymous">
 			<template #icon>
 				<AnoymousIcon />
 			</template>
 			{{ t('polls', 'Anonymous poll') }}
-		</Badge>
-		<Badge>
+		</BadgeDiv>
+		<BadgeDiv>
 			<template #icon>
 				<HideResultsIcon v-if="showResults === 'never'" />
 				<ShowResultsOnClosedIcon v-else-if="showResults === 'closed' && closed" />
 				<ShowResultsIcon v-else />
 			</template>
 			{{ resultsCaption }}
-		</Badge>
-		<Badge v-if="countParticipantsVoted && acl.allowSeeResults">
+		</BadgeDiv>
+		<BadgeDiv v-if="countParticipantsVoted && acl.allowSeeResults">
 			<template #icon>
 				<ParticipantsIcon />
 			</template>
 			{{ n('polls', '%n Participant', '%n Participants', countParticipantsVoted) }}
-		</Badge>
-		<Badge>
+		</BadgeDiv>
+		<BadgeDiv>
 			<template #icon>
 				<OptionsIcon />
 			</template>
 			{{ n('polls', '%n option', '%n options', countOptions) }}
-		</Badge>
-		<Badge v-if="countAllYesVotes">
+		</BadgeDiv>
+		<BadgeDiv v-if="countAllYesVotes">
 			<template #icon>
 				<CheckIcon fill-color="#49bc49" />
 			</template>
 			{{ n('polls', '%n "Yes" vote', '%n "Yes" votes', countAllYesVotes) }}
-		</Badge>
-		<Badge v-if="countAllNoVotes">
+		</BadgeDiv>
+		<BadgeDiv v-if="countAllNoVotes">
 			<template #icon>
 				<CloseIcon fill-color="#f45573" />
 			</template>
 			{{ n('polls', '%n No vote', '%n "No" votes', countAllNoVotes) }}
-		</Badge>
-		<Badge v-if="countAllMaybeVotes">
+		</BadgeDiv>
+		<BadgeDiv v-if="countAllMaybeVotes">
 			<template #icon>
 				<MaybeIcon />
 			</template>
 			{{ n('polls', '%n "Maybe" vote', '%n "Maybe" votes', countAllMaybeVotes) }}
-		</Badge>
-		<Badge>
+		</BadgeDiv>
+		<BadgeDiv>
 			<template #icon>
 				<TimezoneIcon />
 			</template>
 			{{ t('polls', 'Time zone: {timezoneString}', { timezoneString: currentTimeZone}) }}
-		</Badge>
-		<Badge v-if="proposalsAllowed">
+		</BadgeDiv>
+		<BadgeDiv v-if="proposalsAllowed">
 			<template #icon>
 				<ProposalsAllowedIcon />
 			</template>
 			{{ proposalsStatus }}
-		</Badge>
-		<Badge v-if="poll.voteLimit">
+		</BadgeDiv>
+		<BadgeDiv v-if="poll.voteLimit">
 			<template #icon>
 				<CheckIcon />
 			</template>
 			{{ n('polls', '%n of {maximalVotes} vote left.', '%n of {maximalVotes} votes left.', poll.voteLimit - countVotes('yes'), { maximalVotes: poll.voteLimit }) }}
-		</Badge>
-		<Badge v-if="poll.optionLimit">
+		</BadgeDiv>
+		<BadgeDiv v-if="poll.optionLimit">
 			<template #icon>
 				<CloseIcon />
 			</template>
 			{{ n('polls', 'Only %n vote per option.', 'Only %n votes per option.', poll.optionLimit) }}
-		</Badge>
-		<Badge v-if="$route.name === 'publicVote' && share.emailAddress">
+		</BadgeDiv>
+		<BadgeDiv v-if="$route.name === 'publicVote' && share.emailAddress">
 			<template #icon>
 				<EmailIcon />
 			</template>
 			{{ share.emailAddress }}
-		</Badge>
-		<Badge v-if="subscribed">
+		</BadgeDiv>
+		<BadgeDiv v-if="subscribed">
 			<template #icon>
 				<SubscribedIcon />
 			</template>
 			{{ t('polls', 'You subscribed to this poll') }}
-		</Badge>
+		</BadgeDiv>
 	</div>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex'
 import moment from '@nextcloud/moment'
-import { UserBubble } from '@nextcloud/vue'
-import Badge from '../Base/Badge.vue'
+import { NcUserBubble } from '@nextcloud/vue'
+import BadgeDiv from '../Base/BadgeDiv.vue'
 import OwnerIcon from 'vue-material-design-icons/Crown.vue'
 import SubscribedIcon from 'vue-material-design-icons/Bell.vue'
 import ProposalsAllowedIcon from 'vue-material-design-icons/Offer.vue'
@@ -158,8 +158,8 @@ export default {
 	name: 'PollInformation',
 
 	components: {
-		Badge,
-		UserBubble,
+		BadgeDiv,
+		NcUserBubble,
 		OwnerIcon,
 		SubscribedIcon,
 		ProposalsAllowedIcon,
diff --git a/src/js/components/Poll/PublicRegisterModal.vue b/src/js/components/Poll/PublicRegisterModal.vue
index 0a0367f4..8d7a7618 100644
--- a/src/js/components/Poll/PublicRegisterModal.vue
+++ b/src/js/components/Poll/PublicRegisterModal.vue
@@ -21,7 +21,7 @@
   -->
 
 <template lang="html">
-	<Modal v-show="modal" :size="modalSize" :can-close="false">
+	<NcModal v-show="modal" :size="modalSize" :can-close="false">
 		<div class="modal__content">
 			<div class="modal__registration">
 				<div class="registration__registration">
@@ -36,9 +36,9 @@
 						focus
 						@submit="submitRegistration" />
 
-					<CheckboxRadioSwitch v-if="share.type === 'public'" :checked.sync="saveCookie">
+					<NcCheckboxRadioSwitch v-if="share.type === 'public'" :checked.sync="saveCookie">
 						{{ t('polls', 'Remember me for 30 days') }}
-					</CheckboxRadioSwitch>
+					</NcCheckboxRadioSwitch>
 
 					<InputDiv v-if="share.publicPollEmail !== 'disabled'"
 						v-model="emailAddress"
@@ -57,21 +57,21 @@
 					</div>
 
 					<div class="modal__buttons">
-						<VueButton @click="closeModal">
+						<NcButton @click="closeModal">
 							{{ t('polls', 'Cancel') }}
-						</VueButton>
+						</NcButton>
 
-						<VueButton type="primary" :disabled="disableSubmit" @click="submitRegistration()">
+						<NcButton type="primary" :disabled="disableSubmit" @click="submitRegistration()">
 							{{ t('polls', 'OK') }}
-						</VueButton>
+						</NcButton>
 					</div>
 				</div>
 
 				<div v-if="share.showLogin" class="registration__login">
 					<h2> {{ t('polls', 'You are a registered user of this site?') }} </h2>
-					<VueButton wide @click="login()">
+					<NcButton wide @click="login()">
 						{{ t('polls', 'Login') }}
-					</VueButton>
+					</NcButton>
 					<div>
 						{{ t('polls', 'As a regular user of this site, you can participate with your internal identity after logging in.') }}
 					</div>
@@ -87,7 +87,7 @@
 					:name="t('polls', 'Legal Notice')" />
 			</div>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
@@ -95,7 +95,7 @@ import { debounce } from 'lodash'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
-import { Button as VueButton, Modal, CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcButton, NcModal, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { mapState } from 'vuex'
 import { RichText } from '@nextcloud/vue-richtext'
 import InputDiv from '../Base/InputDiv.vue'
@@ -105,12 +105,12 @@ export default {
 	name: 'PublicRegisterModal',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 		InputDiv,
-		Modal,
+		NcModal,
 		RichText,
 		SimpleLink,
-		VueButton,
+		NcButton,
 	},
 
 	data() {
diff --git a/src/js/components/PollList/PollItem.vue b/src/js/components/PollList/PollItem.vue
index 0591a8ab..168c6cbf 100644
--- a/src/js/components/PollList/PollItem.vue
+++ b/src/js/components/PollList/PollItem.vue
@@ -95,20 +95,20 @@
 
 		<div class="wrapper">
 			<div class="item__created">
-				<Badge>
+				<BadgeDiv>
 					<template #icon>
 						<CreationIcon />
 					</template>
 					{{ timeCreatedRelative }}
-				</Badge>
+				</BadgeDiv>
 			</div>
 			<div class="item__expiry">
-				<Badge :class="expiryClass">
+				<BadgeDiv :class="expiryClass">
 					<template #icon>
 						<ExpirationIcon />
 					</template>
 					{{ timeExpirationRelative }}
-				</Badge>
+				</BadgeDiv>
 			</div>
 		</div>
 	</div>
@@ -117,7 +117,7 @@
 <script>
 import { mapState } from 'vuex'
 import moment from '@nextcloud/moment'
-import Badge from '../Base/Badge.vue'
+import BadgeDiv from '../Base/BadgeDiv.vue'
 import TextPollIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
 import DatePollIcon from 'vue-material-design-icons/CalendarBlank.vue'
 import CreationIcon from 'vue-material-design-icons/ClockOutline.vue'
@@ -129,7 +129,7 @@ import ArchivedPollIcon from 'vue-material-design-icons/Archive.vue'
 export default {
 	name: 'PollItem',
 	components: {
-		Badge,
+		BadgeDiv,
 		TextPollIcon,
 		DatePollIcon,
 		CreationIcon,
diff --git a/src/js/components/Settings/AdminSettings/AdminCombo.vue b/src/js/components/Settings/AdminSettings/AdminCombo.vue
index ea0c7e79..0422b01a 100644
--- a/src/js/components/Settings/AdminSettings/AdminCombo.vue
+++ b/src/js/components/Settings/AdminSettings/AdminCombo.vue
@@ -22,12 +22,12 @@
 
 <template>
 	<div class="user_settings">
-		<CheckboxRadioSwitch :checked.sync="comboLimited" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="comboLimited" type="switch">
 			{{ t('polls', 'Deactivate combo view for all users') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<div v-if="comboLimited" class="settings_details">
 			<h3>{{ t('polls','Allow combo view for the following groups') }}</h3>
-			<Multiselect v-model="comboGroups"
+			<NcMultiselect v-model="comboGroups"
 				class="stretch"
 				label="displayName"
 				track-by="id"
@@ -45,15 +45,15 @@
 
 <script>
 
-import { CheckboxRadioSwitch, Multiselect } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch, NcMultiselect } from '@nextcloud/vue'
 import { loadGroups, writeValue } from '../../../mixins/adminSettingsMixin.js'
 
 export default {
 	name: 'AdminCombo',
 
 	components: {
-		CheckboxRadioSwitch,
-		Multiselect,
+		NcCheckboxRadioSwitch,
+		NcMultiselect,
 	},
 
 	mixins: [loadGroups, writeValue],
diff --git a/src/js/components/Settings/AdminSettings/AdminEmail.vue b/src/js/components/Settings/AdminSettings/AdminEmail.vue
index c3fcd41a..adc64bcb 100644
--- a/src/js/components/Settings/AdminSettings/AdminEmail.vue
+++ b/src/js/components/Settings/AdminSettings/AdminEmail.vue
@@ -22,15 +22,15 @@
 
 <template>
 	<div class="user_settings">
-		<CheckboxRadioSwitch :checked.sync="legalTermsInEmail" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="legalTermsInEmail" type="switch">
 			{{ t('polls', 'Add terms links also to the email footer') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
 		<div class="disclaimer_group">
 			<span class="grow_title">{{ t('polls', 'Additional email disclaimer') }}</span>
-			<CheckboxRadioSwitch :checked.sync="preview" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="preview" type="switch">
 				{{ t('polls', 'Preview') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 		</div>
 		<textarea v-show="!preview" v-model="disclaimer" @change="saveSettings()" />
 		<!-- eslint-disable-next-line vue/no-v-html -->
@@ -41,7 +41,7 @@
 <script>
 
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { marked } from 'marked'
 import DOMPurify from 'dompurify'
 
@@ -49,7 +49,7 @@ export default {
 	name: 'AdminEmail',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	data() {
diff --git a/src/js/components/Settings/AdminSettings/AdminHideMailAddresses.vue b/src/js/components/Settings/AdminSettings/AdminHideMailAddresses.vue
index 8f2701bc..7ef0d144 100644
--- a/src/js/components/Settings/AdminSettings/AdminHideMailAddresses.vue
+++ b/src/js/components/Settings/AdminSettings/AdminHideMailAddresses.vue
@@ -22,12 +22,12 @@
 
 <template>
 	<div class="user_settings">
-		<CheckboxRadioSwitch :checked.sync="hideMailAddresses" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="hideMailAddresses" type="switch">
 			{{ t('polls', 'Hide email addresses of internal users') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<div v-if="hideMailAddresses" class="settings_details">
 			<h3>{{ t('polls','Show email addresses of internal users to members of the following groups') }}</h3>
-			<Multiselect v-model="showMailAddressesGroups"
+			<NcMultiselect v-model="showMailAddressesGroups"
 				class="stretch"
 				label="displayName"
 				track-by="id"
@@ -45,15 +45,15 @@
 
 <script>
 
-import { CheckboxRadioSwitch, Multiselect } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch, NcMultiselect } from '@nextcloud/vue'
 import { loadGroups, writeValue } from '../../../mixins/adminSettingsMixin.js'
 
 export default {
 	name: 'AdminHideMailAddresses',
 
 	components: {
-		CheckboxRadioSwitch,
-		Multiselect,
+		NcCheckboxRadioSwitch,
+		NcMultiselect,
 	},
 
 	mixins: [loadGroups, writeValue],
diff --git a/src/js/components/Settings/AdminSettings/AdminMisc.vue b/src/js/components/Settings/AdminSettings/AdminMisc.vue
index 1090af36..aa87f9ef 100644
--- a/src/js/components/Settings/AdminSettings/AdminMisc.vue
+++ b/src/js/components/Settings/AdminSettings/AdminMisc.vue
@@ -23,17 +23,17 @@
 <template>
 	<div>
 		<div class="user_settings">
-			<CheckboxRadioSwitch :checked.sync="useActivity" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="useActivity" type="switch">
 				{{ t('polls', 'Track activities') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 
-			<CheckboxRadioSwitch :checked.sync="hideLogin" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="hideLogin" type="switch">
 				{{ t('polls', 'Hide login option in public polls') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 
-			<CheckboxRadioSwitch :checked.sync="autoArchive" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="autoArchive" type="switch">
 				{{ t('polls', 'Archive closed polls automatically') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 			<InputDiv v-if="autoArchive"
 				v-model="autoArchiveOffset"
 				class="settings_details"
@@ -48,14 +48,14 @@
 <script>
 
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import InputDiv from '../../Base/InputDiv.vue'
 
 export default {
 	name: 'AdminMisc',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 		InputDiv,
 	},
 
diff --git a/src/js/components/Settings/AdminSettings/AdminPollCreation.vue b/src/js/components/Settings/AdminSettings/AdminPollCreation.vue
index 230f0d9b..e58acb3d 100644
--- a/src/js/components/Settings/AdminSettings/AdminPollCreation.vue
+++ b/src/js/components/Settings/AdminSettings/AdminPollCreation.vue
@@ -22,12 +22,12 @@
 
 <template>
 	<div class="user_settings">
-		<CheckboxRadioSwitch :checked.sync="createPollLimited" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="createPollLimited" type="switch">
 			{{ t('polls', 'Disallow poll creation for all users') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<div v-if="createPollLimited" class="settings_details">
 			<h3>{{ t('polls','Allow poll creation for the following groups') }}</h3>
-			<Multiselect v-model="createPollGroups"
+			<NcMultiselect v-model="createPollGroups"
 				class="stretch"
 				label="displayName"
 				track-by="id"
@@ -46,14 +46,14 @@
 <script>
 
 import { loadGroups, writeValue } from '../../../mixins/adminSettingsMixin.js'
-import { CheckboxRadioSwitch, Multiselect } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch, NcMultiselect } from '@nextcloud/vue'
 
 export default {
 	name: 'AdminPollCreation',
 
 	components: {
-		CheckboxRadioSwitch,
-		Multiselect,
+		NcCheckboxRadioSwitch,
+		NcMultiselect,
 	},
 
 	mixins: [loadGroups, writeValue],
diff --git a/src/js/components/Settings/AdminSettings/AdminPollDownload.vue b/src/js/components/Settings/AdminSettings/AdminPollDownload.vue
index e8e8bb32..3acd02c9 100644
--- a/src/js/components/Settings/AdminSettings/AdminPollDownload.vue
+++ b/src/js/components/Settings/AdminSettings/AdminPollDownload.vue
@@ -22,12 +22,12 @@
 
 <template>
 	<div class="user_settings">
-		<CheckboxRadioSwitch :checked.sync="pollDownloadLimited" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="pollDownloadLimited" type="switch">
 			{{ t('polls', 'Disallow poll download') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<div v-if="pollDownloadLimited" class="settings_details">
 			<h3>{{ t('polls','Allow poll download for the following groups') }}</h3>
-			<Multiselect v-model="pollDownloadGroups"
+			<NcMultiselect v-model="pollDownloadGroups"
 				class="stretch"
 				label="displayName"
 				track-by="id"
@@ -45,15 +45,15 @@
 
 <script>
 
-import { CheckboxRadioSwitch, Multiselect } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch, NcMultiselect } from '@nextcloud/vue'
 import { loadGroups, writeValue } from '../../../mixins/adminSettingsMixin.js'
 
 export default {
 	name: 'AdminPollDownload',
 
 	components: {
-		CheckboxRadioSwitch,
-		Multiselect,
+		NcCheckboxRadioSwitch,
+		NcMultiselect,
 	},
 
 	mixins: [loadGroups, writeValue],
diff --git a/src/js/components/Settings/AdminSettings/AdminShareSettings.vue b/src/js/components/Settings/AdminSettings/AdminShareSettings.vue
index 3ad4c362..043b1fea 100644
--- a/src/js/components/Settings/AdminSettings/AdminShareSettings.vue
+++ b/src/js/components/Settings/AdminSettings/AdminShareSettings.vue
@@ -22,12 +22,12 @@
 
 <template>
 	<div class="user_settings">
-		<CheckboxRadioSwitch :checked.sync="publicSharesLimited" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="publicSharesLimited" type="switch">
 			{{ t('polls', 'Disallow public shares') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<div v-if="publicSharesLimited" class="settings_details">
 			<h3>{{ t('polls','Allow public shares for the following groups') }}</h3>
-			<Multiselect v-model="publicSharesGroups"
+			<NcMultiselect v-model="publicSharesGroups"
 				class="stretch"
 				label="displayName"
 				track-by="id"
@@ -41,12 +41,12 @@
 				@search-change="loadGroups" />
 		</div>
 
-		<CheckboxRadioSwitch :checked.sync="allAccessLimited" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="allAccessLimited" type="switch">
 			{{ t('polls', 'Disallow openly accessible polls') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<div v-if="allAccessLimited" class="settings_details">
 			<h3>{{ t('polls','Allow creating openly accessible polls for the following groups') }}</h3>
-			<Multiselect v-model="allAccessGroups"
+			<NcMultiselect v-model="allAccessGroups"
 				class="stretch"
 				label="displayName"
 				track-by="id"
@@ -64,15 +64,15 @@
 
 <script>
 
-import { CheckboxRadioSwitch, Multiselect } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch, NcMultiselect } from '@nextcloud/vue'
 import { loadGroups, writeValue } from '../../../mixins/adminSettingsMixin.js'
 
 export default {
 	name: 'AdminShareSettings',
 
 	components: {
-		CheckboxRadioSwitch,
-		Multiselect,
+		NcCheckboxRadioSwitch,
+		NcMultiselect,
 	},
 
 	mixins: [loadGroups, writeValue],
diff --git a/src/js/components/Settings/UserSettings/CalendarSettings.vue b/src/js/components/Settings/UserSettings/CalendarSettings.vue
index a7b202d8..58b9f2c2 100644
--- a/src/js/components/Settings/UserSettings/CalendarSettings.vue
+++ b/src/js/components/Settings/UserSettings/CalendarSettings.vue
@@ -23,20 +23,20 @@
 <template>
 	<div>
 		<div class="user_settings">
-			<CheckboxRadioSwitch :checked.sync="calendarPeek" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="calendarPeek" type="switch">
 				{{ t('polls', 'Use calendar lookup for conflicting calendar events') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 
 			<div v-show="calendarPeek" class="settings_details">
 				{{ t('polls', 'Select the calendars to use for lookup.') }}
 
 				<div v-for="(calendar) in calendarChoices" :key="calendar.key" class="calendar-item">
-					<CheckboxRadioSwitch :checked="calendar.selected"
+					<NcCheckboxRadioSwitch :checked="calendar.selected"
 						type="switch"
 						@update:checked="clickedCalendar(calendar)">
 						<span class="bully" :style="{ backgroundColor: calendar.displayColor }" />
 						{{ calendar.name }}
-					</CheckboxRadioSwitch>
+					</NcCheckboxRadioSwitch>
 				</div>
 			</div>
 		</div>
@@ -62,14 +62,14 @@
 <script>
 
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import InputDiv from '../../Base/InputDiv.vue'
 
 export default {
 	name: 'CalendarSettings',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 		InputDiv,
 	},
 
diff --git a/src/js/components/Settings/UserSettings/FeatureSettings.vue b/src/js/components/Settings/UserSettings/FeatureSettings.vue
index ab8fffbb..2dfaad1d 100644
--- a/src/js/components/Settings/UserSettings/FeatureSettings.vue
+++ b/src/js/components/Settings/UserSettings/FeatureSettings.vue
@@ -23,18 +23,18 @@
 <template>
 	<div>
 		<div class="user_settings">
-			<CheckboxRadioSwitch :checked.sync="defaultViewTextPoll" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="defaultViewTextPoll" type="switch">
 				{{ t('polls', 'Text polls default to list view') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 			<div class="settings_details">
 				{{ t('polls', 'Check this, if you prefer to display text poll in a vertical aligned list rather than in the grid view. The initial default is list view.') }}
 			</div>
 		</div>
 
 		<div class="user_settings">
-			<CheckboxRadioSwitch :checked.sync="defaultViewDatePoll" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="defaultViewDatePoll" type="switch">
 				{{ t('polls', 'Date polls default to list view') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 			<div class="settings_details">
 				{{ t('polls', 'Check this, if you prefer to display date poll in a vertical view rather than in the grid view. The initial default is grid view.') }}
 			</div>
@@ -45,13 +45,13 @@
 <script>
 
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'FeatureSettings',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	computed: {
diff --git a/src/js/components/Settings/UserSettings/StyleSettings.vue b/src/js/components/Settings/UserSettings/StyleSettings.vue
index 384e5c90..24b7460f 100644
--- a/src/js/components/Settings/UserSettings/StyleSettings.vue
+++ b/src/js/components/Settings/UserSettings/StyleSettings.vue
@@ -24,41 +24,41 @@
 	<div>
 		<b> {{ t('polls', 'The style settings are still experimental!') }}</b>
 		<div class="user_settings">
-			<CheckboxRadioSwitch :checked.sync="useDashboardStyling" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="useDashboardStyling" type="switch">
 				{{ t('polls', 'Adopt dashboard style') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 		</div>
 
 		<div v-if="!useDashboardStyling" class="user_settings">
-			<CheckboxRadioSwitch :checked.sync="useIndividualStyling" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="useIndividualStyling" type="switch">
 				{{ t('polls', 'Set individual styles') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 		</div>
 
 		<div v-if="useIndividualStyling && !useDashboardStyling">
 			<div class="user_settings">
-				<CheckboxRadioSwitch :checked.sync="individualBgColor" type="switch">
+				<NcCheckboxRadioSwitch :checked.sync="individualBgColor" type="switch">
 					{{ t('polls', 'Use background color') }}
-				</CheckboxRadioSwitch>
+				</NcCheckboxRadioSwitch>
 
-				<CheckboxRadioSwitch :checked.sync="individualImage" type="switch">
+				<NcCheckboxRadioSwitch :checked.sync="individualImage" type="switch">
 					{{ t('polls', 'Use background image') }}
-				</CheckboxRadioSwitch>
+				</NcCheckboxRadioSwitch>
 
 				<div v-if="individualImage" class="settings_details">
 					<InputDiv v-model="individualImageUrl"
 						type="text"
 						:placeholder="t('polls', 'Enter the URL of your favorite background image.')" />
-					<CheckboxRadioSwitch :checked.sync="individualImageStyle" type="switch">
+					<NcCheckboxRadioSwitch :checked.sync="individualImageStyle" type="switch">
 						{{ t('polls', 'Dark picture') }}
-					</CheckboxRadioSwitch>
+					</NcCheckboxRadioSwitch>
 				</div>
 			</div>
 
 			<div class="user_settings">
-				<CheckboxRadioSwitch :checked.sync="translucentPanels" type="switch">
+				<NcCheckboxRadioSwitch :checked.sync="translucentPanels" type="switch">
 					{{ t('polls', 'Translucent foreground elements') }}
-				</CheckboxRadioSwitch>
+				</NcCheckboxRadioSwitch>
 
 				<div class="settings_details">
 					{{ t('polls', 'Add a translucent effect on foreground elements like sidebar and poll table (Does not work with all browsers).') }}
@@ -66,9 +66,9 @@
 			</div>
 		</div>
 		<div class="user_settings">
-			<CheckboxRadioSwitch :checked.sync="useCommentsAlternativeStyling" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="useCommentsAlternativeStyling" type="switch">
 				{{ t('polls', 'Use alternative styling for the comments sidebar') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 		</div>
 	</div>
 </template>
@@ -76,14 +76,14 @@
 <script>
 
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import InputDiv from '../../Base/InputDiv.vue'
 
 export default {
 	name: 'StyleSettings',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 		InputDiv,
 	},
 
diff --git a/src/js/components/Settings/UserSettingsDlg.vue b/src/js/components/Settings/UserSettingsDlg.vue
index f379d544..8925d124 100644
--- a/src/js/components/Settings/UserSettingsDlg.vue
+++ b/src/js/components/Settings/UserSettingsDlg.vue
@@ -21,36 +21,36 @@
   -->
 
 <template>
-	<AppSettingsDialog :open.sync="show" :show-navigation="true">
-		<AppSettingsSection :title="t('polls', 'Calendar check')">
+	<NcAppSettingsDialog :open.sync="show" :show-navigation="true">
+		<NcAppSettingsSection :title="t('polls', 'Calendar check')">
 			<CalendarSettings />
-		</AppSettingsSection>
+		</NcAppSettingsSection>
 
-		<AppSettingsSection :title="t('polls', 'User settings')">
+		<NcAppSettingsSection :title="t('polls', 'User settings')">
 			<FeatureSettings />
-		</AppSettingsSection>
+		</NcAppSettingsSection>
 
-		<AppSettingsSection :title="t('polls', 'Performance settings')">
+		<NcAppSettingsSection :title="t('polls', 'Performance settings')">
 			<PerformanceSettings />
-		</AppSettingsSection>
+		</NcAppSettingsSection>
 
-		<AppSettingsSection :title="t('polls', 'Styles')">
+		<NcAppSettingsSection :title="t('polls', 'Styles')">
 			<StyleSettings />
-		</AppSettingsSection>
-	</AppSettingsDialog>
+		</NcAppSettingsSection>
+	</NcAppSettingsDialog>
 </template>
 
 <script>
 
-import { AppSettingsDialog, AppSettingsSection } from '@nextcloud/vue'
+import { NcAppSettingsDialog, NcAppSettingsSection } from '@nextcloud/vue'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 
 export default {
 	name: 'UserSettingsDlg',
 
 	components: {
-		AppSettingsDialog,
-		AppSettingsSection,
+		NcAppSettingsDialog,
+		NcAppSettingsSection,
 		CalendarSettings: () => import('./UserSettings/CalendarSettings.vue'),
 		FeatureSettings: () => import('./UserSettings/FeatureSettings.vue'),
 		StyleSettings: () => import('./UserSettings/StyleSettings.vue'),
diff --git a/src/js/components/Shares/ShareItemAllUsers.vue b/src/js/components/Shares/ShareItemAllUsers.vue
index 975b2c8b..ef2f3183 100644
--- a/src/js/components/Shares/ShareItemAllUsers.vue
+++ b/src/js/components/Shares/ShareItemAllUsers.vue
@@ -30,20 +30,20 @@
 		<template #status>
 			<div class="vote-status" />
 		</template>
-		<CheckboxRadioSwitch :checked.sync="pollAccess" type="switch" />
+		<NcCheckboxRadioSwitch :checked.sync="pollAccess" type="switch" />
 	</UserItem>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { writePoll } from '../../mixins/writePoll.js'
 
 export default {
 	name: 'ShareItemAllUsers',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	mixins: [writePoll],
diff --git a/src/js/components/Shares/SharePublicAdd.vue b/src/js/components/Shares/SharePublicAdd.vue
index 15273326..687378b7 100644
--- a/src/js/components/Shares/SharePublicAdd.vue
+++ b/src/js/components/Shares/SharePublicAdd.vue
@@ -29,24 +29,24 @@
 		<template #status>
 			<div class="vote-status" />
 		</template>
-		<Actions>
-			<ActionButton icon="icon-add" @click="addPublicShare()">
+		<NcActions>
+			<NcActionButton icon="icon-add" @click="addPublicShare()">
 				{{ t('polls', 'Add a new public link') }}
-			</ActionButton>
-		</Actions>
+			</NcActionButton>
+		</NcActions>
 	</UserItem>
 </template>
 
 <script>
 import { showError } from '@nextcloud/dialogs'
-import { Actions, ActionButton } from '@nextcloud/vue'
+import { NcActions, NcActionButton } from '@nextcloud/vue'
 
 export default {
 	name: 'SharePublicAdd',
 
 	components: {
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 	},
 
 	methods: {
diff --git a/src/js/components/Shares/SharesList.vue b/src/js/components/Shares/SharesList.vue
index 96ad5570..426a0e37 100644
--- a/src/js/components/Shares/SharesList.vue
+++ b/src/js/components/Shares/SharesList.vue
@@ -48,15 +48,15 @@
 						</div>
 					</template>
 
-					<Actions>
-						<ActionButton v-if="share.emailAddress || share.type === 'group'" @click="sendInvitation(share)">
+					<NcActions>
+						<NcActionButton v-if="share.emailAddress || share.type === 'group'" @click="sendInvitation(share)">
 							<template #icon>
 								<SendEmailIcon />
 							</template>
 							{{ share.invitationSent ? t('polls', 'Resend invitation mail') : t('polls', 'Send invitation mail') }}
-						</ActionButton>
+						</NcActionButton>
 
-						<ActionButton v-if="share.type === 'user' || share.type === 'admin'" @click="switchAdmin({ share })">
+						<NcActionButton v-if="share.type === 'user' || share.type === 'admin'" @click="switchAdmin({ share })">
 							<template #icon>
 								<span v-if="share.type === 'user'"
 									aria-hidden="true"
@@ -84,37 +84,37 @@
 								</span>
 							</template>
 							{{ share.type === 'user' ? t('polls', 'Grant poll admin access') : t('polls', 'Withdraw poll admin access') }}
-						</ActionButton>
+						</NcActionButton>
 
-						<ActionButton @click="copyLink( { url: share.URL })">
+						<NcActionButton @click="copyLink( { url: share.URL })">
 							<template #icon>
 								<ClippyIcon />
 							</template>
 							{{ t('polls', 'Copy link to clipboard') }}
-						</ActionButton>
-						<ActionCaption v-if="share.type === 'public'" :title="t('polls', 'Options for the registration dialog')" />
-						<ActionRadio v-if="share.type === 'public'"
+						</NcActionButton>
+						<NcActionCaption v-if="share.type === 'public'" :title="t('polls', 'Options for the registration dialog')" />
+						<NcActionRadio v-if="share.type === 'public'"
 							name="publicPollEmail"
 							value="optional"
 							:checked="share.publicPollEmail === 'optional'"
 							@change="setPublicPollEmail({ share, value: 'optional' })">
 							{{ t('polls', 'Email address is optional') }}
-						</ActionRadio>
-						<ActionRadio v-if="share.type === 'public'"
+						</NcActionRadio>
+						<NcActionRadio v-if="share.type === 'public'"
 							name="publicPollEmail"
 							value="mandatory"
 							:checked="share.publicPollEmail === 'mandatory'"
 							@change="setPublicPollEmail({ share, value: 'mandatory' })">
 							{{ t('polls', 'Email address is mandatory') }}
-						</ActionRadio>
-						<ActionRadio v-if="share.type === 'public'"
+						</NcActionRadio>
+						<NcActionRadio v-if="share.type === 'public'"
 							name="publicPollEmail"
 							value="disabled"
 							:checked="share.publicPollEmail === 'disabled'"
 							@change="setPublicPollEmail({ share, value: 'disabled' })">
 							{{ t('polls', 'Do not ask for email address') }}
-						</ActionRadio>
-					</Actions>
+						</NcActionRadio>
+					</NcActions>
 
 					<ActionDelete :title="t('polls', 'Remove share')"
 						@delete="removeShare({ share })" />
@@ -127,7 +127,7 @@
 <script>
 import { mapGetters, mapActions, mapState } from 'vuex'
 import { showSuccess, showError } from '@nextcloud/dialogs'
-import { Actions, ActionButton, ActionCaption, ActionRadio } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcActionCaption, NcActionRadio } from '@nextcloud/vue'
 import ActionDelete from '../Actions/ActionDelete.vue'
 import ConfigBox from '../Base/ConfigBox.vue'
 import VotedIcon from 'vue-material-design-icons/CheckboxMarked.vue'
@@ -149,11 +149,11 @@ export default {
 		UnvotedIcon,
 		UserSearch,
 		VotedIcon,
-		Actions,
-		ActionButton,
-		ActionCaption,
+		NcActions,
+		NcActionButton,
+		NcActionCaption,
 		ActionDelete,
-		ActionRadio,
+		NcActionRadio,
 		ConfigBox,
 		SharePublicAdd,
 		ShareItemAllUsers,
diff --git a/src/js/components/Shares/SharesListUnsent.vue b/src/js/components/Shares/SharesListUnsent.vue
index f1cff774..aa020b43 100644
--- a/src/js/components/Shares/SharesListUnsent.vue
+++ b/src/js/components/Shares/SharesListUnsent.vue
@@ -32,18 +32,18 @@
 				show-email
 				resolve-info
 				:icon="true">
-				<Actions>
-					<ActionButton v-if="share.emailAddress || share.type === 'group'"
+				<NcActions>
+					<NcActionButton v-if="share.emailAddress || share.type === 'group'"
 						icon="icon-confirm"
 						@click="sendInvitation(share)">
 						{{ t('polls', 'Send invitation mail') }}
-					</ActionButton>
-					<ActionButton v-if="['contactGroup', 'circle'].includes(share.type)"
+					</NcActionButton>
+					<NcActionButton v-if="['contactGroup', 'circle'].includes(share.type)"
 						icon="icon-toggle-filelist"
 						@click="resolveGroup(share)">
 						{{ t('polls', 'Resolve into individual invitations') }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 				<ActionDelete :title="t('polls', 'Remove invitation')"
 					@delete="removeShare({ share })" />
 			</UserItem>
@@ -54,7 +54,7 @@
 <script>
 import { mapGetters, mapActions } from 'vuex'
 import { showSuccess, showError } from '@nextcloud/dialogs'
-import { Actions, ActionButton } from '@nextcloud/vue'
+import { NcActions, NcActionButton } from '@nextcloud/vue'
 import ActionDelete from '../Actions/ActionDelete.vue'
 import ConfigBox from '../Base/ConfigBox.vue'
 import EmailAlertIcon from 'vue-material-design-icons/EmailAlert.vue'
@@ -64,8 +64,8 @@ export default {
 
 	components: {
 		EmailAlertIcon,
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 		ActionDelete,
 		ConfigBox,
 	},
diff --git a/src/js/components/SideBar/SideBarTabActivity.vue b/src/js/components/SideBar/SideBarTabActivity.vue
index c23675d6..2c1ee32e 100644
--- a/src/js/components/SideBar/SideBarTabActivity.vue
+++ b/src/js/components/SideBar/SideBarTabActivity.vue
@@ -23,22 +23,22 @@
 <template>
 	<div class="comments">
 		<Activities v-if="!showEmptyContent" />
-		<EmptyContent v-else icon="icon-comment">
+		<NcEmptyContent v-else icon="icon-comment">
 			{{ t('polls', 'No activity') }}
-		</EmptyContent>
+		</NcEmptyContent>
 	</div>
 </template>
 
 <script>
 import Activities from '../Activity/Activities.vue'
-import { EmptyContent } from '@nextcloud/vue'
+import { NcEmptyContent } from '@nextcloud/vue'
 import { mapState } from 'vuex'
 
 export default {
 	name: 'SideBarTabActivity',
 	components: {
 		Activities,
-		EmptyContent,
+		NcEmptyContent,
 	},
 
 	computed: {
diff --git a/src/js/components/SideBar/SideBarTabComments.vue b/src/js/components/SideBar/SideBarTabComments.vue
index b797f860..d61a412d 100644
--- a/src/js/components/SideBar/SideBarTabComments.vue
+++ b/src/js/components/SideBar/SideBarTabComments.vue
@@ -24,7 +24,7 @@
 	<div class="comments">
 		<CommentAdd v-if="acl.allowComment" />
 		<Comments v-if="!showEmptyContent" />
-		<EmptyContent v-else>
+		<NcEmptyContent v-else>
 			{{ t('polls', 'No comments') }}
 			<template #icon>
 				<CommentsIcon />
@@ -32,14 +32,14 @@
 			<template #desc>
 				{{ t('polls', 'Be the first.') }}
 			</template>
-		</EmptyContent>
+		</NcEmptyContent>
 	</div>
 </template>
 
 <script>
 import CommentAdd from '../Comments/CommentAdd.vue'
 import Comments from '../Comments/Comments.vue'
-import { EmptyContent } from '@nextcloud/vue'
+import { NcEmptyContent } from '@nextcloud/vue'
 import { mapGetters, mapState } from 'vuex'
 import CommentsIcon from 'vue-material-design-icons/CommentProcessing.vue'
 
@@ -48,7 +48,7 @@ export default {
 	components: {
 		CommentAdd,
 		Comments,
-		EmptyContent,
+		NcEmptyContent,
 		CommentsIcon,
 	},
 
diff --git a/src/js/components/SideBar/SideBarTabConfiguration.vue b/src/js/components/SideBar/SideBarTabConfiguration.vue
index b0cf6333..29a78f1e 100644
--- a/src/js/components/SideBar/SideBarTabConfiguration.vue
+++ b/src/js/components/SideBar/SideBarTabConfiguration.vue
@@ -75,20 +75,20 @@
 		</ConfigBox>
 
 		<div class="delete-area">
-			<VueButton @click="toggleArchive()">
+			<NcButton @click="toggleArchive()">
 				<template #icon>
 					<RestorePollIcon v-if="isPollArchived" />
 					<ArchivePollIcon v-else />
 				</template>
 				{{ isPollArchived ? t('polls', 'Restore poll') : t('polls', 'Archive poll') }}
-			</VueButton>
+			</NcButton>
 
-			<VueButton v-if="isPollArchived" type="error" @click="deletePoll()">
+			<NcButton v-if="isPollArchived" type="error" @click="deletePoll()">
 				<template #icon>
 					<DeletePollIcon />
 				</template>
 				{{ t('polls', 'Delete poll') }}
-			</VueButton>
+			</NcButton>
 		</div>
 	</div>
 </template>
@@ -96,7 +96,7 @@
 <script>
 import { mapGetters, mapState } from 'vuex'
 import { showError } from '@nextcloud/dialogs'
-import { Button as VueButton } from '@nextcloud/vue'
+import { NcButton } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
 import ConfigBox from '../Base/ConfigBox.vue'
 import ConfigAllowComment from '../Configuration/ConfigAllowComment.vue'
@@ -152,7 +152,7 @@ export default {
 		ConfigTitle,
 		ConfigUseNo,
 		ConfigVoteLimit,
-		VueButton,
+		NcButton,
 	},
 
 	mixins: [writePoll],
diff --git a/src/js/components/Subscription/ActionSubscription.vue b/src/js/components/Subscription/ActionSubscription.vue
index 25867244..cff82f68 100644
--- a/src/js/components/Subscription/ActionSubscription.vue
+++ b/src/js/components/Subscription/ActionSubscription.vue
@@ -21,19 +21,19 @@
   -->
 
 <template lang="html">
-	<Actions>
-		<ActionCheckbox v-model="subscribe" :label="label" />
-	</Actions>
+	<NcActions>
+		<NcActionCheckbox v-model="subscribe" :label="label" />
+	</NcActions>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { Actions, ActionCheckbox } from '@nextcloud/vue'
+import { NcActions, NcActionCheckbox } from '@nextcloud/vue'
 export default {
 	name: 'ActionSubscription',
 
 	components: {
-		Actions, ActionCheckbox,
+		NcActions, NcActionCheckbox,
 	},
 
 	computed: {
diff --git a/src/js/components/Subscription/Subscription.vue b/src/js/components/Subscription/Subscription.vue
index cdb8d968..570325cb 100644
--- a/src/js/components/Subscription/Subscription.vue
+++ b/src/js/components/Subscription/Subscription.vue
@@ -22,20 +22,20 @@
 
 <template lang="html">
 	<div class="subscription">
-		<CheckboxRadioSwitch :checked.sync="subscribe" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="subscribe" type="switch">
 			{{ label }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 	</div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 export default {
 	name: 'Subscription',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	computed: {
diff --git a/src/js/components/User/UserItem.vue b/src/js/components/User/UserItem.vue
index e8705a37..14ad5491 100644
--- a/src/js/components/User/UserItem.vue
+++ b/src/js/components/User/UserItem.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div :class="['user-item', type, { disabled, condensed: condensed }]">
-		<Avatar :disable-menu="disableMenu"
+		<NcAvatar :disable-menu="disableMenu"
 			:disable-tooltip="disableTooltip"
 			class="user-item__avatar"
 			:is-guest="isGuestComputed"
@@ -56,13 +56,13 @@
 
 <script>
 import { getCurrentUser } from '@nextcloud/auth'
-import { Avatar } from '@nextcloud/vue'
+import { NcAvatar } from '@nextcloud/vue'
 
 export default {
 	name: 'UserItem',
 
 	components: {
-		Avatar,
+		NcAvatar,
 		AdminIcon: () => import('../AppIcons/ShieldCrownOutline.vue'),
 	},
 
diff --git a/src/js/components/User/UserMenu.vue b/src/js/components/User/UserMenu.vue
index ee6b7313..10ee722c 100644
--- a/src/js/components/User/UserMenu.vue
+++ b/src/js/components/User/UserMenu.vue
@@ -21,15 +21,15 @@
   -->
 
 <template>
-	<Actions primary>
+	<NcActions primary>
 		<template #icon>
 			<SettingsIcon :size="20" decorative />
 		</template>
-		<ActionButton v-if="$route.name === 'publicVote'" icon="icon-md-link" @click="copyLink()">
+		<NcActionButton v-if="$route.name === 'publicVote'" icon="icon-md-link" @click="copyLink()">
 			{{ t('polls', 'Copy your personal link to clipboard') }}
-		</ActionButton>
-		<ActionSeparator v-if="$route.name === 'publicVote'" />
-		<ActionInput v-if="$route.name === 'publicVote'"
+		</NcActionButton>
+		<NcActionSeparator v-if="$route.name === 'publicVote'" />
+		<NcActionInput v-if="$route.name === 'publicVote'"
 			:class="check.status"
 			:value="emailAddressTemp"
 			@update:value="validateEmailAddress"
@@ -38,8 +38,8 @@
 				<EditEmailIcon />
 			</template>
 			{{ t('polls', 'Edit Email Address') }}
-		</ActionInput>
-		<ActionInput v-if="$route.name === 'publicVote'"
+		</NcActionInput>
+		<NcActionInput v-if="$route.name === 'publicVote'"
 			:class="checkDisplayName.status"
 			:value="displayNameTemp"
 			@update:value="validateDisplayName"
@@ -48,8 +48,8 @@
 				<EditAccountIcon />
 			</template>
 			{{ t('polls', 'Change name') }}
-		</ActionInput>
-		<ActionButton v-if="$route.name === 'publicVote'"
+		</NcActionInput>
+		<NcActionButton v-if="$route.name === 'publicVote'"
 			:disabled="!emailAddress"
 			:value="emailAddress"
 			@click="resendInvitation()">
@@ -57,40 +57,40 @@
 				<SendLinkPerEmailIcon />
 			</template>
 			{{ t('polls', 'Get your personal link per mail') }}
-		</ActionButton>
-		<ActionCheckbox :checked="subscribed"
+		</NcActionButton>
+		<NcActionCheckbox :checked="subscribed"
 			:disabled="!acl.allowSubscribe"
 			title="check"
 			@change="toggleSubscription">
 			{{ t('polls', 'Subscribe to notifications') }}
-		</ActionCheckbox>
-		<ActionButton v-if="$route.name === 'publicVote' && emailAddress"
+		</NcActionCheckbox>
+		<NcActionButton v-if="$route.name === 'publicVote' && emailAddress"
 			:disabled="!emailAddress"
 			@click="deleteEmailAddress">
 			<template #icon>
 				<DeleteIcon />
 			</template>
 			{{ t('polls', 'Remove Email Address') }}
-		</ActionButton>
-		<ActionButton v-if="acl.allowEdit" @click="getAddresses()">
+		</NcActionButton>
+		<NcActionButton v-if="acl.allowEdit" @click="getAddresses()">
 			<template #icon>
 				<ClippyIcon />
 			</template>
 			{{ t('polls', 'Copy list of email addresses to clipboard') }}
-		</ActionButton>
-		<ActionButton @click="resetVotes()">
+		</NcActionButton>
+		<NcActionButton @click="resetVotes()">
 			<template #icon>
 				<ResetVotesIcon />
 			</template>
 			{{ t('polls', 'Reset your votes') }}
-		</ActionButton>
-		<ActionButton v-if="$route.name === 'publicVote' && hasCookie" @click="logout()">
+		</NcActionButton>
+		<NcActionButton v-if="$route.name === 'publicVote' && hasCookie" @click="logout()">
 			<template #icon>
 				<LogoutIcon />
 			</template>
 			{{ t('polls', 'Logout as {name} (delete cookie)', { name: acl.displayName }) }}
-		</ActionButton>
-	</Actions>
+		</NcActionButton>
+	</NcActions>
 </template>
 
 <script>
@@ -98,7 +98,7 @@ import { debounce } from 'lodash'
 import axios from '@nextcloud/axios'
 import { showSuccess, showError } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
-import { Actions, ActionButton, ActionCheckbox, ActionInput, ActionSeparator } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcActionCheckbox, NcActionInput, NcActionSeparator } from '@nextcloud/vue'
 import { mapState } from 'vuex'
 import SettingsIcon from 'vue-material-design-icons/Cog.vue'
 import EditAccountIcon from 'vue-material-design-icons/AccountEdit.vue'
@@ -114,11 +114,11 @@ export default {
 	name: 'UserMenu',
 
 	components: {
-		Actions,
-		ActionButton,
-		ActionCheckbox,
-		ActionInput,
-		ActionSeparator,
+		NcActions,
+		NcActionButton,
+		NcActionCheckbox,
+		NcActionInput,
+		NcActionSeparator,
 		SettingsIcon,
 		EditAccountIcon,
 		EditEmailIcon,
diff --git a/src/js/components/User/UserSearch.vue b/src/js/components/User/UserSearch.vue
index 48f50555..5a19d1e5 100644
--- a/src/js/components/User/UserSearch.vue
+++ b/src/js/components/User/UserSearch.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<Multiselect id="ajax"
+	<NcMultiselect id="ajax"
 		:options="users"
 		:multiple="false"
 		:user-select="true"
@@ -43,7 +43,7 @@
 				{{ values.length }} users selected
 			</span>
 		</template>
-	</Multiselect>
+	</NcMultiselect>
 </template>
 
 <script>
@@ -51,13 +51,13 @@ import { debounce } from 'lodash'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
-import { Multiselect } from '@nextcloud/vue'
+import { NcMultiselect } from '@nextcloud/vue'
 
 export default {
 	name: 'UserSearch',
 
 	components: {
-		Multiselect,
+		NcMultiselect,
 	},
 
 	data() {
diff --git a/src/js/components/VoteTable/VoteColumn.vue b/src/js/components/VoteTable/VoteColumn.vue
index 3fbf9737..45953beb 100644
--- a/src/js/components/VoteTable/VoteColumn.vue
+++ b/src/js/components/VoteTable/VoteColumn.vue
@@ -45,21 +45,21 @@
 		<FlexSpacer v-if="poll.type === 'datePoll' && viewMode === 'list-view'" />
 
 		<div v-if="acl.allowEdit && closed" class="action confirm">
-			<VueButton v-tooltip="option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option')"
+			<NcButton v-tooltip="option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option')"
 				type="tertiary"
 				@click="confirmOption(option)">
 				<template #icon>
 					<UnconfirmIcon v-if="option.confirmed" :size="20" />
 					<ConfirmIcon v-else :size="20" />
 				</template>
-			</VueButton>
+			</NcButton>
 		</div>
 	</div>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { Button as VueButton } from '@nextcloud/vue'
+import { NcButton } from '@nextcloud/vue'
 import Counter from '../Options/Counter.vue'
 import OptionItem from '../Options/OptionItem.vue'
 import FlexSpacer from '../Base/FlexSpacer.vue'
@@ -77,7 +77,7 @@ export default {
 		OptionItem,
 		FlexSpacer,
 		VoteItem,
-		VueButton,
+		NcButton,
 		CalendarPeek: () => import('../Calendar/CalendarPeek.vue'),
 		OptionItemOwner: () => import('../Options/OptionItemOwner.vue'),
 	},