feat: reconfigured NcActions to use MDI's

Signed-off-by: Eduardo Morales <emoral435@gmail.com>

2 files changed, 66 insertions, 24 deletions

diff --git a/apps/files_sharing/src/components/SharingEntryInternal.vue b/apps/files_sharing/src/components/SharingEntryInternal.vue
index bc5bdd32e57..2e378f261ef 100644
--- a/apps/files_sharing/src/components/SharingEntryInternal.vue
+++ b/apps/files_sharing/src/components/SharingEntryInternal.vue
@@ -10,8 +10,14 @@
 
 			<NcActionButton :title="copyLinkTooltip"
 				:aria-label="copyLinkTooltip"
-				:icon="copied && copySuccess ? 'icon-checkmark-color' : 'icon-clippy'"
-				@click="copyLink" />
+				@click="copyLink">
+				<template #icon>
+					<CheckIcon v-if="copied && copySuccess"
+						:size="20"
+						class="icon-checkmark-color" />
+					<ClipboardIcon v-else :size="20" />
+				</template>
+			</NcActionButton>
 		</SharingEntrySimple>
 	</ul>
 </template>
@@ -20,6 +26,10 @@
 import { generateUrl } from '@nextcloud/router'
 import { showSuccess } from '@nextcloud/dialogs'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+
