feat: enhance UI consistency and improve spacing across components

- 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.
2026-05-21 17:28:06 +08:00
parent 496ed10981
commit 0cd85ae287
33 changed files with 253 additions and 190 deletions
--- a/src/features/hall/hall-bet-preview-dialog.tsx
+++ b/src/features/hall/hall-bet-preview-dialog.tsx
@@ -4,6 +4,7 @@ import {
  AlertTriangleIcon,
  CheckCircle2,
  LoaderCircle,
+  Lock,
  WalletCards,
  XIcon,
 } from "lucide-react";
@@ -137,7 +138,7 @@ export function HallBetPreviewDialog({
        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-5 sm:px-5">
+        <div className="relative shrink-0 px-3 pb-2.5 pt-4 sm:px-4">
          <button
            type="button"
            onClick={() => onOpenChange(false)}
@@ -172,9 +173,9 @@ export function HallBetPreviewDialog({
        </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.preview.empty")}</p>
            ) : (
@@ -291,7 +292,7 @@ export function HallBetPreviewDialog({
          </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"
@@ -305,8 +306,9 @@ export function HallBetPreviewDialog({
            type="button"
            onClick={onConfirmPlace}
            disabled={!data || placing || !allowSubmit}
-            className="h-12 rounded-lg border-0 bg-[#e5002c] text-base font-black text-white shadow-[0_10px_24px_rgba(229,0,44,0.28)] hover:bg-[#d10028] disabled:bg-slate-300 disabled:shadow-none"
+            className="h-12 gap-2 rounded-lg border-0 bg-[#e5002c] text-base font-black text-white shadow-[0_10px_24px_rgba(229,0,44,0.28)] hover:bg-[#d10028] disabled:bg-slate-500 disabled:opacity-100 disabled:shadow-none"
          >
+            {!allowSubmit && !placing ? <Lock className="size-5 shrink-0" aria-hidden /> : null}
            {placing
              ? t("hall.preview.submitting")
              : allowSubmit
--- a/src/features/hall/hall-bet-result-dialog.tsx
+++ b/src/features/hall/hall-bet-result-dialog.tsx
@@ -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"
--- a/src/features/hall/hall-betting-grid.tsx
+++ b/src/features/hall/hall-betting-grid.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { CirclePlus, Ticket, Trash2, Star } from "lucide-react";
+import { CirclePlus, Lock, Ticket, Trash2, Star } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -865,7 +865,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }

  if (catalogState.kind === "error") {
    return (
-      <section className="rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">
+      <section className="rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">
        <p>{catalogState.message}</p>
        <Button
          type="button"
@@ -886,7 +886,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }

  return (
    <>
-      <section className="space-y-4" aria-label={t("hall.aria")}>
+      <section className="space-y-3" aria-label={t("hall.aria")}>
        <div className="rounded-xl border border-[#e8eef7] bg-white p-1 shadow-[0_6px_18px_rgba(30,64,175,0.06)]">
          <div className="grid grid-cols-4 gap-1">
            {categoryTabs.map((tab) => {
@@ -920,7 +920,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
        </div>

        {jackpot?.enabled ? (
-          <div className="rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 via-white to-[#f8fbff] px-4 py-3">
+          <div className="rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 via-white to-[#f8fbff] px-3 py-2.5">
            <div className="flex flex-wrap items-center justify-between gap-2">
              <div>
                <p className="text-[11px] font-black uppercase tracking-normal text-amber-700">
@@ -946,7 +946,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
            <div className="mx-auto flex size-14 items-center justify-center rounded-full bg-slate-200 text-slate-600">
              <Ticket className="size-7" aria-hidden />
            </div>
-            <p className="mt-4 text-lg font-bold text-slate-900">
+            <p className="mt-3 text-lg font-bold text-slate-900">
              {t("hall.closed.title")}
            </p>
            <p className="mt-1 text-xs">{t("hall.closed.subtitle")}</p>
@@ -1236,7 +1236,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
              </button>
            </div>

-            <div className="flex items-center justify-between rounded-xl border border-[#e9eef7] bg-[#f8fbff] px-4 py-3 text-sm shadow-[0_6px_20px_rgba(15,23,42,0.04)]">
+            <div className="flex items-center justify-between rounded-xl border border-[#e9eef7] bg-[#f8fbff] px-3 py-2.5 text-sm shadow-[0_6px_20px_rgba(15,23,42,0.04)]">
              <span className="text-xs font-medium text-slate-500">
                {t("hall.table.draftTotal")}
              </span>
@@ -1255,9 +1255,18 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
              type="button"
              disabled={!canSubmit || previewLoading}
              onClick={() => void handlePreview()}
-              className="h-12 w-full rounded-xl border-0 bg-[#e5002c] text-base font-bold text-white shadow-[0_8px_20px_rgba(229,0,44,0.26)] hover:bg-[#d10028]"
+              className={cn(
+                "h-12 w-full gap-2 rounded-xl border-0 text-base font-bold text-white",
+                !isBettable
+                  ? "bg-slate-500 shadow-none hover:bg-slate-500 disabled:opacity-100"
+                  : "bg-[#e5002c] shadow-[0_8px_20px_rgba(229,0,44,0.26)] hover:bg-[#d10028]",
+              )}
            >
-              <Ticket className="size-5" aria-hidden />
+              {!isBettable ? (
+                <Lock className="size-5 shrink-0" aria-hidden />
+              ) : (
+                <Ticket className="size-5 shrink-0" aria-hidden />
+              )}
              {previewLoading
                ? t("hall.table.previewing")
                : !isBettable
--- a/src/features/hall/hall-draw-panel.tsx
+++ b/src/features/hall/hall-draw-panel.tsx
@@ -90,7 +90,7 @@ export function HallDrawPanel({ drawLive }: { drawLive: HallDrawLiveSnapshot })

  if (error) {
    return (
-      <section className="mb-4 rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
+      <section className="mb-3 rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
        <p>{t(error, { defaultValue: error })}</p>
        <Button
          type="button"
@@ -107,7 +107,7 @@ export function HallDrawPanel({ drawLive }: { drawLive: HallDrawLiveSnapshot })

  if (raw === undefined || display === undefined) {
    return (
-      <section className="mb-4 rounded-xl border border-[#e3ebf6] bg-white p-3 shadow-sm">
+      <section className="mb-3 rounded-xl border border-[#e3ebf6] bg-white p-3 shadow-sm">
        <div className="grid grid-cols-3 gap-2">
          <Skeleton className="h-14 rounded-lg" />
          <Skeleton className="h-14 rounded-lg" />
@@ -119,7 +119,7 @@ export function HallDrawPanel({ drawLive }: { drawLive: HallDrawLiveSnapshot })

  if (raw === null || display === null) {
    return (
-      <section className="mb-4 rounded-xl border border-[#e3ebf6] bg-white px-3 py-4 text-center text-sm text-slate-500 shadow-sm">
+      <section className="mb-3 rounded-xl border border-[#e3ebf6] bg-white px-3 py-3 text-center text-sm text-slate-500 shadow-sm">
        {t("draw.noIssue")}
      </section>
    );
@@ -130,7 +130,7 @@ export function HallDrawPanel({ drawLive }: { drawLive: HallDrawLiveSnapshot })
  return (
    <section
      className={cn(
-        "mb-4 overflow-hidden rounded-xl border border-[#e1e9f5] bg-white shadow-[0_6px_20px_rgba(15,23,42,0.06)]",
+        "mb-3 overflow-hidden rounded-xl border border-[#e1e9f5] bg-white shadow-[0_6px_20px_rgba(15,23,42,0.06)]",
        sealedUi && "border-red-200 bg-red-50/30",
      )}
      aria-label={t("draw.currentIssue")}
--- a/src/features/hall/hall-play-catalog-panel.tsx
+++ b/src/features/hall/hall-play-catalog-panel.tsx
@@ -142,7 +142,7 @@ export function HallPlayCatalogPanel() {
    );

    return (
-      <div className="space-y-6">
+      <div className="space-y-3">
        <p className="text-xs text-muted-foreground">
          {t("hall.playCatalog.meta", {
            currency: data.currency_code,
--- a/src/features/hall/hall-screen.tsx
+++ b/src/features/hall/hall-screen.tsx
@@ -12,6 +12,8 @@ import { HallWalletStrip } from "@/features/hall/hall-wallet-strip";
 import { JackpotBurstOverlay } from "@/features/hall/jackpot-burst-overlay";
 import { useHallDrawLive } from "@/features/hall/use-hall-draw-live";
 import { useJackpotBurstLive } from "@/features/hall/use-jackpot-burst-live";
+import { playerHeaderControl, playerPageInset } from "@/lib/player-spacing";
+import { cn } from "@/lib/utils";

 /**
 * 下注大厅：钱包条 §4 + 当期期号 §4.2（封盘置灰 / 倒计时错误色 / WS+轮询）；玩法目录 §12.3；下注表格 §13.3。
@@ -24,40 +26,49 @@ export function HallScreen() {

  return (
    <div className="mx-auto w-full max-w-[480px]">
-      <section className="overflow-hidden bg-white px-4 pb-8 pt-4 text-slate-900">
-        <div className="mb-2 flex items-center gap-1 px-1 pt-2">
+      <section className={cn("overflow-hidden bg-white text-slate-900", playerPageInset)}>
+        <header className="mb-2 flex min-h-9 items-center gap-2">
          <div className="flex min-w-0 flex-1 items-center">
-            <div className="inline-flex min-w-0 items-center">
-              <Image
-                src="/logo.png"
-                alt="Nlotto"
-                width={243}
-                height={84}
-                className="h-9 w-auto max-w-[min(100%,220px)] object-contain object-left"
-                priority
-              />
-            </div>
+            <Image
+              src="/logo.png"
+              alt="Nlotto"
+              width={243}
+              height={84}
+              className="h-8 w-auto max-w-[min(100%,200px)] object-contain object-left"
+              priority
+            />
          </div>
-          <LanguageSwitcher
-            variant="minimal"
-            showFlag={false}
-            className="shrink-0 rounded-full border border-[#e4eaf4] bg-[#f8fafc]"
-          />
-          <Link
-            href="/rules"
-            className="shrink-0 rounded-full border border-[#e4eaf4] bg-[#f8fafc] px-3 py-1.5 text-xs font-bold text-[#0b3f96] hover:bg-[#f1f6ff]"
-          >
-            {tp("nav.rules")}
-          </Link>
-          <button
-            type="button"
-            className="relative flex size-8 shrink-0 items-center justify-center rounded-full text-[#1d57b7] hover:bg-[#f4f7fb]"
-            aria-label={t("navigation.notifications")}
-          >
-            <Bell className="size-4" aria-hidden />
-            <span className="absolute right-1.5 top-1.5 size-2 rounded-full bg-[#ff143d]" />
-          </button>
-        </div>
+          <div className="flex shrink-0 items-center gap-1">
+            <LanguageSwitcher
+              variant="minimal"
+              showFlag={false}
+              className={cn(
+                playerHeaderControl,
+                "rounded-full border border-[#e4eaf4] bg-[#f8fafc] [&_button]:h-8 [&_button]:gap-1 [&_button]:px-2 [&_button]:py-0 [&_button]:text-xs",
+              )}
+            />
+            <Link
+              href="/rules"
+              className={cn(
+                playerHeaderControl,
+                "rounded-full border border-[#e4eaf4] bg-[#f8fafc] px-2.5 text-xs font-bold text-[#0b3f96] hover:bg-[#f1f6ff]",
+              )}
+            >
+              {tp("nav.rules")}
+            </Link>
+            <button
+              type="button"
+              className={cn(
+                playerHeaderControl,
+                "relative size-8 rounded-full text-[#1d57b7] hover:bg-[#f4f7fb]",
+              )}
+              aria-label={t("navigation.notifications")}
+            >
+              <Bell className="size-4" aria-hidden />
+              <span className="absolute right-1.5 top-1.5 size-1.5 rounded-full bg-[#ff143d]" />
+            </button>
+          </div>
+        </header>

        <HallDrawPanel drawLive={drawLive} />

--- a/src/features/hall/hall-wallet-strip.tsx
+++ b/src/features/hall/hall-wallet-strip.tsx
@@ -86,10 +86,10 @@ export function HallWalletStrip() {
  const availableMinor = Number(balance?.available_balance ?? 0);

  return (
-    <section className="mb-4 space-y-3" aria-label={t("wallet.balance")}>
+    <section className="mb-3 space-y-2.5" aria-label={t("wallet.balance")}>
      <div
        className={cn(
-          "relative overflow-hidden rounded-xl bg-[#e5002c] px-4 py-4 text-white shadow-[0_10px_28px_rgba(229,0,44,0.25)]",
+          "relative overflow-hidden rounded-xl bg-[#e5002c] px-3 py-3 text-white shadow-[0_10px_28px_rgba(229,0,44,0.25)]",
        )}
      >
        <Image
@@ -116,7 +116,7 @@ export function HallWalletStrip() {
        </div>
      </div>

-      <div className="grid grid-cols-2 gap-3">
+      <div className="grid grid-cols-2 gap-2.5">
        <TransferInDialog
          idPrefix="hall-"
          triggerVariant="hall"
--- a/src/features/hall/jackpot-burst-overlay.tsx
+++ b/src/features/hall/jackpot-burst-overlay.tsx
@@ -84,19 +84,19 @@ export function JackpotBurstOverlay({ event, onClose }: JackpotBurstOverlayProps
        </div>

        <div className="w-full space-y-2 text-left text-sm">
-          <div className="flex items-center justify-between gap-4 rounded-md bg-white/[0.05] px-3 py-2">
+          <div className="flex items-center justify-between gap-3 rounded-md bg-white/[0.05] px-3 py-2">
            <span className="text-slate-300">
              {t("hall.jackpotBurst.amount")}
            </span>
            <span className="text-right font-black text-[#f5c542]">{amount}</span>
          </div>
-          <div className="flex items-center justify-between gap-4 rounded-md bg-white/[0.05] px-3 py-2">
+          <div className="flex items-center justify-between gap-3 rounded-md bg-white/[0.05] px-3 py-2">
            <span className="text-slate-300">
              {t("hall.jackpotBurst.winners")}
            </span>
            <span className="font-bold">{event.winner_count}</span>
          </div>
-          <div className="flex items-center justify-between gap-4 rounded-md bg-white/[0.05] px-3 py-2">
+          <div className="flex items-center justify-between gap-3 rounded-md bg-white/[0.05] px-3 py-2">
            <span className="text-slate-300">
              {t("hall.jackpotBurst.triggerLabel")}
            </span>