From a9e073993d6fc543f40e6b430a3b615afbb2379b Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 24 Oct 2024 14:51:57 +0200
Subject: [PATCH] bump icons, label cards

---
 package.json                                  |  4 +-
 pnpm-lock.yaml                                | 23 ++++++++----
 .../components/billing/planSelection.svelte   |  6 +--
 src/lib/components/labelCard.svelte           | 37 +++++++++++++------
 .../database-[database]/backups/table.svelte  |  2 +-
 .../configuration/connectBehaviour.svelte     |  4 +-
 6 files changed, 49 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index 6af723b6d..732a3a877 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,8 @@
         "@appwrite.io/console": "1.4.1",
         "@appwrite.io/pink": "0.25.0",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "1.0.0-next.5",
-        "@appwrite.io/pink-svelte": "1.0.0-next.66",
+        "@appwrite.io/pink-icons-svelte": "1.0.0-next.6",
+        "@appwrite.io/pink-svelte": "1.0.0-next.67",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.33.1",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 71444142a..57ca800fd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,11 +18,11 @@ importers:
         specifier: 0.25.0
         version: 0.25.0
       '@appwrite.io/pink-icons-svelte':
-        specifier: 1.0.0-next.5
-        version: 1.0.0-next.5(svelte@4.2.19)
+        specifier: 1.0.0-next.6
+        version: 1.0.0-next.6(svelte@4.2.19)
       '@appwrite.io/pink-svelte':
