From 6345231321b461fe98c0a39464432c06702f430d Mon Sep 17 00:00:00 2001
From: Vinicius Reis <vinicius.reis@nextcloud.com>
Date: Tue, 31 May 2022 09:38:56 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9=20(#2345):=20use=20nextcloud=20but?=
 =?UTF-8?q?ton=20instead=20of=20html=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
---
 src/components/Menu/ActionEntry.scss      | 11 +++++++++--
 src/components/Menu/EmojiPickerAction.vue | 10 +++++++---
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/Menu/ActionEntry.scss b/src/components/Menu/ActionEntry.scss
index 1f49654afc0..643d2c45201 100644
--- a/src/components/Menu/ActionEntry.scss
+++ b/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;
diff --git a/src/components/Menu/EmojiPickerAction.vue b/src/components/Menu/EmojiPickerAction.vue
index cb23fabdea2..2c852a86b7b 100644
--- a/src/components/Menu/EmojiPickerAction.vue
+++ b/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: {