From 42b4af8fa5aa353df302765f4982c4003971b429 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 14 Sep 2025 23:59:02 +0200
Subject: [PATCH] Enhance WalletPage layout and button styles for improved user
 experience

- Updated the WalletPage layout to better accommodate different screen sizes, enhancing responsiveness.
- Increased font size for balance display and adjusted button sizes for consistency.
- Improved button icon sizes for better visibility and usability.

These changes contribute to a more user-friendly interface on the WalletPage, making it easier to interact with wallet functionalities.
---
 src/modules/wallet/views/WalletPage.vue | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/modules/wallet/views/WalletPage.vue b/src/modules/wallet/views/WalletPage.vue
index 00d1720..b72f6a6 100644
--- a/src/modules/wallet/views/WalletPage.vue
+++ b/src/modules/wallet/views/WalletPage.vue
@@ -118,26 +118,30 @@ onMounted(() => {
         <CardDescription>Available across all your wallets</CardDescription>
       </CardHeader>
       <CardContent>
-        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
-          <div class="text-3xl font-bold">
-            <CurrencyDisplay :balance-msat="totalBalance" />
+        <div class="flex flex-col gap-6">
+          <!-- Balance Section -->
+          <div class="text-center sm:text-left">
+            <div class="text-4xl sm:text-3xl font-bold">
+              {{ Math.floor(totalBalance / 1000).toLocaleString() }} <span class="text-2xl sm:text-xl text-muted-foreground font-normal">sats</span>
+            </div>
           </div>
 
-          <div class="flex gap-2 w-full sm:w-auto">
+          <!-- Action Buttons -->
+          <div class="flex gap-3 w-full sm:w-auto">
             <Button
               variant="default"
               @click="showReceiveDialog = true"
-              class="gap-2 flex-1 sm:flex-none"
+              class="gap-2 flex-1 sm:flex-none h-12 text-base"
             >
-              <QrCode class="h-4 w-4" />
+              <QrCode class="h-5 w-5" />
               Receive
             </Button>
             <Button
               variant="outline"
               @click="showSendDialog = true"
-              class="gap-2 flex-1 sm:flex-none"
+              class="gap-2 flex-1 sm:flex-none h-12 text-base"
             >
-              <Send class="h-4 w-4" />
+              <Send class="h-5 w-5" />
               Send
             </Button>
           </div>