-        specifier: 1.0.0-next.66
-        version: 1.0.0-next.66(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: 1.0.0-next.67
+        version: 1.0.0-next.67(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -210,11 +210,16 @@ packages:
     peerDependencies:
       svelte: ^4.0.0
 
+  '@appwrite.io/pink-icons-svelte@1.0.0-next.6':
+    resolution: {integrity: sha512-izjcvqOvqjXEIA1DoO+5qWFkiky5+Xsgj5g3LA18u3L7vaJstbGzf2plT5qhkkYhDcCPy35psnj4YyF3ztWWQA==}
+    peerDependencies:
+      svelte: ^4.0.0
+
   '@appwrite.io/pink-icons@0.25.0':
     resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==}
 
-  '@appwrite.io/pink-svelte@1.0.0-next.66':
-    resolution: {integrity: sha512-EFNfbN4Bo/3EHcx3A3GeHBz2HvjgUKuL3UQtfc9l7oCSJn4H6ky4zAEDfw9fotJeqzJDytyGr6YnU5gGadkTaA==}
+  '@appwrite.io/pink-svelte@1.0.0-next.67':
+    resolution: {integrity: sha512-HZKNUCkpjRsV7wYNx8AomJvU3WkJP6ehAeNDCUV2P5t2bLpN1ZdYU3o5Lhe4nmr/OkIrxDEd4eYumy0W99nAmw==}
     peerDependencies:
       react-dom: ^18.0.0
       svelte: ^4.0.0
@@ -3868,9 +3873,13 @@ snapshots:
     dependencies:
       svelte: 4.2.19
 
+  '@appwrite.io/pink-icons-svelte@1.0.0-next.6(svelte@4.2.19)':
+    dependencies:
+      svelte: 4.2.19
+
   '@appwrite.io/pink-icons@0.25.0': {}
 
-  '@appwrite.io/pink-svelte@1.0.0-next.66(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
+  '@appwrite.io/pink-svelte@1.0.0-next.67(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 1.0.0-next.5(svelte@4.2.19)
       '@floating-ui/dom': 1.6.11
diff --git a/src/lib/components/billing/planSelection.svelte b/src/lib/components/billing/planSelection.svelte
index 0d484a9b4..749261ea4 100644
--- a/src/lib/components/billing/planSelection.svelte
+++ b/src/lib/components/billing/planSelection.svelte
@@ -27,7 +27,7 @@
                 value={BillingPlan.FREE}
                 tooltipShow={anyOrgFree}
                 tooltipText="You are limited to 1 Free organization per account."
-                padding={1.5}>
+                padding="medium">
                 <svelte:fragment slot="custom" let:disabled>
                     <div
                         class="u-flex u-flex-vertical u-gap-4 u-width-full-line"
@@ -55,7 +55,7 @@
                 disabled={!selfService}
                 bind:group={billingPlan}
                 value={BillingPlan.PRO}
-                padding={1.5}>
+                padding="medium">
                 <svelte:fragment slot="custom" let:disabled>
                     <div
                         class="u-flex u-flex-vertical u-gap-4 u-width-full-line"
@@ -82,7 +82,7 @@
                     name="plan"
                     bind:group={billingPlan}
                     value={BillingPlan.SCALE}
-                    padding={1.5}>
+                    padding="medium">
                     <svelte:fragment slot="custom">
                         <div class="u-flex u-flex-vertical u-gap-4 u-width-full-line">
                             <h4 class="body-text-2 u-bold">
diff --git a/src/lib/components/labelCard.svelte b/src/lib/components/labelCard.svelte
index f0d0020d9..947d2de3c 100644
--- a/src/lib/components/labelCard.svelte
+++ b/src/lib/components/labelCard.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
     import { tooltip } from '$lib/actions/tooltip';
-    import { app } from '$lib/stores/app';
-    import { base } from '$app/paths';
+    import { Card } from '@appwrite.io/pink-svelte';
+    import { type ComponentProps } from 'svelte';
+    import type Selector from '@appwrite.io/pink-svelte/dist/card/Selector.svelte';
+
+    type Props = ComponentProps<Selector>;
 
     export let name: string;
     export let group: string;
     export let value: string | number | boolean;
     export let disabled = false;
-    export let padding = 1;
     export let icon: string = null;
     export let imageIcon: string = null;
     export let fullHeight = true;
@@ -17,20 +19,31 @@
     export let tooltipText: string = null;
     export let tooltipShow = false;
 
-    enum Radius {
-        xsmall = '--border-radius-xsmall',
-        small = '--border-radius-small',
-        medium = '--border-radius-medium',
-        large = '--border-radius-large'
-    }
+    // Pink v2
+    export let radius: Props['radius'] = 'medium';
+    export let padding: Props['padding'] = 'small';
+    //temporarily unefined
+    export let title: Props['title'] = undefined;
+
+    // TODO: remove after label card migration
+    let slotTitle: HTMLSpanElement;
 </script>
 
-<label
+<div use:tooltip={{ content: tooltipText, disabled: !tooltipText || !tooltipShow }}>
+    <Card.Selector {value} {disabled} title={title ?? slotTitle?.innerText} bind:group>
+        <p>
+            <slot />
+        </p>
+    </Card.Selector>
+</div>
+<span style="display: none" bind:this={slotTitle}>
+    <slot name="title" />
+</span>
+<!-- <label
     class="card u-cursor-pointer"
     class:is-allow-focus={!disabled}
     class:is-disabled={disabled}
     class:u-height-100-percent={fullHeight}
-    style:--card-padding={`${padding}rem`}
     style:--card-border-radius={`var(${Radius[borderRadius]})`}
     style:--p-card-bg-color-default={backgroundColor}
     style:--p-card-bg-color-hover={backgroundColorHover}
@@ -70,4 +83,4 @@
             {/if}
         {/if}
     </div>
-</label>
+</label> -->
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte
index d2a0feaac..e8a50f9d7 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte
@@ -322,7 +322,7 @@
             {#each restoreOptions as restoreOption}
                 <div class="u-width-full-line">
                     <LabelCard
-                        padding={1}
+                        padding="small"
                         name="restore"
                         value={restoreOption.id}
                         bind:group={selectedRestoreOption}>
diff --git a/src/routes/(console)/project-[project]/sites/create-site/configuration/connectBehaviour.svelte b/src/routes/(console)/project-[project]/sites/create-site/configuration/connectBehaviour.svelte
index 503440175..390e8c1f9 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/configuration/connectBehaviour.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/configuration/connectBehaviour.svelte
@@ -11,8 +11,8 @@
         name="connect-behaviour"
         value="now"
         bind:group={connectBehaviour}
-        disabled={!isVcsEnabled}>
-        <svelte:fragment slot="title">Connect to Git repository</svelte:fragment>
+        disabled={!isVcsEnabled}
+        title="Connect to Git repository">
         Clone the template to a new repository or connect it to an existing one.
     </LabelCard>
     <LabelCard