From b811de53b6c6841ec0816f58ea3c759be6f94a1e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 19 May 2022 23:23:12 +0900
Subject: [PATCH] fix(client): make emoji stand out more on reaction button

Fix #8520
Close #8521

Co-Authored-By: Johann150 <20990607+Johann150@users.noreply.github.com>
---
 .../src/components/reactions-viewer.reaction.vue     | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/reactions-viewer.reaction.vue b/packages/client/src/components/reactions-viewer.reaction.vue
index 7dc079fde..91a90a699 100644
--- a/packages/client/src/components/reactions-viewer.reaction.vue
+++ b/packages/client/src/components/reactions-viewer.reaction.vue
@@ -7,8 +7,8 @@
 	:class="{ reacted: note.myReaction == reaction, canToggle }"
 	@click="toggleReaction()"
 >
-	<XReactionIcon :reaction="reaction" :custom-emojis="note.emojis"/>
-	<span>{{ count }}</span>
+	<XReactionIcon class="icon" :reaction="reaction" :custom-emojis="note.emojis"/>
+	<span class="count">{{ count }}</span>
 </button>
 </template>
 
@@ -141,12 +141,16 @@ export default defineComponent({
 			background: var(--accent);
 		}
 
-		> span {
+		> .count {
 			color: var(--fgOnAccent);
 		}
+
+		> .icon {
+			filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
+		}
 	}
 
-	> span {
+	> .count {
 		font-size: 0.9em;
 		line-height: 32px;
 		margin: 0 0 0 4px;