From c0a9b16aa8b8eccbfdce15b0212c13333bf0b32c Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Thu, 16 May 2024 16:51:04 +0200
Subject: [PATCH] refactor: use browser inbuilt tooltip on login/register page

---
 src/components/LoginPage.vue    |  7 +------
 src/components/PlaylistPage.vue |  4 ++--
 src/components/RegisterPage.vue |  5 ++---
 src/components/TooltipIcon.vue  | 29 -----------------------------
 src/locales/en.json             |  2 +-
 5 files changed, 6 insertions(+), 41 deletions(-)
 delete mode 100644 src/components/TooltipIcon.vue

diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
index b7d4f1ba..459c79b6 100644
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="flex justify-center">
         <h1 v-t="'titles.login'" class="my-4 text-center font-bold" />
-        <TooltipIcon class="mb-6" icon="i-fa6-solid:circle-info" :tooltip="$t('info.login_note')" />
+        <i class="i-fa6-solid:circle-info ml-2 mt-6 cursor-pointer" :title="$t('info.login_note')" />
     </div>
     <hr />
     <div class="w-full flex items-center justify-center text-center">
@@ -36,12 +36,7 @@
 </template>
 
 <script>
-import TooltipIcon from "./TooltipIcon.vue";
-
 export default {
-    components: {
-        TooltipIcon,
-    },
     data() {
         return {
             username: null,
diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index d3a0af98..4bf99118 100644
--- a/src/components/PlaylistPage.vue
+++ b/src/components/PlaylistPage.vue
@@ -6,10 +6,10 @@
 
         <CollapsableText v-if="playlist?.description" :text="playlist.description" />
 
-        <div class="mt-1 flex <md:flex-col md:items-center justify-between">
+        <div class="mt-1 flex justify-between <md:flex-col md:items-center">
             <div>
                 <router-link class="link flex items-center gap-3" :to="playlist.uploaderUrl || '/'">
-                    <img loading="lazy" :src="playlist.uploaderAvatar" class="rounded-full h-12" />
+                    <img loading="lazy" :src="playlist.uploaderAvatar" class="h-12 rounded-full" />
                     <strong v-text="playlist.uploader" />
                 </router-link>
             </div>
diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue
index a9da9310..65b323a9 100644
--- a/src/components/RegisterPage.vue
+++ b/src/components/RegisterPage.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="flex justify-center">
         <h1 v-t="'titles.register'" class="my-4 text-center font-bold" />
-        <TooltipIcon class="mb-6" icon="i-fa6-solid:circle-info" :tooltip="$t('info.register_note')" />
+        <i class="i-fa6-solid:circle-info ml-2 mt-6 cursor-pointer" :title="$t('info.register_note')" />
     </div>
     <hr />
     <div class="flex flex-col items-center justify-center text-center">
@@ -65,10 +65,9 @@
 <script>
 import { isEmail } from "../utils/Misc.js";
 import ConfirmModal from "./ConfirmModal.vue";
-import TooltipIcon from "./TooltipIcon.vue";
 
 export default {
-    components: { ConfirmModal, TooltipIcon },
+    components: { ConfirmModal },
     data() {
         return {
             username: null,
diff --git a/src/components/TooltipIcon.vue b/src/components/TooltipIcon.vue
deleted file mode 100644
index 6973cc04..00000000
--- a/src/components/TooltipIcon.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <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 }}
-        </p>
-    </div>
-</template>
-
-<script>
-export default {
-    props: {
-        icon: {
-            type: String, // the class name of a font awesome icon
-            required: true,
-        },
-        tooltip: {
-            type: String,
-            required: true,
-        },
-    },
-};
-</script>
-
-<style>
-#container:hover #tooltip {
-    display: block;
-}
-</style>
diff --git a/src/locales/en.json b/src/locales/en.json
index 3a0ad493..0df1d971 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -227,4 +227,4 @@
         "register_note": "Register an account for this Piped instance. This will allow you to sync your subscriptions and playlists with your account, so they're stored on the server side. You can use all features without an account, but all data will be stored in your browser's local cache. Please make sure you do NOT use an email address as your username and choose a secure password that you do not use elsewhere.",
         "login_note": "Log in with an account created on this instance."
     }
-}
\ No newline at end of file
+}