xiaokang/lotteryFront
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: enhance wallet transfer dialogs and forms

Browse Source 
- Removed unused trigger styles and refactored button variants for improved consistency.
- Introduced new components for transfer information, previews, and error handling to streamline the UI.
- Updated layout and styling for better user experience in transfer dialogs and forms.
This commit is contained in:
kang
2026-05-21 16:33:32 +08:00
parent 6b18e25766
commit 496ed10981
2 changed files with 138 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/features/wallet/wallet-transfer-dialogs.tsx
View File

@@ -25,15 +25,6 @@ type BaseProps = {
idPrefix?: string;
};
const defaultInTrigger =
"!bg-[#0b3f96] !text-white shadow-[0_8px_18px_rgba(11,63,150,0.18)] hover:!bg-[#08357f]";
const defaultOutTrigger = "flex-1";
const hallInTrigger =
"rounded-2xl border border-[#d7e5fb] !bg-[#0b3f96] !text-white shadow-[0_10px_24px_rgba(11,63,150,0.22)] hover:!bg-[#08357f]";
const hallOutTrigger =
"rounded-2xl border border-[#ffc7d2] !bg-white !text-[#e5002c] shadow-[0_8px_22px_rgba(216,20,53,0.08)] hover:!bg-[#fff5f7]";
export function TransferInDialog({
currency,
lotteryMinor,
@@ -52,31 +43,29 @@ export function TransferInDialog({
const { t } = useTranslation("player");
const resolvedTriggerLabel = triggerLabel ?? t("wallet.transferIn");
const triggerCombined = cn(
"inline-flex h-10 min-h-10 w-full min-w-0 flex-1 items-center justify-center gap-1.5 px-3 text-sm font-medium",
triggerVariant === "hall" ? hallInTrigger : defaultInTrigger,
triggerClassName,
);
return (
<Dialog open={open} onOpenChange={setOpen}>
<Button
type="button"
variant="ghost"
className={triggerCombined}
variant="default"
className={cn(
"inline-flex h-10 min-h-10 w-full min-w-0 flex-1 items-center justify-center gap-1.5 px-3 text-sm font-medium",
triggerVariant === "hall" && "bg-[#07459f] text-white hover:bg-[#063b88]",
triggerClassName,
)}
onClick={() => setOpen(true)}
>
<ArrowDownLeft className="size-4 shrink-0" />
{resolvedTriggerLabel}
</Button>
<DialogContent showCloseButton className="overflow-hidden rounded-[28px] border border-[#dbe7fb] bg-white p-0 shadow-[0_24px_70px_rgba(11,63,150,0.18)] sm:max-w-[430px] [&_[data-slot=dialog-close]]:right-3 [&_[data-slot=dialog-close]]:top-3 [&_[data-slot=dialog-close]]:text-white [&_[data-slot=dialog-close]]:hover:bg-white/15 [&_[data-slot=dialog-close]]:hover:text-white">
<DialogHeader className="bg-gradient-to-br from-[#0b3f96] via-[#1456bd] to-[#e5002c] px-5 pb-5 pt-6 text-white">
<DialogTitle className="text-xl font-black text-white">{t("wallet.transferInTitle")}</DialogTitle>
<DialogDescription className="text-sm leading-6 text-white/85">
<DialogContent showCloseButton className="gap-0 overflow-hidden p-0 sm:max-w-md">
<DialogHeader className="space-y-1.5 border-b border-border px-5 py-4 text-left">
<DialogTitle className="text-lg font-semibold">{t("wallet.transferInTitle")}</DialogTitle>
<DialogDescription className="text-sm leading-relaxed">
{t("wallet.dialogInDescription", { currency })}
</DialogDescription>
</DialogHeader>
<div className="px-5 pb-5 pt-4">
<div className="px-5 py-4">
<TransferInPanel
variant="dialog"
currency={currency}
@@ -112,36 +101,29 @@ export function TransferOutDialog({
const { t } = useTranslation("player");
const resolvedTriggerLabel = triggerLabel ?? t("wallet.transferOut");
const triggerCombined = cn(
"inline-flex h-10 min-h-10 w-full min-w-0 flex-1 items-center justify-center gap-1.5 px-3 text-sm font-medium",
triggerVariant === "hall"
? hallOutTrigger
: cn(
"!border-2 !border-input !bg-secondary !text-secondary-foreground hover:!bg-secondary/80",
defaultOutTrigger,
),
triggerClassName,
);
return (
<Dialog open={open} onOpenChange={setOpen}>
<Button
type="button"
variant="ghost"
className={triggerCombined}
variant="outline"
className={cn(
"inline-flex h-10 min-h-10 w-full min-w-0 flex-1 items-center justify-center gap-1.5 px-3 text-sm font-medium",
triggerVariant === "hall" && "border-border bg-card hover:bg-muted",
triggerClassName,
)}
onClick={() => setOpen(true)}
>
<ArrowUpRight className="size-4 shrink-0" />
{resolvedTriggerLabel}
</Button>
<DialogContent showCloseButton className="overflow-hidden rounded-[28px] border border-[#ffd7df] bg-white p-0 shadow-[0_24px_70px_rgba(216,20,53,0.16)] sm:max-w-[430px] [&_[data-slot=dialog-close]]:right-3 [&_[data-slot=dialog-close]]:top-3 [&_[data-slot=dialog-close]]:text-white [&_[data-slot=dialog-close]]:hover:bg-white/15 [&_[data-slot=dialog-close]]:hover:text-white">
<DialogHeader className="bg-gradient-to-br from-[#e5002c] via-[#d81435] to-[#0b3f96] px-5 pb-5 pt-6 text-white">
<DialogTitle className="text-xl font-black text-white">{t("wallet.transferOutTitle")}</DialogTitle>
<DialogDescription className="text-sm leading-6 text-white/85">
<DialogContent showCloseButton className="gap-0 overflow-hidden p-0 sm:max-w-md">
<DialogHeader className="space-y-1.5 border-b border-border px-5 py-4 text-left">
<DialogTitle className="text-lg font-semibold">{t("wallet.transferOutTitle")}</DialogTitle>
<DialogDescription className="text-sm leading-relaxed">
{t("wallet.dialogOutDescription")}
</DialogDescription>
</DialogHeader>
<div className="px-5 pb-5 pt-4">
<div className="px-5 py-4">
<TransferOutPanel
variant="dialog"
currency={currency}