フォローリクエストのUI改善 (#10275)

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

* Update CHANGELOG.md

CHANGELOG.md

@@ -16,6 +16,7 @@ You should also include the user name that made the change.
 - ユーザーごとにRenoteをミュートできるように
 - ノートごとに絵文字リアクションを受け取るか設定できるように
 - enhance(client): DM作成時にメンションも含むように
+- enhance(client): フォロー申請のボタンのデザインを改善
 
 ### Bugfixes
 -

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">
+				<div v-if="full && !followRequestDone" :class="$style.followRequestCommands">
-					<button class="_textButton" @click="acceptFollowRequest()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ i18n.ts.reject }}</button>
+					<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;

packages/frontend/src/pages/follow-requests.vue

@@ -18,12 +18,9 @@
 								<MkA v-user-preview="req.follower.id" class="name" :to="userPage(req.follower)"><MkUserName :user="req.follower"/></MkA>
 								<p class="acct">@{{ acct(req.follower) }}</p>
 							</div>
-							<div v-if="req.follower.description" class="description" :title="req.follower.description">
+							<div class="commands">
-								<Mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$i" :plain="true" :nowrap="true"/>
+								<MkButton class="command" rounded primary @click="accept(req.follower)"><i class="ti ti-check"/> {{ i18n.ts.accept }}</MkButton>
-							</div>
+								<MkButton class="command" rounded danger @click="reject(req.follower)"><i class="ti ti-x"/> {{ i18n.ts.reject }}</MkButton>
-							<div class="actions">
-								<button class="_button" @click="accept(req.follower)"><i class="ti ti-check"></i></button>
-								<button class="_button" @click="reject(req.follower)"><i class="ti ti-x"></i></button>
 							</div>
 						</div>
 					</div>
@@ -37,6 +34,7 @@
 <script lang="ts" setup>
 import { shallowRef, computed } from 'vue';
 import MkPagination from '@/components/MkPagination.vue';
+import MkButton from '@/components/MkButton.vue';
 import { userPage, acct } from '@/filters/user';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
@@ -90,13 +88,11 @@ definePageMetadata(computed(() => ({
 			display: flex;
 			width: calc(100% - 54px);
 			position: relative;
+			flex-wrap: wrap;
+			gap: 8px;
 
 			> .name {
-				width: 45%;
+				flex: 1 1 50%;
-
-				@media (max-width: 500px) {
-					width: 100%;
-				}
 
 				> .name,
 				> .acct {
@@ -136,6 +132,11 @@ definePageMetadata(computed(() => ({
 				}
 			}
 
+			> .commands {
+				display: flex;
+				gap: 8px;
+			}
+
 			> .actions {
 				position: absolute;
 				top: 0;