Move "Remove participant" button to Vue

Signed-off-by: Joas Schilling <coding@schilljs.com>

1 files changed, 15 insertions, 14 deletions

diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue
index 7fcb4308f..eacca0878 100644
--- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue
@@ -31,18 +31,27 @@
 		<span class="contact-selection-bubble__username">
 			{{ displayName }}
 		</span>
-		<button class="icon-close contact-selection-bubble__remove"
-			@click="removeParticipantFromSelection(participant)" />
+		<ButtonVue type="tertiary-no-background"
+			:aria-label="removeLabel"
+			@click="removeParticipantFromSelection(participant)">
+			<template #icon>
+				<Close size="16" />
+			</template>
+		</ButtonVue>
 	</div>
 </template>
 
 <script>
+import ButtonVue from '@nextcloud/vue/dist/Components/Button'
+import Close from 'vue-material-design-icons/Close.vue'
 import AvatarWrapperSmall from '../../../../AvatarWrapper/AvatarWrapperSmall.vue'
 export default {
 	name: 'ContactSelectionBubble',
 
 	components: {
 		AvatarWrapperSmall,
+		ButtonVue,
+		Close,
 	},
 
 	props: {
@@ -58,6 +67,10 @@ export default {
 			// But it causes weird scenarios in formal companies or when people have titles.
 			return this.participant.label
 		},
+
+		removeLabel() {
+			return t('spreed', 'Remove participant {name}', { name: this.displayName })
+		},
 	},
 
 	methods: {
@@ -90,18 +103,6 @@ $bubble-height: 24px;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
-	&__remove {
-		margin: 0 0 0 4px;
-		border: none;
-		border-radius: $bubble-height;
-		height: $bubble-height;
-		width: $bubble-height;
-		background-color: var(--color-primary-active);
-		&:active,
-		&:focus {
-			background-color: transparent !important;
-		}
-	}
 }
 
 </style>