From a08a9a2e8a8ab8745f4ea64db44a3b9ffb8b6b9b Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Sun, 28 Jul 2024 15:57:49 +0530
Subject: [PATCH] fix: uppercased letter spacing inside tag.

---
 src/lib/elements/pill.svelte                                 | 5 ++++-
 src/routes/console/account/organizations/+page.svelte        | 4 ++--
 src/routes/console/organization-[organization]/header.svelte | 4 ++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/lib/elements/pill.svelte b/src/lib/elements/pill.svelte
index 1c2ef4e6f..5dd478b15 100644
--- a/src/lib/elements/pill.svelte
+++ b/src/lib/elements/pill.svelte
@@ -12,6 +12,9 @@
     export let external = false;
     export let href: string = null;
     export let event: string = null;
+    let classes = '';
+
+    export { classes as class };
 
     function track() {
         if (!event) {
@@ -55,7 +58,7 @@
     </button>
 {:else}
     <div
-        class="tag"
+        class="tag {classes}"
         class:is-disabled={disabled}
         class:is-selected={selected}
         class:is-success={success}
diff --git a/src/routes/console/account/organizations/+page.svelte b/src/routes/console/account/organizations/+page.svelte
index d9a67e0c5..ec3332d37 100644
--- a/src/routes/console/account/organizations/+page.svelte
+++ b/src/routes/console/account/organizations/+page.svelte
@@ -78,7 +78,7 @@
                                         content:
                                             'You are limited to 1 free organization per account'
                                     }}>
-                                    <Pill>FREE</Pill>
+                                    <Pill class="eyebrow-heading-3">FREE</Pill>
                                 </div>
                             {/if}
                             {#if organization?.billingTrialStartDate && $daysLeftInTrial > 0 && organization.billingPlan !== BillingPlan.FREE && $plansInfo.get(organization.billingPlan)?.trialDays}
@@ -89,7 +89,7 @@
                                             organization.billingStartDate
                                         )}. ${$daysLeftInTrial} days remaining.`
                                     }}>
-                                    <Pill>TRIAL</Pill>
+                                    <Pill class="eyebrow-heading-3">TRIAL</Pill>
                                 </div>
                             {/if}
                         {/if}
diff --git a/src/routes/console/organization-[organization]/header.svelte b/src/routes/console/organization-[organization]/header.svelte
index 01ef09e1d..907050b55 100644
--- a/src/routes/console/organization-[organization]/header.svelte
+++ b/src/routes/console/organization-[organization]/header.svelte
@@ -108,7 +108,7 @@
                                 {$organization.name}
                             </span>
                             {#if isCloud && $organization?.billingPlan === BillingPlan.FREE}
-                                <Pill>FREE</Pill>
+                                <Pill class="eyebrow-heading-3">FREE</Pill>
                             {/if}
                             {#if isCloud && $organization?.billingTrialStartDate && $daysLeftInTrial > 0 && $organization.billingPlan !== BillingPlan.FREE && $plansInfo.get($organization.billingPlan)?.trialDays}
                                 <div
@@ -118,7 +118,7 @@
                                             $organization.billingStartDate
                                         )}. ${$daysLeftInTrial} days remaining.`
                                     }}>
-                                    <Pill>TRIAL</Pill>
+                                    <Pill class="eyebrow-heading-3">TRIAL</Pill>
                                 </div>
                             {/if}
                         </span>