From efdf60c766c438765f997a575b7221d0d32e0111 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Fri, 3 Jan 2025 07:10:05 +0100
Subject: [PATCH] Organizations tooltip

---
 .../account/organizations/+page.svelte        | 35 +++++++++----------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/routes/(console)/account/organizations/+page.svelte b/src/routes/(console)/account/organizations/+page.svelte
index 04404d65c..1b7fe44b2 100644
--- a/src/routes/(console)/account/organizations/+page.svelte
+++ b/src/routes/(console)/account/organizations/+page.svelte
@@ -18,10 +18,10 @@
     import type { Models } from '@appwrite.io/console';
     import type { Organization } from '$lib/stores/organization';
     import { daysLeftInTrial, plansInfo, tierToPlan } from '$lib/stores/billing';
-    import { tooltip } from '$lib/actions/tooltip';
     import { toLocaleDate } from '$lib/helpers/date';
     import { BillingPlan } from '$lib/constants';
     import { goto } from '$app/navigation';
+    import { Tooltip } from '@appwrite.io/pink-svelte';
 
     export let data: PageData;
     let addOrganization = false;
@@ -72,26 +72,25 @@
                     <svelte:fragment slot="status">
                         {#if isCloudOrg(organization)}
                             {#if organization?.billingPlan === BillingPlan.FREE || organization?.billingPlan === BillingPlan.GITHUB_EDUCATION}
-                                <div
-                                    class="u-flex u-cross-center"
-                                    use:tooltip={{
-                                        content:
-                                            'You are limited to 1 free organization per account'
-                                    }}>
-                                    <Pill class="eyebrow-heading-3"
-                                        >{tierToPlan(organization?.billingPlan)?.name}</Pill>
-                                </div>
+                                <Tooltip>
+                                    <div class="u-flex u-cross-center">
+                                        <Pill class="eyebrow-heading-3"
+                                            >{tierToPlan(organization?.billingPlan)?.name}</Pill>
+                                    </div>
+                                    <span slot="tooltip"
+                                        >You are limited to 1 free organization per account</span>
+                                </Tooltip>
                             {/if}
                             {#if organization?.billingTrialStartDate && $daysLeftInTrial > 0 && organization.billingPlan !== BillingPlan.FREE && $plansInfo.get(organization.billingPlan)?.trialDays}
-                                <div
-                                    class="u-flex u-cross-center"
-                                    use:tooltip={{
-                                        content: `Your trial ends on ${toLocaleDate(
+                                <Tooltip>
+                                    <div class="u-flex u-cross-center">
+                                        <Pill class="eyebrow-heading-3">TRIAL</Pill>
+                                    </div>
+                                    <span slot="tooltip"
+                                        >{`Your trial ends on ${toLocaleDate(
                                             organization.billingStartDate
-                                        )}. ${$daysLeftInTrial} days remaining.`
-                                    }}>
-                                    <Pill class="eyebrow-heading-3">TRIAL</Pill>
-                                </div>
+                                        )}. ${$daysLeftInTrial} days remaining.`}</span>
+                                </Tooltip>
                             {/if}
                         {/if}
                     </svelte:fragment>