Merge pull request #45867 from nextcloud/fix/comments-icons

fix(comments): Use proper icon components instead of icon classes to fix dark mode

2 files changed, 27 insertions, 12 deletions

diff --git a/apps/comments/src/components/Comment.vue b/apps/comments/src/components/Comment.vue
index c883f9b848b..8c6287d9ecb 100644
--- a/apps/comments/src/components/Comment.vue
+++ b/apps/comments/src/components/Comment.vue
@@ -23,22 +23,27 @@
 					show if we have a message id and current user is author -->
 				<NcActions v-if="isOwnComment && id && !loading" class="comment__actions">
 					<template v-if="!editing">
-						<NcActionButton :close-after-click="true"
-							icon="icon-rename"
+						<NcActionButton close-after-click
 							@click="onEdit">
+							<template #icon>
+								<IconEdit :size="20" />
+							</template>
 							{{ t('comments', 'Edit comment') }}
 						</NcActionButton>
 						<NcActionSeparator />
-						<NcActionButton :close-after-click="true"
-							icon="icon-delete"
+						<NcActionButton close-after-click
 							@click="onDeleteWithUndo">
+							<template #icon>
+								<IconDelete :size="20" />
+							</template>
 							{{ t('comments', 'Delete comment') }}
 						</NcActionButton>
 					</template>
 
-					<NcActionButton v-else
-						icon="icon-close"
-						@click="onEditCancel">
+					<NcActionButton v-else @click="onEditCancel">
+						<template #icon>
+							<IconClose :size="20" />
+						</template>
 						{{ t('comments', 'Cancel edit') }}
 					</NcActionButton>
 				</NcActions>
@@ -73,8 +78,8 @@
 							:disabled="isEmptyMessage"
 							@click="onSubmit">
 							<template #icon>
-								<span v-if="loading" class="icon-loading-small" />
-								<ArrowRight v-else :size="20" />
+								<NcLoadingIcon v-if="loading" />
+								<IconArrowRight v-else :size="20" />
 							</template>
 						</NcButton>
 					</div>
@@ -107,8 +112,13 @@ import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import RichEditorMixin from '@nextcloud/vue/dist/Mixins/richEditor.js'
-import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+
+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 CommentMixin from '../mixins/CommentMixin.js'
 
@@ -119,13 +129,17 @@ export default {
 	name: 'Comment',
 
 	components: {
-		ArrowRight,
+		IconArrowRight,
+		IconClose,
+		IconDelete,
+		IconEdit,
 		NcActionButton,
 		NcActions,
 		NcActionSeparator,
 		NcAvatar,
 		NcButton,
 		NcDateTime,
+		NcLoadingIcon,
 		NcRichContenteditable,
 	},
 	mixins: [RichEditorMixin, CommentMixin],
diff --git a/apps/comments/src/views/ActivityCommentEntry.vue b/apps/comments/src/views/ActivityCommentEntry.vue
index 4f7dde2c7d8..bbfe530b2e3 100644
--- a/apps/comments/src/views/ActivityCommentEntry.vue
+++ b/apps/comments/src/views/ActivityCommentEntry.vue
@@ -17,6 +17,7 @@
 </template>
 
 <script lang="ts">
+import type { PropType } from 'vue'
 import { translate as t } from '@nextcloud/l10n'
 
 import Comment from '../components/Comment.vue'
@@ -36,7 +37,7 @@ export default {
 			required: true,
 		},
 		reloadCallback: {
-			type: Function,
+			type: Function as PropType<() => void>,
 			required: true,
 		},
 	},