Migrate leftover icons

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

13 files changed, 172 insertions, 58 deletions

diff --git a/src/components/Actions/ActionCopyNtoFN.vue b/src/components/Actions/ActionCopyNtoFN.vue
index 771880b6..6de3a51c 100644
--- a/src/components/Actions/ActionCopyNtoFN.vue
+++ b/src/components/Actions/ActionCopyNtoFN.vue
@@ -21,18 +21,23 @@
   -->
 
 <template>
-	<ActionButton icon="icon-up" @click="copyNToFN">
+	<ActionButton @click="copyNToFN">
+		<template #icon>
+			<IconCopy :size="20" />
+		</template>
 		{{ t('contacts', 'Copy to full name') }}
 	</ActionButton>
 </template>
 <script>
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import ActionsMixin from '../../mixins/ActionsMixin'
+import IconCopy from 'vue-material-design-icons/ContentCopy'
 
 export default {
 	name: 'ActionCopyNtoFN',
 	components: {
 		ActionButton,
+		IconCopy,
 	},
 	mixins: [ActionsMixin],
 	methods: {
diff --git a/src/components/AppNavigation/RootNavigation.vue b/src/components/AppNavigation/RootNavigation.vue
index 8f92aeaf..91e753ec 100644
--- a/src/components/AppNavigation/RootNavigation.vue
+++ b/src/components/AppNavigation/RootNavigation.vue
@@ -86,7 +86,11 @@
 				default-icon="icon-add"
 				@click.prevent.stop="toggleNewGroupMenu">
 				<template slot="actions">
-					<ActionText :icon="createGroupError ? 'icon-error' : 'icon-contacts-dark'">
+					<ActionText>
+						<template #icon>
+							<IconError v-if="createGroupError" :size="20" />
+							<IconContact v-else-if="!createGroupError" :size="20" />
+						</template>
 						{{ createGroupError ? createGroupError : t('contacts', 'Create a new group') }}
 					</ActionText>
 					<ActionInput
@@ -117,7 +121,10 @@
 					:title="t('contacts', 'Circles')"
 					@click.prevent.stop="toggleNewCircleModal">
 					<template slot="actions">
-						<ActionButton icon="icon-add" @click="toggleNewCircleModal">
+						<ActionButton @click="toggleNewCircleModal">
+							<template #icon>
+								<IconAdd :size="20" />
+							</template>
 							{{ t('contacts', 'Create a new circle') }}
 						</ActionButton>
 					</template>
@@ -183,6 +190,8 @@ import isContactsInteractionEnabled from '../../services/isContactsInteractionEn
 import IconContact from 'vue-material-design-icons/AccountMultiple'
 import IconUser from 'vue-material-design-icons/Account'
 import IconRecentlyContacted from '../Icons/IconRecentlyContacted'
+import IconAdd from 'vue-material-design-icons/Plus'
+import IconError from 'vue-material-design-icons/AlertCircle'
 
 import RouterMixin from '../../mixins/RouterMixin'
 import { showError } from '@nextcloud/dialogs'
@@ -203,6 +212,8 @@ export default {
 		GroupNavigationItem,
 		IconContact,
 		IconUser,
+		IconAdd,
+		IconError,
 		IconRecentlyContacted,
 		NewCircleIntro,
 		SettingsSection,
@@ -429,11 +440,8 @@ $caption-padding: 22px;
 .app-navigation__collapse ::v-deep a {
 	color: var(--color-text-maxcontrast)
 }
-
-// Change icon opacity for a better soothing visual
-.app-navigation-entry ::v-deep {
-	.app-navigation-entry-icon {
-		opacity: .6 !important;
-	}
+::v-deep .settings-button__label {
+	opacity: .7;
+	font-weight: bold;
 }
 </style>
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbook.vue b/src/components/AppNavigation/Settings/SettingsAddressbook.vue
index 1972f0b0..00dd3969 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbook.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbook.vue
@@ -30,13 +30,17 @@
 			</span>
 
 			<!-- sharing button -->
-			<a v-if="!addressbook.readOnly"
+			<Button v-if="!addressbook.readOnly"
 				v-tooltip.top="sharedWithTooltip"
 				:class="{'addressbook__share--shared': hasShares}"
 				:title="sharedWithTooltip"
 				href="#"
-				class="addressbook__share icon-shared"
-				@click="toggleShare" />
+				class="addressbook__share"
+				@click="toggleShare">
+				<template #icon>
+					<IconShare :size="20" />
+				</template>
+			</Button>
 
 			<!-- popovermenu -->
 			<Actions class="addressbook__menu" menu-align="right">
@@ -105,9 +109,11 @@ 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 IconDownload from 'vue-material-design-icons/Download'
 import IconRename from 'vue-material-design-icons/Pencil'
 import IconContact from 'vue-material-design-icons/AccountMultiple'
+import IconShare from 'vue-material-design-icons/ShareVariant'
 import ShareAddressBook from './SettingsAddressbookShare'
 import { showError } from '@nextcloud/dialogs'
 
@@ -122,9 +128,11 @@ export default {
 		ActionInput,
 		ActionLink,
 		Actions,
+		Button,
 		IconDownload,
 		IconRename,
 		IconContact,
+		IconShare,
 		ShareAddressBook,
 	},
 
@@ -328,4 +336,9 @@ export default {
 		width: calc(100% - 44px);
 	}
 }
+.addressbook__share {
+	background-color: transparent;
+	border: none;
+	box-shadow: none;
+}
 </style>
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue b/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
index e6e3cb96..5870fd33 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
@@ -45,20 +45,29 @@
 				:title="t('contacts', 'can edit')">
 				{{ t('contacts', 'can edit') }}
 			</label>
-			<a :class="{'addressbook-sharee__utils--disabled': loading}"
+			<Button :class="{'addressbook-sharee__utils--disabled': loading}"
 				href="#"
 				title="Delete"
-				class="icon-delete"
-				@click="deleteSharee" />
+				@click="deleteSharee">
+				<template #icon>
+					<IconDelete :size="20" />
+				</template>
+			</Button>
 		</span>
 	</li>
 </template>
 
 <script>
 import { showError } from '@nextcloud/dialogs'
+import IconDelete from 'vue-material-design-icons/Delete'
+import Button from '@nextcloud/vue/dist/Components/Button'
 
 export default {
 	name: 'SettingsAddressbookSharee',
+	components: {
+		Button,
+		IconDelete,
+	},
 
 	props: {
 		addressbook: {
@@ -138,4 +147,9 @@ export default {
 	text-overflow: ellipsis;
 	width: 107px;
 }
+::v-deep .button-vue--vue-secondary {
+	background-color: transparent;
+	border: none;
+	box-shadow: none;
+}
 </style>
diff --git a/src/components/AppNavigation/Settings/SettingsImportContacts.vue b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
index b9481b17..5b8efa22 100644
--- a/src/components/AppNavigation/Settings/SettingsImportContacts.vue
+++ b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
@@ -23,10 +23,12 @@
 <template>
 	<div class="import-contact">
 		<template v-if="!isNoAddressbookAvailable">
-			<button class="import-contact__button-main" @click="toggleModal">
-				<span class="icon-upload" />
+			<Button class="import-contact__button-main" @click="toggleModal">
+				<template #icon>
+					<IconUpload :size="20" />
+				</template>
 				{{ t('contacts', 'Import contacts') }}
-			</button>
+			</Button>
 			<Modal v-if="isOpened"
 				ref="modal"
 				class="import-contact__modal"
@@ -56,34 +58,44 @@
 						type="file"
 						class="hidden-visually"
 						@change="processFile">
-					<button
+					<Button
 						:disabled="loading"
-						class="button import-contact__button import-contact__button--local"
+						class="import-contact__button import-contact__button--local"
 						@click="clickImportInput">
-						<span class="import-contact__button-icon icon-upload" />
+						<template #icon>
+							<IconUpload :size="20" />
+						</template>
 						{{ t('contacts', 'Select local file') }}
-					</button>
-					<button
+					</Button>
+					<Button
+						type="primary"
 						:class="{'icon-loading': loading}"
 						:disabled="loading"
-						class="button primary import-contact__button import-contact__button--files"
+						class="import-contact__button import-contact__button--files"
 						@click="openPicker">
-						<span class="import-contact__button-icon icon-folder-white" />
+						<template #icon>
+							<IconFolder :size="20" />
+						</template>
+						<span class="import-contact__button-icon" />
 						{{ t('contacts', 'Import from Files') }}
-					</button>
+					</Button>
 				</section>
 			</Modal>
 		</template>
-		<button v-else
+		<Button v-else
 			id="upload"
 			for="contact-import"
-			class="button import-contact__multiselect-label import-contact__multiselect--no-select icon-error">
+			class="button import-contact__multiselect-label import-contact__multiselect--no-select">
+			<template #icon>
+				<IconError :size="20" />
+			</template>
 			{{ t('contacts', 'Importing is disabled because there are no address books available') }}
-		</button>
+		</Button>
 	</div>
 </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 { encodePath } from '@nextcloud/paths'
@@ -91,6 +103,9 @@ import { getCurrentUser } from '@nextcloud/auth'
 import { generateRemoteUrl } from '@nextcloud/router'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
+import IconUpload from 'vue-material-design-icons/Upload'
+import IconError from 'vue-material-design-icons/AlertCircle'
+import IconFolder from 'vue-material-design-icons/Folder'
 
 const CancelToken = axios.CancelToken
 
@@ -106,8 +121,12 @@ export default {
 	name: 'SettingsImportContacts',
 
 	components: {
+		Button,
 		Modal,
 		Multiselect,
+		IconUpload,
+		IconError,
+		IconFolder,
 	},
 
 	data() {
@@ -312,7 +331,8 @@ export default {
 			margin-right: 5px;
 		}
 		&-main {
-			width: 100%;
+			width: 100% !important;
+			margin-left: 0 !important;
 		}
 		&--cancel:not(:focus):not(:hover) {
 			border-color: transparent;
diff --git a/src/components/CircleDetails.vue b/src/components/CircleDetails.vue
index bd06ed61..6a9a2baa 100644
--- a/src/components/CircleDetails.vue
+++ b/src/components/CircleDetails.vue
@@ -64,7 +64,7 @@
 			</a>
 
 			<!-- Only show the join button if the circle is accepting requests -->
-			<button v-if="!circle.isPendingMember && !circle.isMember && circle.canJoin"
+			<Button v-if="!circle.isPendingMember && !circle.isMember && circle.canJoin"
 				:disabled="loadingJoin"
 				class="primary"
 				@click="joinCircle">
@@ -72,7 +72,7 @@
 					:size="16"
 					decorative />
 				{{ t('contacts', 'Request to join') }}
-			</button>
+			</Button>
 		</section>
 
 		<section v-if="showDescription" class="circle-details-section">
@@ -102,22 +102,25 @@
 
 		<section class="circle-details-section">
 			<!-- leave circle -->
-			<button v-if="circle.canLeave"
+			<Button v-if="circle.canLeave"
 				class="circle-details__action-copy-link"
 				@click="confirmLeaveCircle">
 				<Logout slot="icon"
 					:size="16"
 					decorative />
 				{{ t('contacts', 'Leave circle') }}
-			</button>
+			</Button>
 
 			<!-- delete circle -->
-			<button v-if="circle.canDelete"
-				class="circle-details__action-delete icon-delete-white"
+			<Button v-if="circle.canDelete"
+				class="circle-details__action-delete"
 				href="#"
 				@click.prevent.stop="confirmDeleteCircle">
+				<template #icon>
+					<IconDelete :size="20" />
+				</template>
 				{{ t('contacts', 'Delete circle') }}
-			</button>
+			</Button>
 		</section>
 	</AppContentDetails>
 </template>
@@ -128,10 +131,12 @@ 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 Login from 'vue-material-design-icons/Login'
 import Logout from 'vue-material-design-icons/Logout'
+import IconDelete from 'vue-material-design-icons/Delete'
 
 import { CircleEdit, editCircle } from '../services/circles.ts'
 import CircleActionsMixin from '../mixins/CircleActionsMixin'
@@ -146,12 +151,14 @@ export default {
 	components: {
 		AppContentDetails,
 		Avatar,
+		Button,
 		CircleConfigs,
 		CirclePasswordSettings,
 		ContentHeading,
 		DetailsHeader,
 		Login,
 		Logout,
+		IconDelete,
 		RichContenteditable,
 	},
 
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 0464927f..816d306c 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -119,22 +119,32 @@
 				<!-- menu actions -->
 				<template #actions-menu>
 					<ActionLink :href="contact.url"
-						:download="`${contact.displayName}.vcf`"
-						icon="icon-download">
-						{{ t('contacts', 'Download') }}
+						:download="`${contact.displayName}.vcf`">
+						<template #icon>
+							<IconDownload :size="20" />
+						</template>
+						{{ t('contacts', 'iDownload') }}
 					</ActionLink>
 					<!-- user can clone if there is at least one option available -->
 					<ActionButton v-if="isReadOnly && addressbooksOptions.length > 0"
 						ref="cloneAction"
 						:close-after-click="true"
-						icon="icon-clone"
 						@click="cloneContact">
+						<template #icon>
+							<IconCopy :size="20" />
+						</template>
 						{{ t('contacts', 'Clone contact') }}
 					</ActionButton>
-					<ActionButton icon="icon-qrcode" :close-after-click="true" @click="showQRcode">
+					<ActionButton :close-after-click="true" @click="showQRcode">
+						<template #icon>
+							<IconQr :size="20" />
+						</template>
 						{{ t('contacts', 'Generate QR Code') }}
 					</ActionButton>
-					<ActionButton v-if="!isReadOnly" icon="icon-delete" @click="deleteContact">
+					<ActionButton v-if="!isReadOnly" @click="deleteContact">
+						<template #icon>
+							<IconDelete :size="20" />
+						</template>
 						{{ t('contacts', 'Delete') }}
 					</ActionButton>
 				</template>
@@ -253,6 +263,10 @@ 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'
+import IconDownload from 'vue-material-design-icons/Download'
+import IconDelete from 'vue-material-design-icons/Delete'
+import IconQr from 'vue-material-design-icons/Qrcode'
+import IconCopy from 'vue-material-design-icons/ContentCopy'
 
 import rfcProps from '../models/rfcProps'
 import validate from '../services/validate'
@@ -281,6 +295,10 @@ export default {
 		DetailsHeader,
 		EmptyContent,
 		IconContact,
+		IconDownload,
+		IconDelete,
+		IconQr,
+		IconCopy,
 		Modal,
 		Multiselect,
 		PropertyGroups,
diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue
index a16e70a8..b63c47ea 100644
--- a/src/components/ContactDetails/ContactDetailsAvatar.vue
+++ b/src/components/ContactDetails/ContactDetailsAvatar.vue
@@ -70,14 +70,18 @@
 				<!-- FIXME: the link seems to have a bigger font size than the button caption -->
 				<ActionLink
 					:href="`${contact.url}?photo`"
-					icon="icon-download"
 					target="_blank">
+					<template #icon>
+						<IconDownload :size="20" />
+					</template>
 					{{ t('contacts', 'Download picture') }}
 				</ActionLink>
 				<ActionButton
 					v-if="!isReadOnly"
-					icon="icon-delete"
 					@click="removePhoto">
+					<template #icon>
+						<IconDelete :size="20" />
+					</template>
 					{{ t('contacts', 'Delete picture') }}
 				</ActionButton>
 			</template>
@@ -90,6 +94,8 @@ 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 IconDownload from 'vue-material-design-icons/Download'
+import IconDelete from 'vue-material-design-icons/Delete'
 
 import { showError, showInfo, getFilePickerBuilder, showSuccess } from '@nextcloud/dialogs'
 import { generateUrl, generateRemoteUrl } from '@nextcloud/router'
@@ -109,6 +115,8 @@ export default {
 		ActionLink,
 		Actions,
 		Avatar,
+		IconDownload,
+		IconDelete,
 	},
 
 	props: {
diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue
index e0364fa6..ad3a1d5f 100644
--- a/src/components/ContactsList.vue
+++ b/src/components/ContactsList.vue
@@ -24,7 +24,7 @@
 	<AppContentList>
 		<div class="contacts-list__header">
 			<div class="search-contacts-field">
-				<input type="text" :placeholder="t('contacts', 'Search contacts …')" v-model="query">
+				<input v-model="query" type="text" :placeholder="t('contacts', 'Search contacts …')">
 			</div>
 		</div>
 		<VirtualList ref="scroller"
@@ -71,10 +71,6 @@ export default {
 		}
 	},
 
-	mounted() {
-		this.query = this.searchQuery
-	},
-
 	computed: {
 		selectedContact() {
 			return this.$route.params.selectedContact
@@ -107,6 +103,10 @@ export default {
 		},
 	},
 
+	mounted() {
+		this.query = this.searchQuery
+	},
+
 	methods: {
 		// Select closest contact on deletion
 		selectContact(oldIndex) {
diff --git a/src/components/EntityPicker/EntityPicker.vue b/src/components/EntityPicker/EntityPicker.vue
index 1d2ddd9b..5e6c4f31 100644
--- a/src/components/EntityPicker/EntityPicker.vue
+++ b/src/components/EntityPicker/EntityPicker.vue
@@ -57,7 +57,10 @@
 				</transition-group>
 
 				<!-- No recommendations -->
-				<EmptyContent v-if="dataSet.length === 0" icon="icon-search">
+				<EmptyContent v-if="dataSet.length === 0">
+					<template #icon>
+						<IconSearch :size="20" />
+					</template>
 					{{ t('contacts', 'Search for people to add') }}
 				</EmptyContent>
 
@@ -70,7 +73,10 @@
 					:estimate-size="44"
 					:extra-props="{ selection: selectionSet, onClick }" />
 
-				<EmptyContent v-else-if="searchQuery" icon="icon-search">
+				<EmptyContent v-else-if="searchQuery">
+					<template #icon>
+						<IconSearch :size="20" />
+					</template>
 					{{ t('contacts', 'No results') }}
 				</EmptyContent>
 
@@ -97,6 +103,7 @@
 import debounce from 'debounce'
 import VirtualList from 'vue-virtual-scroll-list'
 import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import IconSearch from 'vue-material-design-icons/Magnify'
 import Modal from '@nextcloud/vue/dist/Components/Modal'
 
 import EntityBubble from './EntityBubble'
@@ -108,6 +115,7 @@ export default {
 	components: {
 		EmptyContent,
 		EntityBubble,
+		IconSearch,
 		Modal,
 		VirtualList,
 	},
diff --git a/src/components/MembersList/MembersListItem.vue b/src/components/MembersList/MembersListItem.vue
index 329f2d84..cb2145c7 100644
--- a/src/components/MembersList/MembersListItem.vue
+++ b/src/components/MembersList/MembersListItem.vue
@@ -38,15 +38,19 @@
 		<template v-if="!loading && isPendingApproval && circle.canManageMembers">
 			<Actions>
 				<ActionButton
-					icon="icon-checkmark"
 					@click="acceptMember">
+					<template #icon>
+						<IconCheck :size="20" />
+					</template>
 					{{ t('contacts', 'Accept membership request') }}
 				</ActionButton>
 			</Actions>
 			<Actions>
 				<ActionButton
-					icon="icon-close"
 					@click="deleteMember">
+					<template #icon>
+						<IconClose :size="20" />
+					</template>
 					{{ t('contacts', 'Reject membership request') }}
 				</ActionButton>
 			</Actions>
@@ -85,7 +89,10 @@
 						:size="16"
 						decorative />
 				</ActionButton>
-				<ActionButton v-else-if="canDelete" icon="icon-delete" @click="deleteMember">
+				<ActionButton v-else-if="canDelete" @click="deleteMember">
+					<template #icon>
+						<IconDelete :size="20" />
+					</template>
 					{{ t('contacts', 'Remove member') }}
 				</ActionButton>
 			</template>
@@ -101,6 +108,9 @@ 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 IconDelete from 'vue-material-design-icons/Delete'
+import IconCheck from 'vue-material-design-icons/Check'
+import IconClose from 'vue-material-design-icons/Close'
 
 import ExitToApp from 'vue-material-design-icons/ExitToApp'
 import ShieldCheck from 'vue-material-design-icons/ShieldCheck'
@@ -117,6 +127,9 @@ export default {
 		ActionButton,
 		ActionSeparator,
 		ActionText,
+		IconDelete,
+		IconCheck,
+		IconClose,
 		ExitToApp,
 		ListItemIcon,
 		ShieldCheck,
diff --git a/src/components/Properties/PropertyActions.vue b/src/components/Properties/PropertyActions.vue
index 2d1388a3..9673e508 100644
--- a/src/components/Properties/PropertyActions.vue
+++ b/src/components/Properties/PropertyActions.vue
@@ -28,8 +28,8 @@
 			</template>
 			{{ t('contacts', 'Delete') }}
 		</ActionButton>
-		<component v-for="action in actions"
-			:is="action"
+		<component :is="action"
+			v-for="action in actions"
 			:key="action.name"
 			:component="propertyComponent" />
 	</Actions>
diff --git a/src/components/Properties/PropertyTitle.vue b/src/components/Properties/PropertyTitle.vue
index d66df242..d4979320 100644
--- a/src/components/Properties/PropertyTitle.vue
+++ b/src/components/Properties/PropertyTitle.vue
@@ -51,7 +51,7 @@ export default {
 		hasActions: {
 			type: Boolean,
 			default: false,
-		}
+		},
 	},
 }
 </script>