diff options
-rw-r--r-- | src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue | 29 |
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> |