From 5db67a307b2fc657a8a35eebedb35ad759e8be86 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 31 Dec 2024 09:53:17 +0100
Subject: [PATCH] DeploymentCard new tooltip

---
 .../function-[function]/deploymentCard.svelte | 39 ++++++++++---------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/deploymentCard.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/deploymentCard.svelte
index 8ffa5d948..916e82402 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/deploymentCard.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/deploymentCard.svelte
@@ -9,7 +9,7 @@
     import DeploymentSource from './deploymentSource.svelte';
 
     import DeploymentDomains from './deploymentDomains.svelte';
-    import { tooltip } from '$lib/actions/tooltip';
+    import { Tooltip } from '@appwrite.io/pink-svelte';
 
     export let deployment: Models.Deployment;
 </script>
@@ -57,24 +57,25 @@
                 <p class="u-color-text-offline">Total size</p>
                 <p class="u-line-height-2">
                     {totalSize.value + totalSize.unit}
-                    <button
-                        type="button"
-                        on:click|preventDefault
-                        class="tooltip"
-                        aria-label="input tooltip"
-                        use:tooltip={{
-                            content: `
-                                <p><b>Deployment size:</b> ${deploymentSize.value + deploymentSize.unit}</p>
-                                <p><b>Build size:</b> ${buildSize.value + buildSize.unit}</p>
-                            `,
-                            allowHTML: true,
-                            appendTo: 'parent'
-                        }}>
-                        <span
-                            class="icon-info"
-                            aria-hidden="true"
-                            style="font-size: var(--icon-size-small)" />
-                    </button>
+                    <Tooltip>
+                        <button
+                            type="button"
+                            on:click|preventDefault
+                            class="tooltip"
+                            aria-label="input tooltip">
+                            <span
+                                class="icon-info"
+                                aria-hidden="true"
+                                style="font-size: var(--icon-size-small)" />
+                        </button>
+                        <div slot="tooltip">
+                            <p>
+                                <b>Deployment size:</b>
+                                {deploymentSize.value + deploymentSize.unit}
+                            </p>
+                            <p><b>Build size:</b> {buildSize.value + buildSize.unit}</p>
+                        </div>
+                    </Tooltip>
                 </p>
             </li>
             <li class="u-flex-vertical u-gap-4">