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

14
src/features/hall/hall-bet-result-dialog.tsx
View File

@@ -42,7 +42,7 @@ export function HallBetResultDialog({
showCloseButton={false}
className="flex max-h-[calc(100dvh-24px)] flex-col gap-0 overflow-hidden rounded-2xl border-[#e4ebf6] bg-white p-0 shadow-[0_18px_60px_rgba(15,23,42,0.18)] ring-[#e8eef7] sm:max-h-[min(92vh,760px)] sm:max-w-lg"
>
<div className="relative shrink-0 px-4 pb-3 pt-7 text-center sm:px-5">
<div className="relative shrink-0 px-3 pb-2.5 pt-5 text-center sm:px-4">
<button
type="button"
onClick={() => onOpenChange(false)}
@@ -54,7 +54,7 @@ export function HallBetResultDialog({
<div className="mx-auto flex size-16 items-center justify-center rounded-full border-4 border-emerald-100 bg-white text-emerald-600 shadow-[0_10px_24px_rgba(22,163,74,0.12)]">
<CheckCircle2 className="size-11" strokeWidth={2.5} />
</div>
<DialogHeader className="mt-4 items-center gap-2">
<DialogHeader className="mt-3 items-center gap-2">
<DialogTitle className="text-2xl font-black text-slate-950">
{t("hall.result.title")}
</DialogTitle>
@@ -68,9 +68,9 @@ export function HallBetResultDialog({
</div>
<div
className="min-h-0 flex-1 overflow-y-auto border-y border-[#e8eef7] px-4 sm:px-5"
className="min-h-0 flex-1 overflow-y-auto border-y border-[#e8eef7] px-3 sm:px-4"
>
<div className="space-y-4 py-4">
<div className="space-y-3 py-3">
{!data ? (
<p className="text-sm text-slate-500">
{t("hall.result.empty")}
@@ -92,7 +92,7 @@ export function HallBetResultDialog({
</div>
</div>
<div className="flex items-center justify-between gap-3 rounded-lg border border-[#dbe7ff] bg-[#f4f8ff] px-4 py-3">
<div className="flex items-center justify-between gap-3 rounded-lg border border-[#dbe7ff] bg-[#f4f8ff] px-3 py-2.5">
<div className="flex min-w-0 items-center gap-3">
<span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-[#0755c7] text-white">
<ClipboardList className="size-5" />
@@ -106,7 +106,7 @@ export function HallBetResultDialog({
</span>
</div>
<div className="grid gap-2 rounded-lg border border-[#e8eef7] bg-white px-4 py-3 text-xs text-slate-600 sm:grid-cols-2">
<div className="grid gap-2 rounded-lg border border-[#e8eef7] bg-white px-3 py-2.5 text-xs text-slate-600 sm:grid-cols-2">
<p>
{t("hall.result.orderNo")}:{" "}
<span className="font-mono font-black text-[#0b3f96]">{data.order_no}</span>
@@ -198,7 +198,7 @@ export function HallBetResultDialog({
</div>
</div>
<div className="grid shrink-0 grid-cols-2 gap-3 border-t border-[#e8eef7] bg-white p-4 pb-[calc(1rem+env(safe-area-inset-bottom))] sm:p-5">
<div className="grid shrink-0 grid-cols-2 gap-2.5 border-t border-[#e8eef7] bg-white p-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] sm:p-4">
<Button
type="button"
variant="outline"