From e6e3b0c9f4fae245bd5e3a8c210670ba22ead670 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Tue, 17 Oct 2023 16:24:32 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=ED=9B=84=EC=9B=90=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=EC=9D=98=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                       |  3 +
 packages/frontend/src/pages/about-misskey.vue | 93 ++++++++++++++++---
 2 files changed, 81 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index c2f8b21e24..e6382ac914 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -55,6 +55,9 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
 - Enhance: cli, bios 페이지 개선
 - Enhance: 서버와 연결이 끊겼을 때 stream indicator가 즉시 표시되지 않도록 (MisskeyIO/misskey#172)
 - Enhance: 스피너 디자인 변경
+- Enhance: 후원 버튼의 디자인 개선
+  - 버튼을 하나로 병합함
+  - 버튼을 누르면 팝업 메뉴로 표시됨
 - Fix: (Friendly) 길게 누르면 표시되는 계정 관리 다이얼로그의 UI 관련 오류 수정
 - Fix: 서브 노트 기능 오류
   - 서브 노트에서 더 보기 버튼을 사용할 수 없음
diff --git a/packages/frontend/src/pages/about-misskey.vue b/packages/frontend/src/pages/about-misskey.vue
index 4315598d0a..942769896a 100644
--- a/packages/frontend/src/pages/about-misskey.vue
+++ b/packages/frontend/src/pages/about-misskey.vue
@@ -58,21 +58,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 							{{ i18n.ts._aboutMisskey._cherrypick.community }}
 							<template #suffix>Discord</template>
 						</FormLink>
-						<FormLink to="https://www.patreon.com/noridev" external>
-							<template #icon><i class="ti ti-pig-money"></i></template>
-							{{ i18n.ts._aboutMisskey._cherrypick.donate }}
-							<template #suffix>Patreon</template>
-						</FormLink>
-						<FormLink to="https://www.paypal.me/noridev" external>
-							<template #icon><i class="ti ti-pig-money"></i></template>
-							{{ i18n.ts._aboutMisskey._cherrypick.donate }}
-							<template #suffix>PayPal</template>
-						</FormLink>
-						<FormLink to="https://toss.me/noridev" external>
-							<template #icon><i class="ti ti-pig-money"></i></template>
-							{{ i18n.ts._aboutMisskey._cherrypick.donate }}
-							<template #suffix>Toss</template>
-						</FormLink>
+						<button :class="$style.main" class="_button" @click="donateCherryPick">
+							<span :class="$style.icon"><i class="ti ti-pig-money"></i></span>
+							<span :class="$style.text">{{ i18n.ts._aboutMisskey._cherrypick.donate }}</span>
+							<span :class="$style.suffix">
+								<i class="ti ti-external-link"></i>
+							</span>
+						</button>
 					</div>
 				</FormSection>
 				<FormSection>
@@ -446,6 +438,28 @@ function getTreasure() {
 	claimAchievement('foundTreasure');
 }
 
+function donateCherryPick(ev: MouseEvent) {
+	os.popupMenu([{
+		text: 'Patreon',
+		icon: 'ti ti-pig-money',
+		action: () => {
+			window.open('https://www.patreon.com/noridev', '_blank');
+		},
+	}, {
+		text: 'Paypal',
+		icon: 'ti ti-pig-money',
+		action: () => {
+			window.open('https://www.paypal.me/noridev', '_blank');
+		},
+	}, {
+		text: 'Toss (Korea)',
+		icon: 'ti ti-pig-money',
+		action: () => {
+			window.open('https://toss.me/noridev', '_blank');
+		},
+	}], ev.currentTarget ?? ev.target);
+}
+
 onMounted(() => {
 	if (window.location.host === 'localhost:3000') isKokonect = true;
 	else if (window.location.host === '127.0.0.1:3000') isKokonect = true;
@@ -631,4 +645,53 @@ definePageMetadata({
 .patronName {
 	margin-left: 12px;
 }
+
+.main {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px 14px;
+  background: var(--buttonBg);
+  border-radius: 6px;
+  font-size: 0.9em;
+
+  &:hover {
+    text-decoration: none;
+    background: var(--buttonHoverBg);
+  }
+
+  &.active {
+    color: var(--accent);
+    background: var(--buttonHoverBg);
+  }
+}
+
+.icon {
+  margin-right: 0.75em;
+  flex-shrink: 0;
+  text-align: center;
+  color: var(--fgTransparentWeak);
+
+  &:empty {
+    display: none;
+
+    & + .text {
+      padding-left: 4px;
+    }
+  }
+}
+
+.text {
+  flex-shrink: 1;
+  white-space: normal;
+  padding-right: 12px;
+  text-align: center;
+}
+
+.suffix {
+  margin-left: auto;
+  opacity: 0.7;
+  white-space: nowrap;
+}
 </style>