+import CheckIcon from 'vue-material-design-icons/CheckBold.vue'
+import ClipboardIcon from 'vue-material-design-icons/ClipboardFlow.vue'
+
 import SharingEntrySimple from './SharingEntrySimple.vue'
 
 export default {
@@ -28,6 +38,8 @@ export default {
 	components: {
 		NcActionButton,
 		SharingEntrySimple,
+		CheckIcon,
+		ClipboardIcon,
 	},
 
 	props: {
@@ -114,6 +126,7 @@ export default {
 	}
 	.icon-checkmark-color {
 		opacity: 1;
+		color: var(--color-success);
 	}
 }
 </style>
diff --git a/apps/files_sharing/src/components/SharingEntryLink.vue b/apps/files_sharing/src/components/SharingEntryLink.vue
index 631f79158e2..bf9e0203f9e 100644
--- a/apps/files_sharing/src/components/SharingEntryLink.vue
+++ b/apps/files_sharing/src/components/SharingEntryLink.vue
@@ -20,7 +20,7 @@
   -
   -->
 
-  <template>
+<template>
 	<li :class="{ 'sharing-entry--share': share }"
 		class="sharing-entry sharing-entry__link">
 		<NcAvatar :is-no-user="true"
@@ -45,8 +45,14 @@
 			<NcActions v-if="share && !isEmailShareType && share.token" ref="copyButton" class="sharing-entry__copy">
 				<NcActionButton	:title="copyLinkTooltip"
 					:aria-label="copyLinkTooltip"
-					:icon="copied && copySuccess ? 'icon-checkmark-color' : 'icon-clippy'"
-					@click.prevent="copyLink" />
+					@click.prevent="copyLink">
+					<template #icon>
+						<CheckIcon v-if="copied && copySuccess"
+							:size="20"
+							class="icon-checkmark-color" />
+						<ClipboardIcon v-else :size="20" />
+					</template>
+				</NcActionButton>
 			</NcActions>
 		</div>
 
@@ -59,8 +65,10 @@
 			@close="onCancel">
 			<!-- pending data menu -->
 			<NcActionText v-if="errors.pending"
-				icon="icon-error"
-				:class="{ error: errors.pending }">
+				class="error">
+				<template #icon>
+					<ErrorIcon :size="20" />
+				</template>
 				{{ errors.pending }}
 			</NcActionText>
 			<NcActionText v-else icon="icon-info">
@@ -68,8 +76,8 @@
 			</NcActionText>
 
 			<!-- password -->
-			<NcActionText v-if="pendingEnforcedPassword"
-				icon="icon-password">
+			<NcActionText v-if="pendingEnforcedPassword">
+				<LockIcon :size="20" />
 				{{ t('files_sharing', 'Password protection (enforced)') }}
 			</NcActionText>
 			<NcActionCheckbox v-else-if="pendingPassword"
@@ -111,12 +119,16 @@
 				{{ t('files_sharing', 'Enter a date') }}
 			</NcActionInput>
 
-			<NcActionButton icon="icon-checkmark"
-				@click.prevent.stop="onNewLinkShare">
+			<NcActionButton @click.prevent.stop="onNewLinkShare">
+				<template #icon>
+					<CheckIcon :size="20" />
+				</template>
 				{{ t('files_sharing', 'Create share') }}
 			</NcActionButton>
-			<NcActionButton icon="icon-close"
-				@click.prevent.stop="onCancel">
+			<NcActionButton @click.prevent.stop="onCancel">
+				<template #icon>
+					<CloseIcon :size="20" />
+				</template>
 				{{ t('files_sharing', 'Cancel') }}
 			</NcActionButton>
 		</NcActions>
@@ -134,7 +146,7 @@
 						:close-after-click="true"
 						@click.prevent="openSharingDetails">
 						<template #icon>
-							<Tune />
+							<Tune :size="20" />
 						</template>
 						{{ t('files_sharing', 'Customize link') }}
 					</NcActionButton>
@@ -143,9 +155,9 @@
 				<NcActionButton :close-after-click="true"
 					@click.prevent="showQRCode = true">
 					<template #icon>
-						<IconQr />
+						<IconQr :size="20" />
 					</template>
-					{{ t('files_sharing', 'Generate QR Code') }}
+					{{ t('files_sharing', 'Generate QR code') }}
 				</NcActionButton>
 
 				<NcActionSeparator />
@@ -169,15 +181,19 @@
 
 				<NcActionButton v-if="!isEmailShareType && canReshare"
 					class="new-share-link"
-					icon="icon-add"
 					@click.prevent.stop="onNewLinkShare">
+					<template #icon>
+						<PlusIcon :size="20" />
+					</template>
 					{{ t('files_sharing', 'Add another link') }}
 				</NcActionButton>
 
 				<NcActionButton v-if="share.canDelete"
-					icon="icon-close"
 					:disabled="saving"
 					@click.prevent="onDelete">
+					<template #icon>
+						<CloseIcon :size="20" />
+					</template>
 					{{ t('files_sharing', 'Unshare') }}
 				</NcActionButton>
 			</template>
@@ -195,16 +211,16 @@
 		<div v-else class="icon-loading-small sharing-entry__loading" />
 
 		<!-- Modal to open whenever we have a QR code -->
-		<NcDialog size="normal"
+		<NcDialog v-if="showQRCode"
+			size="normal"
 			:open.sync="showQRCode"
 			:name="title"
 			:close-on-click-outside="true"
 			@close="showQRCode = false">
-			<div class="qrCode-dialog">
-				<Vue--dialog tag="img"
+			<div class="qr-code-dialog">
+				<VueQrcode tag="img"
 					:value="shareLink"
-					class="qrCode-dialog__img">
-				</Vue--dialog>
+					class="qr-code-dialog__img" />
 			</div>
 		</NcDialog>
 	</li>
@@ -228,6 +244,12 @@ import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 
 import Tune from 'vue-material-design-icons/Tune.vue'
 import IconQr from 'vue-material-design-icons/Qrcode.vue'
+import ErrorIcon from 'vue-material-design-icons/Exclamation.vue'
+import LockIcon from 'vue-material-design-icons/Lock.vue'
+import CheckIcon from 'vue-material-design-icons/CheckBold.vue'
+import ClipboardIcon from 'vue-material-design-icons/ClipboardFlow.vue'
+import CloseIcon from 'vue-material-design-icons/Close.vue'
+import PlusIcon from 'vue-material-design-icons/Plus.vue'
 
 import SharingEntryQuickShareSelect from './SharingEntryQuickShareSelect.vue'
 
@@ -253,6 +275,12 @@ export default {
 		VueQrcode,
 		Tune,
 		IconQr,
+		ErrorIcon,
+		LockIcon,
+		CheckIcon,
+		ClipboardIcon,
+		CloseIcon,
+		PlusIcon,
 		SharingEntryQuickShareSelect,
 	},
 
@@ -838,11 +866,12 @@ export default {
 
 	.icon-checkmark-color {
 		opacity: 1;
+		color: var(--color-success);
 	}
 }
 
 // styling for the qr-code container
-.qrCode-dialog {
+.qr-code-dialog {
 	display: flex;
 	width: 100%;
 	justify-content: center;