Add Nc prefix to Nc vue component names

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

23 files changed, 265 insertions, 265 deletions

diff --git a/apps/settings/src/components/AdminDelegating.vue b/apps/settings/src/components/AdminDelegating.vue
index 9dd0d66cc31..90f42f73ab5 100644
--- a/apps/settings/src/components/AdminDelegating.vue
+++ b/apps/settings/src/components/AdminDelegating.vue
@@ -1,5 +1,5 @@
 <template>
-	<SettingsSection :title="t('settings', 'Administration privileges')"
+	<NcSettingsSection :title="t('settings', 'Administration privileges')"
 		:description="t('settings', 'Here you can decide which group can access certain sections of the administration settings.')"
 		:doc-url="authorizedSettingsDocLink">
 		<div class="setting-list">
@@ -8,19 +8,19 @@
 				<GroupSelect :available-groups="availableGroups" :authorized-groups="authorizedGroups" :setting="setting" />
 			</div>
 		</div>
-	</SettingsSection>
+	</NcSettingsSection>
 </template>
 
 <script>
 import GroupSelect from './AdminDelegation/GroupSelect'
-import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
 import { loadState } from '@nextcloud/initial-state'
 
 export default {
 	name: 'AdminDelegating',
 	components: {
 		GroupSelect,
-		SettingsSection,
+		NcSettingsSection,
 	},
 	data() {
 		return {
diff --git a/apps/settings/src/components/AdminDelegation/GroupSelect.vue b/apps/settings/src/components/AdminDelegation/GroupSelect.vue
index f9db50b3cc6..52ecd6c4846 100644
--- a/apps/settings/src/components/AdminDelegation/GroupSelect.vue
+++ b/apps/settings/src/components/AdminDelegation/GroupSelect.vue
@@ -1,5 +1,5 @@
 <template>
-	<Multiselect v-model="selected"
+	<NcMultiselect v-model="selected"
 		class="group-multiselect"
 		:placeholder="t('settings', 'None')"
 		track-by="gid"
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import { generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
@@ -20,7 +20,7 @@ import logger from '../../logger'
 export default {
 	name: 'GroupSelect',
 	components: {
-		Multiselect,
+		NcMultiselect,
 	},
 	props: {
 		availableGroups: {
diff --git a/apps/settings/src/components/AdminTwoFactor.vue b/apps/settings/src/components/AdminTwoFactor.vue
index a5c61b3b0f8..950b857b07a 100644
--- a/apps/settings/src/components/AdminTwoFactor.vue
+++ b/apps/settings/src/components/AdminTwoFactor.vue
@@ -1,17 +1,17 @@
 <template>
-	<SettingsSection :title="t('settings', 'Two-Factor Authentication')"
+	<NcSettingsSection :title="t('settings', 'Two-Factor Authentication')"
 		:description="t('settings', 'Two-factor authentication can be enforced for all users and specific groups. If they do not have a two-factor provider configured, they will be unable to log into the system.')"
 		:doc-url="twoFactorAdminDoc">
 		<p v-if="loading">
 			<span class="icon-loading-small two-factor-loading" />
 			<span>{{ t('settings', 'Enforce two-factor authentication') }}</span>
 		</p>
-		<CheckboxRadioSwitch v-else
+		<NcCheckboxRadioSwitch v-else
 			id="two-factor-enforced"
 			:checked.sync="enforced"
 			type="switch">
 			{{ t('settings', 'Enforce two-factor authentication') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<template v-if="enforced">
 			<h3>{{ t('settings', 'Limit to groups') }}</h3>
 			{{ t('settings', 'Enforcement of two-factor authentication can be set for certain groups only.') }}
@@ -19,7 +19,7 @@
 				{{ t('settings', 'Two-factor authentication is enforced for all members of the following groups.') }}
 			</p>
 			<p>
-				<Multiselect v-model="enforcedGroups"
+				<NcMultiselect v-model="enforcedGroups"
 					:options="groups"
 					:placeholder="t('settings', 'Enforced groups')"
 					:disabled="loading"
@@ -34,7 +34,7 @@
 				{{ t('settings', 'Two-factor authentication is not enforced for members of the following groups.') }}
 			</p>
 			<p>
-				<Multiselect v-model="excludedGroups"
+				<NcMultiselect v-model="excludedGroups"
 					:options="groups"
 					:placeholder="t('settings', 'Excluded groups')"
 					:disabled="loading"
@@ -53,22 +53,22 @@
 			</p>
 		</template>
 		<p class="top-margin">
-			<ButtonVue v-if="dirty"
+			<NcButton v-if="dirty"
 				type="primary"
 				:disabled="loading"
 				@click="saveChanges">
 				{{ t('settings', 'Save changes') }}
-			</ButtonVue>
+			</NcButton>
 		</p>
-	</SettingsSection>
+	</NcSettingsSection>
 </template>
 
 <script>
 import axios from '@nextcloud/axios'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
-import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
 import { loadState } from '@nextcloud/initial-state'
 
 import _ from 'lodash'
@@ -77,10 +77,10 @@ import { generateUrl, generateOcsUrl } from '@nextcloud/router'
 export default {
 	name: 'AdminTwoFactor',
 	components: {
-		Multiselect,
-		ButtonVue,
-		CheckboxRadioSwitch,
-		SettingsSection,
+		NcMultiselect,
+		NcButton,
+		NcCheckboxRadioSwitch,
+		NcSettingsSection,
 	},
 	data() {
 		return {
diff --git a/apps/settings/src/components/AppDetails.vue b/apps/settings/src/components/AppDetails.vue
index f4faa36eed4..93ccf253ac5 100644
--- a/apps/settings/src/components/AppDetails.vue
+++ b/apps/settings/src/components/AppDetails.vue
@@ -35,7 +35,7 @@
 					class="group_select"
 					:title="t('settings', 'All')"
 					value="">
-				<Multiselect v-if="isLimitedToGroups(app)"
+				<NcMultiselect v-if="isLimitedToGroups(app)"
 					:options="groups"
 					:value="appGroups"
 					:options-limit="5"
@@ -50,7 +50,7 @@
 					@remove="removeGroupLimitation"
 					@search-change="asyncFindGroup">
 					<span slot="noResult">{{ t('settings', 'No results') }}</span>
-				</Multiselect>
+				</NcMultiselect>
 			</div>
 			<div class="app-details__actions-manage">
 				<input v-if="app.update"
@@ -144,7 +144,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 
 import AppManagement from '../mixins/AppManagement'
 import PrefixMixin from './PrefixMixin'
@@ -154,7 +154,7 @@ export default {
 	name: 'AppDetails',
 
 	components: {
-		Multiselect,
+		NcMultiselect,
 		Markdown,
 	},
 	mixins: [AppManagement, PrefixMixin],
diff --git a/apps/settings/src/components/AppList.vue b/apps/settings/src/components/AppList.vue
index 2c62e4e0d36..bb7c932613e 100644
--- a/apps/settings/src/components/AppList.vue
+++ b/apps/settings/src/components/AppList.vue
@@ -26,12 +26,12 @@
 			<template v-if="useListView">
 				<div v-if="showUpdateAll" class="toolbar">
 					{{ n('settings', '%n app has an update available', '%n apps have an update available', counter) }}
-					<ButtonVue v-if="showUpdateAll"
+					<NcButton v-if="showUpdateAll"
 						id="app-list-update-all"
 						type="primary"
 						@click="updateAll">
 						{{ n('settings', 'Update', 'Update all', counter) }}
-					</ButtonVue>
+					</NcButton>
 				</div>
 
 				<div v-if="!showUpdateAll" class="toolbar">
@@ -107,13 +107,13 @@
 import AppItem from './AppList/AppItem'
 import PrefixMixin from './PrefixMixin'
 import pLimit from 'p-limit'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 
 export default {
 	name: 'AppList',
 	components: {
 		AppItem,
-		ButtonVue,
+		NcButton,
 	},
 	mixins: [PrefixMixin],
 	props: ['category', 'app', 'search'],
diff --git a/apps/settings/src/components/AuthToken.vue b/apps/settings/src/components/AuthToken.vue
index fa89ed65260..5a48f5d0d8c 100644
--- a/apps/settings/src/components/AuthToken.vue
+++ b/apps/settings/src/components/AuthToken.vue
@@ -40,55 +40,55 @@
 			<span v-tooltip="lastActivity" class="last-activity">{{ lastActivityRelative }}</span>
 		</td>
 		<td class="more">
-			<Actions v-if="!token.current"
+			<NcActions v-if="!token.current"
 				v-tooltip.auto="{
 					content: t('settings', 'Device settings'),
 					container: 'body'
 				}"
 				:open.sync="actionOpen">
-				<ActionCheckbox v-if="token.type === 1"
+				<NcActionCheckbox v-if="token.type === 1"
 					:checked="token.scope.filesystem"
 					@change.stop.prevent="$emit('toggle-scope', token, 'filesystem', !token.scope.filesystem)">
 					<!-- TODO: add text/longtext with some description -->
 					{{ t('settings', 'Allow filesystem access') }}
-				</ActionCheckbox>
-				<ActionButton v-if="token.canRename"
+				</NcActionCheckbox>
+				<NcActionButton v-if="token.canRename"
 					icon="icon-rename"
 					@click.stop.prevent="startRename">
 					<!-- TODO: add text/longtext with some description -->
 					{{ t('settings', 'Rename') }}
-				</ActionButton>
+				</NcActionButton>
 
 				<!-- revoke & wipe -->
 				<template v-if="token.canDelete">
 					<template v-if="token.type !== 2">
-						<ActionButton icon="icon-delete"
+						<NcActionButton icon="icon-delete"
 							@click.stop.prevent="revoke">
 							<!-- TODO: add text/longtext with some description -->
 							{{ t('settings', 'Revoke') }}
-						</ActionButton>
-						<ActionButton icon="icon-delete"
+						</NcActionButton>
+						<NcActionButton icon="icon-delete"
 							@click.stop.prevent="wipe">
 							{{ t('settings', 'Wipe device') }}
-						</ActionButton>
+						</NcActionButton>
 					</template>
-					<ActionButton v-else-if="token.type === 2"
+					<NcActionButton v-else-if="token.type === 2"
 						icon="icon-delete"
 						:title="t('settings', 'Revoke')"
 						@click.stop.prevent="revoke">
 						{{ t('settings', 'Revoking this token might prevent the wiping of your device if it has not started the wipe yet.') }}
-					</ActionButton>
+					</NcActionButton>
 				</template>
-			</Actions>
+			</NcActions>
 		</td>
 	</tr>
 </template>
 
 <script>
 import {
-	Actions,
-	ActionButton,
-	ActionCheckbox,
+	NcActions,
+	NcActionButton,
+	NcActionCheckbox,
 } from '@nextcloud/vue'
 
 // When using capture groups the following parts are extracted the first is used as the version number, the second as the OS
@@ -158,9 +158,9 @@ const iconMap = {
 export default {
 	name: 'AuthToken',
 	components: {
-		Actions,
-		ActionButton,
-		ActionCheckbox,
+		NcActions,
+		NcActionButton,
+		NcActionCheckbox,
 	},
 	props: {
 		token: {
diff --git a/apps/settings/src/components/AuthTokenSetupDialogue.vue b/apps/settings/src/components/AuthTokenSetupDialogue.vue
index 3f3b1cf1fb3..613e286255e 100644
--- a/apps/settings/src/components/AuthTokenSetupDialogue.vue
+++ b/apps/settings/src/components/AuthTokenSetupDialogue.vue
@@ -28,11 +28,11 @@
 			:disabled="loading"
 			:placeholder="t('settings', 'App name')"
 			@keydown.enter="submit">
-		<ButtonVue :disabled="loading || deviceName.length === 0"
+		<NcButton :disabled="loading || deviceName.length === 0"
 			type="primary"
 			@click="submit">
 			{{ t('settings', 'Create new app password') }}
-		</ButtonVue>
+		</NcButton>
 	</div>
 	<div v-else class="spacing">
 		{{ t('settings', 'Use the credentials below to configure your app or device.') }}
@@ -63,9 +63,9 @@
 				class="icon icon-clippy"
 				@mouseover="hoveringCopyButton = true"
 				@mouseleave="hoveringCopyButton = false" />
-			<ButtonVue @click="reset">
+			<NcButton @click="reset">
 				{{ t('settings', 'Done') }}
-			</ButtonVue>
+			</NcButton>
 		</div>
 		<div class="app-password-row">
 			<span class="app-password-label" />
@@ -83,13 +83,13 @@
 import QR from '@chenfengyuan/vue-qrcode'
 import confirmPassword from '@nextcloud/password-confirmation'
 import { getRootUrl } from '@nextcloud/router'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 
 export default {
 	name: 'AuthTokenSetupDialogue',
 	components: {
 		QR,
-		ButtonVue,
+		NcButton,
 	},
 	props: {
 		add: {
diff --git a/apps/settings/src/components/BasicSettings/BackgroundJob.vue b/apps/settings/src/components/BasicSettings/BackgroundJob.vue
index 07f5c5cab4c..3b3c0c08342 100644
--- a/apps/settings/src/components/BasicSettings/BackgroundJob.vue
+++ b/apps/settings/src/components/BasicSettings/BackgroundJob.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-	<SettingsSection :title="t('settings', 'Background jobs')"
+	<NcSettingsSection :title="t('settings', 'Background jobs')"
 		:description="t('settings', 'For the server to work properly, it\'s important to configure background jobs correctly. Cron is the recommended setting. Please see the documentation for more information.')"
 		:doc-url="backgroundJobsDocUrl">
 		<template v-if="lastCron !== 0">
@@ -46,33 +46,33 @@
 			{{ t('settings', 'Background job did not run yet!') }}
 		</span>
 
-		<CheckboxRadioSwitch type="radio"
+		<NcCheckboxRadioSwitch type="radio"
 			:checked.sync="backgroundJobsMode"
 			name="backgroundJobsMode"
 			value="ajax"
 			class="ajaxSwitch"
 			@update:checked="onBackgroundJobModeChanged">
 			{{ t('settings', 'AJAX') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<em>{{ t('settings', 'Execute one task with each page loaded. Use case: Single user instance.') }}</em>
 
-		<CheckboxRadioSwitch type="radio"
+		<NcCheckboxRadioSwitch type="radio"
 			:checked.sync="backgroundJobsMode"
 			name="backgroundJobsMode"
 			value="webcron"
 			@update:checked="onBackgroundJobModeChanged">
 			{{ t('settings', 'Webcron') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<em>{{ t('settings', 'cron.php is registered at a webcron service to call cron.php every 5 minutes over HTTP. Use case: Very small instance (1–5 users depending on the usage).') }}</em>
 
-		<CheckboxRadioSwitch v-if="cliBasedCronPossible"
+		<NcCheckboxRadioSwitch v-if="cliBasedCronPossible"
 			type="radio"
 			:checked.sync="backgroundJobsMode"
 			value="cron"
 			name="backgroundJobsMode"
 			@update:checked="onBackgroundJobModeChanged">
 			{{ t('settings', 'Cron (Recommended)') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<em v-if="cliBasedCronPossible">{{ cronLabel }}</em>
 		<em v-else>
 			{{ t('settings', 'To run this you need the PHP POSIX extension. See {linkstart}PHP documentation{linkend} for more details.', {
@@ -80,14 +80,14 @@
 				linkend: '</a>',
 			}) }}
 		</em>
-	</SettingsSection>
+	</NcSettingsSection>
 </template>
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
 import { showError } from '@nextcloud/dialogs'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
-import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
 import moment from '@nextcloud/moment'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
@@ -104,8 +104,8 @@ export default {
 	name: 'BackgroundJob',
 
 	components: {
-		CheckboxRadioSwitch,
-		SettingsSection,
+		NcCheckboxRadioSwitch,
+		NcSettingsSection,
 	},
 
 	data() {
diff --git a/apps/settings/src/components/BasicSettings/ProfileSettings.vue b/apps/settings/src/components/BasicSettings/ProfileSettings.vue
index 8a487e4e1ea..0519e60a30b 100644
--- a/apps/settings/src/components/BasicSettings/ProfileSettings.vue
+++ b/apps/settings/src/components/BasicSettings/ProfileSettings.vue
@@ -31,11 +31,11 @@
 			{{ t('settings', 'Enable or disable profile by default for new users.') }}
 		</p>
 
-		<CheckboxRadioSwitch type="switch"
+		<NcCheckboxRadioSwitch type="switch"
 			:checked.sync="initialProfileEnabledByDefault"
 			@update:checked="onProfileDefaultChange">
 			{{ t('settings', 'Enable') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 	</div>
 </template>
 
@@ -47,7 +47,7 @@ import { saveProfileDefault } from '../../service/ProfileService'
 import { validateBoolean } from '../../utils/validate'
 import logger from '../../logger'
 
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
 
 const profileEnabledByDefault = loadState('settings', 'profileEnabledByDefault', true)
 
@@ -55,7 +55,7 @@ export default {
 	name: 'ProfileSettings',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	data() {
diff --git a/apps/settings/src/components/Encryption.vue b/apps/settings/src/components/Encryption.vue
index d75225d1a18..834f9b1c79b 100644
--- a/apps/settings/src/components/Encryption.vue
+++ b/apps/settings/src/components/Encryption.vue
@@ -21,15 +21,15 @@
 -->
 
 <template>
-	<SettingsSection :title="t('settings', 'Server-side encryption')"
+	<NcSettingsSection :title="t('settings', 'Server-side encryption')"
 		:description="t('settings', 'Server-side encryption makes it possible to encrypt files which are uploaded to this server. This comes with limitations like a performance penalty, so enable this only if needed.')"
 		:doc-url="encryptionAdminDoc">
-		<CheckboxRadioSwitch :checked="encryptionEnabled || shouldDisplayWarning"
+		<NcCheckboxRadioSwitch :checked="encryptionEnabled || shouldDisplayWarning"
 			:disabled="encryptionEnabled"
 			type="switch"
 			@update:checked="displayWarning">
 			{{ t('settings', 'Enable server-side encryption') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
 		<div v-if="shouldDisplayWarning && !encryptionEnabled" class="notecard warning" role="alert">
 			<p>{{ t('settings', 'Please read carefully before activating server-side encryption:') }}</p>
@@ -43,10 +43,10 @@
 			<p class="margin-bottom">
 				{{ t('settings', 'This is the final warning: Do you really want to enable encryption?') }}
 			</p>
-			<ButtonVue type="primary"
+			<NcButton type="primary"
 				@click="enableEncryption()">
 				{{ t('settings', "Enable encryption") }}
-			</ButtonVue>
+			</NcButton>
 		</div>
 
 		<div v-if="encryptionEnabled">
@@ -57,7 +57,7 @@
 				<template v-else>
 					<h3>{{ t('settings', 'Select default encryption module:') }}</h3>
 					<fieldset>
-						<CheckboxRadioSwitch v-for="(module, id) in encryptionModules"
+						<NcCheckboxRadioSwitch v-for="(module, id) in encryptionModules"
 							:key="id"
 							:checked.sync="defaultCheckedModule"
 							:value="id"
@@ -65,21 +65,21 @@
 							name="default_encryption_module"
 							@update:checked="checkDefaultModule">
 							{{ module.displayName }}
-						</CheckboxRadioSwitch>
+						</NcCheckboxRadioSwitch>
 					</fieldset>
 				</template>
 			</div>
 
 			<div v-else-if="externalBackendsEnabled" v-html="migrationMessage" />
 		</div>
-	</SettingsSection>
+	</NcSettingsSection>
 </template>
 
 <script>
 import axios from '@nextcloud/axios'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
 import { loadState } from '@nextcloud/initial-state'
 import { getLoggerBuilder } from '@nextcloud/logger'
 
@@ -95,9 +95,9 @@ const logger = getLoggerBuilder()
 export default {
 	name: 'Encryption',
 	components: {
-		CheckboxRadioSwitch,
-		SettingsSection,
-		ButtonVue,
+		NcCheckboxRadioSwitch,
+		NcSettingsSection,
+		NcButton,
 	},
 	data() {
 		const encryptionModules = loadState('settings', 'encryption-modules')
diff --git a/apps/settings/src/components/GroupListItem.vue b/apps/settings/src/components/GroupListItem.vue
index 173d3a45f5b..12bdcedcd8f 100644
--- a/apps/settings/src/components/GroupListItem.vue
+++ b/apps/settings/src/components/GroupListItem.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<AppNavigationItem :key="id"
+	<NcAppNavigationItem :key="id"
 		:exact="true"
 		:title="title"
 		:to="{ name: 'group', params: { selectedGroup: encodeURIComponent(id) } }"
@@ -30,41 +30,41 @@
 		:menu-open="openGroupMenu"
 		@update:menuOpen="handleGroupMenuOpen">
 		<template #counter>
-			<CounterBubble v-if="count">
+			<NcCounterBubble v-if="count">
 				{{ count }}
-			</CounterBubble>
+			</NcCounterBubble>
 		</template>
 		<template #actions>
-			<ActionInput v-if="id !== 'admin' && id !== 'disabled' && settings.isAdmin"
+			<NcActionInput v-if="id !== 'admin' && id !== 'disabled' && settings.isAdmin"
 				ref="displayNameInput"
 				icon="icon-edit"
 				type="text"
 				:value="title"
 				@submit="renameGroup(id)">
 				{{ t('settings', 'Rename group') }}
-			</ActionInput>
-			<ActionButton v-if="id !== 'admin' && id !== 'disabled' && settings.isAdmin"
+			</NcActionInput>
+			<NcActionButton v-if="id !== 'admin' && id !== 'disabled' && settings.isAdmin"
 				icon="icon-delete"
 				@click="removeGroup(id)">
 				{{ t('settings', 'Remove group') }}
-			</ActionButton>
+			</NcActionButton>
 		</template>
-	</AppNavigationItem>
+	</NcAppNavigationItem>
 </template>
 
 <script>
-import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import CounterBubble from '@nextcloud/vue/dist/Components/CounterBubble'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
 
 export default {
 	name: 'GroupListItem',
 	components: {
-		ActionInput,
-		ActionButton,
-		CounterBubble,
-		AppNavigationItem,
+		NcActionInput,
+		NcActionButton,
+		NcCounterBubble,
+		NcAppNavigationItem,
 	},
 	props: {
 		id: {
diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
index 975da4327ee..be837baf2bd 100644
--- a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
+++ b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
@@ -49,25 +49,25 @@
 						@update:scope="onScopeChange" />
 				</template>
 
-				<Actions class="email__actions"
+				<NcActions class="email__actions"
 					:aria-label="t('settings', 'Email options')"
 					:force-menu="true">
-					<ActionButton :aria-label="deleteEmailLabel"
+					<NcActionButton :aria-label="deleteEmailLabel"
 						:close-after-click="true"
 						:disabled="deleteDisabled"
 						icon="icon-delete"
 						@click.stop.prevent="deleteEmail">
 						{{ deleteEmailLabel }}
-					</ActionButton>
-					<ActionButton v-if="!primary || !isNotificationEmail"
+					</NcActionButton>
+					<NcActionButton v-if="!primary || !isNotificationEmail"
 						:aria-label="setNotificationMailLabel"
 						:close-after-click="true"
 						:disabled="setNotificationMailDisabled"
 						icon="icon-favorite"
 						@click.stop.prevent="setNotificationMail">
 						{{ setNotificationMailLabel }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 			</div>
 		</div>
 
@@ -78,8 +78,8 @@
 </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 AlertOctagon from 'vue-material-design-icons/AlertOctagon'
 import Check from 'vue-material-design-icons/Check'
 import { showError } from '@nextcloud/dialogs'
@@ -103,8 +103,8 @@ export default {
 	name: 'Email',
 
 	components: {
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 		AlertOctagon,
 		Check,
 		FederationControl,
diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
index afd85269720..586557e82a2 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
@@ -24,7 +24,7 @@
 	<a class="preview-card"
 		:class="{ disabled }"
 		:href="profilePageLink">
-		<Avatar class="preview-card__avatar"
+		<NcAvatar class="preview-card__avatar"
 			:user="userId"
 			:size="48"
 			:show-user-status="true"
@@ -44,13 +44,13 @@
 import { getCurrentUser } from '@nextcloud/auth'
 import { generateUrl } from '@nextcloud/router'
 
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
 
 export default {
 	name: 'ProfilePreviewCard',
 
 	components: {
-		Avatar,
+		NcAvatar,
 	},
 
 	props: {
diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue
index 10b2e5cea81..e5251522b22 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue
@@ -26,7 +26,7 @@
 		<label :for="inputId">
 			{{ t('settings', '{displayId}', { displayId }) }}
 		</label>
-		<Multiselect :id="inputId"
+		<NcMultiselect :id="inputId"
 			class="visibility-container__multiselect"
 			:options="visibilityOptions"
 			track-by="name"
@@ -41,7 +41,7 @@ import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 
 import { saveProfileParameterVisibility } from '../../../service/ProfileService'
 import { validateStringInput } from '../../../utils/validate'
@@ -54,7 +54,7 @@ export default {
 	name: 'VisibilityDropdown',
 
 	components: {
-		Multiselect,
+		NcMultiselect,
 	},
 
 	props: {
diff --git a/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue b/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue
index e8d3c99682b..af2b9670ed1 100644
--- a/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-	<Actions :class="{ 'federation-actions': !additional, 'federation-actions--additional': additional }"
+	<NcActions :class="{ 'federation-actions': !additional, 'federation-actions--additional': additional }"
 		:aria-label="ariaLabel"
 		:default-icon="scopeIcon"
 		:disabled="disabled">
@@ -35,11 +35,11 @@
 			:name="federationScope.name"
 			:tooltip-disabled="federationScope.tooltipDisabled"
 			:tooltip="federationScope.tooltip" />
-	</Actions>
+	</NcActions>
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/Actions'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
 import { loadState } from '@nextcloud/initial-state'
 import { showError } from '@nextcloud/dialogs'
 
@@ -61,7 +61,7 @@ export default {
 	name: 'FederationControl',
 
 	components: {
-		Actions,
+		NcActions,
 		FederationControlAction,
 	},
 
diff --git a/apps/settings/src/components/PersonalInfo/shared/FederationControlAction.vue b/apps/settings/src/components/PersonalInfo/shared/FederationControlAction.vue
index f98d9bc7535..22ce295db1d 100644
--- a/apps/settings/src/components/PersonalInfo/shared/FederationControlAction.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/FederationControlAction.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-	<ActionButton :aria-label="isSupportedScope ? tooltip : tooltipDisabled"
+	<NcActionButton :aria-label="isSupportedScope ? tooltip : tooltipDisabled"
 		class="federation-actions__btn"
 		:class="{ 'federation-actions__btn--active': activeScope === name }"
 		:close-after-click="true"
@@ -30,17 +30,17 @@
 		:title="displayName"
 		@click.stop.prevent="updateScope">
 		{{ isSupportedScope ? tooltip : tooltipDisabled }}
-	</ActionButton>
+	</NcActionButton>
 </template>
 
 <script>
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 
 export default {
 	name: 'FederationControlAction',
 
 	components: {
-		ActionButton,
+		NcActionButton,
 	},
 
 	props: {
diff --git a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
index 59fdaa6c802..f353e673b81 100644
--- a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
@@ -35,7 +35,7 @@
 		</template>
 
 		<template v-if="isEditable && isMultiValueSupported">
-			<ButtonVue type="tertiary"
+			<NcButton type="tertiary"
 				:disabled="!isValidSection"
 				:aria-label="t('settings', 'Add additional email')"
 				@click.stop.prevent="onAddAdditional">
@@ -43,14 +43,14 @@
 					<Plus :size="20" />
 				</template>
 				{{ t('settings', 'Add') }}
-			</ButtonVue>
+			</NcButton>
 		</template>
 	</h3>
 </template>
 
 <script>
 import FederationControl from './FederationControl'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 import Plus from 'vue-material-design-icons/Plus'
 import { ACCOUNT_PROPERTY_READABLE_ENUM, ACCOUNT_SETTING_PROPERTY_READABLE_ENUM, PROFILE_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
 
@@ -59,7 +59,7 @@ export default {
 
 	components: {
 		FederationControl,
-		ButtonVue,
+		NcButton,
 		Plus,
 	},
 
diff --git a/apps/settings/src/components/UserList.vue b/apps/settings/src/components/UserList.vue
index 12ef853a9b0..d64868651e6 100644
--- a/apps/settings/src/components/UserList.vue
+++ b/apps/settings/src/components/UserList.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div id="app-content" class="user-list-grid" @scroll.passive="onScroll">
-		<Modal v-if="showConfig.showNewUserForm" size="small" @close="closeModal">
+		<NcModal v-if="showConfig.showNewUserForm" size="small" @close="closeModal">
 			<form id="new-user"
 				:disabled="loading.all"
 				class="modal__content"
@@ -83,7 +83,7 @@
 						:value="newUser.groups"
 						tabindex="-1"
 						type="text">
-					<Multiselect v-model="newUser.groups"
+					<NcMultiselect v-model="newUser.groups"
 						:close-on-select="false"
 						:disabled="loading.groups||loading.all"
 						:multiple="true"
@@ -100,11 +100,11 @@
 							Subadmins can't create users outside their groups
 							Therefore, empty select is forbidden -->
 						<span slot="noResult">{{ t('settings', 'No results') }}</span>
-					</Multiselect>
+					</NcMultiselect>
 				</div>
 				<div v-if="subAdminsGroups.length>0 && settings.isAdmin"
 					class="subadmins modal__item">
-					<Multiselect v-model="newUser.subAdminsGroups"
+					<NcMultiselect v-model="newUser.subAdminsGroups"
 						:close-on-select="false"
 						:multiple="true"
 						:options="subAdminsGroups"
@@ -114,10 +114,10 @@
 						label="name"
 						track-by="id">
 						<span slot="noResult">{{ t('settings', 'No results') }}</span>
-					</Multiselect>
+					</NcMultiselect>
 				</div>
 				<div class="quota modal__item">
-					<Multiselect v-model="newUser.quota"
+					<NcMultiselect v-model="newUser.quota"
 						:allow-empty="false"
 						:options="quotaOptions"
 						:placeholder="t('settings', 'Select user quota')"
@@ -128,7 +128,7 @@
 						@tag="validateQuota" />
 				</div>
 				<div v-if="showConfig.showLanguages" class="languages modal__item">
-					<Multiselect v-model="newUser.language"
+					<NcMultiselect v-model="newUser.language"
 						:allow-empty="false"
 						:options="languages"
 						:placeholder="t('settings', 'Default language')"
@@ -142,15 +142,15 @@
 				<div v-if="showConfig.showUserBackend" class="userBackend" />
 				<div v-if="showConfig.showLastLogin" class="lastLogin" />
 				<div class="user-actions">
-					<ButtonVue id="newsubmit"
+					<NcButton id="newsubmit"
 						type="primary"
 						native-type="submit"
 						value="">
 						{{ t('settings', 'Add a new user') }}
-					</ButtonVue>
+					</NcButton>
 				</div>
 			</form>
-		</Modal>
+		</NcModal>
 		<div id="grid-header"
 			:class="{'sticky': scrolled && !showConfig.showNewUserForm}"
 			class="row">
@@ -234,9 +234,9 @@
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import InfiniteLoading from 'vue-infinite-loading'
 import Vue from 'vue'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 
 import userRow from './UserList/UserRow'
 
@@ -265,11 +265,11 @@ const newUser = {
 export default {
 	name: 'UserList',
 	components: {
-		Modal,
+		NcModal,
 		userRow,
-		Multiselect,
+		NcMultiselect,
 		InfiniteLoading,
-		ButtonVue,
+		NcButton,
 	},
 	props: {
 		users: {
diff --git a/apps/settings/src/components/UserList/UserRow.vue b/apps/settings/src/components/UserList/UserRow.vue
index 5f8c93d0272..bc086adc5cb 100644
--- a/apps/settings/src/components/UserList/UserRow.vue
+++ b/apps/settings/src/components/UserList/UserRow.vue
@@ -133,7 +133,7 @@
 			<input class="icon-confirm" type="submit" value="">
 		</form>
 		<div :class="{'icon-loading-small': loading.groups}" class="groups">
-			<Multiselect :close-on-select="false"
+			<NcMultiselect :close-on-select="false"
 				:disabled="loading.groups||loading.all"
 				:limit="2"
 				:multiple="true"
@@ -150,12 +150,12 @@
 				@select="addUserGroup"
 				@tag="createGroup">
 				<span slot="noResult">{{ t('settings', 'No results') }}</span>
-			</Multiselect>
+			</NcMultiselect>
 		</div>
 		<div v-if="subAdminsGroups.length>0 && settings.isAdmin"
 			:class="{'icon-loading-small': loading.subadmins}"
 			class="subadmins">
-			<Multiselect :close-on-select="false"
+			<NcMultiselect :close-on-select="false"
 				:disabled="loading.subadmins||loading.all"
 				:limit="2"
 				:multiple="true"
@@ -169,12 +169,12 @@
 				@remove="removeUserSubAdmin"
 				@select="addUserSubAdmin">
 				<span slot="noResult">{{ t('settings', 'No results') }}</span>
-			</Multiselect>
+			</NcMultiselect>
 		</div>
 		<div v-tooltip.auto="usedSpace"
 			:class="{'icon-loading-small': loading.quota}"
 			class="quota">
-			<Multiselect :allow-empty="false"
+			<NcMultiselect :allow-empty="false"
 				:disabled="loading.quota||loading.all"
 				:options="quotaOptions"
 				:placeholder="t('settings', 'Select user quota')"
@@ -190,7 +190,7 @@
 		<div v-if="showConfig.showLanguages"
 			:class="{'icon-loading-small': loading.languages}"
 			class="languages">
-			<Multiselect :allow-empty="false"
+			<NcMultiselect :allow-empty="false"
 				:disabled="loading.languages||loading.all"
 				:options="languages"
 				:placeholder="t('settings', 'No language set')"
@@ -211,17 +211,17 @@
 		<div class="userActions">
 			<div v-if="!loading.all"
 				class="toggleUserActions">
-				<Actions>
-					<ActionButton icon="icon-checkmark"
+				<NcActions>
+					<NcActionButton icon="icon-checkmark"
 						@click="editing = false">
 						{{ t('settings', 'Done') }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 				<div v-click-outside="hideMenu" class="userPopoverMenuWrapper">
 					<button class="icon-more"
 						@click.prevent="toggleMenu" />
 					<div :class="{ 'open': openedMenu }" class="popovermenu">
-						<PopoverMenu :menu="userActions" />
+						<NcPopoverMenu :menu="userActions" />
 					</div>
 				</div>
 			</div>
@@ -239,10 +239,10 @@ import ClickOutside from 'vue-click-outside'
 import Vue from 'vue'
 import VTooltip from 'v-tooltip'
 import {
-	PopoverMenu,
-	Multiselect,
-	Actions,
-	ActionButton,
+	NcPopoverMenu,
+	NcMultiselect,
+	NcActions,
+	NcActionButton,
 } from '@nextcloud/vue'
 import UserRowSimple from './UserRowSimple'
 import UserRowMixin from '../../mixins/UserRowMixin'
@@ -253,10 +253,10 @@ export default {
 	name: 'UserRow',
 	components: {
 		UserRowSimple,
-		PopoverMenu,
-		Actions,
-		ActionButton,
-		Multiselect,
+		NcPopoverMenu,
+		NcActions,
+		NcActionButton,
+		NcMultiselect,
 	},
 	directives: {
 		ClickOutside,
diff --git a/apps/settings/src/components/UserList/UserRowSimple.vue b/apps/settings/src/components/UserList/UserRowSimple.vue
index 8b3472cf3fa..105994e2f75 100644
--- a/apps/settings/src/components/UserList/UserRowSimple.vue
+++ b/apps/settings/src/components/UserList/UserRowSimple.vue
@@ -56,18 +56,18 @@
 
 		<div class="userActions">
 			<div v-if="canEdit && !loading.all" class="toggleUserActions">
-				<Actions>
-					<ActionButton icon="icon-rename" @click="toggleEdit">
+				<NcActions>
+					<NcActionButton icon="icon-rename" @click="toggleEdit">
 						{{ t('settings', 'Edit User') }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 				<div class="userPopoverMenuWrapper">
 					<button v-click-outside="hideMenu"
 						class="icon-more"
 						:aria-label="t('settings', 'Toggle user actions menu')"
 						@click.prevent="toggleMenu" />
 					<div class="popovermenu" :class="{ 'open': openedMenu }" :aria-expanded="openedMenu">
-						<PopoverMenu :menu="userActions" />
+						<NcPopoverMenu :menu="userActions" />
 					</div>
 				</div>
 			</div>
@@ -80,18 +80,18 @@
 </template>
 
 <script>
-import PopoverMenu from '@nextcloud/vue/dist/Components/PopoverMenu'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import ClickOutside from 'vue-click-outside'
 import { getCurrentUser } from '@nextcloud/auth'
 import UserRowMixin from '../../mixins/UserRowMixin'
 export default {
 	name: 'UserRowSimple',
 	components: {
-		PopoverMenu,
-		ActionButton,
-		Actions,
+		NcPopoverMenu,
+		NcActionButton,
+		NcActions,
 	},
 	directives: {
 		ClickOutside,
diff --git a/apps/settings/src/components/WebAuthn/Device.vue b/apps/settings/src/components/WebAuthn/Device.vue
index fc1bab3c8b0..d5a0623ab68 100644
--- a/apps/settings/src/components/WebAuthn/Device.vue
+++ b/apps/settings/src/components/WebAuthn/Device.vue
@@ -23,23 +23,23 @@
 	<div class="webauthn-device">
 		<span class="icon-webauthn-device" />
 		{{ name || t('settings', 'Unnamed device') }}
-		<Actions :force-menu="true">
-			<ActionButton icon="icon-delete" @click="$emit('delete')">
+		<NcActions :force-menu="true">
+			<NcActionButton icon="icon-delete" @click="$emit('delete')">
 				{{ t('settings', 'Delete') }}
-			</ActionButton>
-		</Actions>
+			</NcActionButton>
+		</NcActions>
 	</div>
 </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'
 
 export default {
 	name: 'Device',
 	components: {
-		ActionButton,
-		Actions,
+		NcActionButton,
+		NcActions,
 	},
 	props: {
 		name: {
diff --git a/apps/settings/src/views/Apps.vue b/apps/settings/src/views/Apps.vue
index ee7f74c7877..ff7c05cdcd7 100644
--- a/apps/settings/src/views/Apps.vue
+++ b/apps/settings/src/views/Apps.vue
@@ -21,50 +21,50 @@
   -->
 
 <template>
-	<Content app-name="settings"
+	<NcContent app-name="settings"
 		:class="{ 'with-app-sidebar': app}"
 		:content-class="{ 'icon-loading': loadingList }"
 		:navigation-class="{ 'icon-loading': loading }">
 		<!-- Categories & filters -->
-		<AppNavigation>
+		<NcAppNavigation>
 			<template #list>
-				<AppNavigationItem id="app-category-your-apps"
+				<NcAppNavigationItem id="app-category-your-apps"
 					:to="{ name: 'apps' }"
 					:exact="true"
 					icon="icon-category-installed"
 					:title="t('settings', 'Your apps')" />
-				<AppNavigationItem id="app-category-enabled"
+				<NcAppNavigationItem id="app-category-enabled"
 					:to="{ name: 'apps-category', params: { category: 'enabled' } }"
 					icon="icon-category-enabled"
 					:title="t('settings', 'Active apps')" />
-				<AppNavigationItem id="app-category-disabled"
+				<NcAppNavigationItem id="app-category-disabled"
 					:to="{ name: 'apps-category', params: { category: 'disabled' } }"
 					icon="icon-category-disabled"
 					:title="t('settings', 'Disabled apps')" />
-				<AppNavigationItem v-if="updateCount > 0"
+				<NcAppNavigationItem v-if="updateCount > 0"
 					id="app-category-updates"
 					:to="{ name: 'apps-category', params: { category: 'updates' } }"
 					icon="icon-download"
 					:title="t('settings', 'Updates')">
-					<AppNavigationCounter slot="counter">
+					<NcAppNavigationCounter slot="counter">
 						{{ updateCount }}
-					</AppNavigationCounter>
-				</AppNavigationItem>
-				<AppNavigationItem id="app-category-your-bundles"
+					</NcAppNavigationCounter>
+				</NcAppNavigationItem>
+				<NcAppNavigationItem id="app-category-your-bundles"
 					:to="{ name: 'apps-category', params: { category: 'app-bundles' } }"
 					icon="icon-category-app-bundles"
 					:title="t('settings', 'App bundles')" />
 
-				<AppNavigationSpacer />
+				<NcAppNavigationSpacer />
 
 				<!-- App store categories -->
 				<template v-if="settings.appstoreEnabled">
-					<AppNavigationItem id="app-category-featured"
+					<NcAppNavigationItem id="app-category-featured"
 						:to="{ name: 'apps-category', params: { category: 'featured' } }"
 						icon="icon-favorite"
 						:title="t('settings', 'Featured apps')" />
 
-					<AppNavigationItem v-for="cat in categories"
+					<NcAppNavigationItem v-for="cat in categories"
 						:key="'icon-category-' + cat.ident"
 						:icon="'icon-category-' + cat.ident"
 						:to="{
@@ -74,19 +74,19 @@
 						:title="cat.displayName" />
 				</template>
 
-				<AppNavigationItem id="app-developer-docs"
+				<NcAppNavigationItem id="app-developer-docs"
 					:title="t('settings', 'Developer documentation') + ' ↗'"
 					@click="openDeveloperDocumentation" />
 			</template>
-		</AppNavigation>
+		</NcAppNavigation>
 
 		<!-- Apps list -->
-		<AppContent class="app-settings-content" :class="{ 'icon-loading': loadingList }">
+		<NcAppContent class="app-settings-content" :class="{ 'icon-loading': loadingList }">
 			<AppList :category="category" :app="app" :search="searchQuery" />
-		</AppContent>
+		</NcAppContent>
 
 		<!-- Selected app details -->
-		<AppSidebar v-if="id && app"
+		<NcAppSidebar v-if="id && app"
 			v-bind="appSidebar"
 			:class="{'app-sidebar--without-background': !appSidebar.background}"
 			@close="hideAppDetails">
@@ -114,13 +114,13 @@
 
 			<!-- Tab content -->
 
-			<AppSidebarTab id="desc"
+			<NcAppSidebarTab id="desc"
 				icon="icon-category-office"
 				:name="t('settings', 'Details')"
 				:order="0">
 				<AppDetails :app="app" />
-			</AppSidebarTab>
-			<AppSidebarTab v-if="app.appstoreData && app.releases[0].translations.en.changelog"
+			</NcAppSidebarTab>
+			<NcAppSidebarTab v-if="app.appstoreData && app.releases[0].translations.en.changelog"
 				id="desca"
 				icon="icon-category-organization"
 				:name="t('settings', 'Changelog')"
@@ -129,9 +129,9 @@
 					<h2>{{ release.version }}</h2>
 					<Markdown v-if="changelog(release)" :text="changelog(release)" />
 				</div>
-			</AppSidebarTab>
-		</AppSidebar>
-	</Content>
+			</NcAppSidebarTab>
+		</NcAppSidebar>
+	</NcContent>
 </template>
 
 <script>
@@ -139,14 +139,14 @@ import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import Vue from 'vue'
 import VueLocalStorage from 'vue-localstorage'
 
-import AppContent from '@nextcloud/vue/dist/Components/AppContent'
-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 AppNavigationSpacer from '@nextcloud/vue/dist/Components/AppNavigationSpacer'
-import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar'
-import AppSidebarTab from '@nextcloud/vue/dist/Components/AppSidebarTab'
-import Content from '@nextcloud/vue/dist/Components/Content'
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent'
+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 NcAppNavigationSpacer from '@nextcloud/vue/dist/Components/NcAppNavigationSpacer'
+import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar'
+import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab'
+import NcContent from '@nextcloud/vue/dist/Components/NcContent'
 
 import AppList from '../components/AppList'
 import AppDetails from '../components/AppDetails'
@@ -160,17 +160,17 @@ export default {
 	name: 'Apps',
 
 	components: {
-		AppContent,
+		NcAppContent,
 		AppDetails,
 		AppList,
-		AppNavigation,
-		AppNavigationCounter,
-		AppNavigationItem,
-		AppNavigationSpacer,
+		NcAppNavigation,
+		NcAppNavigationCounter,
+		NcAppNavigationItem,
+		NcAppNavigationSpacer,
 		AppScore,
-		AppSidebar,
-		AppSidebarTab,
-		Content,
+		NcAppSidebar,
+		NcAppSidebarTab,
+		NcContent,
 		Markdown,
 	},
 
diff --git a/apps/settings/src/views/Users.vue b/apps/settings/src/views/Users.vue
index c3d3d9f3c72..ce3ce235c31 100644
--- a/apps/settings/src/views/Users.vue
+++ b/apps/settings/src/views/Users.vue
@@ -21,16 +21,16 @@
   -->
 
 <template>
-	<Content app-name="settings" :navigation-class="{ 'icon-loading': loadingAddGroup }">
-		<AppNavigation>
-			<AppNavigationNew button-id="new-user-button"
+	<NcContent app-name="settings" :navigation-class="{ 'icon-loading': loadingAddGroup }">
+		<NcAppNavigation>
+			<NcAppNavigationNew button-id="new-user-button"
 				:text="t('settings','New user')"
 				button-class="icon-add"
 				@click="showNewUserMenu"
 				@keyup.enter="showNewUserMenu"
 				@keyup.space="showNewUserMenu" />
 			<template #list>
-				<AppNavigationItem id="addgroup"
+				<NcAppNavigationItem id="addgroup"
 					ref="addGroup"
 					:edit-placeholder="t('settings', 'Enter group name')"
 					:editable="true"
@@ -39,39 +39,39 @@
 					icon="icon-add"
 					@click="showAddGroupForm"
 					@update:title="createGroup" />
-				<AppNavigationItem id="everyone"
+				<NcAppNavigationItem id="everyone"
 					:exact="true"
 					:title="t('settings', 'Active users')"
 					:to="{ name: 'users' }"
 					icon="icon-contacts-dark">
-					<AppNavigationCounter v-if="userCount > 0" slot="counter">
+					<NcAppNavigationCounter v-if="userCount > 0" slot="counter">
 						{{ userCount }}
-					</AppNavigationCounter>
-				</AppNavigationItem>
-				<AppNavigationItem v-if="settings.isAdmin"
+					</NcAppNavigationCounter>
+				</NcAppNavigationItem>
+				<NcAppNavigationItem v-if="settings.isAdmin"
 					id="admin"
 					:exact="true"
 					:title="t('settings', 'Admins')"
 					:to="{ name: 'group', params: { selectedGroup: 'admin' } }"
 					icon="icon-user-admin">
-					<AppNavigationCounter v-if="adminGroupMenu.count" slot="counter">
+					<NcAppNavigationCounter v-if="adminGroupMenu.count" slot="counter">
 						{{ adminGroupMenu.count }}
-					</AppNavigationCounter>
-				</AppNavigationItem>
+					</NcAppNavigationCounter>
+				</NcAppNavigationItem>
 
 				<!-- Hide the disabled if none, if we don't have the data (-1) show it -->
-				<AppNavigationItem v-if="disabledGroupMenu.usercount > 0 || disabledGroupMenu.usercount === -1"
+				<NcAppNavigationItem v-if="disabledGroupMenu.usercount > 0 || disabledGroupMenu.usercount === -1"
 					id="disabled"
 					:exact="true"
 					:title="t('settings', 'Disabled users')"
 					:to="{ name: 'group', params: { selectedGroup: 'disabled' } }"
 					icon="icon-disabled-users">
-					<AppNavigationCounter v-if="disabledGroupMenu.usercount > 0" slot="counter">
+					<NcAppNavigationCounter v-if="disabledGroupMenu.usercount > 0" slot="counter">
 						{{ disabledGroupMenu.usercount }}
-					</AppNavigationCounter>
-				</AppNavigationItem>
+					</NcAppNavigationCounter>
+				</NcAppNavigationItem>
 
-				<AppNavigationCaption v-if="groupList.length > 0" :title="t('settings', 'Groups')" />
+				<NcAppNavigationCaption v-if="groupList.length > 0" :title="t('settings', 'Groups')" />
 				<GroupListItem v-for="group in groupList"
 					:id="group.id"
 					:key="group.id"
@@ -79,10 +79,10 @@
 					:count="group.count" />
 			</template>
 			<template #footer>
-				<AppNavigationSettings>
+				<NcAppNavigationSettings>
 					<div>
 						<p>{{ t('settings', 'Default quota:') }}</p>
-						<Multiselect :value="defaultQuota"
+						<NcMultiselect :value="defaultQuota"
 							:options="quotaOptions"
 							tag-placeholder="create"
 							:placeholder="t('settings', 'Select default quota')"
@@ -129,30 +129,30 @@
 							class="checkbox">
 						<label for="sendWelcomeMail">{{ t('settings', 'Send email to new user') }}</label>
 					</div>
-				</AppNavigationSettings>
+				</NcAppNavigationSettings>
 			</template>
-		</AppNavigation>
-		<AppContent>
+		</NcAppNavigation>
+		<NcAppContent>
 			<UserList :users="users"
 				:show-config="showConfig"
 				:selected-group="selectedGroupDecoded"
 				:external-actions="externalActions" />
-		</AppContent>
-	</Content>
+		</NcAppContent>
+	</NcContent>
 </template>
 
 <script>
-import AppContent from '@nextcloud/vue/dist/Components/AppContent'
-import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
-import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
-import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
-import AppNavigationNew from '@nextcloud/vue/dist/Components/AppNavigationNew'
-import AppNavigationSettings from '@nextcloud/vue/dist/Components/AppNavigationSettings'
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent'
+import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation'
+import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption'
+import NcAppNavigationCounter from '@nextcloud/vue/dist/Components/NcAppNavigationCounter'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
+import NcAppNavigationNew from '@nextcloud/vue/dist/Components/NcAppNavigationNew'
+import NcAppNavigationSettings from '@nextcloud/vue/dist/Components/NcAppNavigationSettings'
 import axios from '@nextcloud/axios'
-import Content from '@nextcloud/vue/dist/Components/Content'
+import NcContent from '@nextcloud/vue/dist/Components/NcContent'
 import { generateUrl } from '@nextcloud/router'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import Vue from 'vue'
 import VueLocalStorage from 'vue-localstorage'
 
@@ -164,16 +164,16 @@ Vue.use(VueLocalStorage)
 export default {
 	name: 'Users',
 	components: {
-		AppContent,
-		AppNavigation,
-		AppNavigationCaption,
-		AppNavigationCounter,
-		AppNavigationItem,
-		AppNavigationNew,
-		AppNavigationSettings,
-		Content,
+		NcAppContent,
+		NcAppNavigation,
+		NcAppNavigationCaption,
+		NcAppNavigationCounter,
+		NcAppNavigationItem,
+		NcAppNavigationNew,
+		NcAppNavigationSettings,
+		NcContent,
 		GroupListItem,
-		Multiselect,
+		NcMultiselect,
 		UserList,
 	},
 	props: {