From 59b47a4f1836f5b4a5626657e1f9e37ad261ef50 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 11 Mar 2025 17:21:10 +0000
Subject: [PATCH] Update UI for billing page

---
 src/components/Billing/BillingPage.tsx | 8 ++++----
 src/pages/account/billing.astro        | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Billing/BillingPage.tsx b/src/components/Billing/BillingPage.tsx
index 3cf5208f9..360372db2 100644
--- a/src/components/Billing/BillingPage.tsx
+++ b/src/components/Billing/BillingPage.tsx
@@ -133,11 +133,11 @@ export function BillingPage() {
               Current Subscription
             </h2>
 
-            <p className="mb-6 text-sm text-gray-500">
+            <p className="text-sm text-gray-500">
               Thank you for being a pro member. Your plan details are below.
             </p>
 
-            <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
+            <div className="mt-8 flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
               <div className="flex items-center gap-4">
                 <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
                   <RefreshCw className="size-5 text-gray-600" />
@@ -173,10 +173,10 @@ export function BillingPage() {
                 </div>
               </div>
 
-              <div className="mt-8 flex max-sm:flex-col gap-3">
+              <div className="mt-8 flex gap-3 max-sm:flex-col">
                 {!shouldHideDeleteButton && (
                   <button
-                    className="inline-flex max-sm:flex-grow items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
+                    className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 max-sm:flex-grow"
                     onClick={() => {
                       setShowUpgradeModal(true);
                     }}
diff --git a/src/pages/account/billing.astro b/src/pages/account/billing.astro
index b3350bb66..1ef9f5237 100644
--- a/src/pages/account/billing.astro
+++ b/src/pages/account/billing.astro
@@ -8,7 +8,7 @@ import { BillingPage } from '../../components/Billing/BillingPage';
   title='Billing'
   description=''
   noIndex={true}
-  initialLoadingMessage={'Loading billing information'}
+  initialLoadingMessage={'Loading billing details'}
 >
   <AccountSidebar activePageId='billing' activePageTitle='Billing'>
     <BillingPage client:load />