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>
|
<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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue