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:
parent
f445e60a1b
commit
42b4af8fa5
1 changed files with 12 additions and 8 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue