From 071077200b3001dcbd05a8ddf236d4cdb561a34d Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Thu, 8 Sep 2022 11:57:15 +0200
Subject: [PATCH] ui: fix tooltip

---
 apps/ui/src/lib/components/UpdateAvailable.svelte | 8 +++++---
 apps/ui/src/routes/__layout.svelte                | 5 +++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/ui/src/lib/components/UpdateAvailable.svelte b/apps/ui/src/lib/components/UpdateAvailable.svelte
index db98d8699..55f5bc8e3 100644
--- a/apps/ui/src/lib/components/UpdateAvailable.svelte
+++ b/apps/ui/src/lib/components/UpdateAvailable.svelte
@@ -4,6 +4,7 @@
 	import { addToast, appSession, features } from '$lib/store';
 	import { asyncSleep, errorNotification } from '$lib/common';
 	import { onMount } from 'svelte';
+	import Tooltip from './Tooltip.svelte';
 
 	let isUpdateAvailable = false;
 	let updateStatus: any = {
@@ -75,14 +76,14 @@
 	});
 </script>
 
-<div class="flex flex-col space-y-4 py-2">
+<div class="py-2">
 	{#if $appSession.teamId === '0'}
 		{#if isUpdateAvailable}
 			<button
+				id="update"
 				disabled={updateStatus.success === false}
 				on:click={update}
-				class="icons tooltip tooltip-right tooltip-primary bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white duration-75 hover:scale-105"
-				data-tip="Update Available!"
+				class="icons bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white duration-75 hover:scale-105"
 			>
 				{#if updateStatus.loading}
 					<svg
@@ -183,6 +184,7 @@
 					>
 				{/if}
 			</button>
+			<Tooltip triggeredBy="#update" placement="right" color="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500">New Version Available!</Tooltip>
 		{/if}
 	{/if}
 </div>
diff --git a/apps/ui/src/routes/__layout.svelte b/apps/ui/src/routes/__layout.svelte
index 3feade818..b9d346da5 100644
--- a/apps/ui/src/routes/__layout.svelte
+++ b/apps/ui/src/routes/__layout.svelte
@@ -132,9 +132,9 @@
 					<img src={$appSession.whiteLabeledDetails.icon} alt="White labeled logo" />
 				</div>
 			{/if}
-			<div class="flex flex-col space-y-2 py-2" class:mt-2={$appSession.whiteLabeled}>
+			<div class="flex flex-col space-y-2 py-2" id="dashboard" class:mt-2={$appSession.whiteLabeled}>
 				<a
-					id="dashboard"
+					
 					sveltekit:prefetch
 					href="/"
 					class="icons  hover:text-white"
@@ -160,6 +160,7 @@
 					</svg>
 				</a>
 			</div>
+			<Tooltip triggeredBy="#dashboard" placement="right">Dashboard</Tooltip>
 			<div class="flex-1" />
 
 			<UpdateAvailable />