fix(comments): switch to outlined icons where possible

Signed-off-by: Edward Ly <[email protected]>

Author: edward-ly

apps/comments/src/components/Comment.vue

@@ -26,15 +26,15 @@
 						<NcActionButton close-after-click
 							@click="onEdit">
 							<template #icon>
-								<IconEdit :size="20" />
+								<IconPencilOutline :size="20" />
 							</template>
 							{{ t('comments', 'Edit comment') }}
 						</NcActionButton>
 						<NcActionSeparator />
 						<NcActionButton close-after-click
 							@click="onDeleteWithUndo">
 							<template #icon>
-								<IconDelete :size="20" />
+								<IconTrashCanOutline :size="20" />
 							</template>
 							{{ t('comments', 'Delete comment') }}
 						</NcActionButton>
@@ -115,8 +115,8 @@ import NcUserBubble from '@nextcloud/vue/components/NcUserBubble'
 
 import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import IconClose from 'vue-material-design-icons/Close.vue'
-import IconDelete from 'vue-material-design-icons/Delete.vue'
-import IconEdit from 'vue-material-design-icons/Pencil.vue'
+import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 
 import CommentMixin from '../mixins/CommentMixin.js'
 import { mapStores } from 'pinia'
@@ -132,8 +132,8 @@ export default {
 	components: {
 		IconArrowRight,
 		IconClose,
-		IconDelete,
-		IconEdit,
+		IconTrashCanOutline,
+		IconPencilOutline,
 		NcActionButton,
 		NcActions,
 		NcActionSeparator,

apps/comments/src/views/Comments.vue

@@ -22,7 +22,7 @@
 				class="comments__empty"
 				:name="t('comments', 'No comments yet, start the conversation!')">
 				<template #icon>
-					<MessageReplyTextIcon />
+					<IconMessageReplyTextOutline />
 				</template>
 			</NcEmptyContent>
 			<ul v-else>
@@ -51,12 +51,12 @@
 			<template v-else-if="error">
 				<NcEmptyContent class="comments__error" :name="error">
 					<template #icon>
-						<AlertCircleOutlineIcon />
+						<IconAlertCircleOutline />
 					</template>
 				</NcEmptyContent>
 				<NcButton class="comments__retry" @click="getComments">
 					<template #icon>
-						<RefreshIcon />
+						<IconRefresh />
 					</template>
 					{{ t('comments', 'Retry') }}
 				</NcButton>
@@ -72,9 +72,9 @@ import { vElementVisibility as elementVisibility } from '@vueuse/components'
 
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcButton from '@nextcloud/vue/components/NcButton'
-import RefreshIcon from 'vue-material-design-icons/Refresh.vue'
-import MessageReplyTextIcon from 'vue-material-design-icons/MessageReplyText.vue'
-import AlertCircleOutlineIcon from 'vue-material-design-icons/AlertCircleOutline.vue'
+import IconRefresh from 'vue-material-design-icons/Refresh.vue'
+import IconMessageReplyTextOutline from 'vue-material-design-icons/MessageReplyTextOutline.vue'
+import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
 
 import Comment from '../components/Comment.vue'
 import CommentView from '../mixins/CommentView'
@@ -89,9 +89,9 @@ export default {
 		Comment,
 		NcEmptyContent,
 		NcButton,
-		RefreshIcon,
-		MessageReplyTextIcon,
-		AlertCircleOutlineIcon,
+		IconRefresh,
+		IconMessageReplyTextOutline,
+		IconAlertCircleOutline,
 	},
 
 	directives: {