1 files changed, 36 insertions, 38 deletions

diff --git a/core/src/views/ContactsMenu.vue b/core/src/views/ContactsMenu.vue
index 443d0c4eb17..924ddcea56b 100644
--- a/core/src/views/ContactsMenu.vue
+++ b/core/src/views/ContactsMenu.vue
@@ -1,23 +1,6 @@
 <!--
-  - @copyright 2023 Christopher Ng <chrng8@gmail.com>
-  -
-  - @author Christopher Ng <chrng8@gmail.com>
-  -
-  - @license AGPL-3.0-or-later
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-  -
+  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
@@ -26,25 +9,25 @@
 		:aria-label="t('core', 'Search contacts')"
 		@open="handleOpen">
 		<template #trigger>
-			<Contacts :size="20" />
+			<NcIconSvgWrapper class="contactsmenu__trigger-icon" :path="mdiContacts" />
 		</template>
 		<div class="contactsmenu__menu">
 			<div class="contactsmenu__menu__input-wrapper">
-				<NcTextField :value.sync="searchTerm"
-					trailing-button-icon="close"
+				<NcTextField id="contactsmenu__menu__search"
 					ref="contactsMenuInput"
+					:value.sync="searchTerm"
+					trailing-button-icon="close"
 					:label="t('core', 'Search contacts')"
 					:trailing-button-label="t('core','Reset search')"
 					:show-trailing-button="searchTerm !== ''"
 					:placeholder="t('core', 'Search contacts …')"
-					id="contactsmenu__menu__search"
 					class="contactsmenu__menu__search"
 					@input="onInputDebounced"
 					@trailing-button-click="onReset" />
 			</div>
 			<NcEmptyContent v-if="error" :name="t('core', 'Could not load your contacts')">
 				<template #icon>
-					<Magnify />
+					<NcIconSvgWrapper :path="mdiMagnify" />
 				</template>
 			</NcEmptyContent>
 			<NcEmptyContent v-else-if="loadingText" :name="loadingText">
@@ -54,7 +37,7 @@
 			</NcEmptyContent>
 			<NcEmptyContent v-else-if="contacts.length === 0" :name="t('core', 'No contacts found')">
 				<template #icon>
-					<Magnify />
+					<NcIconSvgWrapper :path="mdiMagnify" />
 				</template>
 			</NcEmptyContent>
 			<div v-else class="contactsmenu__menu__content">
@@ -79,39 +62,46 @@
 </template>
 
 <script>
+import { mdiContacts, mdiMagnify } from '@mdi/js'
+import { generateUrl } from '@nextcloud/router'
+import { getCurrentUser } from '@nextcloud/auth'
+import { t } from '@nextcloud/l10n'
 import axios from '@nextcloud/axios'
-import Contacts from 'vue-material-design-icons/Contacts.vue'
 import debounce from 'debounce'
-import { getCurrentUser } from '@nextcloud/auth'
-import { generateUrl } from '@nextcloud/router'
-import Magnify from 'vue-material-design-icons/Magnify.vue'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-import NcHeaderMenu from '@nextcloud/vue/dist/Components/NcHeaderMenu.js'
-import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import { translate as t } from '@nextcloud/l10n'
+
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcHeaderMenu from '@nextcloud/vue/components/NcHeaderMenu'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 
 import Contact from '../components/ContactsMenu/Contact.vue'
 import logger from '../logger.js'
 import Nextcloud from '../mixins/Nextcloud.js'
-import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 export default {
 	name: 'ContactsMenu',
 
 	components: {
 		Contact,
-		Contacts,
-		Magnify,
 		NcButton,
 		NcEmptyContent,
 		NcHeaderMenu,
+		NcIconSvgWrapper,
 		NcLoadingIcon,
 		NcTextField,
 	},
 
 	mixins: [Nextcloud],
 
+	setup() {
+		return {
+			mdiContacts,
+			mdiMagnify,
+		}
+	},
+
 	data() {
 		const user = getCurrentUser()
 		return {
@@ -188,6 +178,10 @@ export default {
 .contactsmenu {
 	overflow-y: hidden;
 
+	&__trigger-icon {
+		color: var(--color-background-plain-text) !important;
+	}
+
 	&__menu {
 		display: flex;
 		flex-direction: column;
@@ -198,7 +192,7 @@ export default {
 		label[for="contactsmenu__menu__search"] {
 			font-weight: bold;
 			font-size: 19px;
-			margin-left: 13px;
+			margin-inline-start: 13px;
 		}
 
 		&__input-wrapper {
@@ -231,5 +225,9 @@ export default {
 			}
 		}
 	}
+
+	:deep(.empty-content) {
+		margin: 0 !important;
+	}
 }
 </style>