Migrate EmptyContent icons to material design

Signed-off-by: greta <gretadoci@gmail.com>

3 files changed, 57 insertions, 18 deletions

diff --git a/src/components/AppContent/ContactsContent.vue b/src/components/AppContent/ContactsContent.vue
index 7cd2ef3d..a5dceb2c 100644
--- a/src/components/AppContent/ContactsContent.vue
+++ b/src/components/AppContent/ContactsContent.vue
@@ -28,26 +28,34 @@
 	</AppContent>
 
 	<AppContent v-else-if="isEmptyGroup && !isRealGroup">
-		<EmptyContent icon="icon-contacts-dark">
+		<EmptyContent>
+			<template #icon>
+				<IconContact
+					:size="20" />
+			</template>
 			{{ t('contacts', 'There are no contacts yet') }}
 			<template #desc>
-				<button class="primary" @click="newContact">
+				<Button type="primary" @click="newContact">
 					{{ t('contacts', 'Create contact') }}
-				</button>
+				</Button>
 			</template>
 		</EmptyContent>
 	</AppContent>
 
 	<AppContent v-else-if="isEmptyGroup && isRealGroup">
-		<EmptyContent icon="icon-contacts-dark">
+		<EmptyContent>
+			<template #icon>
+				<IconContact
+					:size="20" />
+			</template>
 			{{ t('contacts', 'There are no contacts in this group') }}
 			<template #desc>
-				<button v-if="contacts.length === 0" class="primary" @click="addContactsToGroup(selectedGroup)">
+				<Button v-if="contacts.length === 0" type="primary" @click="addContactsToGroup(selectedGroup)">
 					{{ t('contacts', 'Create contacts') }}
-				</button>
-				<button v-else class="primary" @click="addContactsToGroup(selectedGroup)">
+				</Button>
+				<Button v-else type="primary" @click="addContactsToGroup(selectedGroup)">
 					{{ t('contacts', 'Add contacts') }}
-				</button>
+				</Button>
 			</template>
 		</EmptyContent>
 	</AppContent>
@@ -68,10 +76,12 @@
 <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 ContactDetails from '../ContactDetails'
 import ContactsList from '../ContactsList'
+import IconContact from 'vue-material-design-icons/AccountMultiple'
 import RouterMixin from '../../mixins/RouterMixin'
 
 export default {
@@ -79,9 +89,11 @@ export default {
 
 	components: {
 		AppContent,
+		Button,
 		ContactDetails,
 		ContactsList,
 		EmptyContent,
+		IconContact,
 	},
 
 	mixins: [RouterMixin],
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 8767b444..3708cc6f 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -23,7 +23,11 @@
 <template>
 	<AppContentDetails>
 		<!-- nothing selected or contact not found -->
-		<EmptyContent v-if="!contact" icon="icon-contacts-dark">
+		<EmptyContent v-if="!contact">
+			<template #icon>
+				<IconContact
+					:size="20" />
+			</template>
 			{{ t('contacts', 'No contact selected') }}
 			<template #desc>
 				{{ t('contacts', 'Select a contact on the list to begin') }}
@@ -244,6 +248,7 @@ 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 IconContact from 'vue-material-design-icons/AccountMultiple'
 import Modal from '@nextcloud/vue/dist/Components/Modal'
 import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
 
@@ -273,6 +278,7 @@ export default {
 		ContactProperty,
 		DetailsHeader,
 		EmptyContent,
+		IconContact,
 		Modal,
 		Multiselect,
 		PropertyGroups,
diff --git a/src/components/MemberList.vue b/src/components/MemberList.vue
index 5ed7b899..1c1d6fe8 100644
--- a/src/components/MemberList.vue
+++ b/src/components/MemberList.vue
@@ -26,27 +26,41 @@
 			{{ t('contacts', 'Loading members list …') }}
 		</EmptyContent>
 
-		<EmptyContent v-else-if="!circle.isMember" icon="icon-contacts-dark">
+		<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 icon="icon-contacts-dark">
+		<EmptyContent v-else>
+			<template #icon>
+				<IconContact
+					:size="20" />
+			</template>
 			{{ t('contacts', 'There is no member in this circle') }}
 		</EmptyContent>
 	</AppContentList>
 
 	<AppContentList v-else :class="{ 'icon-loading': loading, showdetails: showDetails }">
 		<div class="members-list__new">
-			<button v-if="circle.canManageMembers"
-				class="icon-add"
+			<Button v-if="circle.canManageMembers"
 				@click="onShowPicker(circle.id)">
+				<template #icon>
+					<IconAdd
+						:size="20" />
+				</template>
 				{{ t('contacts', 'Add members') }}
-			</button>
-			<button v-if="isMobile"
-				class="icon-info"
+			</Button>
+			<Button v-if="isMobile"
 				@click="showCircleDetails">
+				<template #icon>
+					<IconInfo
+						:size="20" />
+				</template>
 				{{ t('contacts', 'Show circle details') }}
-			</button>
+			</Button>
 		</div>
 
 		<VirtualList class="members-list"
@@ -71,12 +85,16 @@
 
 <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 isMobile from '@nextcloud/vue/dist/Mixins/isMobile'
 import VirtualList from 'vue-virtual-scroll-list'
 
 import MembersListItem from './MembersList/MembersListItem'
 import EntityPicker from './EntityPicker/EntityPicker'
+import IconContact from 'vue-material-design-icons/AccountMultiple'
+import IconAdd from 'vue-material-design-icons/Plus'
+import IconInfo from 'vue-material-design-icons/InformationOutline'
 import RouterMixin from '../mixins/RouterMixin'
 
 import { getRecommendations, getSuggestions } from '../services/collaborationAutocompletion'
@@ -89,9 +107,13 @@ export default {
 
 	components: {
 		AppContentList,
+		Button,
 		VirtualList,
 		EntityPicker,
 		EmptyContent,
+		IconContact,
+		IconAdd,
+		IconInfo,
 	},
 	mixins: [isMobile, RouterMixin],
 
@@ -302,7 +324,6 @@ export default {
 
 		button {
 			height: 44px;
-			padding-left: 44px;
 			background-position: 14px center;
 			text-align: left;
 			width: 100%;