fix: design review

src/lib/components/billing/estimatedTotalBox.svelte

@@ -11,6 +11,7 @@
     export let couponData: Partial<Coupon>;
     export let billingBudget: number;
     export let fixedCoupon = false; // If true, the coupon cannot be removed
+    export let isDowngrade = false;
 
     const today = new Date();
     const billingPayDate = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);
@@ -41,8 +42,8 @@
         <p class="text">{formatCurrency(currentPlan.price)}</p>
     </span>
     <span class="u-flex u-main-space-between">
-        <p class="text">Additional seats ({collaborators?.length})</p>
-        <p class="text">
+        <p class="text" class:u-bold={isDowngrade}>Additional seats ({collaborators?.length})</p>
+        <p class="text" class:u-bold={isDowngrade}>
             {formatCurrency(extraSeatsCost)}
         </p>
     </span>

src/lib/components/billing/planComparisonBox.svelte

@@ -11,23 +11,25 @@
 </script>
 
 <Card>
-    <SecondaryTabs stretch>
-        <SecondaryTabsItem
-            disabled={selectedTab === BillingPlan.FREE}
-            on:click={() => (selectedTab = BillingPlan.FREE)}>
-            {tierFree.name}
-        </SecondaryTabsItem>
-        <SecondaryTabsItem
-            disabled={selectedTab === BillingPlan.PRO}
-            on:click={() => (selectedTab = BillingPlan.PRO)}>
-            {tierPro.name}
-        </SecondaryTabsItem>
-        <SecondaryTabsItem
-            disabled={selectedTab === BillingPlan.SCALE}
-            on:click={() => (selectedTab = BillingPlan.SCALE)}>
-            {tierScale.name}
-        </SecondaryTabsItem>
-    </SecondaryTabs>
+    <div class="comparison-box">
+        <SecondaryTabs stretch>
+            <SecondaryTabsItem
+                disabled={selectedTab === BillingPlan.FREE}
+                on:click={() => (selectedTab = BillingPlan.FREE)}>
+                {tierFree.name}
+            </SecondaryTabsItem>
+            <SecondaryTabsItem
+                disabled={selectedTab === BillingPlan.PRO}
+                on:click={() => (selectedTab = BillingPlan.PRO)}>
+                {tierPro.name}
+            </SecondaryTabsItem>
+            <SecondaryTabsItem
+                disabled={selectedTab === BillingPlan.SCALE}
+                on:click={() => (selectedTab = BillingPlan.SCALE)}>
+                {tierScale.name}
+            </SecondaryTabsItem>
+        </SecondaryTabs>
+    </div>
 
     <div class="u-margin-block-start-24">
         {#if selectedTab === BillingPlan.FREE}
@@ -115,3 +117,22 @@
         {/if}
     </div>
 </Card>
+
+<style lang="scss">
+    .comparison-box {
+        border-radius: var(--border-radius-small);
+        background: hsl(var(--color-neutral-5));
+    }
+    :global(.theme-dark) .comparison-box {
+        background: hsl(var(--color-neutral-85));
+    }
+
+    .comparison-box :global(.secondary-tabs-button:where(:disabled)) {
+        background: hsl(var(--color-neutral-0));
+        border: 1px solid hsl(var(--color-neutral-10));
+    }
+    :global(.theme-dark) .comparison-box :global(.secondary-tabs-button:where(:disabled)) {
+        background: hsl(var(--color-neutral-80));
+        border: 1px solid hsl(var(--color-neutral-85));
+    }
+</style>

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

@@ -290,9 +290,12 @@
                         <svelte:fragment slot="title">
                             Your monthly payments will be adjusted for the Pro plan
                         </svelte:fragment>
-                        After switching plans, you will be charged {formatCurrency(
-                            members * ($plansInfo?.get(billingPlan)?.addons?.member?.price ?? 0)
-                        )} monthly for {members} team members. This will be reflected in your next invoice.
+                        After switching plans,
+                        <b
+                            >you will be charged {formatCurrency(
+                                members * ($plansInfo?.get(billingPlan)?.addons?.member?.price ?? 0)
+                            )} monthly for {members} team members.</b> This will be reflected in your
+                        next invoice.
                     </Alert>
                 {/if}
             {/if}
@@ -337,12 +340,13 @@
             {/if}
         </Form>
         <svelte:fragment slot="aside">
-            {#if billingPlan !== BillingPlan.FREE && $organization.billingPlan !== BillingPlan.PRO}
+            {#if billingPlan !== BillingPlan.FREE && $organization.billingPlan !== billingPlan}
                 <EstimatedTotalBox
                     {billingPlan}
                     {collaborators}
                     bind:couponData
-                    bind:billingBudget />
+                    bind:billingBudget
+                    {isDowngrade} />
             {:else}
                 <PlanComparisonBox downgrade={isDowngrade} />
             {/if}

src/routes/console/organization-[organization]/createMember.svelte

@@ -59,14 +59,12 @@
 
 <Modal title="Invite member" {error} size="big" bind:show={showCreate} onSubmit={create}>
     {#if isCloud}
-        <Alert type="info">
-            {#if $organization?.billingPlan === BillingPlan.SCALE}
-                You can add unlimited organization members on the {plan.name} plan.
-            {:else if $organization?.billingPlan === BillingPlan.PRO}
+        {#if $organization?.billingPlan === BillingPlan.PRO}
+            <Alert type="info">
                 You can add unlimited organization members on the {plan.name} plan for
                 <b>{formatCurrency(plan.addons.member.price)} each per billing period</b>.
-            {/if}
-        </Alert>
+            </Alert>
+        {/if}
     {/if}
     <FormList>
         <InputEmail