updates: copy, misc.

src/lib/components/billing/usageRates.svelte

@@ -67,7 +67,7 @@
             following rates. Next billing period: {toLocaleDate(nextDate)}.
         </p>
     {/if}
-    <Table noStyles>
+    <Table noStyles noMargin>
         <TableHeader>
             <TableCellHead>Resource</TableCellHead>
             <TableCellHead>Limit</TableCellHead>

src/routes/(console)/organization-[organization]/billing/availableCredit.svelte

@@ -91,7 +91,7 @@
 
 <CardGrid hideFooter={$organization?.billingPlan !== BillingPlan.FREE}>
     <Heading tag="h2" size="6">
-        {$organization?.billingPlan === BillingPlan.FREE ? 'Credit' : 'Available credit'}
+        {$organization?.billingPlan === BillingPlan.FREE ? 'Credits' : 'Available credit'}
     </Heading>
 
     <p class="text">Appwrite credit will automatically be applied to your next invoice.</p>

src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte

@@ -82,8 +82,13 @@
         <Heading tag="h2" size="6">Budget alerts</Heading>
 
         <p class="text">
-            Get notified by email when your organization reaches or exceeds a percent of your
-            specified budget cap. You can set a maximum of 3 alerts.
+            {#if $organization?.billingPlan === BillingPlan.FREE}
+                Get notified by email when your organization meets a percentage of your budget cap. <b
+                    >Free organizations will receive one notification at 75% resource usage.</b>
+            {:else}
+                Get notified by email when your organization meets or exceeds a percentage of your
+                specified billing alert(s).
+            {/if}
         </p>
         <svelte:fragment slot="aside">
             {#if $organization?.billingPlan === BillingPlan.FREE}
@@ -101,6 +106,11 @@
                 </Alert>
             {:else}
                 <FormList>
+                    <!-- TODO: confirm copy, design mentions only Pro plan -->
+                    <Alert type="info">
+                        You can set a maximum of 4 billing alerts per organization.
+                    </Alert>
+
                     <div class="u-flex u-gap-16">
                         <InputSelectSearch
                             label="Percentage (%) of budget cap"

src/routes/(console)/organization-[organization]/billing/planSummary.svelte

@@ -34,7 +34,8 @@
         <Heading tag="h2" size="6">Payment estimates</Heading>
 
         <p class="text">
-            A breakdown of your estimated upcoming payment for the current billing period.
+            A breakdown of your estimated upcoming payment for the current billing period. Totals
+            displayed exclude accumulated credits and applicable taxes.
         </p>
         <svelte:fragment slot="aside">
             <p class="text u-bold">
@@ -196,11 +197,14 @@
         </svelte:fragment>
         <svelte:fragment slot="actions">
             {#if $organization?.billingPlan === BillingPlan.FREE}
-                <div class="u-flex u-gap-16 u-flex-wrap">
-                    <Button text href={`${base}/organization-${$organization?.$id}/usage`}>
+                <!-- TODO: make center on mobile and have different styles. -->
+                <div
+                    class="u-flex u-flex-vertical-mobile u-cross-center u-gap-16 u-flex-wrap u-width-full-line">
+                    <Button secondary href={`${base}/organization-${$organization?.$id}/usage`}>
                         View estimated usage
                     </Button>
                     <Button
+                        text
                         disabled={$organization?.markedForDeletion}
                         href={$upgradeURL}
                         on:click={() =>