From 9d1a874ddc91cff16adf8ef68113bde5d0753a1c Mon Sep 17 00:00:00 2001
From: Ebise Lutica <7106976+EbiseLutica@users.noreply.github.com>
Date: Thu, 9 Mar 2023 12:17:34 +0900
Subject: フォローリクエストのUI改善 (#10275)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* フォローリクエストのUI改善

* Update CHANGELOG.md
---
 packages/frontend/src/components/MkNotification.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
index 38bf416ea8..b60967de02 100644
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@@ -69,8 +69,9 @@
 			<span v-else-if="notification.type === 'followRequestAccepted'" :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.followRequestAccepted }}</span>
 			<template v-else-if="notification.type === 'receiveFollowRequest'">
 				<span :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.receiveFollowRequest }}</span>
-				<div v-if="full && !followRequestDone">
-					<button class="_textButton" @click="acceptFollowRequest()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ i18n.ts.reject }}</button>
+				<div v-if="full && !followRequestDone" :class="$style.followRequestCommands">
+					<MkButton :class="$style.followRequestCommandButton" rounded primary @click="acceptFollowRequest()"><i class="ti ti-check"/> {{ i18n.ts.accept }}</MkButton>
+					<MkButton :class="$style.followRequestCommandButton" rounded danger @click="rejectFollowRequest()"><i class="ti ti-x"/> {{ i18n.ts.reject }}</MkButton>
 				</div>
 			</template>
 			<span v-else-if="notification.type === 'app'" :class="$style.text">
@@ -87,6 +88,7 @@ import * as misskey from 'misskey-js';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
 import XReactionTooltip from '@/components/MkReactionTooltip.vue';
+import MkButton from '@/components/MkButton.vue';
 import { getNoteSummary } from '@/scripts/get-note-summary';
 import { notePage } from '@/filters/note';
 import { userPage } from '@/filters/user';
@@ -294,6 +296,16 @@ useTooltip(reactionRef, (showing) => {
 	margin-left: 4px;
 }
 
+.followRequestCommands {
+	display: flex;
+	gap: 8px;
+	max-width: 300px;
+	margin-top: 8px;
+}
+.followRequestCommandButton {
+	flex: 1;
+}
+
 @container (max-width: 600px) {
 	.root {
 		padding: 16px;
-- 
cgit v1.2.3-freya