kurihada/no-whatever
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: 全站统一暗色主题设计系统

Browse Source 
- globals.css 定义语义化 token (background/surface/elevated/border/muted/dim/accent)
- 所有页面和组件迁移至暗色 token，移除硬编码 bg-white/text-zinc-*/bg-gray-*
- RestaurantCard 和 MatchResult 适配暗色卡片风格
- 按钮颜色分层：系统CTA(accent)/模式强调(橙/紫)/危险(rose)/次级(surface)
- 修复 room 页深色文字在深背景不可见的可访问性问题
This commit is contained in:
kurihada
2026-02-26 11:27:18 +08:00
parent 7d51f5200d
commit e10e3c8230
13 changed files with 258 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/globals.css
+21 -2
View File
@@ -1,13 +1,27 @@
@import "tailwindcss";
:root {
--background: #f8f9fa;
--foreground: #171717;
--background: #030712;
--foreground: #f3f4f6;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-surface: #111827;
--color-elevated: #1f2937;
--color-inset: #0a0f1a;
--color-border: #1f2937;
--color-subtle: #374151;
--color-muted: #6b7280;
--color-dim: #4b5563;
--color-accent: #10b981;
--color-accent-hover: #059669;
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
@@ -39,3 +53,8 @@ body {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
src/app/invite/[id]/page.tsx
+31 -31
View File
@@ -62,7 +62,7 @@ export default function InvitePage() {
if (status === "loading") {
return (
<div className="flex min-h-dvh flex-col items-center justify-center bg-background">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-zinc-300 border-t-emerald-500" />
<div className="h-6 w-6 animate-spin rounded-full border-2 border-subtle border-t-accent" />
</div>
);
}
@@ -70,16 +70,16 @@ export default function InvitePage() {
if (status === "not_found") {
return (
<div className="flex min-h-dvh flex-col items-center justify-center gap-4 bg-background px-6">
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-zinc-100">
<Utensils size={28} className="text-zinc-400" />
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-surface ring-1 ring-border">
<Utensils size={28} className="text-muted" />
</div>
<h1 className="text-xl font-bold text-zinc-900">房间不存在</h1>
<p className="text-center text-sm text-zinc-500">
<h1 className="text-xl font-bold text-white">房间不存在</h1>
<p className="text-center text-sm text-muted">
这个房间已过期或不存在，请让朋友重新分享链接
</p>
<button
onClick={() => router.push("/")}
className="mt-2 rounded-xl bg-emerald-500 px-6 py-2.5 text-sm font-bold text-white shadow-md shadow-emerald-200 transition-colors hover:bg-emerald-600"
className="mt-2 rounded-xl bg-accent px-6 py-2.5 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
>
自己创建房间
</button>
@@ -88,44 +88,44 @@ export default function InvitePage() {
}
return (
<div className="flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-12">
<div className="flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-12 overflow-y-auto scrollbar-none">
<motion.div
className="flex flex-col items-center"
initial={{ y: -20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.5 }}
>
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-emerald-500 shadow-lg shadow-emerald-200">
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-accent shadow-lg shadow-accent/20">
{scene === "drink" ? <Coffee size={28} className="text-white" /> : <Utensils size={28} className="text-white" />}
</div>
<h1 className="mt-5 text-3xl font-black tracking-tight text-zinc-900">
<h1 className="mt-5 text-3xl font-black tracking-tight text-white">
NoWhatever
</h1>
<p className="mt-0.5 text-sm font-medium tracking-widest text-zinc-400">
<p className="mt-0.5 text-sm font-medium tracking-widest text-muted">
别说随便
</p>
</motion.div>
<motion.div
className="mt-8 flex w-full max-w-xs flex-col items-center gap-2 rounded-2xl border border-emerald-100 bg-emerald-50/50 px-6 py-5"
className="mt-8 flex w-full max-w-xs flex-col items-center gap-2 rounded-2xl bg-surface px-6 py-5 ring-1 ring-accent/30"
initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.5, delay: 0.1 }}
>
<p className="text-center text-lg font-bold text-zinc-800">
<p className="text-center text-lg font-bold text-white">
{sceneConfig.inviteText}
</p>
<div className="flex items-center gap-2 text-sm text-zinc-500">
<span className="rounded-full bg-white px-2.5 py-0.5 font-mono text-base font-bold tracking-widest text-emerald-600 shadow-sm">
<div className="flex items-center gap-2 text-sm text-muted">
<span className="rounded-full bg-elevated px-2.5 py-0.5 font-mono text-base font-bold tracking-widest text-accent ring-1 ring-border">
{roomId}
</span>
</div>
{userCount > 0 && (
<div className="flex items-center gap-1 text-xs text-zinc-400">
<div className="flex items-center gap-1 text-xs text-muted">
<Users size={13} />
<span>
已有 <span className="font-semibold text-emerald-500">{userCount}</span> 人在房间
已有 <span className="font-semibold text-accent">{userCount}</span> 人在房间
</span>
</div>
)}
@@ -138,35 +138,35 @@ export default function InvitePage() {
transition={{ duration: 0.5, delay: 0.2 }}
>
<div className="flex flex-col items-center gap-1.5 w-20">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-50">
<Users size={18} className="text-emerald-500" />
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-accent/15">
<Users size={18} className="text-accent" />
</div>
<span className="text-xs font-semibold text-zinc-700">加入房间</span>
<span className="text-[10px] leading-tight text-zinc-400 text-center">
<span className="text-xs font-semibold text-gray-300">加入房间</span>
<span className="text-[10px] leading-tight text-muted text-center">
和朋友一起
</span>
</div>
<ChevronRight size={14} className="mt-3 shrink-0 text-zinc-300" />
<ChevronRight size={14} className="mt-3 shrink-0 text-subtle" />
<div className="flex flex-col items-center gap-1.5 w-20">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-50">
<Heart size={18} className="text-amber-500" />
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-500/15">
<Heart size={18} className="text-amber-400" />
</div>
<span className="text-xs font-semibold text-zinc-700">各自滑卡</span>
<span className="text-[10px] leading-tight text-zinc-400 text-center">
<span className="text-xs font-semibold text-gray-300">各自滑卡</span>
<span className="text-[10px] leading-tight text-muted text-center">
右滑喜欢的店
</span>
</div>
<ChevronRight size={14} className="mt-3 shrink-0 text-zinc-300" />
<ChevronRight size={14} className="mt-3 shrink-0 text-subtle" />
<div className="flex flex-col items-center gap-1.5 w-20">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-rose-50">
<Sparkles size={18} className="text-rose-500" />
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-rose-500/15">
<Sparkles size={18} className="text-rose-400" />
</div>
<span className="text-xs font-semibold text-zinc-700">匹配结果</span>
<span className="text-[10px] leading-tight text-zinc-400 text-center">
<span className="text-xs font-semibold text-gray-300">匹配结果</span>
<span className="text-[10px] leading-tight text-muted text-center">
滑中同一家就去
</span>
</div>
@@ -181,7 +181,7 @@ export default function InvitePage() {
<button
onClick={handleJoin}
disabled={joining}
className="flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-emerald-500 text-sm font-bold text-white shadow-md shadow-emerald-200 transition-colors hover:bg-emerald-600 disabled:opacity-50"
className="flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-accent text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
>
{joining ? (
<>
src/app/profile/page.tsx
+54 -55
View File
@@ -26,7 +26,6 @@ import type { UserProfile, UserPreferences, DecisionRecord, FavoriteRecord, Rest
function firstImage(r: Restaurant): string {
if (r.images?.length > 0) return r.images[0];
// backward compat: old DB records may have `image` instead of `images`
const legacy = (r as unknown as Record<string, unknown>).image;
return typeof legacy === "string" ? legacy : "";
}
@@ -253,7 +252,7 @@ export default function ProfilePage() {
if (loading) {
return (
<div className="flex min-h-dvh items-center justify-center bg-background">
<Loader2 size={24} className="animate-spin text-zinc-400" />
<Loader2 size={24} className="animate-spin text-muted" />
</div>
);
}
@@ -266,21 +265,21 @@ export default function ProfilePage() {
: `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(r.name)}`;
return (
<div className="min-h-dvh bg-background pb-16">
<div className="min-h-dvh bg-background pb-16 overflow-y-auto scrollbar-none">
<nav className="sticky top-0 z-10 flex h-14 items-center gap-3 bg-background/80 px-4 backdrop-blur-sm">
<button
onClick={() => router.push("/")}
className="flex h-8 w-8 items-center justify-center rounded-full text-zinc-500 transition-colors active:bg-zinc-100"
className="flex h-8 w-8 items-center justify-center rounded-full text-muted transition-colors active:bg-elevated"
>
<ArrowLeft size={20} />
</button>
<h1 className="text-base font-bold text-zinc-900">个人中心</h1>
<h1 className="text-base font-bold text-white">个人中心</h1>
</nav>
<div className="mx-auto max-w-sm px-5">
{/* Profile card */}
<motion.div
className="rounded-2xl bg-white p-4 shadow-sm"
className="rounded-2xl bg-surface p-4 ring-1 ring-border"
initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
>
@@ -290,7 +289,7 @@ export default function ProfilePage() {
className={`relative flex h-14 w-14 items-center justify-center rounded-2xl text-2xl transition-transform active:scale-95 ${getAvatarBg(profile.avatar)}`}
>
{profile.avatar}
<span className="absolute -bottom-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-white text-zinc-400 shadow-sm">
<span className="absolute -bottom-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-surface text-muted shadow-sm ring-1 ring-border">
<Edit3 size={10} />
</span>
</button>
@@ -306,34 +305,34 @@ export default function ProfilePage() {
}}
maxLength={16}
autoFocus
className="h-8 flex-1 rounded-lg border border-zinc-200 px-2 text-sm text-zinc-800 outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
className="h-8 flex-1 rounded-lg border-none bg-elevated px-2 text-sm text-white outline-none ring-1 ring-border focus:ring-2 focus:ring-accent/50"
/>
<button
onClick={handleSaveUsername}
disabled={usernameSaving}
className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500 text-white disabled:opacity-50"
className="flex h-8 w-8 items-center justify-center rounded-lg bg-accent text-white disabled:opacity-50"
>
{usernameSaving ? <Loader2 size={14} className="animate-spin" /> : <Check size={14} />}
</button>
<button
onClick={() => { setEditingUsername(false); setUsernameMsg(""); }}
className="flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-100 text-zinc-500"
className="flex h-8 w-8 items-center justify-center rounded-lg bg-elevated text-muted"
>
<X size={14} />
</button>
</div>
) : (
<div className="flex items-center gap-2">
<h2 className="text-lg font-bold text-zinc-900">{profile.username}</h2>
<h2 className="text-lg font-bold text-white">{profile.username}</h2>
<button
onClick={() => { setEditingUsername(true); setNewUsername(profile.username); }}
className="text-zinc-400 transition-colors active:text-zinc-600"
className="text-muted transition-colors active:text-gray-300"
>
<Edit3 size={13} />
</button>
</div>
)}
{usernameMsg && <p className="mt-1 text-xs text-rose-500">{usernameMsg}</p>}
{usernameMsg && <p className="mt-1 text-xs text-rose-400">{usernameMsg}</p>}
</div>
</div>
@@ -354,8 +353,8 @@ export default function ProfilePage() {
onClick={() => handleSaveAvatar(a.emoji)}
className={`flex h-11 w-11 items-center justify-center rounded-xl text-xl transition-all ${
profile.avatar === a.emoji
? `${a.bg} scale-110 ring-2 ring-emerald-400 ring-offset-1`
: "bg-zinc-50 hover:bg-zinc-100"
? `${a.bg} scale-110 ring-2 ring-accent ring-offset-1 ring-offset-surface`
: "bg-elevated hover:bg-subtle"
}`}
>
{a.emoji}
@@ -369,7 +368,7 @@ export default function ProfilePage() {
{/* Change password */}
<motion.div
className="mt-4 rounded-2xl bg-white p-4 shadow-sm"
className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.05 }}
@@ -378,8 +377,8 @@ export default function ProfilePage() {
onClick={() => { setEditingPassword(!editingPassword); setPasswordMsg(""); }}
className="flex w-full items-center gap-2"
>
<Lock size={15} className="text-zinc-400" />
<h3 className="text-sm font-semibold text-zinc-700">修改密码</h3>
<Lock size={15} className="text-muted" />
<h3 className="text-sm font-semibold text-gray-300">修改密码</h3>
</button>
<AnimatePresence>
@@ -393,46 +392,46 @@ export default function ProfilePage() {
>
<div className="mt-3 flex flex-col gap-3">
<div>
<p className="text-xs text-zinc-400">当前密码</p>
<p className="text-xs text-muted">当前密码</p>
<div className="relative mt-1">
<input
type={showPassword ? "text" : "password"}
value={currentPassword}
onChange={(e) => { setCurrentPassword(e.target.value); setPasswordMsg(""); }}
className="h-9 w-full rounded-lg border border-zinc-200 px-3 pr-9 text-sm text-zinc-800 outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
className="h-9 w-full rounded-lg border-none bg-elevated px-3 pr-9 text-sm text-white outline-none ring-1 ring-border focus:ring-2 focus:ring-accent/50"
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-zinc-400"
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted"
>
{showPassword ? <EyeOff size={14} /> : <Eye size={14} />}
</button>
</div>
</div>
<div>
<p className="text-xs text-zinc-400">新密码</p>
<p className="text-xs text-muted">新密码</p>
<input
type={showPassword ? "text" : "password"}
value={newPassword}
onChange={(e) => { setNewPassword(e.target.value); setPasswordMsg(""); }}
placeholder="至少 6 个字符"
className="mt-1 h-9 w-full rounded-lg border border-zinc-200 px-3 text-sm text-zinc-800 outline-none placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
className="mt-1 h-9 w-full rounded-lg border-none bg-elevated px-3 text-sm text-white outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
/>
</div>
<div>
<p className="text-xs text-zinc-400">确认新密码</p>
<p className="text-xs text-muted">确认新密码</p>
<input
type={showPassword ? "text" : "password"}
value={confirmPassword}
onChange={(e) => { setConfirmPassword(e.target.value); setPasswordMsg(""); }}
placeholder="再次输入新密码"
className="mt-1 h-9 w-full rounded-lg border border-zinc-200 px-3 text-sm text-zinc-800 outline-none placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
className="mt-1 h-9 w-full rounded-lg border-none bg-elevated px-3 text-sm text-white outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
/>
</div>
{passwordMsg && (
<p className={`text-xs ${passwordMsg.includes("错误") || passwordMsg.includes("失败") || passwordMsg.includes("不一致") || passwordMsg.includes("至少") ? "text-rose-500" : "text-emerald-500"}`}>
<p className={`text-xs ${passwordMsg.includes("错误") || passwordMsg.includes("失败") || passwordMsg.includes("不一致") || passwordMsg.includes("至少") ? "text-rose-400" : "text-accent"}`}>
{passwordMsg}
</p>
)}
@@ -440,7 +439,7 @@ export default function ProfilePage() {
<button
onClick={handleSavePassword}
disabled={passwordSaving}
className="flex h-9 items-center justify-center gap-1.5 rounded-lg bg-emerald-500 text-xs font-semibold text-white transition-colors hover:bg-emerald-600 disabled:opacity-50"
className="flex h-9 items-center justify-center gap-1.5 rounded-lg bg-accent text-xs font-semibold text-white transition-colors hover:bg-accent-hover disabled:opacity-50"
>
{passwordSaving ? <Loader2 size={14} className="animate-spin" /> : "保存新密码"}
</button>
@@ -452,15 +451,15 @@ export default function ProfilePage() {
{/* Email binding */}
<motion.div
className="mt-4 rounded-2xl bg-white p-4 shadow-sm"
className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.1 }}
>
<div className="flex items-center gap-2">
<Mail size={15} className="text-zinc-400" />
<h3 className="text-sm font-semibold text-zinc-700">绑定邮箱</h3>
<span className="text-[10px] text-zinc-400">（可选）</span>
<Mail size={15} className="text-muted" />
<h3 className="text-sm font-semibold text-gray-300">绑定邮箱</h3>
<span className="text-[10px] text-dim">（可选）</span>
</div>
<div className="mt-3 flex gap-2">
<input
@@ -471,18 +470,18 @@ export default function ProfilePage() {
setEmail(e.target.value);
setEmailMsg("");
}}
className="h-9 flex-1 rounded-lg border border-zinc-200 bg-white px-3 text-sm text-zinc-700 outline-none placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
className="h-9 flex-1 rounded-lg border-none bg-elevated px-3 text-sm text-white outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
/>
<button
onClick={handleSaveEmail}
disabled={emailSaving}
className="flex h-9 items-center gap-1 rounded-lg bg-emerald-500 px-3 text-xs font-semibold text-white transition-colors hover:bg-emerald-600 disabled:opacity-50"
className="flex h-9 items-center gap-1 rounded-lg bg-accent px-3 text-xs font-semibold text-white transition-colors hover:bg-accent-hover disabled:opacity-50"
>
{emailSaving ? <Loader2 size={13} className="animate-spin" /> : "保存"}
</button>
</div>
{emailMsg && (
<p className={`mt-2 text-xs ${emailMsg.includes("失败") || emailMsg.includes("不正确") ? "text-rose-500" : "text-emerald-500"}`}>
<p className={`mt-2 text-xs ${emailMsg.includes("失败") || emailMsg.includes("不正确") ? "text-rose-400" : "text-accent"}`}>
{emailMsg}
</p>
)}
@@ -490,7 +489,7 @@ export default function ProfilePage() {
{/* Decision History */}
<motion.div
className="mt-4 rounded-2xl bg-white p-4 shadow-sm"
className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.15 }}
@@ -500,15 +499,15 @@ export default function ProfilePage() {
className="flex w-full items-center justify-between"
>
<div className="flex items-center gap-2">
<Clock size={15} className="text-zinc-400" />
<h3 className="text-sm font-semibold text-zinc-700">
<Clock size={15} className="text-muted" />
<h3 className="text-sm font-semibold text-gray-300">
决策记录 {history.length > 0 && `(${history.length})`}
</h3>
</div>
<motion.span
animate={{ rotate: showHistory ? 180 : 0 }}
transition={{ duration: 0.2 }}
className="text-zinc-400"
className="text-muted"
>
<ChevronDown size={16} />
</motion.span>
@@ -525,10 +524,10 @@ export default function ProfilePage() {
>
{historyLoading ? (
<div className="flex justify-center py-6">
<Loader2 size={18} className="animate-spin text-zinc-300" />
<Loader2 size={18} className="animate-spin text-muted" />
</div>
) : history.length === 0 ? (
<p className="py-6 text-center text-xs text-zinc-400">
<p className="py-6 text-center text-xs text-muted">
还没有决策记录
</p>
) : (
@@ -539,7 +538,7 @@ export default function ProfilePage() {
href={amapNavUrl(d.restaurantData)}
target="_blank"
rel="noopener noreferrer"
className="flex gap-3 rounded-xl bg-zinc-50 p-2.5 transition-colors active:bg-zinc-100"
className="flex gap-3 rounded-xl bg-elevated p-2.5 transition-colors active:bg-subtle"
>
{firstImage(d.restaurantData) && (
<img
@@ -550,8 +549,8 @@ export default function ProfilePage() {
/>
)}
<div className="flex min-w-0 flex-1 flex-col justify-center">
<p className="truncate text-sm font-semibold text-zinc-800">{d.restaurantName}</p>
<div className="mt-0.5 flex items-center gap-2 text-[11px] text-zinc-400">
<p className="truncate text-sm font-semibold text-white">{d.restaurantName}</p>
<div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
<span>{d.matchType === "unanimous" ? "全员一致" : "最佳匹配"}</span>
<span>{d.participants} 人参与</span>
<span>{new Date(d.createdAt).toLocaleDateString("zh-CN", { month: "short", day: "numeric" })}</span>
@@ -568,7 +567,7 @@ export default function ProfilePage() {
{/* Favorites */}
<motion.div
className="mt-4 rounded-2xl bg-white p-4 shadow-sm"
className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.2 }}
@@ -578,15 +577,15 @@ export default function ProfilePage() {
className="flex w-full items-center justify-between"
>
<div className="flex items-center gap-2">
<Star size={15} className="text-zinc-400" />
<h3 className="text-sm font-semibold text-zinc-700">
<Star size={15} className="text-muted" />
<h3 className="text-sm font-semibold text-gray-300">
收藏餐厅 {favorites.length > 0 && `(${favorites.length})`}
</h3>
</div>
<motion.span
animate={{ rotate: showFavorites ? 180 : 0 }}
transition={{ duration: 0.2 }}
className="text-zinc-400"
className="text-muted"
>
<ChevronDown size={16} />
</motion.span>
@@ -603,10 +602,10 @@ export default function ProfilePage() {
>
{favLoading ? (
<div className="flex justify-center py-6">
<Loader2 size={18} className="animate-spin text-zinc-300" />
<Loader2 size={18} className="animate-spin text-muted" />
</div>
) : favorites.length === 0 ? (
<p className="py-6 text-center text-xs text-zinc-400">
<p className="py-6 text-center text-xs text-muted">
还没有收藏的餐厅
</p>
) : (
@@ -616,7 +615,7 @@ export default function ProfilePage() {
return (
<div
key={f.id}
className="flex gap-3 rounded-xl bg-zinc-50 p-2.5"
className="flex gap-3 rounded-xl bg-elevated p-2.5"
>
{firstImage(r) && (
<img
@@ -627,8 +626,8 @@ export default function ProfilePage() {
/>
)}
<div className="flex min-w-0 flex-1 flex-col justify-center">
<p className="truncate text-sm font-semibold text-zinc-800">{r.name}</p>
<div className="mt-0.5 flex items-center gap-2 text-[11px] text-zinc-400">
<p className="truncate text-sm font-semibold text-white">{r.name}</p>
<div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
<span className="flex items-center gap-0.5">
<Star size={10} className="fill-amber-400 text-amber-400" />
{r.rating}
@@ -644,7 +643,7 @@ export default function ProfilePage() {
</div>
<button
onClick={() => handleRemoveFavorite(f.id)}
className="flex h-8 w-8 shrink-0 items-center justify-center self-center rounded-full text-zinc-400 transition-colors active:bg-zinc-200 active:text-rose-500"
className="flex h-8 w-8 shrink-0 items-center justify-center self-center rounded-full text-muted transition-colors active:bg-subtle active:text-rose-400"
>
<Trash2 size={14} />
</button>
@@ -667,7 +666,7 @@ export default function ProfilePage() {
>
<button
onClick={handleLogout}
className="flex items-center gap-1.5 text-xs font-medium text-zinc-400 transition-colors hover:text-rose-500"
className="flex items-center gap-1.5 text-xs font-medium text-muted transition-colors hover:text-rose-400"
>
<LogOut size={13} />
退出登录
@@ -678,7 +677,7 @@ export default function ProfilePage() {
<AnimatePresence>
{toast && (
<motion.div
className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-zinc-900 px-4 py-2.5 text-xs font-medium text-white shadow-lg"
className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-white shadow-lg ring-1 ring-subtle"
initial={{ opacity: 0, y: -12, x: "-50%" }}
animate={{ opacity: 1, y: 0, x: "-50%" }}
exit={{ opacity: 0, y: -12, x: "-50%" }}
src/app/room/[id]/page.tsx
+5 -5
View File
@@ -93,11 +93,11 @@ export default function RoomPage() {
return (
<div className="flex h-dvh flex-col items-center justify-center gap-4 bg-background px-6">
<p className="text-4xl">🍜</p>
<p className="text-base font-semibold text-zinc-700">房间不存在或已过期</p>
<p className="text-sm text-zinc-400">房间号可能有误，或房间已超过 24 小时</p>
<p className="text-base font-semibold text-gray-300">房间不存在或已过期</p>
<p className="text-sm text-muted">房间号可能有误，或房间已超过 24 小时</p>
<button
onClick={() => router.push("/")}
className="mt-2 h-10 rounded-xl bg-emerald-500 px-6 text-sm font-bold text-white shadow-sm transition-colors hover:bg-emerald-600"
className="mt-2 h-10 rounded-xl bg-accent px-6 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
>
返回首页
</button>
@@ -113,8 +113,8 @@ export default function RoomPage() {
if (!ready) {
return (
<div className="flex h-dvh flex-col items-center justify-center gap-3 bg-background">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-zinc-300 border-t-emerald-500" />
<p className="text-sm text-zinc-400">正在加载数据...</p>
<div className="h-6 w-6 animate-spin rounded-full border-2 border-subtle border-t-accent" />
<p className="text-sm text-muted">正在加载数据...</p>
</div>
);
}
src/components/ActionButtons.tsx
+2 -2
View File
@@ -16,7 +16,7 @@ export default function ActionButtons({
return (
<div className="relative z-10 flex items-center justify-center gap-6 pb-5 pt-3">
<motion.button
className="flex h-13 w-13 items-center justify-center rounded-full bg-white shadow-lg shadow-rose-200/50 ring-1 ring-rose-100 disabled:opacity-40"
className="flex h-13 w-13 items-center justify-center rounded-full bg-surface shadow-lg shadow-rose-500/10 ring-1 ring-rose-500/20 disabled:opacity-40"
whileTap={{ scale: 0.85 }}
whileHover={{ scale: 1.08 }}
onClick={() => onAction("left")}
@@ -27,7 +27,7 @@ export default function ActionButtons({
</motion.button>
<motion.button
className="flex h-13 w-13 items-center justify-center rounded-full bg-white shadow-lg shadow-emerald-200/50 ring-1 ring-emerald-100 disabled:opacity-40"
className="flex h-13 w-13 items-center justify-center rounded-full bg-surface shadow-lg shadow-emerald-500/10 ring-1 ring-emerald-500/20 disabled:opacity-40"
whileTap={{ scale: 0.85 }}
whileHover={{ scale: 1.08 }}
onClick={() => onAction("right")}
src/components/AuthModal.tsx
+20 -20
View File
@@ -117,7 +117,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
{open && (
<motion.div
ref={backdropRef}
className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm sm:items-center"
className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm sm:items-center"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
@@ -125,36 +125,36 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
onClick={handleBackdropClick}
>
<motion.div
className="relative w-full max-w-sm rounded-t-3xl bg-white px-5 pb-8 pt-5 shadow-2xl sm:rounded-3xl sm:pb-6"
className="relative w-full max-w-sm rounded-t-3xl bg-surface px-5 pb-8 pt-5 shadow-2xl ring-1 ring-border sm:rounded-3xl sm:pb-6"
initial={{ y: "100%" }}
animate={{ y: 0 }}
exit={{ y: "100%" }}
transition={{ type: "spring", damping: 28, stiffness: 350 }}
>
<div className="mb-4 flex items-center justify-between">
<span className="text-lg font-bold text-zinc-900">欢迎</span>
<span className="text-lg font-bold text-white">欢迎</span>
<button
onClick={onClose}
className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 text-zinc-400 transition-colors active:bg-zinc-200"
className="flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
>
<X size={16} />
</button>
</div>
{/* Tabs */}
<div className="flex gap-1 rounded-xl bg-zinc-100 p-1">
<div className="flex gap-1 rounded-xl bg-elevated p-1">
{(["login", "register"] as const).map((t) => (
<button
key={t}
onClick={() => switchTab(t)}
className={`relative flex-1 rounded-lg py-2 text-sm font-semibold transition-colors ${
tab === t ? "text-zinc-900" : "text-zinc-400"
tab === t ? "text-white" : "text-muted"
}`}
>
{tab === t && (
<motion.div
layoutId="auth-tab"
className="absolute inset-0 rounded-lg bg-white shadow-sm"
className="absolute inset-0 rounded-lg bg-subtle shadow-sm"
transition={{ type: "spring", stiffness: 400, damping: 30 }}
/>
)}
@@ -167,7 +167,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
{/* Username */}
<div className="mt-5">
<p className="text-xs font-medium text-zinc-500">用户名</p>
<p className="text-xs font-medium text-muted">用户名</p>
<input
type="text"
value={username}
@@ -177,13 +177,13 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
}}
placeholder={tab === "register" ? "2-16 个字符" : "请输入用户名"}
maxLength={16}
className="mt-2 h-11 w-full rounded-xl border border-zinc-200 bg-white px-4 text-sm text-zinc-800 outline-none transition-colors placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-white outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
/>
</div>
{/* Password */}
<div className="mt-4">
<p className="text-xs font-medium text-zinc-500">密码</p>
<p className="text-xs font-medium text-muted">密码</p>
<div className="relative mt-2">
<input
type={showPassword ? "text" : "password"}
@@ -193,12 +193,12 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
setError("");
}}
placeholder={tab === "register" ? "至少 6 个字符" : "请输入密码"}
className="h-11 w-full rounded-xl border border-zinc-200 bg-white px-4 pr-10 text-sm text-zinc-800 outline-none transition-colors placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
className="h-11 w-full rounded-xl border-none bg-elevated px-4 pr-10 text-sm text-white outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 transition-colors active:text-zinc-600"
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted transition-colors active:text-gray-300"
>
{showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
</button>
@@ -208,7 +208,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
{/* Confirm password (register only) */}
{tab === "register" && (
<div className="mt-4">
<p className="text-xs font-medium text-zinc-500">确认密码</p>
<p className="text-xs font-medium text-muted">确认密码</p>
<input
type={showPassword ? "text" : "password"}
value={confirmPassword}
@@ -217,7 +217,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
setError("");
}}
placeholder="再次输入密码"
className="mt-2 h-11 w-full rounded-xl border border-zinc-200 bg-white px-4 text-sm text-zinc-800 outline-none transition-colors placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-white outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
/>
</div>
)}
@@ -225,9 +225,9 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
{/* Avatar picker (register only) */}
{tab === "register" && (
<div className="mt-4">
<p className="text-xs font-medium text-zinc-500">
<p className="text-xs font-medium text-muted">
选择头像
<span className="ml-1 text-zinc-300">（可选）</span>
<span className="ml-1 text-dim">（可选）</span>
</p>
<div className="mt-2 grid grid-cols-6 gap-2">
{AVATARS.map((a) => (
@@ -236,8 +236,8 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
onClick={() => setAvatar(a.emoji)}
className={`flex h-11 w-11 items-center justify-center rounded-xl text-xl transition-all ${
avatar === a.emoji
? `${a.bg} scale-110 ring-2 ring-emerald-400 ring-offset-1`
: "bg-zinc-50 hover:bg-zinc-100"
? `${a.bg} scale-110 ring-2 ring-accent ring-offset-1 ring-offset-surface`
: "bg-elevated hover:bg-subtle"
}`}
>
{a.emoji}
@@ -249,7 +249,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
{error && (
<motion.p
className="mt-3 text-center text-xs font-medium text-rose-500"
className="mt-3 text-center text-xs font-medium text-rose-400"
initial={{ opacity: 0, y: -4 }}
animate={{ opacity: 1, y: 0 }}
>
@@ -260,7 +260,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
<button
onClick={handleSubmit}
disabled={loading}
className="mt-5 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-emerald-500 text-sm font-bold text-white shadow-md shadow-emerald-200 transition-colors hover:bg-emerald-600 disabled:opacity-50"
className="mt-5 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-accent text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
>
{loading ? (
<>
src/components/LeaveConfirmModal.tsx
+8 -8
View File
@@ -26,7 +26,7 @@ export default function LeaveConfirmModal({
{open && (
<motion.div
ref={backdropRef}
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
@@ -34,34 +34,34 @@ export default function LeaveConfirmModal({
onClick={handleBackdropClick}
>
<motion.div
className="mx-6 w-full max-w-xs rounded-2xl bg-white px-6 py-6 shadow-2xl"
className="mx-6 w-full max-w-xs rounded-2xl bg-surface px-6 py-6 shadow-2xl ring-1 ring-border"
initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.9, opacity: 0 }}
transition={{ type: "spring", damping: 25, stiffness: 350 }}
>
<div className="flex flex-col items-center">
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-50">
<LogOut size={22} className="text-rose-500" />
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-500/15">
<LogOut size={22} className="text-rose-400" />
</div>
<h2 className="mt-4 text-base font-bold text-zinc-900">
<h2 className="mt-4 text-base font-bold text-white">
确定要退出房间吗？
</h2>
<p className="mt-1.5 text-center text-xs leading-relaxed text-zinc-400">
<p className="mt-1.5 text-center text-xs leading-relaxed text-muted">
退出后你的滑卡进度不会丢失，可以用房间号重新加入
</p>
<div className="mt-5 flex w-full gap-2.5">
<button
onClick={onCancel}
className="flex h-11 flex-1 items-center justify-center rounded-xl border border-zinc-200 bg-white text-sm font-semibold text-zinc-700 transition-colors active:bg-zinc-50"
className="flex h-11 flex-1 items-center justify-center rounded-xl bg-elevated text-sm font-semibold text-gray-300 ring-1 ring-border transition-colors active:bg-subtle"
>
继续滑卡
</button>
<button
onClick={onConfirm}
className="flex h-11 flex-1 items-center justify-center rounded-xl bg-rose-500 text-sm font-semibold text-white shadow-md shadow-rose-200 transition-colors active:bg-rose-600"
className="flex h-11 flex-1 items-center justify-center rounded-xl bg-rose-500 text-sm font-semibold text-white shadow-lg shadow-rose-500/20 transition-colors active:bg-rose-600"
>
退出房间
</button>
src/components/MatchResult.tsx
+47 -40
View File
@@ -58,7 +58,7 @@ function NoMatchResult({
return (
<motion.div
className="fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-linear-to-b from-zinc-600 to-zinc-800 px-6 py-10"
className="fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-background px-6 py-10"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.4 }}
@@ -68,7 +68,7 @@ function NoMatchResult({
animate={{ scale: 1, rotate: 0 }}
transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.2 }}
>
<SearchX size={56} className="text-zinc-400" />
<SearchX size={56} className="text-muted" />
</motion.div>
<motion.h1
@@ -81,7 +81,7 @@ function NoMatchResult({
</motion.h1>
<motion.p
className="mt-2 max-w-[16rem] text-center text-sm leading-relaxed text-zinc-400"
className="mt-2 max-w-[16rem] text-center text-sm leading-relaxed text-muted"
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.45 }}
@@ -98,7 +98,7 @@ function NoMatchResult({
<motion.button
onClick={onReset}
disabled={resetting}
className="flex items-center justify-center gap-2 rounded-full bg-white px-8 py-3 text-sm font-bold text-zinc-800 shadow-lg transition-colors hover:bg-zinc-100 disabled:opacity-50"
className="flex items-center justify-center gap-2 rounded-full bg-accent px-8 py-3 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
whileTap={{ scale: 0.95 }}
>
<RotateCcw size={15} className={resetting ? "animate-spin" : ""} />
@@ -107,7 +107,7 @@ function NoMatchResult({
<motion.button
onClick={() => router.push("/")}
className="flex items-center justify-center gap-2 rounded-full bg-white/15 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/25"
className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-muted ring-1 ring-border transition-colors hover:bg-elevated"
whileTap={{ scale: 0.95 }}
>
<Home size={15} />
@@ -132,7 +132,7 @@ function RunnerUpCard({
href={buildNavUrl(restaurant)}
target="_blank"
rel="noopener noreferrer"
className="flex gap-3 rounded-xl bg-white/10 p-2.5 backdrop-blur-sm transition-colors hover:bg-white/20"
className="flex gap-3 rounded-xl bg-surface/80 p-2.5 ring-1 ring-border/50 backdrop-blur-sm transition-colors hover:bg-elevated/80"
>
{restaurant.images?.[0] && (
<img
@@ -146,7 +146,7 @@ function RunnerUpCard({
<p className="truncate text-sm font-bold text-white">
{restaurant.name}
</p>
<div className="mt-1 flex items-center gap-2 text-xs text-white/70">
<div className="mt-1 flex items-center gap-2 text-xs text-gray-400">
<span className="flex items-center gap-0.5">
<Star size={11} className="fill-yellow-300 text-yellow-300" />
{restaurant.rating}
@@ -159,7 +159,7 @@ function RunnerUpCard({
</span>
)}
</div>
<p className="mt-0.5 text-[11px] font-medium text-amber-200">
<p className="mt-0.5 text-[11px] font-medium text-amber-400">
{likes}/{userCount} 人想去
</p>
</div>
@@ -282,25 +282,28 @@ export default function MatchResult({
return (
<motion.div
className={`fixed inset-0 z-50 flex flex-col items-center overflow-y-auto px-6 py-10 ${
isUnanimous
? "bg-linear-to-b from-emerald-500 to-teal-600"
: "bg-linear-to-b from-amber-500 to-orange-500"
}`}
className="fixed inset-0 z-50 flex flex-col items-center overflow-y-auto bg-background px-6 py-10"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.4 }}
>
<div className="flex w-full max-w-sm flex-1 flex-col items-center justify-center">
{/* Accent glow behind icon */}
<div
className={`pointer-events-none fixed left-1/2 top-0 h-72 w-72 -translate-x-1/2 -translate-y-1/3 rounded-full blur-3xl ${
isUnanimous ? "bg-emerald-500/20" : "bg-amber-500/20"
}`}
/>
<div className="relative flex w-full max-w-sm flex-1 flex-col items-center justify-center">
<motion.div
initial={{ scale: 0, rotate: -20 }}
animate={{ scale: 1, rotate: 0 }}
transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.2 }}
>
{isUnanimous ? (
<PartyPopper size={56} className="text-yellow-300" />
<PartyPopper size={56} className="text-emerald-400" />
) : (
<Trophy size={56} className="text-yellow-200" />
<Trophy size={56} className="text-amber-400" />
)}
</motion.div>
@@ -314,7 +317,7 @@ export default function MatchResult({
</motion.h1>
<motion.p
className={`mt-1 text-sm font-medium ${isUnanimous ? "text-emerald-100" : "text-amber-100"}`}
className={`mt-1 text-sm font-medium ${isUnanimous ? "text-emerald-400" : "text-amber-400"}`}
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.45 }}
@@ -326,7 +329,7 @@ export default function MatchResult({
{isUnanimous && (
<motion.div
className="mt-3 flex items-center gap-2 rounded-full bg-white/20 px-4 py-1.5 backdrop-blur-sm"
className="mt-3 flex items-center gap-2 rounded-full bg-emerald-500/15 px-4 py-1.5 ring-1 ring-emerald-500/30"
initial={{ scale: 0, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{
@@ -336,16 +339,17 @@ export default function MatchResult({
delay: 0.55,
}}
>
<Zap size={14} className="fill-yellow-300 text-yellow-300" />
<span className="text-xs font-bold text-white">
<Zap size={14} className="fill-emerald-400 text-emerald-400" />
<span className="text-xs font-bold text-emerald-300">
默契度 100% · {userCount} 人全员一致
</span>
<Zap size={14} className="fill-yellow-300 text-yellow-300" />
<Zap size={14} className="fill-emerald-400 text-emerald-400" />
</motion.div>
)}
{/* Result card */}
<motion.div
className="mt-6 w-full overflow-hidden rounded-2xl bg-white shadow-2xl"
className="mt-6 w-full overflow-hidden rounded-2xl bg-surface shadow-2xl ring-1 ring-border"
initial={{ y: 60, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ type: "spring", stiffness: 180, damping: 18, delay: 0.5 }}
@@ -360,22 +364,22 @@ export default function MatchResult({
)}
<div className="p-4">
<div className="flex items-start justify-between gap-2">
<h2 className="text-lg font-bold leading-tight text-zinc-900">
<h2 className="text-lg font-bold leading-tight text-white">
{restaurant.name}
</h2>
{restaurant.category && (
<span className="shrink-0 rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold text-emerald-600">
<span className="shrink-0 rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-semibold text-emerald-400">
{restaurant.category}
</span>
)}
</div>
<div className="mt-2 flex items-center gap-3 text-sm text-zinc-500">
<div className="mt-2 flex items-center gap-3 text-sm text-muted">
<span className="flex items-center gap-1">
<Star size={13} className="fill-amber-400 text-amber-400" />
{restaurant.rating}
</span>
<span className="font-semibold text-emerald-600">
<span className="font-semibold text-emerald-400">
{restaurant.price}
</span>
{restaurant.distance && (
@@ -387,13 +391,13 @@ export default function MatchResult({
</div>
{restaurant.address && (
<p className="mt-2 text-xs leading-relaxed text-zinc-400">
<p className="mt-2 text-xs leading-relaxed text-muted">
{restaurant.address}
</p>
)}
{restaurant.openTime && (
<div className="mt-1.5 flex items-center gap-1 text-xs text-zinc-400">
<div className="mt-1.5 flex items-center gap-1 text-xs text-muted">
<Clock size={12} />
<span>{restaurant.openTime}</span>
</div>
@@ -407,7 +411,7 @@ export default function MatchResult({
.map((t) => (
<span
key={t}
className="rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium text-amber-700"
className="rounded bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-400"
>
{t.trim()}
</span>
@@ -417,6 +421,7 @@ export default function MatchResult({
</div>
</motion.div>
{/* Action buttons */}
<motion.div
className="mt-5 flex w-full flex-col gap-2.5"
initial={{ y: 30, opacity: 0 }}
@@ -427,9 +432,7 @@ export default function MatchResult({
href={buildNavUrl(restaurant)}
target="_blank"
rel="noopener noreferrer"
className={`flex items-center justify-center gap-2 rounded-full bg-white px-8 py-3 text-sm font-bold shadow-lg transition-colors hover:bg-emerald-50 ${
isUnanimous ? "text-emerald-600" : "text-orange-600"
}`}
className="flex items-center justify-center gap-2 rounded-full bg-accent px-8 py-3 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
whileTap={{ scale: 0.95 }}
>
<Navigation size={16} />
@@ -439,7 +442,7 @@ export default function MatchResult({
{restaurant.tel && (
<motion.a
href={`tel:${restaurant.tel}`}
className="flex items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30"
className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated"
whileTap={{ scale: 0.95 }}
>
<Phone size={15} />
@@ -449,7 +452,7 @@ export default function MatchResult({
<motion.button
onClick={handleShare}
className="flex items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30"
className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated"
whileTap={{ scale: 0.95 }}
>
<Share2 size={15} />
@@ -457,6 +460,7 @@ export default function MatchResult({
</motion.button>
</motion.div>
{/* Runner ups */}
{!isUnanimous && runnerUpRestaurants.length > 0 && (
<motion.div
className="mt-5 w-full"
@@ -466,7 +470,7 @@ export default function MatchResult({
>
<button
onClick={() => setShowRunnerUps((v) => !v)}
className="flex w-full items-center justify-center gap-1.5 py-2 text-xs font-semibold text-white/80 transition-colors hover:text-white"
className="flex w-full items-center justify-center gap-1.5 py-2 text-xs font-semibold text-muted transition-colors hover:text-foreground"
>
其他候选（{runnerUpRestaurants.length}）
<motion.span
@@ -500,6 +504,7 @@ export default function MatchResult({
</motion.div>
)}
{/* Bottom actions */}
<motion.div
className="mt-5 flex w-full flex-col items-center gap-2.5"
initial={{ opacity: 0 }}
@@ -511,7 +516,7 @@ export default function MatchResult({
<motion.button
onClick={() => onNarrow(narrowIds)}
disabled={resetting}
className="flex w-full items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30 disabled:opacity-50"
className="flex w-full items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
whileTap={{ scale: 0.95 }}
>
<Swords size={15} />
@@ -519,7 +524,9 @@ export default function MatchResult({
</motion.button>
<motion.button
onClick={() => router.push("/")}
className="flex items-center gap-1.5 text-sm font-medium text-amber-200 underline underline-offset-2 hover:text-white"
className={`flex items-center gap-1.5 text-sm font-medium underline underline-offset-2 hover:text-white ${
isUnanimous ? "text-emerald-400" : "text-amber-400"
}`}
>
<RefreshCw size={13} />
换一批店
@@ -530,7 +537,7 @@ export default function MatchResult({
<motion.button
onClick={onReset}
disabled={resetting}
className="flex items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30 disabled:opacity-50"
className="flex items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
whileTap={{ scale: 0.95 }}
>
<RotateCcw size={14} className={resetting ? "animate-spin" : ""} />
@@ -539,7 +546,7 @@ export default function MatchResult({
<motion.button
onClick={() => router.push("/")}
className={`flex items-center gap-1.5 text-sm font-medium underline underline-offset-2 hover:text-white ${
isUnanimous ? "text-emerald-200" : "text-amber-200"
isUnanimous ? "text-emerald-400" : "text-amber-400"
}`}
>
<RefreshCw size={13} />
@@ -553,7 +560,7 @@ export default function MatchResult({
<AnimatePresence>
{toast && (
<motion.div
className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-zinc-900 px-4 py-2.5 text-xs font-medium text-white shadow-lg"
className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-surface px-4 py-2.5 text-xs font-medium text-white shadow-lg ring-1 ring-border"
initial={{ opacity: 0, y: -12, x: "-50%" }}
animate={{ opacity: 1, y: 0, x: "-50%" }}
exit={{ opacity: 0, y: -12, x: "-50%" }}
src/components/QrInviteModal.tsx
+12 -12
View File
@@ -66,7 +66,7 @@ export default function QrInviteModal({
{open && (
<motion.div
ref={backdropRef}
className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm sm:items-center"
className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm sm:items-center"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
@@ -74,7 +74,7 @@ export default function QrInviteModal({
onClick={handleBackdropClick}
>
<motion.div
className="relative w-full max-w-sm rounded-t-3xl bg-white px-6 pb-8 pt-5 shadow-2xl sm:rounded-3xl sm:pb-6"
className="relative w-full max-w-sm rounded-t-3xl bg-surface px-6 pb-8 pt-5 shadow-2xl ring-1 ring-border sm:rounded-3xl sm:pb-6"
initial={{ y: "100%" }}
animate={{ y: 0 }}
exit={{ y: "100%" }}
@@ -82,33 +82,33 @@ export default function QrInviteModal({
>
<button
onClick={onClose}
className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 text-zinc-400 transition-colors active:bg-zinc-200"
className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
>
<X size={16} />
</button>
<div className="flex flex-col items-center">
<div className="flex items-center gap-2 text-zinc-800">
<QrCode size={18} className="text-emerald-500" />
<div className="flex items-center gap-2 text-white">
<QrCode size={18} className="text-accent" />
<h2 className="text-lg font-bold">邀请饭搭子</h2>
</div>
<p className="mt-1 text-xs text-zinc-400">
<p className="mt-1 text-xs text-muted">
{sceneConfig.qrSubtitle}
</p>
<div className="mt-5 rounded-2xl border-2 border-dashed border-emerald-200 bg-emerald-50/30 p-4">
<div className="mt-5 rounded-2xl border-2 border-dashed border-subtle bg-elevated/50 p-4">
<QRCodeSVG
value={inviteUrl}
size={180}
level="M"
bgColor="transparent"
fgColor="#18181b"
fgColor="#e5e7eb"
/>
</div>
<div className="mt-4 flex items-center gap-2">
<span className="text-xs text-zinc-400">房间号</span>
<span className="rounded-full bg-zinc-100 px-3 py-1 font-mono text-base font-bold tracking-[0.2em] text-emerald-600">
<span className="text-xs text-muted">房间号</span>
<span className="rounded-full bg-elevated px-3 py-1 font-mono text-base font-bold tracking-[0.2em] text-accent ring-1 ring-border">
{roomId}
</span>
</div>
@@ -116,14 +116,14 @@ export default function QrInviteModal({
<div className="mt-5 flex w-full gap-2.5">
<button
onClick={handleCopy}
className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl border border-zinc-200 bg-white text-sm font-semibold text-zinc-700 transition-colors active:bg-zinc-50"
className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-elevated text-sm font-semibold text-gray-300 ring-1 ring-border transition-colors active:bg-subtle"
>
<Copy size={15} />
复制链接
</button>
<button
onClick={handleShare}
className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-emerald-500 text-sm font-semibold text-white shadow-md shadow-emerald-200 transition-colors active:bg-emerald-600"
className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-accent text-sm font-semibold text-white shadow-lg shadow-accent/20 transition-colors active:bg-accent-hover"
>
<Share2 size={15} />
发送邀请
src/components/RestaurantCard.tsx
+14 -14
View File
@@ -150,14 +150,14 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
const dianpingUrl = `https://m.dianping.com/search/keyword/0/0_${encodeURIComponent(restaurant.name)}`;
return (
<div className="flex h-full w-full flex-col overflow-hidden rounded-2xl bg-white shadow-xl">
<div className="relative h-[58%] w-full shrink-0 overflow-hidden bg-zinc-100">
<div className="flex h-full w-full flex-col overflow-hidden rounded-2xl bg-surface shadow-xl ring-1 ring-border">
<div className="relative h-[58%] w-full shrink-0 overflow-hidden bg-elevated">
{hasImage && <ImageGallery images={images} name={restaurant.name} />}
<div className="pointer-events-none absolute inset-0 bg-linear-to-t from-black/40 via-transparent to-transparent" />
<div className="absolute bottom-3 left-4 flex items-center gap-1.5">
{restaurant.category && (
<span className="rounded-full bg-white/90 px-2.5 py-0.5 text-xs font-semibold text-zinc-700 shadow-sm backdrop-blur-sm">
<span className="rounded-full bg-elevated/90 px-2.5 py-0.5 text-xs font-semibold text-gray-200 shadow-sm backdrop-blur-sm">
{restaurant.category}
</span>
)}
@@ -172,7 +172,7 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
<div className="flex flex-1 flex-col justify-center gap-2 px-5 py-3">
<div className="flex items-start justify-between gap-2">
<h2 className="text-lg font-bold leading-tight text-zinc-900">
<h2 className="text-lg font-bold leading-tight text-white">
{restaurant.name}
</h2>
<div className="mt-0.5 flex shrink-0 gap-1.5">
@@ -183,8 +183,8 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
onTouchStart={stopAll}
className={`flex items-center justify-center rounded-full p-1 transition-colors ${
favorited
? "bg-amber-100 text-amber-500"
: "bg-zinc-50 text-zinc-400 active:bg-amber-50 active:text-amber-500"
? "bg-amber-500/20 text-amber-400"
: "bg-elevated text-muted active:bg-amber-500/15 active:text-amber-400"
}`}
>
<Bookmark size={13} className={favorited ? "fill-amber-400" : ""} />
@@ -194,7 +194,7 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
onClick={openLink(amapUrl)}
onPointerDown={stopAll}
onTouchStart={stopAll}
className="flex items-center gap-0.5 rounded-full bg-blue-50 px-2 py-0.5 text-[11px] font-medium text-blue-500 transition-colors active:bg-blue-100"
className="flex items-center gap-0.5 rounded-full bg-blue-500/15 px-2 py-0.5 text-[11px] font-medium text-blue-400 transition-colors active:bg-blue-500/25"
>
高德
<ExternalLink size={10} />
@@ -203,7 +203,7 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
onClick={openLink(dianpingUrl)}
onPointerDown={stopAll}
onTouchStart={stopAll}
className="flex items-center gap-0.5 rounded-full bg-orange-50 px-2 py-0.5 text-[11px] font-medium text-orange-500 transition-colors active:bg-orange-100"
className="flex items-center gap-0.5 rounded-full bg-orange-500/15 px-2 py-0.5 text-[11px] font-medium text-orange-400 transition-colors active:bg-orange-500/25"
>
点评
<ExternalLink size={10} />
@@ -214,17 +214,17 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
<div className="flex flex-wrap items-center gap-x-3 gap-y-1">
<div className="flex items-center gap-1">
<Star size={14} className="fill-amber-400 text-amber-400" />
<span className="text-sm font-semibold text-zinc-800">
<span className="text-sm font-semibold text-foreground">
{restaurant.rating}
</span>
</div>
<span className="text-sm font-semibold text-emerald-600">
<span className="text-sm font-semibold text-emerald-400">
{restaurant.price}
</span>
{restaurant.distance && (
<div className="flex items-center gap-1 text-zinc-400">
<div className="flex items-center gap-1 text-muted">
<MapPin size={13} />
<span className="text-xs">{restaurant.distance}</span>
</div>
@@ -232,13 +232,13 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
</div>
{restaurant.address && (
<p className="truncate text-xs leading-tight text-zinc-400">
<p className="truncate text-xs leading-tight text-muted">
{restaurant.address}
</p>
)}
{restaurant.openTime && (
<div className="flex items-center gap-1 text-xs text-zinc-400">
<div className="flex items-center gap-1 text-xs text-muted">
<Clock size={12} />
<span>{restaurant.openTime}</span>
</div>
@@ -252,7 +252,7 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
.map((t) => (
<span
key={t}
className="shrink-0 rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium text-amber-700"
className="shrink-0 rounded bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-400"
>
{t.trim()}
</span>
src/components/RoomManageModal.tsx
+19 -19
View File
@@ -95,7 +95,7 @@ export default function RoomManageModal({
{open && (
<motion.div
ref={backdropRef}
className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm sm:items-center"
className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm sm:items-center"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
@@ -103,7 +103,7 @@ export default function RoomManageModal({
onClick={handleBackdropClick}
>
<motion.div
className="relative w-full max-w-sm rounded-t-3xl bg-white px-5 pb-8 pt-5 shadow-2xl sm:rounded-3xl sm:pb-6"
className="relative w-full max-w-sm rounded-t-3xl bg-surface px-5 pb-8 pt-5 shadow-2xl ring-1 ring-border sm:rounded-3xl sm:pb-6"
initial={{ y: "100%" }}
animate={{ y: 0 }}
exit={{ y: "100%" }}
@@ -111,16 +111,16 @@ export default function RoomManageModal({
>
<button
onClick={onClose}
className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 text-zinc-400 transition-colors active:bg-zinc-200"
className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
>
<X size={16} />
</button>
<div className="flex items-center gap-2">
<Crown size={18} className="text-amber-500" />
<h2 className="text-lg font-bold text-zinc-900">房间管理</h2>
<Crown size={18} className="text-amber-400" />
<h2 className="text-lg font-bold text-white">房间管理</h2>
</div>
<p className="mt-1 text-xs text-zinc-400">
<p className="mt-1 text-xs text-muted">
房间号 {roomId}
</p>
@@ -131,8 +131,8 @@ export default function RoomManageModal({
disabled={loading !== null}
className={`flex h-11 w-full items-center justify-center gap-2 rounded-xl text-sm font-semibold transition-colors disabled:opacity-50 ${
locked
? "border border-emerald-200 bg-emerald-50 text-emerald-700 active:bg-emerald-100"
: "border border-zinc-200 bg-white text-zinc-700 active:bg-zinc-50"
? "bg-accent/15 text-accent ring-1 ring-accent/30 active:bg-accent/25"
: "bg-elevated text-gray-300 ring-1 ring-border active:bg-subtle"
}`}
>
{loading === "lock" || loading === "unlock" ? (
@@ -148,7 +148,7 @@ export default function RoomManageModal({
{/* User list with kick */}
<div className="mt-5">
<h3 className="text-xs font-semibold text-zinc-500">
<h3 className="text-xs font-semibold text-muted">
房间成员（{users.length}）
</h3>
<div className="mt-2 flex flex-col gap-1.5">
@@ -164,7 +164,7 @@ export default function RoomManageModal({
return (
<div
key={uid}
className="flex items-center gap-2.5 rounded-xl bg-zinc-50 px-3 py-2.5"
className="flex items-center gap-2.5 rounded-xl bg-elevated px-3 py-2.5"
>
<span
className={`inline-flex h-8 w-8 items-center justify-center rounded-full text-base ${bg}`}
@@ -174,17 +174,17 @@ export default function RoomManageModal({
<div className="flex min-w-0 flex-1 flex-col">
<div className="flex items-center gap-1.5">
{isCreator && (
<span className="flex items-center gap-0.5 text-[10px] font-bold text-amber-500">
<span className="flex items-center gap-0.5 text-[10px] font-bold text-amber-400">
<Crown size={10} />
房主
</span>
)}
<span className="truncate text-xs font-medium text-zinc-500">
<span className="truncate text-xs font-medium text-gray-400">
{displayName}
</span>
</div>
<span
className={`text-[11px] ${finished ? "text-emerald-500" : "text-zinc-400"}`}
className={`text-[11px] ${finished ? "text-accent" : "text-muted"}`}
>
{swiped}/{totalCards}
{finished ? " 已完成" : " 进行中"}
@@ -211,7 +211,7 @@ export default function RoomManageModal({
</button>
<button
onClick={() => setConfirmKick(null)}
className="rounded-lg bg-zinc-200 px-2.5 py-1 text-[11px] font-semibold text-zinc-600 transition-colors active:bg-zinc-300"
className="rounded-lg bg-subtle px-2.5 py-1 text-[11px] font-semibold text-gray-400 transition-colors active:bg-elevated"
>
取消
</button>
@@ -219,7 +219,7 @@ export default function RoomManageModal({
) : (
<button
onClick={() => setConfirmKick(uid)}
className="flex items-center gap-0.5 rounded-lg px-2 py-1 text-[11px] font-medium text-zinc-400 transition-colors active:bg-zinc-100 active:text-rose-500"
className="flex items-center gap-0.5 rounded-lg px-2 py-1 text-[11px] font-medium text-muted transition-colors active:bg-subtle active:text-rose-400"
>
<UserX size={13} />
移出
@@ -236,8 +236,8 @@ export default function RoomManageModal({
{/* End voting */}
<div className="mt-5">
{confirmEnd ? (
<div className="flex flex-col gap-2 rounded-xl border border-amber-200 bg-amber-50 p-3">
<p className="text-xs font-medium text-amber-800">
<div className="flex flex-col gap-2 rounded-xl bg-amber-500/10 p-3 ring-1 ring-amber-500/30">
<p className="text-xs font-medium text-amber-300">
确定要结束投票吗？将根据当前已有的投票结果直接结算。
</p>
<div className="flex gap-2">
@@ -255,7 +255,7 @@ export default function RoomManageModal({
</button>
<button
onClick={() => setConfirmEnd(false)}
className="flex h-9 flex-1 items-center justify-center rounded-lg bg-white text-xs font-semibold text-zinc-600 transition-colors active:bg-zinc-50"
className="flex h-9 flex-1 items-center justify-center rounded-lg bg-elevated text-xs font-semibold text-gray-400 transition-colors active:bg-subtle"
>
再等等
</button>
@@ -265,7 +265,7 @@ export default function RoomManageModal({
<button
onClick={() => setConfirmEnd(true)}
disabled={loading !== null}
className="flex h-11 w-full items-center justify-center gap-2 rounded-xl border border-amber-200 bg-amber-50 text-sm font-semibold text-amber-700 transition-colors active:bg-amber-100 disabled:opacity-50"
className="flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-amber-500/10 text-sm font-semibold text-amber-400 ring-1 ring-amber-500/30 transition-colors active:bg-amber-500/20 disabled:opacity-50"
>
<Flag size={15} />
结束投票（立即出结果）
src/components/SwipeDeck.tsx
+16 -16
View File
@@ -28,11 +28,11 @@ function UserProgressBar({
const myProfile = userProfiles[userId];
const myAvatar = myProfile?.avatar ?? getAvatar(userId).emoji;
const myAvatarBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-100";
const myAvatarBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-500/20";
return (
<div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1">
<span className="flex items-center gap-1 text-[11px] tabular-nums text-emerald-500">
<span className="flex items-center gap-1 text-[11px] tabular-nums text-accent">
<span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${myAvatarBg} text-[10px] leading-none`}>
{myAvatar}
</span>
@@ -47,12 +47,12 @@ function UserProgressBar({
return (
<span
key={id}
className={`flex items-center gap-1 text-[11px] tabular-nums ${finished ? "text-emerald-400" : "text-zinc-400"}`}
className={`flex items-center gap-1 text-[11px] tabular-nums ${finished ? "text-emerald-400" : "text-muted"}`}
>
<span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${bg} text-[10px] leading-none`}>
{emoji}
</span>
{label && <span className="max-w-[3rem] truncate">{label}</span>}
{label && <span className="max-w-12 truncate">{label}</span>}
{count}/{total}
{finished && <Check size={10} className="text-emerald-400" />}
</span>
@@ -84,9 +84,9 @@ function WaitingProgress({
const myBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-100";
return (
<div className="flex w-60 flex-col gap-2.5 rounded-2xl bg-zinc-50 px-4 py-3">
<div className="flex w-60 flex-col gap-2.5 rounded-2xl bg-surface px-4 py-3 ring-1 ring-border">
<div className="flex items-center justify-between">
<span className="flex items-center gap-1.5 text-xs font-medium text-emerald-600">
<span className="flex items-center gap-1.5 text-xs font-medium text-accent">
<span className={`inline-flex h-5 w-5 items-center justify-center rounded-full ${myBg} text-sm leading-none`}>
{myEmoji}
</span>
@@ -105,17 +105,17 @@ function WaitingProgress({
return (
<div key={id} className="flex flex-col gap-1">
<div className="flex items-center justify-between">
<span className={`flex items-center gap-1.5 text-xs font-medium ${finished ? "text-emerald-600" : "text-zinc-500"}`}>
<span className={`inline-flex h-5 w-5 items-center justify-center rounded-full text-sm leading-none ${finished ? "bg-emerald-100" : bg}`}>
<span className={`flex items-center gap-1.5 text-xs font-medium ${finished ? "text-accent" : "text-muted"}`}>
<span className={`inline-flex h-5 w-5 items-center justify-center rounded-full text-sm leading-none ${finished ? "bg-emerald-500/20" : bg}`}>
{emoji}
</span>
{label && <span className="max-w-[3rem] truncate">{label}</span>}
{label && <span className="max-w-12 truncate">{label}</span>}
{count}/{total}
</span>
{finished && <Check size={14} className="text-emerald-400" />}
</div>
{!finished && (
<div className="ml-7 h-1 overflow-hidden rounded-full bg-zinc-200">
<div className="ml-7 h-1 overflow-hidden rounded-full bg-elevated">
<motion.div
className="h-full rounded-full bg-amber-400"
animate={{ width: `${pct}%` }}
@@ -127,7 +127,7 @@ function WaitingProgress({
);
})}
<p className="text-center text-[10px] text-zinc-400">
<p className="text-center text-[10px] text-muted">
{finishedCount}/{others.length} 人已完成
</p>
</div>
@@ -326,7 +326,7 @@ export default function SwipeDeck({
{!allSwiped && !resolvedMatchId && (
<div className="mx-auto w-full max-w-sm px-4 pb-1">
<div className="flex items-center gap-2">
<div className="h-1 flex-1 overflow-hidden rounded-full bg-zinc-100">
<div className="h-1 flex-1 overflow-hidden rounded-full bg-elevated">
<motion.div
className="h-full rounded-full bg-emerald-400"
initial={{ width: 0 }}
@@ -336,13 +336,13 @@ export default function SwipeDeck({
transition={{ type: "spring", stiffness: 300, damping: 30 }}
/>
</div>
<span className="shrink-0 text-[11px] tabular-nums text-zinc-400">
<span className="shrink-0 text-[11px] tabular-nums text-muted">
{currentIndex}/{restaurants.length}
</span>
<button
onClick={handleUndo}
disabled={currentIndex === 0}
className="flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[11px] font-medium text-amber-500 transition-colors active:bg-amber-50 disabled:opacity-0"
className="flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[11px] font-medium text-amber-400 transition-colors active:bg-amber-500/15 disabled:opacity-0"
>
<Undo2 size={12} />
撤回
@@ -385,8 +385,8 @@ export default function SwipeDeck({
{showWaiting && (
<div className="flex h-full flex-col items-center justify-center gap-4">
<div className="h-5 w-5 animate-spin rounded-full border-2 border-zinc-300 border-t-emerald-500" />
<p className="text-sm font-medium text-zinc-500">等待其他人完成选择</p>
<div className="h-5 w-5 animate-spin rounded-full border-2 border-subtle border-t-accent" />
<p className="text-sm font-medium text-muted">等待其他人完成选择</p>
<WaitingProgress
userId={userId}
swipeCounts={swipeCounts}
src/components/TopNav.tsx
+9 -9
View File
@@ -51,7 +51,7 @@ export default function TopNav({
<div className="flex items-center gap-1.5">
<button
onClick={() => setShowQr(true)}
className="flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-600 transition-colors active:bg-emerald-100"
className="flex items-center gap-1 rounded-full bg-accent/15 px-2.5 py-1 text-xs font-semibold text-accent transition-colors active:bg-accent/25"
>
<QrCode size={13} />
邀请
@@ -59,7 +59,7 @@ export default function TopNav({
{isCreator && (
<button
onClick={() => setShowManage(true)}
className="flex items-center gap-1 rounded-full bg-amber-50 px-2.5 py-1 text-xs font-semibold text-amber-600 transition-colors active:bg-amber-100"
className="flex items-center gap-1 rounded-full bg-amber-500/15 px-2.5 py-1 text-xs font-semibold text-amber-400 transition-colors active:bg-amber-500/25"
>
<Crown size={13} />
管理
@@ -67,27 +67,27 @@ export default function TopNav({
)}
</div>
<h1 className="text-center text-base font-bold tracking-tight text-zinc-900">
<h1 className="text-center text-base font-bold tracking-tight text-white">
<span className="block leading-tight">NoWhatever</span>
<span className="block text-[10px] font-medium tracking-widest text-zinc-400">
<span className="block text-[10px] font-medium tracking-widest text-muted">
别说随便
</span>
</h1>
<div className="flex items-center justify-end gap-1.5 text-xs text-zinc-500">
<div className="flex items-center justify-end gap-1.5 text-xs text-muted">
{locked && (
<Lock size={12} className="text-amber-500" />
)}
<span className="rounded-full bg-zinc-100 px-2 py-0.5 font-medium">
<span className="rounded-full bg-surface px-2 py-0.5 font-medium text-gray-400">
{roomId}
</span>
<div className="flex items-center gap-0.5">
<Users size={13} />
<span className="font-semibold text-emerald-500">{userCount}</span>
<span className="font-semibold text-accent">{userCount}</span>
</div>
<button
onClick={onExit}
className="ml-1 flex items-center justify-center rounded-full p-1 text-zinc-400 transition-colors active:bg-zinc-100 active:text-zinc-600"
className="ml-1 flex items-center justify-center rounded-full p-1 text-muted transition-colors active:bg-elevated active:text-gray-300"
aria-label="退出房间"
>
<LogOut size={15} />
@@ -98,7 +98,7 @@ export default function TopNav({
<AnimatePresence>
{toast && (
<motion.div
className="fixed left-1/2 top-16 z-50 -translate-x-1/2 rounded-xl bg-zinc-900 px-4 py-2.5 text-xs font-medium text-white shadow-lg"
className="fixed left-1/2 top-16 z-50 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-white shadow-lg ring-1 ring-subtle"
initial={{ opacity: 0, y: -12, x: "-50%" }}
animate={{ opacity: 1, y: 0, x: "-50%" }}
exit={{ opacity: 0, y: -12, x: "-50%" }}