From 25e0621d3b5f72fb6de181a5d196513aeaae6d52 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Mar 2025 11:11:28 +0100
Subject: [PATCH] Fix: support cards

---
 src/lib/components/support.svelte | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/support.svelte b/src/lib/components/support.svelte
index 25ea6859c..3211caf5f 100644
--- a/src/lib/components/support.svelte
+++ b/src/lib/components/support.svelte
@@ -10,6 +10,7 @@
     import { app } from '$lib/stores/app';
     import { currentPlan } from '$lib/stores/organization';
     import { isCloud } from '$lib/system';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let show = false;
 
@@ -61,21 +62,18 @@
 
 <section class="drop-section support-section">
     {#if showHeader}
-        <h4 class="heading-level-6">Support</h4>
+        <Typography.Title size="s">Support</Typography.Title>
     {/if}
 
     {#each supportOptions as option, index}
         {#if showCloudSupport(index)}
             <Card
                 isTile
-                class="support-option-card u-flex u-flex-vertical u-gap-16"
-                style="border-radius: var(--border-radius-small, 8px); padding: 0.65rem;">
+                class="support-option-card "
+                style="border-radius: var(--border-radius-small, 8px); --gap-xl: 16px">
                 <div class="u-flex u-flex-vertical u-gap-4">
-                    <h4 class="body-text-2 u-bold">{option.label}</h4>
-
-                    <p class="u-line-height-1-5">
-                        {option.description}
-                    </p>
+                    <Typography.Text variant="m-500">{option.label}</Typography.Text>
+                    <Typography.Text variant="m-400">{option.description}</Typography.Text>
                 </div>
 
                 {#if option.showSupport}