enhance(frontend): リアクションボタンのデザイン改善

CHANGELOG_CHERRYPICK.md

@@ -30,6 +30,7 @@
 - 계정 초기 설정 마법사에 MFM 및 움직이는 이미지 설정 추가
 - 계정 초기 설정 마법사를 완료하면 페이지를 새로 고치도록 (일부 옵션이 페이지를 새로 고쳐야만 반영되므로)
 - 계정 생성 팝업에 뒤로 가기 버튼 추가
+- 리액션 버튼 디자인 개선
 - Fix: 위젯 편집 시 헤더 이외의 영역을 눌렀을 때 위젯 설정이 뜨는 문제
 - Fix: 위젯 편집 종료 버튼이 여러 개 있는 문제
 - Fix: 일부 옵션 변경 시 페이지를 새로 고치도록

packages/frontend/src/components/MkReactionsViewer.reaction.vue

@@ -110,7 +110,7 @@ useTooltip(buttonEl, async (showing) => {
 <style lang="scss" module>
 .root {
 	display: inline-block;
-	height: 32px;
+	height: 30px;
 	margin: 2px;
 	padding: 0 12px;
 	border-radius: 999px;
@@ -135,7 +135,8 @@ useTooltip(buttonEl, async (showing) => {
 
 		> .count {
 			font-size: 0.7em;
-			line-height: 42px;
+			line-height: 32px;
+			margin: 0 0 0 8px;
 		}
 	}
 
@@ -158,7 +159,7 @@ useTooltip(buttonEl, async (showing) => {
 
 .count {
 	font-size: 0.9em;
-	line-height: 32px;
-	margin: 0 0 0 4px;
+	line-height: 22px;
+	margin: 0 0 0 5px;
 }
 </style>

packages/frontend/src/components/MkReactionsViewer.vue

@@ -80,7 +80,7 @@ watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumbe
 }
 
 .root {
-	margin: 4px -2px 0 -2px;
+	margin: 10px -2px 0 -2px;
 
 	&:empty {
 		display: none;

packages/frontend/src/components/global/MkEmoji.vue

@@ -1,5 +1,5 @@
 <template>
-<img v-if="!useOsNativeEmojis" :class="$style.root" :src="url" :alt="props.emoji" decoding="async" @pointerenter="computeTitle"/>
+<img v-if="!useOsNativeEmojis" :class="[$style.root, { [$style.large]: defaultStore.state.largeNoteReactions }]" :src="url" :alt="props.emoji" decoding="async" @pointerenter="computeTitle"/>
 <span v-else-if="useOsNativeEmojis" :alt="props.emoji" @pointerenter="computeTitle">{{ props.emoji }}</span>
 <span v-else>{{ emoji }}</span>
 </template>
@@ -30,7 +30,12 @@ function computeTitle(event: PointerEvent): void {
 
 <style lang="scss" module>
 .root {
-	height: 1.25em;
-	vertical-align: -0.25em;
+	height: 1.1em;
+	vertical-align: -0.235em;
+
+	&.large {
+		height: 1.3em;
+		vertical-align: -0.4em;
+	}
 }
 </style>