From 54a990db59dfcd1c89499e08d763cf4a8803cd3a Mon Sep 17 00:00:00 2001
From: greta <gretadoci@gmail.com>
Date: Fri, 9 Sep 2022 11:15:47 +0200
Subject: Bump @nextcloud/vue v7.0.0-beta.1

Signed-off-by: greta <gretadoci@gmail.com>
---
 src/components/Actions/ActionCopyNtoFN.vue         |  2 +-
 src/components/Actions/ActionToggleYear.vue        |  2 +-
 src/components/AppContent/CircleContent.vue        | 24 ++++++----
 src/components/AppContent/ContactsContent.vue      | 20 ++++----
 .../AppNavigation/CircleNavigationItem.vue         | 18 +++++---
 .../AppNavigation/GroupNavigationItem.vue          |  6 +--
 src/components/AppNavigation/RootNavigation.vue    | 23 ++++++----
 .../AppNavigation/Settings/SettingsAddressbook.vue | 35 +++++++++-----
 .../Settings/SettingsAddressbookShare.vue          |  2 +-
 .../Settings/SettingsAddressbookSharee.vue         | 17 ++++---
 .../Settings/SettingsImportContacts.vue            | 10 ++--
 .../Settings/SettingsNewAddressbook.vue            |  2 +-
 .../Settings/SettingsSortContacts.vue              |  2 +-
 src/components/AppNavigation/SettingsSection.vue   |  2 +-
 src/components/CircleDetails.vue                   |  8 ++--
 src/components/CircleDetails/CircleConfigs.vue     |  2 +-
 .../CircleDetails/CirclePasswordSettings.vue       |  4 +-
 src/components/ContactDetails.vue                  | 24 +++++-----
 .../ContactDetails/ContactDetailsAddNewProp.vue    |  2 +-
 .../ContactDetails/ContactDetailsAvatar.vue        | 28 ++++++++----
 src/components/ContactsList.vue                    |  2 +-
 src/components/ContactsList/ContactsListItem.vue   |  2 +-
 src/components/DetailsHeader.vue                   |  2 +-
 src/components/EntityPicker/ContactsPicker.vue     |  2 +-
 src/components/EntityPicker/EntityBubble.vue       |  4 +-
 src/components/EntityPicker/EntityPicker.vue       | 21 +++++----
 src/components/EntityPicker/EntitySearchResult.vue |  2 +-
 src/components/EntityPicker/NewCircleIntro.vue     |  4 +-
 src/components/MemberList.vue                      | 53 ++++++++++++----------
 src/components/MembersList/MembersListItem.vue     | 10 ++--
 src/components/ProcessingScreen.vue                | 10 ++--
 src/components/Properties/PropertyActions.vue      |  4 +-
 src/components/Properties/PropertyDateTime.vue     |  4 +-
 src/components/Properties/PropertyGroups.vue       |  2 +-
 src/components/Properties/PropertyMultipleText.vue |  2 +-
 src/components/Properties/PropertySelect.vue       |  2 +-
 src/components/Properties/PropertyText.vue         |  2 +-
 src/views/Contacts.vue                             |  6 +--
 38 files changed, 212 insertions(+), 155 deletions(-)

(limited to 'src')

diff --git a/src/components/Actions/ActionCopyNtoFN.vue b/src/components/Actions/ActionCopyNtoFN.vue
index 6de3a51c..5e1157e8 100644
--- a/src/components/Actions/ActionCopyNtoFN.vue
+++ b/src/components/Actions/ActionCopyNtoFN.vue
@@ -29,7 +29,7 @@
 	</ActionButton>
 </template>
 <script>
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import ActionsMixin from '../../mixins/ActionsMixin'
 import IconCopy from 'vue-material-design-icons/ContentCopy'
 
diff --git a/src/components/Actions/ActionToggleYear.vue b/src/components/Actions/ActionToggleYear.vue
index 9da87b0c..eb169880 100644
--- a/src/components/Actions/ActionToggleYear.vue
+++ b/src/components/Actions/ActionToggleYear.vue
@@ -28,7 +28,7 @@
 	</ActionCheckbox>
 </template>
 <script>
