From 7eb887c3b66b40c24bb1a32bb0998cfa3aad6034 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Wed, 8 Feb 2023 18:29:50 -0800
Subject: [PATCH] help buttons

---
 packages/client/src/ui/_common_/navbar.vue | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index edbdd698ce..fdedad42bb 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -44,12 +44,12 @@
 			<button v-tooltip.noDelay.right="i18n.ts.note" class="item _button post" data-cy-open-post-form @click="os.post">
 				<i class="icon ph-pencil-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.note }}</span>
 			</button>
-			<div>
-				<button v-tooltip.noDelay.right="i18n.ts.info" class="item _button post" data-cy-open-post-form @click="openInfoMenu">
-					<i class="icon ph-info-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.note }}</span>
+			<div class="info">
+				<button v-tooltip.noDelay.right="i18n.ts.info" class="item _button help" style="margin-right: 10px" data-cy-open-post-form @click="openInfoMenu">
+					<i class="icon ph-info-bold ph-xl ph-fw ph-lg"></i>
 				</button>
-				<button v-tooltip.noDelay.right="i18n.ts.help" class="item _button post" data-cy-open-post-form @click="openHelpMenu">
-					<i class="icon ph-question-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.note }}</span>
+				<button v-tooltip.noDelay.right="i18n.ts.help" class="item _button help" style="margin-left: 10px" data-cy-open-post-form @click="openHelpMenu">
+					<i class="icon ph-question-bold ph-xl ph-fw ph-lg"></i>
 				</button>
 			</div>
 			<!-- <button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
@@ -182,7 +182,9 @@ function openInfoMenu(ev: MouseEvent) {
 			text: 'API Console',
 			icon: 'ph-terminal-window-bold ph-lg',
 		},
-	]);
+	], ev.currentTarget ?? ev.target, {
+		align: 'left',
+	});
 }
 
 function more(ev: MouseEvent) {
@@ -297,6 +299,14 @@ function more(ev: MouseEvent) {
 						}
 					}
 
+					> .info {
+						margin: 10px;
+						align-items: center;
+						display: flex;
+						padding: 10px;
+						justify-content: center;
+					}
+
 					> .icon, > .text {
 						position: relative;
 						left: 3rem;