mirror of
https://github.com/getAlby/hub.git
synced 2026-08-13 12:33:39 +02:00
feat(frontend): improve wallet balance section layout (#2199)
* feat(frontend): improve wallet page balance layout Center the wallet balance area and tune spacing for a cleaner visual rhythm. Move secondary actions to the header as ghost buttons and use a vertical more icon. Made-with: Cursor * fix: no important modifiers * fix: remove important modifiers * fix: use ghost for both occurrences * fix: screenreader * fix: center fiat amount skeleton on wallet page Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: René Aaron <rene@twentyuno.net> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
saunter
GitHub
parent
a7a0d891a4
commit
ac88c8d573
3 changed files with 29 additions and 43 deletions
|
|
@ -174,6 +174,7 @@ Code under `frontend/platform_specific/http/` and `frontend/platform_specific/wa
|
|||
- **Use shadcn/ui components** for all UI — do not create custom components unless no shadcn equivalent exists.
|
||||
- **Do not modify core shadcn/ui components** — customize behavior by composing or wrapping them, not by editing the source files directly.
|
||||
- **Prefer Tailwind utility classes** over custom `px` definitions or inline styles. Use Tailwind's spacing, sizing, and layout utilities instead of hardcoded pixel values.
|
||||
- **Never use `!important` Tailwind modifiers** (e.g., `!px-12`, `!text-sm`). If a component's default styles need overriding, use a proper variant, compose with a wrapper, or extend the component — don't force specificity with `!`.
|
||||
- **Use the theme system** for colors, border-radius, shadows, and other design tokens. Reference CSS variables / Tailwind theme tokens (e.g., `bg-primary`, `rounded-lg`, `shadow-sm`) rather than hardcoding hex values or arbitrary values. See `frontend/src/index.css` for available theme variables.
|
||||
- **Keep layouts flat** — avoid nesting cards inside cards or wrapping elements in unnecessary bordered containers. Prefer clear, flat visual hierarchy.
|
||||
- **Match existing spacing patterns** — before adding new components, check sibling components for consistent padding, margins, and gaps. Ensure sibling elements have equal dimensions where appropriate.
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { DownloadIcon, MoreHorizontalIcon } from "lucide-react";
|
||||
import { DownloadIcon, EllipsisVerticalIcon } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "src/components/ui/button";
|
||||
import {
|
||||
|
|
@ -93,9 +93,9 @@ export const TransactionsListMenu = ({ appId }: { appId?: number }) => {
|
|||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<Button asChild size="icon" variant="secondary">
|
||||
<Button asChild size="icon" variant="ghost">
|
||||
<DropdownMenuTrigger>
|
||||
<MoreHorizontalIcon className="h-4 w-4" />
|
||||
<EllipsisVerticalIcon className="h-4 w-4" />
|
||||
</DropdownMenuTrigger>
|
||||
</Button>
|
||||
<DropdownMenuContent align="end">
|
||||
|
|
|
|||
|
|
@ -44,24 +44,25 @@ function Wallet() {
|
|||
pageTitle="Wallet"
|
||||
description=""
|
||||
contentRight={
|
||||
<>
|
||||
<LinkButton
|
||||
to="/wallet/receive"
|
||||
size="lg"
|
||||
className="hidden xl:inline-flex !px-12"
|
||||
<div className="flex items-center gap-1 sm:gap-2">
|
||||
<ExternalLinkButton
|
||||
to="https://www.getalby.com/topup"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
>
|
||||
<ArrowDownIcon />
|
||||
Receive
|
||||
</LinkButton>
|
||||
<LinkButton
|
||||
to="/wallet/send"
|
||||
size="lg"
|
||||
className="hidden xl:inline-flex !px-12"
|
||||
>
|
||||
<ArrowUpIcon />
|
||||
Send
|
||||
</LinkButton>
|
||||
</>
|
||||
<CreditCardIcon />
|
||||
<span className="sr-only sm:not-sr-only sm:inline">
|
||||
Buy Bitcoin
|
||||
</span>
|
||||
</ExternalLinkButton>
|
||||
{hasChannelManagement && (
|
||||
<LinkButton to="/wallet/swap" variant="ghost" size="sm">
|
||||
<ArrowDownUpIcon />
|
||||
<span className="sr-only sm:not-sr-only sm:inline">Swap</span>
|
||||
</LinkButton>
|
||||
)}
|
||||
<TransactionsListMenu />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
{hasChannelManagement &&
|
||||
|
|
@ -101,44 +102,28 @@ function Wallet() {
|
|||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<div className="flex flex-col xl:flex-row justify-between xl:items-start gap-3">
|
||||
<div className="flex flex-col gap-1 p-6 xl:p-0 text-center xl:text-left">
|
||||
<div className="text-5xl font-medium balance sensitive slashed-zero">
|
||||
<div className="flex flex-col items-center gap-8 py-10 md:py-14 text-center">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="text-5xl md:text-6xl font-medium balance sensitive slashed-zero">
|
||||
<FormattedBitcoinAmount
|
||||
amount={balances.lightning.totalSpendable}
|
||||
/>
|
||||
</div>
|
||||
<FormattedFiatAmount
|
||||
className="text-xl"
|
||||
className="text-xl md:text-2xl"
|
||||
amount={balances.lightning.totalSpendable / 1000}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 items-center gap-3 xl:hidden">
|
||||
<div className="grid w-full max-w-md grid-cols-2 items-center gap-3">
|
||||
<LinkButton to="/wallet/receive" size="lg">
|
||||
<ArrowDownIcon />
|
||||
Receive
|
||||
</LinkButton>
|
||||
<LinkButton to="/wallet/send" size="lg">
|
||||
<ArrowUpIcon />
|
||||
Send
|
||||
</LinkButton>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<ExternalLinkButton
|
||||
to="https://www.getalby.com/topup"
|
||||
variant="secondary"
|
||||
>
|
||||
<CreditCardIcon />
|
||||
Buy Bitcoin
|
||||
</ExternalLinkButton>
|
||||
{hasChannelManagement && (
|
||||
<LinkButton to="/wallet/swap" variant="secondary">
|
||||
<ArrowDownUpIcon />
|
||||
Swap
|
||||
</LinkButton>
|
||||
)}
|
||||
<div>
|
||||
<TransactionsListMenu />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<OnchainTransactionsAlert />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue