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.
This commit is contained in:
padreug 2025-09-14 23:59:02 +02:00
parent f445e60a1b
commit 42b4af8fa5

View file

@ -118,26 +118,30 @@ onMounted(() => {
<CardDescription>Available across all your wallets</CardDescription> <CardDescription>Available across all your wallets</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"> <div class="flex flex-col gap-6">
<div class="text-3xl font-bold"> <!-- Balance Section -->
<CurrencyDisplay :balance-msat="totalBalance" /> <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>
<div class="flex gap-2 w-full sm:w-auto"> <!-- Action Buttons -->
<div class="flex gap-3 w-full sm:w-auto">
<Button <Button
variant="default" variant="default"
@click="showReceiveDialog = true" @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 Receive
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
@click="showSendDialog = true" @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 Send
</Button> </Button>
</div> </div>