From 16fc717a62bc07cbcc08000f7a7fd47ddf2dc2b0 Mon Sep 17 00:00:00 2001
From: Sai Karthik <kskarthik@disroot.org>
Date: Tue, 30 Jan 2024 13:54:01 +0530
Subject: [PATCH] fix the alignment of tooltip in login & register pages

---
 src/components/LoginPage.vue    | 4 ++--
 src/components/RegisterPage.vue | 4 ++--
 src/components/TooltipIcon.vue  | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
index 72c111c2..cc5d838f 100644
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -25,10 +25,10 @@
                     @keyup.enter="login"
                 />
             </div>
-            <div>
+            <div class="flex justify-center">
                 <a v-t="'titles.login'" class="btn w-auto" @click="login" />
+                <TooltipIcon icon="i-fa6-solid:circle-info" :tooltip="$t('info.login_note')" />
             </div>
-            <TooltipIcon icon="i-fa6-solid:circle-info" :tooltip="$t('info.login_note')" />
         </form>
     </div>
 </template>
diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue
index 89dce364..1df64d33 100644
--- a/src/components/RegisterPage.vue
+++ b/src/components/RegisterPage.vue
@@ -42,10 +42,10 @@
                     <div class="i-fa6-solid:eye" />
                 </button>
             </div>
-            <div>
+            <div class="flex justify-center">
                 <a v-t="'titles.register'" class="btn w-auto" @click="register" />
+                <TooltipIcon icon="i-fa6-solid:circle-info" :tooltip="$t('info.register_note')" />
             </div>
-            <TooltipIcon icon="i-fa6-solid:circle-info" :tooltip="$t('info.register_note')" />
         </form>
     </div>
     <ConfirmModal
diff --git a/src/components/TooltipIcon.vue b/src/components/TooltipIcon.vue
index a227377f..6973cc04 100644
--- a/src/components/TooltipIcon.vue
+++ b/src/components/TooltipIcon.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="container" class="w-full">
+    <div id="container" class="m-2 self-center">
         <div :class="icon" class="cursor-pointer"></div>
         <p id="tooltip" class="absolute mr-[20vw] mt-2 hidden rounded-l bg-gray-800 px-2 py-1 text-gray-200">
             {{ tooltip }}