enhance(frontend): 후원 버튼의 디자인 개선

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: 서브 노트 기능 오류
   - 서브 노트에서 더 보기 버튼을 사용할 수 없음

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>