🩹 (#2345): use nextcloud button instead of html button

Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>

src/components/Menu/ActionEntry.scss

@@ -6,7 +6,7 @@
 		border-radius: 100%;
 		position: absolute;
 		background: var(--color-primary-element);
-		bottom: 3px;
+		bottom: 0;
 		height: 6px;
 		width: 6px;
 		content: '';
@@ -19,11 +19,12 @@
 		height: 44px;
 		margin: 0;
 		border: 0;
-		opacity: 0.5;
+		// opacity: 0.5;
 		position: relative;
 		color: var(--color-main-text);
 		background-color: transparent;
 		vertical-align: top;
+		box-shadow: none;
 		padding: 0;
 
 		p {
@@ -42,12 +43,18 @@
 		&:focus,
 		&:active {
 			background-color: var(--color-background-dark);
+			&:not(:disabled) {
+				box-shadow: var(--color-primary);
+			}
 		}
 
 		&:hover,
 		&:focus {
 			opacity: 1;
 		}
+		&:focus-visible {
+			box-shadow: var(--color-primary);
+		}
 
 		&.is-active {
 			@extend %text__is-active-item-btn;

src/components/Menu/EmojiPickerAction.vue

@@ -23,24 +23,28 @@
 	<EmojiPicker class="entry-action entry-action__emoji"
 		:data-text-action-entry="actionEntry.key"
 		@selectData="addEmoji">
-		<button v-tooltip="actionEntry.label"
+		<Button v-tooltip="actionEntry.label"
 			class="entry-action__button"
 			:title="actionEntry.label"
 			:aria-label="actionEntry.label"
 			:aria-haspopup="true">
-			<component :is="icon" />
-		</button>
+			<template #icon>
+				<component :is="icon" />
+			</template>
+		</Button>
 	</EmojiPicker>
 </template>
 
 <script>
 import { BaseActionEntry } from './BaseActionEntry.js'
 import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker'
+import Button from '@nextcloud/vue/dist/Components/Button'
 
 export default {
 	name: 'EmojiPickerAction',
 	components: {
 		EmojiPicker,
+		Button,
 	},
 	extends: BaseActionEntry,
 	methods: {