From fc82e5522541164488ec91c32b50d90b4000b965 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Fri, 23 Aug 2024 18:17:02 +0530
Subject: [PATCH] add: info. icon and explainer copy to express build.

---
 src/routes/pricing/compare-plans.svelte | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/routes/pricing/compare-plans.svelte b/src/routes/pricing/compare-plans.svelte
index c3ba0c2f7f..72116fc0a8 100644
--- a/src/routes/pricing/compare-plans.svelte
+++ b/src/routes/pricing/compare-plans.svelte
@@ -4,15 +4,16 @@
     import { visible } from '$lib/actions/visible';
     import { isHeaderHidden } from '$lib/layouts/Main.svelte';
     import { getScrollDir } from '$lib/utils/getScrollDir';
-    import { isVisible } from '$lib/utils/isVisible';
     import { createAccordion, melt } from '@melt-ui/svelte';
     import { writable } from 'svelte/store';
     import { fly } from 'svelte/transition';
+    import Tooltip from '../../lib/components/Tooltip.svelte';
 
     type Table = {
         title: string;
         rows: {
             title: string;
+            info?: string;
             free: string | true;
             pro: string | true;
             scale: string | true;
@@ -232,6 +233,7 @@
                 },
                 {
                     title: 'Express builds',
+                    info: 'Dedicated priority queues for build jobs',
                     free: '-',
                     pro: true,
                     scale: true
@@ -498,7 +500,19 @@
                             <tbody class="web-compare-table-body" use:melt={$content(table.title)}>
                                 {#each table.rows as row}
                                     <tr>
-                                        <th class="web-sub-body-500">{row.title}</th>
+                                        <th class="web-sub-body-500">
+                                            <div class="u-flex u-gap-4">
+                                                {row.title}
+                                                {#if row.info}
+                                                    <Tooltip placement="top">
+                                                        <span class="icon-info" aria-hidden="true" />
+                                                        <svelte:fragment slot="tooltip">
+                                                            {row.info}
+                                                        </svelte:fragment>
+                                                    </Tooltip>
+                                                {/if}
+                                            </div>
+                                        </th>
                                         {#each cols as col, index}
                                             <td
                                                 class="level-{index}"