-import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
+import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
 import ActionsMixin from '../../mixins/ActionsMixin'
 
 export default {
diff --git a/src/components/AppContent/CircleContent.vue b/src/components/AppContent/CircleContent.vue
index 3cfdcbc0..90619e90 100644
--- a/src/components/AppContent/CircleContent.vue
+++ b/src/components/AppContent/CircleContent.vue
@@ -22,18 +22,19 @@
 
 <template>
 	<AppContent v-if="!circle">
-		<EmptyContent>
+		<EmptyContent :title="t('contacts', 'Please select a circle')">
 			<template #icon>
 				<IconCircles
 					:size="20" />
 			</template>
-			{{ t('contacts', 'Please select a circle') }}
 		</EmptyContent>
 	</AppContent>
 
 	<AppContent v-else-if="loading">
-		<EmptyContent icon="icon-loading">
-			{{ t('contacts', 'Loading circle …') }}
+		<EmptyContent :title="t('contacts', 'Loading circle …')">
+			<template #icon>
+				<IconLoading :size="20" />
+			</template>
 		</EmptyContent>
 	</AppContent>
 
@@ -51,16 +52,17 @@
 			<!-- not a member -->
 			<template v-if="!circle.isMember">
 				<!-- Pending request validation -->
-				<EmptyContent v-if="circle.isPendingMember" icon="icon-loading">
-					{{ t('contacts', 'Your request to join this circle is pending approval') }}
+				<EmptyContent v-if="circle.isPendingMember" :title="t('contacts', 'Your request to join this circle is pending approval')">
+					<template #icon>
+						<IconLoading :size="20" />
+					</template>
 				</EmptyContent>
 
-				<EmptyContent v-else>
+				<EmptyContent v-else :title="t('contacts', 'You are not a member of {circle}', { circle: circle.displayName})">
 					<template #icon>
 						<IconCircles
 							:size="20" />
 					</template>
-					{{ t('contacts', 'You are not a member of {circle}', { circle: circle.displayName}) }}
 				</EmptyContent>
 			</template>
 		</CircleDetails>
@@ -68,8 +70,9 @@
 </template>
 <script>
 import { showError } from '@nextcloud/dialogs'
-import AppContent from '@nextcloud/vue/dist/Components/AppContent'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import AppContent from '@nextcloud/vue/dist/Components/NcAppContent'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile'
 import IconCircles from '../Icons/IconCircles'
 import CircleDetails from '../CircleDetails'
@@ -85,6 +88,7 @@ export default {
 		EmptyContent,
 		MemberList,
 		IconCircles,
+		IconLoading,
 	},
 
 	mixins: [isMobile, RouterMixin],
diff --git a/src/components/AppContent/ContactsContent.vue b/src/components/AppContent/ContactsContent.vue
index a5dceb2c..9f5b2c1a 100644
--- a/src/components/AppContent/ContactsContent.vue
+++ b/src/components/AppContent/ContactsContent.vue
@@ -22,18 +22,19 @@
 
 <template>
 	<AppContent v-if="loading">
-		<EmptyContent icon="icon-loading">
-			{{ t('contacts', 'Loading contacts …') }}
+		<EmptyContent :title="t('contacts', 'Loading contacts …')">
+			<template #icon>
+				<IconLoading :size="20" />
+			</template>
 		</EmptyContent>
 	</AppContent>
 
 	<AppContent v-else-if="isEmptyGroup && !isRealGroup">
-		<EmptyContent>
+		<EmptyContent :title="t('contacts', 'There are no contacts yet')">
 			<template #icon>
 				<IconContact
 					:size="20" />
 			</template>
-			{{ t('contacts', 'There are no contacts yet') }}
 			<template #desc>
 				<Button type="primary" @click="newContact">
 					{{ t('contacts', 'Create contact') }}
@@ -43,12 +44,11 @@
 	</AppContent>
 
 	<AppContent v-else-if="isEmptyGroup && isRealGroup">
-		<EmptyContent>
+		<EmptyContent :title=" t('contacts', 'There are no contacts in this group')">
 			<template #icon>
 				<IconContact
 					:size="20" />
 			</template>
-			{{ t('contacts', 'There are no contacts in this group') }}
 			<template #desc>
 				<Button v-if="contacts.length === 0" type="primary" @click="addContactsToGroup(selectedGroup)">
 					{{ t('contacts', 'Create contacts') }}
@@ -75,9 +75,10 @@
 </template>
 <script>
 import { emit } from '@nextcloud/event-bus'
-import AppContent from '@nextcloud/vue/dist/Components/AppContent'
-import Button from '@nextcloud/vue/dist/Components/Button'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import AppContent from '@nextcloud/vue/dist/Components/NcAppContent'
+import Button from '@nextcloud/vue/dist/Components/NcButton'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 
 import ContactDetails from '../ContactDetails'
 import ContactsList from '../ContactsList'
@@ -94,6 +95,7 @@ export default {
 		ContactsList,
 		EmptyContent,
 		IconContact,
+		IconLoading,
 	},
 
 	mixins: [RouterMixin],
diff --git a/src/components/AppNavigation/CircleNavigationItem.vue b/src/components/AppNavigation/CircleNavigationItem.vue
index 5ca67554..96f98b5f 100644
--- a/src/components/AppNavigation/CircleNavigationItem.vue
+++ b/src/components/AppNavigation/CircleNavigationItem.vue
@@ -29,7 +29,10 @@
 				:size="20" />
 		</template>
 		<template v-if="loadingAction" slot="actions">
-			<ActionText icon="icon-loading-small">
+			<ActionText>
+				<template #icon>
+					<IconLoading :size="20" />
+				</template>
 				{{ t('contacts', 'Loading …') }}
 			</ActionText>
 		</template>
@@ -94,17 +97,17 @@
 </template>
 
 <script>
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
-import ActionText from '@nextcloud/vue/dist/Components/ActionText'
-import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
+import ActionText from '@nextcloud/vue/dist/Components/NcActionText'
+import AppNavigationCounter from '@nextcloud/vue/dist/Components/NcAppNavigationCounter'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 import ExitToApp from 'vue-material-design-icons/ExitToApp'
 import IconAdd from 'vue-material-design-icons/Plus'
 import IconDelete from 'vue-material-design-icons/Delete'
 import LocationEnter from 'vue-material-design-icons/LocationEnter'
 import IconCircles from '../Icons/IconCircles'
-
 import Circle from '../../models/circle.ts'
 import CircleActionsMixin from '../../mixins/CircleActionsMixin'
 
@@ -122,6 +125,7 @@ export default {
 		IconDelete,
 		LocationEnter,
 		IconCircles,
+		IconLoading,
 	},
 
 	mixins: [CircleActionsMixin],
diff --git a/src/components/AppNavigation/GroupNavigationItem.vue b/src/components/AppNavigation/GroupNavigationItem.vue
index bf922aa5..cbefe26f 100644
--- a/src/components/AppNavigation/GroupNavigationItem.vue
+++ b/src/components/AppNavigation/GroupNavigationItem.vue
@@ -68,9 +68,9 @@ import { emit } from '@nextcloud/event-bus'
 import download from 'downloadjs'
 import moment from 'moment'
 
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import AppNavigationCounter from '@nextcloud/vue/dist/Components/NcAppNavigationCounter'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
 import IconContact from 'vue-material-design-icons/AccountMultiple'
 import IconAdd from 'vue-material-design-icons/Plus'
 import IconDownload from 'vue-material-design-icons/Download'
diff --git a/src/components/AppNavigation/RootNavigation.vue b/src/components/AppNavigation/RootNavigation.vue
index 91e753ec..8a10be12 100644
--- a/src/components/AppNavigation/RootNavigation.vue
+++ b/src/components/AppNavigation/RootNavigation.vue
@@ -21,7 +21,10 @@
   -->
 
 <template>
-	<AppNavigation :class="{'icon-loading': loading}">
+	<AppNavigation>
+		<template #icon>
+			<IconLoading v-if="loading" :size="20" />
+		</template>
 		<slot />
 
 		<!-- groups list -->
@@ -169,14 +172,15 @@
 <script>
 import { GROUP_ALL_CONTACTS, GROUP_NO_GROUP_CONTACTS, GROUP_RECENTLY_CONTACTED, ELLIPSIS_COUNT, CIRCLE_DESC } from '../../models/constants.ts'
 
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
-import ActionText from '@nextcloud/vue/dist/Components/ActionText'
-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 AppNavigationSettings from '@nextcloud/vue/dist/Components/AppNavigationSettings'
-import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
+import ActionText from '@nextcloud/vue/dist/Components/NcActionText'
+import AppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation'
+import AppNavigationCounter from '@nextcloud/vue/dist/Components/NcAppNavigationCounter'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
+import AppNavigationSettings from '@nextcloud/vue/dist/Components/NcAppNavigationSettings'
+import AppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 
 import naturalCompare from 'string-natural-compare'
 
@@ -214,6 +218,7 @@ export default {
 		IconUser,
 		IconAdd,
 		IconError,
+		IconLoading,
 		IconRecentlyContacted,
 		NewCircleIntro,
 		SettingsSection,
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbook.vue b/src/components/AppNavigation/Settings/SettingsAddressbook.vue
index 00dd3969..29f6c378 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbook.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbook.vue
@@ -73,9 +73,13 @@
 					<ActionInput v-else
 						ref="renameInput"
 						:disabled="renameLoading"
-						:icon="renameLoading ? 'icon-loading-small' : 'icon-rename'"
 						:value="addressbook.displayName"
-						@submit="updateAddressbookName" />
+						@submit="updateAddressbookName">
+						<template #icon>
+							<IconLoading v-if="renameLoading" :size="20" />
+							<IconRename :size="20" />
+						</template>
+					</ActionInput>
 
 					<!-- enable/disable addressbook -->
 					<ActionCheckbox v-if="!toggleEnabledLoading"
@@ -83,16 +87,21 @@
 						@change.stop.prevent="toggleAddressbookEnabled">
 						{{ t('contacts', 'Enabled') }}
 					</ActionCheckbox>
-					<ActionButton v-else
-						icon="icon-loading-small">
+					<ActionButton v-else>
+						<template #icon>
+							<IconLoading :size="20" />
+						</template>
 						{{ t('contacts', 'Enabled') }}
 					</ActionButton>
 				</template>
 
 				<!-- delete addressbook -->
 				<ActionButton v-if="hasMultipleAddressbooks"
-					:icon="deleteAddressbookLoading ? 'icon-loading-small' : 'icon-delete'"
 					@click="confirmDeletion">
+					<template #icon>
+						<IconLoading v-if="deleteAddressbookLoading" :size="20" />
+						<IconDelete :size="20" />
+					</template>
 					{{ t('contacts', 'Delete') }}
 				</ActionButton>
 			</Actions>
@@ -104,14 +113,16 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
-import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
-import Button from '@nextcloud/vue/dist/Components/Button'
+import Actions from '@nextcloud/vue/dist/Components/NcActions'
+import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
+import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
+import Button from '@nextcloud/vue/dist/Components/NcButton'
 import IconDownload from 'vue-material-design-icons/Download'
 import IconRename from 'vue-material-design-icons/Pencil'
+import IconDelete from 'vue-material-design-icons/Delete'
 import IconContact from 'vue-material-design-icons/AccountMultiple'
 import IconShare from 'vue-material-design-icons/ShareVariant'
 import ShareAddressBook from './SettingsAddressbookShare'
@@ -129,10 +140,12 @@ export default {
 		ActionLink,
 		Actions,
 		Button,
+		IconDelete,
 		IconDownload,
 		IconRename,
 		IconContact,
 		IconShare,
+		IconLoading,
 		ShareAddressBook,
 	},
 
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue b/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue
index ac2789ee..1ec31a5c 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue
@@ -48,7 +48,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import client from '../../../services/cdav'
 
 import addressBookSharee from './SettingsAddressbookSharee'
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue b/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
index 5870fd33..75a8c043 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
@@ -22,12 +22,9 @@
 
 <template>
 	<li class="addressbook-sharee">
-		<span :class="{
-				'icon-loading-small': loading,
-				'icon-group': sharee.isGroup && !loading,
-				'icon-user': !sharee.isGroup && !loading
-			}"
-			class="icon" />
+		<IconLoading v-if="loading" :size="20" />
+		<IconGroup v-else-if="sharee.isGroup && !loading" />
+		<IconUser v-else-if="!sharee.isGroup && !loading" />
 		<span class="addressbook-sharee__identifier"
 			:title="sharee.displayName">
 			{{ sharee.displayName }}
@@ -60,13 +57,19 @@
 <script>
 import { showError } from '@nextcloud/dialogs'
 import IconDelete from 'vue-material-design-icons/Delete'
-import Button from '@nextcloud/vue/dist/Components/Button'
+import IconGroup from 'vue-material-design-icons/AccountMultiple'
+import IconUser from 'vue-material-design-icons/Account'
+import Button from '@nextcloud/vue/dist/Components/NcButton'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 
 export default {
 	name: 'SettingsAddressbookSharee',
 	components: {
 		Button,
 		IconDelete,
+		IconGroup,
+		IconLoading,
+		IconUser,
 	},
 
 	props: {
diff --git a/src/components/AppNavigation/Settings/SettingsImportContacts.vue b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
index 5b8efa22..2eac8403 100644
--- a/src/components/AppNavigation/Settings/SettingsImportContacts.vue
+++ b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
@@ -69,11 +69,11 @@
 					</Button>
 					<Button
 						type="primary"
-						:class="{'icon-loading': loading}"
 						:disabled="loading"
 						class="import-contact__button import-contact__button--files"
 						@click="openPicker">
 						<template #icon>
+							<IconLoading v-if="loading" :size="20" />
 							<IconFolder :size="20" />
 						</template>
 						<span class="import-contact__button-icon" />
@@ -95,9 +95,10 @@
 </template>
 
 <script>
-import Button from '@nextcloud/vue/dist/Components/Button'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import Button from '@nextcloud/vue/dist/Components/NcButton'
+import Modal from '@nextcloud/vue/dist/Components/NcModal'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 import { encodePath } from '@nextcloud/paths'
 import { getCurrentUser } from '@nextcloud/auth'
 import { generateRemoteUrl } from '@nextcloud/router'
@@ -127,6 +128,7 @@ export default {
 		IconUpload,
 		IconError,
 		IconFolder,
+		IconLoading,
 	},
 
 	data() {
diff --git a/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue b/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue
index d3a1fb22..52de5e4e 100644
--- a/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue
+++ b/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue
@@ -25,10 +25,10 @@
 		<IconAdd class="settings-line__icon" />
 		<form id="new-addressbook-form"
 			:disabled="loading"
-			:class="{'icon-loading-small': loading}"
 			name="new-addressbook-form"
 			class="new-addressbook"
 			@submit.prevent.stop="addAddressbook">
+			<IconLoading v-if="loading" :size="20" />
 			<input id="new-addressbook"
 				ref="addressbook"
 				v-model="displayName"
diff --git a/src/components/AppNavigation/Settings/SettingsSortContacts.vue b/src/components/AppNavigation/Settings/SettingsSortContacts.vue
index f9087e01..839bd770 100644
--- a/src/components/AppNavigation/Settings/SettingsSortContacts.vue
+++ b/src/components/AppNavigation/Settings/SettingsSortContacts.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import IconList from 'vue-material-design-icons/FormatListBulletedSquare'
 
 export default {
diff --git a/src/components/AppNavigation/SettingsSection.vue b/src/components/AppNavigation/SettingsSection.vue
index 58f80ed4..2a33fd4a 100644
--- a/src/components/AppNavigation/SettingsSection.vue
+++ b/src/components/AppNavigation/SettingsSection.vue
@@ -58,7 +58,7 @@ import SettingsAddressbook from './Settings/SettingsAddressbook'
 import SettingsNewAddressbook from './Settings/SettingsNewAddressbook'
 import SettingsImportContacts from './Settings/SettingsImportContacts'
 import SettingsSortContacts from './Settings/SettingsSortContacts'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
 
 export default {
 	name: 'SettingsSection',
diff --git a/src/components/CircleDetails.vue b/src/components/CircleDetails.vue
index 6a9a2baa..ac04c93e 100644
--- a/src/components/CircleDetails.vue
+++ b/src/components/CircleDetails.vue
@@ -129,10 +129,10 @@
 import { showError } from '@nextcloud/dialogs'
 import debounce from 'debounce'
 
-import AppContentDetails from '@nextcloud/vue/dist/Components/AppContentDetails'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
-import Button from '@nextcloud/vue/dist/Components/Button'
-import RichContenteditable from '@nextcloud/vue/dist/Components/RichContenteditable'
+import AppContentDetails from '@nextcloud/vue/dist/Components/NcAppContentDetails'
+import Avatar from '@nextcloud/vue/dist/Components/NcAvatar'
+import Button from '@nextcloud/vue/dist/Components/NcButton'
+import RichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable'
 
 import Login from 'vue-material-design-icons/Login'
 import Logout from 'vue-material-design-icons/Logout'
diff --git a/src/components/CircleDetails/CircleConfigs.vue b/src/components/CircleDetails/CircleConfigs.vue
index e99f51f9..fdd8dea6 100644
--- a/src/components/CircleDetails/CircleConfigs.vue
+++ b/src/components/CircleDetails/CircleConfigs.vue
@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
 import ContentHeading from './ContentHeading'
 
 import { PUBLIC_CIRCLE_CONFIG } from '../../models/constants.ts'
diff --git a/src/components/CircleDetails/CirclePasswordSettings.vue b/src/components/CircleDetails/CirclePasswordSettings.vue
index 43ae66b5..1547319b 100644
--- a/src/components/CircleDetails/CirclePasswordSettings.vue
+++ b/src/components/CircleDetails/CirclePasswordSettings.vue
@@ -78,8 +78,8 @@
 
 <script>
 import ContentHeading from './ContentHeading'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
-import Button from '@nextcloud/vue/dist/Components/Button'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
+import Button from '@nextcloud/vue/dist/Components/NcButton'
 
 // Circle setting keys
 const ENFORCE_PASSWORD_PROTECTION = 'enforce_password'
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 56f57f26..c9178f7e 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -23,15 +23,13 @@
 <template>
 	<AppContentDetails>
 		<!-- nothing selected or contact not found -->
-		<EmptyContent v-if="!contact">
+		<EmptyContent v-if="!contact"
+			:title="t('contacts', 'No contact selected')"
+			:description="t('contacts', 'Select a contact on the list to begin')">
 			<template #icon>
 				<IconContact
 					:size="20" />
 			</template>
-			{{ t('contacts', 'No contact selected') }}
-			<template #desc>
-				{{ t('contacts', 'Select a contact on the list to begin') }}
-			</template>
 		</EmptyContent>
 
 		<template v-else>
@@ -185,7 +183,7 @@
 			</Modal>
 
 			<!-- contact details loading -->
-			<section v-if="loadingData" class="icon-loading contact-details" />
+			<IconLoading v-if="loadingData" :size="20" class="contact-details" />
 
 			<!-- contact details -->
 			<section v-else
@@ -256,13 +254,14 @@ import qr from 'qr-image'
 import Vue from 'vue'
 import { VueMasonryPlugin } from 'vue-masonry'
 
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
-import AppContentDetails from '@nextcloud/vue/dist/Components/AppContentDetails'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
+import AppContentDetails from '@nextcloud/vue/dist/Components/NcAppContentDetails'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
 import IconContact from 'vue-material-design-icons/AccountMultiple'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import Modal from '@nextcloud/vue/dist/Components/NcModal'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 import IconDownload from 'vue-material-design-icons/Download'
 import IconDelete from 'vue-material-design-icons/Delete'
 import IconQr from 'vue-material-design-icons/Qrcode'
@@ -299,6 +298,7 @@ export default {
 		IconDelete,
 		IconQr,
 		IconCopy,
+		IconLoading,
 		Modal,
 		Multiselect,
 		PropertyGroups,
diff --git a/src/components/ContactDetails/ContactDetailsAddNewProp.vue b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
index da9ca186..b5e613a1 100644
--- a/src/components/ContactDetails/ContactDetailsAddNewProp.vue
+++ b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import rfcProps from '../../models/rfcProps'
 import Contact from '../../models/contact'
 import PropertyTitle from '../Properties/PropertyTitle'
diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue
index b63c47ea..1fb49ba3 100644
--- a/src/components/ContactDetails/ContactDetailsAvatar.vue
+++ b/src/components/ContactDetails/ContactDetailsAvatar.vue
@@ -44,17 +44,23 @@
 			v-if="!isReadOnly || contact.photo"
 			:force-menu="true"
 			:open.sync="opened"
-			class="contact-header-avatar__menu"
-			default-icon="icon-picture-force-white">
+			class="contact-header-avatar__menu">
+			<template #icon>
+				<IconImage :size="20" fill-color="#fff" />
+			</template>
 			<template v-if="!isReadOnly">
 				<ActionButton
-					icon="icon-upload"
 					@click.stop.prevent="selectFileInput">
+					<template #icon>
+						<IconUpload :size="20" />
+					</template>
 					{{ t('contacts', 'Upload a new picture') }}
 				</ActionButton>
 				<ActionButton
-					icon="icon-folder"
 					@click="selectFilePicker">
+					<template #icon>
+						<IconFolder :size="20" />
+					</template>
 					{{ t('contacts', 'Choose from Files') }}
 				</ActionButton>
 				<ActionButton
@@ -90,12 +96,15 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
+import Avatar from '@nextcloud/vue/dist/Components/NcAvatar'
+import Actions from '@nextcloud/vue/dist/Components/NcActions'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
 import IconDownload from 'vue-material-design-icons/Download'
 import IconDelete from 'vue-material-design-icons/Delete'
+import IconUpload from 'vue-material-design-icons/Upload'
+import IconFolder from 'vue-material-design-icons/Folder'
+import IconImage from 'vue-material-design-icons/Image'
 
 import { showError, showInfo, getFilePickerBuilder, showSuccess } from '@nextcloud/dialogs'
 import { generateUrl, generateRemoteUrl } from '@nextcloud/router'
@@ -117,6 +126,9 @@ export default {
 		Avatar,
 		IconDownload,
 		IconDelete,
+		IconUpload,
+		IconFolder,
+		IconImage,
 	},
 
 	props: {
diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue
index ad3a1d5f..5a7e5e0c 100644
--- a/src/components/ContactsList.vue
+++ b/src/components/ContactsList.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import AppContentList from '@nextcloud/vue/dist/Components/AppContentList'
+import AppContentList from '@nextcloud/vue/dist/Components/NcAppContentList'
 import ContactsListItem from './ContactsList/ContactsListItem'
 import VirtualList from 'vue-virtual-scroll-list'
 
diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue
index 0a17c83e..dd11c0ff 100644
--- a/src/components/ContactsList/ContactsListItem.vue
+++ b/src/components/ContactsList/ContactsListItem.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import ListItemIcon from '@nextcloud/vue/dist/Components/ListItemIcon'
+import ListItemIcon from '@nextcloud/vue/dist/Components/NcListItemIcon'
 
 export default {
 	name: 'ContactsListItem',
diff --git a/src/components/DetailsHeader.vue b/src/components/DetailsHeader.vue
index b2b4d1a2..1eef7309 100644
--- a/src/components/DetailsHeader.vue
+++ b/src/components/DetailsHeader.vue
@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/Actions'
+import Actions from '@nextcloud/vue/dist/Components/NcActions'
 
 export default {
 	name: 'DetailsHeader',
diff --git a/src/components/EntityPicker/ContactsPicker.vue b/src/components/EntityPicker/ContactsPicker.vue
index ef6f0f3f..05fd9e98 100644
--- a/src/components/EntityPicker/ContactsPicker.vue
+++ b/src/components/EntityPicker/ContactsPicker.vue
@@ -20,7 +20,7 @@
 import { subscribe } from '@nextcloud/event-bus'
 import pLimit from 'p-limit'
 
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import Modal from '@nextcloud/vue/dist/Components/NcModal'
 
 import AddToGroupView from '../../views/Processing/AddToGroupView'
 import appendContactToGroup from '../../services/appendContactToGroup'
diff --git a/src/components/EntityPicker/EntityBubble.vue b/src/components/EntityPicker/EntityBubble.vue
index fbcc1ba2..47280e8f 100644
--- a/src/components/EntityPicker/EntityBubble.vue
+++ b/src/components/EntityPicker/EntityBubble.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import UserBubble from '@nextcloud/vue/dist/Components/UserBubble'
+import UserBubble from '@nextcloud/vue/dist/Components/NcUserBubble'
 
 export default {
 	name: 'EntityBubble',
@@ -89,7 +89,7 @@ export default {
 <style lang="scss" scoped>
 // better visual with light default tint
 ::v-deep .user-bubble__content {
-	background-color: var(--color-primary-light);
+	background-color: var(--color-pirimary-light);
 }
 
 .entity-picker__bubble {
diff --git a/src/components/EntityPicker/EntityPicker.vue b/src/components/EntityPicker/EntityPicker.vue
index 5e6c4f31..726e353e 100644
--- a/src/components/EntityPicker/EntityPicker.vue
+++ b/src/components/EntityPicker/EntityPicker.vue
@@ -38,14 +38,15 @@
 			</div>
 
 			<!-- Loading -->
-			<EmptyContent v-if="loading" icon="icon-loading">
-				{{ t('contacts', 'Loading …') }}
+			<EmptyContent :title="t('contacts', 'Loading …')">
+				<template #icon>
+					<IconLoading v-if="loading" :size="20" />
+				</template>
 			</EmptyContent>
 
-			<template v-else>
+			<template v-if="Object.keys(selectionSet).length > 0">
 				<!-- Picked entities -->
 				<transition-group
-					v-if="Object.keys(selectionSet).length > 0"
 					name="zoom"
 					tag="ul"
 					class="entity-picker__selection">
@@ -57,11 +58,10 @@
 				</transition-group>
 
 				<!-- No recommendations -->
-				<EmptyContent v-if="dataSet.length === 0">
+				<EmptyContent v-if="dataSet.length === 0" :title="t('contacts', 'Search for people to add')">
 					<template #icon>
 						<IconSearch :size="20" />
 					</template>
-					{{ t('contacts', 'Search for people to add') }}
 				</EmptyContent>
 
 				<!-- Searched & picked entities -->
@@ -73,11 +73,10 @@
 					:estimate-size="44"
 					:extra-props="{ selection: selectionSet, onClick }" />
 
-				<EmptyContent v-else-if="searchQuery">
+				<EmptyContent v-else-if="searchQuery" :title="t('contacts', 'No results')">
 					<template #icon>
 						<IconSearch :size="20" />
 					</template>
-					{{ t('contacts', 'No results') }}
 				</EmptyContent>
 
 				<div class="entity-picker__navigation">
@@ -102,9 +101,10 @@
 <script>
 import debounce from 'debounce'
 import VirtualList from 'vue-virtual-scroll-list'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 import IconSearch from 'vue-material-design-icons/Magnify'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import Modal from '@nextcloud/vue/dist/Components/NcModal'
 
 import EntityBubble from './EntityBubble'
 import EntitySearchResult from './EntitySearchResult'
@@ -116,6 +116,7 @@ export default {
 		EmptyContent,
 		EntityBubble,
 		IconSearch,
+		IconLoading,
 		Modal,
 		VirtualList,
 	},
diff --git a/src/components/EntityPicker/EntitySearchResult.vue b/src/components/EntityPicker/EntitySearchResult.vue
index 8e94ee4e..609617cb 100644
--- a/src/components/EntityPicker/EntitySearchResult.vue
+++ b/src/components/EntityPicker/EntitySearchResult.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import UserBubble from '@nextcloud/vue/dist/Components/UserBubble'
+import UserBubble from '@nextcloud/vue/dist/Components/NcUserBubble'
 
 export default {
 	name: 'EntitySearchResult',
diff --git a/src/components/EntityPicker/NewCircleIntro.vue b/src/components/EntityPicker/NewCircleIntro.vue
index d52da329..96db20d1 100644
--- a/src/components/EntityPicker/NewCircleIntro.vue
+++ b/src/components/EntityPicker/NewCircleIntro.vue
@@ -85,8 +85,8 @@
 
 <script>
 import { getCapabilities } from '@nextcloud/capabilities'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
+import Modal from '@nextcloud/vue/dist/Components/NcModal'
 
 import { CIRCLE_DESC } from '../../models/constants.ts'
 
diff --git a/src/components/MemberList.vue b/src/components/MemberList.vue
index 1c1d6fe8..b73ed3f7 100644
--- a/src/components/MemberList.vue
+++ b/src/components/MemberList.vue
@@ -22,32 +22,37 @@
 
 <template>
 	<AppContentList v-if="!hasMembers" class="members-list">
-		<EmptyContent v-if="loading" icon="icon-loading">
-			{{ t('contacts', 'Loading members list …') }}
-		</EmptyContent>
-
-		<EmptyContent v-else-if="!circle.isMember">
-			<template #icon>
-				<IconContact
-					:size="20" />
-			</template>
-			{{ t('contacts', 'The list of members is only visible to members of this circle') }}
-		</EmptyContent>
-
-		<EmptyContent v-else>
-			<template #icon>
-				<IconContact
-					:size="20" />
-			</template>
-			{{ t('contacts', 'There is no member in this circle') }}
-		</EmptyContent>
+		<template v-if="loading">
+			<EmptyContent :title="t('contacts', 'Loading members list …')">
+				<template #icon>
+					<IconLoading :size="20" />
+				</template>
+			</EmptyContent>
+		</template>
+		<template v-else-if="!circle.isMember">
+			<EmptyContent :title="t('contacts', 'The list of members is only visible to members of this circle')">
+				<template #icon>
+					<IconContact
+						:size="20" />
+				</template>
+			</EmptyContent>
+		</template>
+		<template v-else>
+			<EmptyContent :title="t('contacts', 'There is no member in this circle')">
+				<template #icon>
+					<IconContact
+						:size="20" />
+				</template>
+			</EmptyContent>
+		</template>
 	</AppContentList>
 
-	<AppContentList v-else :class="{ 'icon-loading': loading, showdetails: showDetails }">
+	<AppContentList v-else :class="{ showdetails: showDetails }">
 		<div class="members-list__new">
 			<Button v-if="circle.canManageMembers"
 				@click="onShowPicker(circle.id)">
 				<template #icon>
+					<IconLoading v-if="loading" />
 					<IconAdd
 						:size="20" />
 				</template>
@@ -84,9 +89,10 @@
 </template>
 
 <script>
-import AppContentList from '@nextcloud/vue/dist/Components/AppContentList'
-import Button from '@nextcloud/vue/dist/Components/Button'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import AppContentList from '@nextcloud/vue/dist/Components/NcAppContentList'
+import Button from '@nextcloud/vue/dist/Components/NcButton'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile'
 import VirtualList from 'vue-virtual-scroll-list'
 
@@ -114,6 +120,7 @@ export default {
 		IconContact,
 		IconAdd,
 		IconInfo,
+		IconLoading,
 	},
 	mixins: [isMobile, RouterMixin],
 
diff --git a/src/components/MembersList/MembersListItem.vue b/src/components/MembersList/MembersListItem.vue
index cb2145c7..227dd1f9 100644
--- a/src/components/MembersList/MembersListItem.vue
+++ b/src/components/MembersList/MembersListItem.vue
@@ -103,11 +103,11 @@
 <script>
 import { CIRCLES_MEMBER_LEVELS, MemberLevels, MemberStatus } from '../../models/constants.ts'
 
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ListItemIcon from '@nextcloud/vue/dist/Components/ListItemIcon'
-import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionText from '@nextcloud/vue/dist/Components/ActionText'
+import Actions from '@nextcloud/vue/dist/Components/NcActions'
+import ListItemIcon from '@nextcloud/vue/dist/Components/NcListItemIcon'
+import ActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import ActionText from '@nextcloud/vue/dist/Components/NcActionText'
 import IconDelete from 'vue-material-design-icons/Delete'
 import IconCheck from 'vue-material-design-icons/Check'
 import IconClose from 'vue-material-design-icons/Close'
diff --git a/src/components/ProcessingScreen.vue b/src/components/ProcessingScreen.vue
index 95bb383d..fbb635ad 100644
--- a/src/components/ProcessingScreen.vue
+++ b/src/components/ProcessingScreen.vue
@@ -1,5 +1,8 @@
 <template>
-	<EmptyContent class="processing-screen__wrapper" icon="icon-contacts-dark">
+	<EmptyContent class="processing-screen__wrapper">
+		<template #icon>
+			<IconContact :size="20" />
+		</template>
 		<slot />
 		<template #desc>
 			<div class="processing-screen__progress">
@@ -13,13 +16,14 @@
 </template>
 
 <script>
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
-
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import IconContact from 'vue-material-design-icons/AccountMultiple'
 export default {
 	name: 'ProcessingScreen',
 
 	components: {
 		EmptyContent,
+		IconContact,
 	},
 
 	props: {
diff --git a/src/components/Properties/PropertyActions.vue b/src/components/Properties/PropertyActions.vue
index 9673e508..b0d8adcd 100644
--- a/src/components/Properties/PropertyActions.vue
+++ b/src/components/Properties/PropertyActions.vue
@@ -36,8 +36,8 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import Actions from '@nextcloud/vue/dist/Components/NcActions'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import IconDelete from 'vue-material-design-icons/Delete'
 
 export default {
diff --git a/src/components/Properties/PropertyDateTime.vue b/src/components/Properties/PropertyDateTime.vue
index 3bf5392e..cd064ddb 100644
--- a/src/components/Properties/PropertyDateTime.vue
+++ b/src/components/Properties/PropertyDateTime.vue
@@ -82,8 +82,8 @@
 <script>
 import debounce from 'debounce'
 import moment from 'moment'
-import DatetimePicker from '@nextcloud/vue/dist/Components/DatetimePicker'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import DatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import { getLocale } from '@nextcloud/l10n'
 import { VCardTime } from 'ical.js'
 
diff --git a/src/components/Properties/PropertyGroups.vue b/src/components/Properties/PropertyGroups.vue
index cbf6576f..79aba7fe 100644
--- a/src/components/Properties/PropertyGroups.vue
+++ b/src/components/Properties/PropertyGroups.vue
@@ -60,7 +60,7 @@
 
 <script>
 import debounce from 'debounce'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import Contact from '../../models/contact'
 import PropertyTitle from './PropertyTitle'
 import naturalCompare from 'string-natural-compare'
diff --git a/src/components/Properties/PropertyMultipleText.vue b/src/components/Properties/PropertyMultipleText.vue
index b5b73310..18e1c34d 100644
--- a/src/components/Properties/PropertyMultipleText.vue
+++ b/src/components/Properties/PropertyMultipleText.vue
@@ -101,7 +101,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import PropertyMixin from '../../mixins/PropertyMixin'
 import PropertyTitle from './PropertyTitle'
 import PropertyActions from './PropertyActions'
diff --git a/src/components/Properties/PropertySelect.vue b/src/components/Properties/PropertySelect.vue
index cbfe392d..c0e16576 100644
--- a/src/components/Properties/PropertySelect.vue
+++ b/src/components/Properties/PropertySelect.vue
@@ -58,7 +58,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import PropertyMixin from '../../mixins/PropertyMixin'
 import PropertyTitle from './PropertyTitle'
 import PropertyActions from './PropertyActions'
diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue
index 7ffd456a..064c1025 100644
--- a/src/components/Properties/PropertyText.vue
+++ b/src/components/Properties/PropertyText.vue
@@ -92,7 +92,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import debounce from 'debounce'
 import PropertyMixin from '../../mixins/PropertyMixin'
 import PropertyTitle from './PropertyTitle'
diff --git a/src/views/Contacts.vue b/src/views/Contacts.vue
index b323674c..01402d57 100644
--- a/src/views/Contacts.vue
+++ b/src/views/Contacts.vue
@@ -62,10 +62,10 @@
 <script>
 import { GROUP_ALL_CONTACTS, GROUP_NO_GROUP_CONTACTS, ROUTE_CIRCLE } from '../models/constants.ts'
 
-import AppNavigationNew from '@nextcloud/vue/dist/Components/AppNavigationNew'
-import Content from '@nextcloud/vue/dist/Components/Content'
+import AppNavigationNew from '@nextcloud/vue/dist/Components/NcAppNavigationNew'
+import Content from '@nextcloud/vue/dist/Components/NcContent'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import Modal from '@nextcloud/vue/dist/Components/NcModal'
 
 import { showError } from '@nextcloud/dialogs'
 import { VCardTime } from 'ical.js'
-- 
cgit v1.2.3