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

feat: enhance UI consistency and improve spacing across components

Browse Source 
- Added styles for player-side toast notifications to improve user feedback.
- Adjusted padding and spacing in various components for a more cohesive layout.
- Updated card and dialog components to streamline visual hierarchy and enhance readability.
- Refactored player panel and navigation elements for better alignment and user experience.
This commit is contained in:
kang
2026-05-21 17:28:06 +08:00
parent 496ed10981
commit 0cd85ae287
33 changed files with 253 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/features/wallet/transfer-in-screen.tsx
View File

@@ -48,7 +48,7 @@ export function TransferInScreen() {
if (loading && !balance) {
return (
<div className="space-y-4">
<div className="space-y-3">
<Skeleton className="h-8 w-40" />
<Skeleton className="h-48 w-full rounded-xl" />
</div>

2
src/features/wallet/transfer-out-screen.tsx
View File

@@ -48,7 +48,7 @@ export function TransferOutScreen() {
if (loading && !balance) {
return (
<div className="space-y-4">
<div className="space-y-3">
<Skeleton className="h-8 w-40" />
<Skeleton className="h-48 w-full rounded-xl" />
</div>

2
src/features/wallet/wallet-logs-block.tsx
View File

@@ -188,7 +188,7 @@ export function LogRow({
: "border-blue-200 bg-blue-50 text-blue-700";
return (
<li className="rounded-2xl border border-[#e1eaf6] bg-white px-4 py-3.5 text-sm shadow-[0_10px_28px_rgba(15,23,42,0.06)]">
<li className="rounded-2xl border border-[#e1eaf6] bg-white px-3 py-3 text-sm shadow-[0_10px_28px_rgba(15,23,42,0.06)]">
<div className="flex items-start justify-between gap-3">
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">

6
src/features/wallet/wallet-logs-screen.tsx
View File

@@ -98,14 +98,12 @@ export function WalletLogsScreen() {
return (
<PlayerPanel
title={t("wallet.logsTitle")}
subtitle={t("wallet.logsSubtitle")}
eyebrow={t("brand.name")}
backHref="/wallet"
backLabel={t("wallet.title")}
>
<div className="space-y-4">
<div className="space-y-3">
{error ? (
<div className="rounded-xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700">
<div className="rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
<p>{error}</p>
<Button
type="button"

8
src/features/wallet/wallet-screen.tsx
View File

@@ -140,10 +140,10 @@ export function WalletScreen() {
}, [hasMore, loadMore, loading, loadingMore, logsLoading]);
return (
<PlayerPanel title={t("wallet.title")} subtitle={t("wallet.subtitle")} eyebrow={t("brand.name")}>
<div className="space-y-4">
<PlayerPanel title={t("wallet.title")}>
<div className="space-y-3">
{error ? (
<div className="rounded-xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700">
<div className="rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
<p>{error}</p>
<Button
type="button"
@@ -155,7 +155,7 @@ export function WalletScreen() {
</div>
) : null}
<section className="relative overflow-hidden rounded-xl bg-[#e5002c] px-4 py-5 text-white shadow-[0_10px_28px_rgba(229,0,44,0.25)]">
<section className="relative overflow-hidden rounded-xl bg-[#e5002c] px-3 py-4 text-white shadow-[0_10px_28px_rgba(229,0,44,0.25)]">
<Image
src="/entry/image5.png"
alt=""

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

@@ -59,13 +59,13 @@ export function TransferInDialog({
{resolvedTriggerLabel}
</Button>
<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">
<DialogHeader className="space-y-1.5 border-b border-border px-4 py-3 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 py-4">
<div className="px-4 py-3">
<TransferInPanel
variant="dialog"
currency={currency}
@@ -117,13 +117,13 @@ export function TransferOutDialog({
{resolvedTriggerLabel}
</Button>
<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">
<DialogHeader className="space-y-1.5 border-b border-border px-4 py-3 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 py-4">
<div className="px-4 py-3">
<TransferOutPanel
variant="dialog"
currency={currency}

15
src/features/wallet/wallet-transfer-forms.tsx
View File

@@ -24,6 +24,7 @@ import {
parseDecimalInputToMinor,
} from "@/lib/money";
import { useCurrencyCatalog } from "@/hooks/use-currency-catalog";
import { randomIdempotentKey } from "@/lib/utils";
import { formatWalletClientError } from "@/lib/wallet-api-error";
import { LotteryApiBizError } from "@/types/api/errors";
@@ -57,7 +58,7 @@ type PanelVariant = "dialog" | "page";
function TransferInfoBlock({ children }: { children: ReactNode }) {
return (
<div className="rounded-lg border border-border bg-muted/40 px-4 py-3 text-sm leading-relaxed">
<div className="rounded-lg border border-border bg-muted/40 px-3 py-2.5 text-sm leading-relaxed">
{children}
</div>
);
@@ -160,7 +161,7 @@ export function TransferInPanel({
await postWalletTransferIn({
amount: parsedMinor,
currency,
idempotent_key: crypto.randomUUID(),
idempotent_key: randomIdempotentKey(),
});
toast.success(t("wallet.successIn"));
setAmountText("");
@@ -205,7 +206,7 @@ export function TransferInPanel({
return (
<>
<div className="grid gap-4">
<div className="grid gap-3">
<TransferInfoBlock>
<p className="text-muted-foreground">
{t("wallet.mainBalance")}{" "}
@@ -292,7 +293,7 @@ export function TransferOutPanel({
await postWalletTransferOut({
amount: parsedMinor,
currency,
idempotent_key: crypto.randomUUID(),
idempotent_key: randomIdempotentKey(),
});
toast.success(t("wallet.successOut"));
setAmountText("");
@@ -337,7 +338,7 @@ export function TransferOutPanel({
return (
<>
<div className="grid gap-4">
<div className="grid gap-3">
<TransferInfoBlock>
<p className="text-muted-foreground">
{t("wallet.lotteryAvailable")}{" "}
@@ -395,8 +396,6 @@ export function TransferInPage({
return (
<PlayerPanel
title={t("wallet.transferInTitle")}
subtitle={t("wallet.transferInSubtitle", { currency })}
eyebrow={t("wallet.title")}
backHref="/wallet"
backLabel={t("wallet.title")}
>
@@ -431,8 +430,6 @@ export function TransferOutPage({
return (
<PlayerPanel
title={t("wallet.transferOutTitle")}
subtitle={t("wallet.transferOutSubtitle", { currency })}
eyebrow={t("wallet.title")}
backHref="/wallet"
backLabel={t("wallet.title")}
>