fix: design and bugs

package-lock.json

@@ -7,8 +7,8 @@
             "name": "@appwrite/console",
             "dependencies": {
                 "@appwrite.io/console": "^0.6.1",
-                "@appwrite.io/pink": "0.17.0",
-                "@appwrite.io/pink-icons": "0.17.0",
+                "@appwrite.io/pink": "0.20.0",
+                "@appwrite.io/pink-icons": "0.20.0",
                 "@popperjs/core": "^2.11.8",
                 "@sentry/svelte": "^7.66.0",
                 "@sentry/tracing": "^7.66.0",
@@ -166,19 +166,19 @@
             }
         },
         "node_modules/@appwrite.io/pink": {
-            "version": "0.17.0",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.17.0.tgz",
-            "integrity": "sha512-1FkVVqdqU5d0FlGIyLisCoLR3JaqGlQs3+BJydo6Mr9/bRWKcg4O9nw+e1P1Lx8StnVnDEM5CRCQdzyPQSNByw==",
+            "version": "0.20.0",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.20.0.tgz",
+            "integrity": "sha512-17anov7EL+Ic/4fNtCYgG3wA+hoeBXn/j+ZjkfZFfX3g66M8XzVTaQfsAH+EMZ3YjvWuKlHtn+bY4BkGwvMIzQ==",
             "dependencies": {
-                "@appwrite.io/pink-icons": "0.17.0",
+                "@appwrite.io/pink-icons": "0.20.0",
                 "normalize.css": "^8.0.1",
                 "the-new-css-reset": "^1.11.2"
             }
         },
         "node_modules/@appwrite.io/pink-icons": {
-            "version": "0.17.0",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/pink-icons/-/pink-icons-0.17.0.tgz",
-            "integrity": "sha512-JcYjVI+nPO8BTJzKlUH2RKyUYg/3pEy81dr3TrQB0HlsrngDq3akhaNCfnQzLg9Kicdl+Cr4Gq920Ha6zA4FQQ=="
+            "version": "0.20.0",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/pink-icons/-/pink-icons-0.20.0.tgz",
+            "integrity": "sha512-nfDy7qE6FQWVO1eC+3nwGjXkj/Zm2V50rhvyj0/HKq8RyWNWFGX31BZoMSim01vl/N5irBilpkaER6mLPp7oEw=="
         },
         "node_modules/@babel/code-frame": {
             "version": "7.24.2",

package.json

@@ -18,8 +18,8 @@
         "e2e": "playwright test tests/e2e"
     },
     "dependencies": {
-        "@appwrite.io/pink": "0.17.0",
-        "@appwrite.io/pink-icons": "0.17.0",
+        "@appwrite.io/pink": "0.20.0",
+        "@appwrite.io/pink-icons": "0.20.0",
         "@appwrite.io/console": "^0.6.1",
         "@popperjs/core": "^2.11.8",
         "@sentry/svelte": "^7.66.0",

src/lib/components/billing/alerts/limitReached.svelte

@@ -5,11 +5,11 @@
     import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { HeaderAlert } from '$lib/layout';
-    import { readOnly, tierToPlan, upgradeURL } from '$lib/stores/billing';
+    import { hideBillingHeaderRoutes, readOnly, tierToPlan, upgradeURL } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
 </script>
 
-{#if $organization?.$id && $organization?.billingPlan === BillingPlan.STARTER && $readOnly && !$page.url.pathname.includes('/console/account')}
+{#if $organization?.$id && $organization?.billingPlan === BillingPlan.STARTER && $readOnly && !hideBillingHeaderRoutes.includes($page.url.pathname)}
     <HeaderAlert
         type="error"
         title={`${$organization.name} usage has reached the ${tierToPlan($organization.billingPlan).name} plan limit`}>

src/lib/components/billing/alerts/markedForDeletion.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { HeaderAlert } from '$lib/layout';
+    import { hideBillingHeaderRoutes } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
 </script>
 
-{#if $organization?.markedForDeletion && !$page.url.pathname.includes('/console/account')}
+{#if $organization?.markedForDeletion && !hideBillingHeaderRoutes.includes($page.url.pathname)}
     <HeaderAlert title="Organization flagged for deletion">
         <svelte:fragment>
             All existing projects in the {$organization.name} organization have been paused. This organization

src/lib/components/billing/alerts/missingPaymentMethod.svelte

@@ -3,10 +3,11 @@
     import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { HeaderAlert } from '$lib/layout';
+    import { hideBillingHeaderRoutes } from '$lib/stores/billing';
     import { orgMissingPaymentMethod } from '$routes/console/store';
 </script>
 
-{#if ($orgMissingPaymentMethod.billingPlan === BillingPlan.PRO || $orgMissingPaymentMethod.billingPlan === BillingPlan.SCALE) && !$orgMissingPaymentMethod.paymentMethodId && !$orgMissingPaymentMethod.backupPaymentMethodId && !$page.url.pathname.includes('/console/account')}
+{#if ($orgMissingPaymentMethod.billingPlan === BillingPlan.PRO || $orgMissingPaymentMethod.billingPlan === BillingPlan.SCALE) && !$orgMissingPaymentMethod.paymentMethodId && !$orgMissingPaymentMethod.backupPaymentMethodId && !hideBillingHeaderRoutes.includes($page.url.pathname)}
     <HeaderAlert
         type="error"
         title={`Payment method required for ${$orgMissingPaymentMethod.name}`}>

src/lib/components/billing/alerts/paymentAuthRequired.svelte

@@ -2,14 +2,14 @@
     import { page } from '$app/stores';
     import { Button } from '$lib/elements/forms';
     import { HeaderAlert } from '$lib/layout';
-    import { actionRequiredInvoices } from '$lib/stores/billing';
+    import { actionRequiredInvoices, hideBillingHeaderRoutes } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { VARS } from '$lib/system';
 
     const endpoint = VARS.APPWRITE_ENDPOINT ?? `${$page.url.origin}/v1`;
 </script>
 
-{#if $actionRequiredInvoices && $actionRequiredInvoices?.invoices?.length && !$page.url.pathname.includes('/console/account')}
+{#if $actionRequiredInvoices && $actionRequiredInvoices?.invoices?.length && !hideBillingHeaderRoutes.includes($page.url.pathname)}
     <HeaderAlert title="Authorization required" type="error">
         Please authorize your upcoming payment for {$organization.name}. Your bank requires this
         security measure to proceed with payment.

src/lib/components/billing/alerts/paymentMandate.svelte

@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { Button } from '$lib/elements/forms';
     import { HeaderAlert } from '$lib/layout';
-    import { paymentMissingMandate } from '$lib/stores/billing';
+    import { hideBillingHeaderRoutes, paymentMissingMandate } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
     import { confirmSetup } from '$lib/stores/stripe';
@@ -16,7 +16,7 @@
     }
 </script>
 
-{#if $paymentMissingMandate && $paymentMissingMandate.country === 'in' && $paymentMissingMandate.mandateId === null && !$page.url.pathname.includes('/console/account')}
+{#if $paymentMissingMandate && $paymentMissingMandate.country === 'in' && $paymentMissingMandate.mandateId === null && !hideBillingHeaderRoutes.includes($page.url.pathname)}
     <HeaderAlert title="Authorization required" type="info">
         The payment method for {$organization.name} needs to be verified.
         <svelte:fragment slot="buttons">

src/lib/components/billing/alerts/projectsAtRisk.svelte

@@ -4,10 +4,10 @@
     import { Button } from '$lib/elements/forms';
     import { diffDays, toLocaleDate } from '$lib/helpers/date';
     import { HeaderAlert } from '$lib/layout';
-    import { failedInvoice } from '$lib/stores/billing';
+    import { failedInvoice, hideBillingHeaderRoutes } from '$lib/stores/billing';
 </script>
 
-{#if $failedInvoice && !$page.url.pathname.includes('/console/account')}
+{#if $failedInvoice && !hideBillingHeaderRoutes.includes($page.url.pathname)}
     {@const daysPassed = diffDays(new Date($failedInvoice.dueAt), new Date())}
     <HeaderAlert title="Your projects are at risk">
         <svelte:fragment>

src/lib/components/billing/estimatedTotalBox.svelte

@@ -5,7 +5,6 @@
     import { formatCurrency } from '$lib/helpers/numbers';
     import type { Coupon } from '$lib/sdk/billing';
     import { plansInfo, type Tier } from '$lib/stores/billing';
-    import { Box } from '..';
 
     export let billingPlan: Tier;
     export let collaborators: string[];
@@ -26,9 +25,12 @@
                 ? grossCost - couponData.credits
                 : 0
             : grossCost;
+    $: trialEndDate = new Date(
+        billingPayDate.getTime() + currentPlan.trialDays * 24 * 60 * 60 * 1000
+    );
 </script>
 
-<Box class="u-margin-block-start-32 u-flex u-flex-vertical u-gap-8" radius="small">
+<section class="card u-margin-block-start-32 u-flex u-flex-vertical u-gap-8">
     <span class="u-flex u-main-space-between">
         <p class="text">{currentPlan.name} plan</p>
         <p class="text">{formatCurrency(currentPlan.price)}</p>
@@ -83,15 +85,12 @@
         </p>
     </span>
 
-    {@const trialEndDate = new Date(
-        billingPayDate.getTime() + currentPlan.trialDays * 24 * 60 * 60 * 1000
-    )}
     <p class="text u-margin-block-start-16">
         Your payment method will be charged this amount plus usage fees every 30 days {!currentPlan.trialDays
             ? `starting ${toLocaleDate(billingPayDate.toString())}`
             : ` after your trial period ends on ${toLocaleDate(trialEndDate.toString())}`}.
     </p>
-    <FormList>
+    <FormList class="u-margin-block-start-24">
         <InputChoice
             type="switchbox"
             id="budget"
@@ -111,4 +110,4 @@
             {/if}
         </InputChoice>
     </FormList>
-</Box>
+</section>

src/lib/components/billing/paymentModal.svelte

@@ -92,6 +92,7 @@
                 <!-- Stripe will create form elements here -->
             </div>
         </div>
+        <slot name="end"></slot>
     </FormList>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Cancel</Button>

src/lib/components/billing/selectPaymentMethod.svelte

@@ -84,7 +84,10 @@
         </svelte:fragment>
     </InputSelectSearch>
 {:else}
-    <Card isDashed --p-card-padding="1rem" --p-card-bg-color="transparent" isTile>
+    <Card
+        isDashed
+        style="--p-card-padding:1rem; --p-card-bg-color: transparent; --p-card-border-radius: 0.5rem"
+        isTile>
         <div class="u-flex u-main-space-between u-cross-center">
             <p>
                 <span class="icon-exclamation-circle"></span>
@@ -99,17 +102,23 @@
 
 {#if showPaymentModal && isCloud && hasStripePublicKey}
     <PaymentModal bind:show={showPaymentModal} on:submit={cardSaved}>
-        <InputChoice
-            type="checkbox"
-            id="taxIdCheck"
-            label="I'm purchasing as a bussiness"
-            fullWidth
-            bind:value={showTaxId}>
-            {#if showTaxId}
-                <div class="u-margin-block-start-16">
-                    <InputText id="taxId" label="Tax ID" placeholder="Tax ID" bind:value={taxId} />
-                </div>
-            {/if}
-        </InputChoice>
+        <svelte:fragment slot="end">
+            <InputChoice
+                type="checkbox"
+                id="taxIdCheck"
+                label="I'm purchasing as a business"
+                fullWidth
+                bind:value={showTaxId}>
+                {#if showTaxId}
+                    <div class="u-margin-block-start-8">
+                        <InputText
+                            id="taxId"
+                            label="Tax ID"
+                            placeholder="Tax ID"
+                            bind:value={taxId} />
+                    </div>
+                {/if}
+            </InputChoice>
+        </svelte:fragment>
     </PaymentModal>
 {/if}

src/lib/components/card.svelte

@@ -49,6 +49,7 @@
     class:is-border-dashed={isDashed}
     class:is-danger={danger}
     class:is-allowed-focus={href}
+    {...$$restProps}
     {style}
     on:click
     on:keyup={clickOnEnter}

src/lib/layout/wizardSecondaryContainer.svelte

@@ -6,7 +6,6 @@
 
 <style lang="scss">
     .c-wizard-position {
-        background-color: hsl(var(--p-body-bg-color));
         position: fixed;
         top: 0;
         left: 0;
@@ -16,5 +15,6 @@
         width: 100%;
         height: 100%;
         max-height: 100vh;
+        overflow-y: auto;
     }
 </style>

src/lib/stores/billing.ts

@@ -367,3 +367,5 @@ export const upgradeURL = derived(
     page,
     ($page) => `${base}/console/organization-${$page.data?.organization?.$id}/change-plan`
 );
+
+export const hideBillingHeaderRoutes = ['/console/create-organization', '/console/account'];

src/routes/console/create-organization/+page.svelte

@@ -197,7 +197,7 @@
                     id="name"
                     required />
             </FormList>
-            <Label class="u-margin-block-start-16">Select plan</Label>
+            <Label class="label u-margin-block-start-16">Select plan</Label>
             <p class="text">
                 For more details on our plans, visit our
                 <Button href="https://appwrite.io/pricing" external link>pricing page</Button>.

src/routes/console/organization-[organization]/change-plan/+page.svelte

@@ -256,7 +256,7 @@
     <WizardSecondaryHeader href={previousPage}>Change plan</WizardSecondaryHeader>
     <WizardSecondaryContent>
         <Form bind:this={formComponent} onSubmit={handleSubmit} bind:isSubmitting>
-            <Label class="u-margin-block-start-16">Select plan</Label>
+            <Label class="label u-margin-block-start-16">Select plan</Label>
             <p class="text">
                 For more details on our plans, visit our
                 <Button href="https://appwrite.io/pricing" external link>pricing page</Button>.