From 617a438222477de2ba07afd0cf2f24de1abc1dfd Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 30 May 2024 10:55:25 +0200
Subject: [PATCH] fix: design

---
 .../billing/estimatedTotalBox.svelte          |  3 +-
 src/lib/layout/unauthenticated.svelte         | 29 ++++++++++++-------
 src/routes/console/apply-credit/+page.svelte  | 10 ++++---
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/billing/estimatedTotalBox.svelte b/src/lib/components/billing/estimatedTotalBox.svelte
index 88be7db6a..40f91d495 100644
--- a/src/lib/components/billing/estimatedTotalBox.svelte
+++ b/src/lib/components/billing/estimatedTotalBox.svelte
@@ -33,7 +33,8 @@
 
 <section
     class="card u-margin-block-start-32 u-flex u-flex-vertical u-gap-8"
-    style:--p-card-padding="1.5rem">
+    style:--p-card-padding="1.5rem"
+    style:--p-card-border-radius="var(--border-radius-small)">
     <span class="u-flex u-main-space-between">
         <p class="text">{currentPlan.name} plan</p>
         <p class="text">{formatCurrency(currentPlan.price)}</p>
diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index 1ec41c275..20f3d4471 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -153,32 +153,32 @@
             z-index: -1;
             &::before {
                 position: absolute;
-                inset-block-start: -10px;
-                inset-inline-end: -10px;
+                inset-block-start: -200px;
+                inset-inline-end: -50px;
                 content: '';
                 display: block;
-                inline-size: 38%;
-                block-size: 38%;
+                inline-size: 32%;
+                block-size: 32%;
                 background: radial-gradient(49.55% 43.54% at 47% 50.69%, #e7f8f7 0%, #85dbd8 100%);
-                filter: blur(250px);
+                filter: blur(150px);
                 @media #{$break1} {
                     filter: blur(100px);
                 }
             }
             &::after {
                 position: absolute;
-                inset-block-end: -10px;
-                inset-inline-start: -10px;
+                inset-block-end: -50px;
+                inset-inline-start: -50px;
                 content: '';
                 display: block;
-                inline-size: 38%;
-                block-size: 38%;
+                inline-size: 30%;
+                block-size: 30%;
                 background: radial-gradient(
                     50% 46.73% at 50% 53.27%,
                     #fe9567 28.17%,
                     #fd366e 59.38%
                 );
-                filter: blur(250px);
+                filter: blur(200px);
 
                 @media #{$break1} {
                     filter: blur(100px);
@@ -196,6 +196,15 @@
         background-color: #131315 !important;
     }
 
+    :global(.theme-dark) .side-bg-container::before {
+        inline-size: 20%;
+        block-size: 20%;
+        filter: blur(180px);
+    }
+    :global(.theme-dark) .side-bg-container::after {
+        filter: blur(250px);
+    }
+
     /* Default (including mobile) */
     .side-default {
         padding-block-start: 2.25rem;
diff --git a/src/routes/console/apply-credit/+page.svelte b/src/routes/console/apply-credit/+page.svelte
index 37671b03e..a80c4c5c1 100644
--- a/src/routes/console/apply-credit/+page.svelte
+++ b/src/routes/console/apply-credit/+page.svelte
@@ -124,11 +124,10 @@
                 await sdk.forConsole.billing.updateTaxId(org.$id, taxId);
             }
 
+            await goto(`/console/organization-${org.$id}`);
             await invalidate(Dependencies.ACCOUNT);
             await invalidate(Dependencies.ORGANIZATION);
 
-            await goto(`/console/organization-${org.$id}`);
-
             addNotification({
                 type: 'success',
                 message: 'Credits applied successfully'
@@ -198,7 +197,7 @@
         <svelte:fragment slot="aside">
             <div
                 class="box card-container u-position-relative"
-                style:--box-border-radius="var(--border-radius-large)">
+                style:--box-border-radius="var(--border-radius-small)">
                 <div class="card-bg"></div>
                 <div
                     class="u-flex u-flex-vertical u-gap-24 u-cross-center u-position-relative"
@@ -213,7 +212,10 @@
                 </div>
             </div>
             {#if selectedOrg?.billingPlan === BillingPlan.PRO}
-                <section class="card u-margin-block-start-24" style:--p-card-padding="1.5rem">
+                <section
+                    class="card u-margin-block-start-24"
+                    style:--p-card-padding="1.5rem"
+                    style:--p-card-border-radius="var(--border-radius-small)">
                     <p class="text">
                         Credits will automatically be applied to your next invoice on <b
                             >{toLocaleDate(selectedOrg.billingNextInvoiceDate)}.</b>