style(lovart-home): shrink top hover popovers by ~30% for consistency
Some checks failed
Lint / build (20) (push) Has been cancelled
Playwright Tests / test (push) Has been cancelled

This commit is contained in:
Your Name 2026-02-14 01:49:28 +08:00
parent e8bfbbf286
commit f4a506540c

View File

@ -200,10 +200,10 @@ function AccountMenuItem({
<button
type="button"
onClick={onClick}
className="flex w-full items-center gap-3 rounded-2xl px-3 py-2 text-left text-[15px] font-medium text-black/80 hover:bg-black/5"
className="flex w-full items-center gap-3 rounded-2xl px-2.5 py-1.5 text-left text-[13px] font-medium text-black/80 hover:bg-black/5"
>
<span className="flex h-9 w-9 items-center justify-center rounded-xl bg-black/5 text-black/70">
<Icon className="h-[18px] w-[18px]" />
<span className="flex h-8 w-8 items-center justify-center rounded-xl bg-black/5 text-black/70">
<Icon className="h-[16px] w-[16px]" />
</span>
<span className="flex-1">{label}</span>
</button>
@ -758,33 +758,37 @@ export function LovartHome({
</div>
</Button>
</HoverCardTrigger>
<HoverCardContent align="end" sideOffset={10} className="w-[430px] rounded-3xl border border-black/10 bg-white p-0 shadow-xl">
<div className="p-6">
<HoverCardContent
align="end"
sideOffset={10}
className="w-[300px] rounded-3xl border border-black/10 bg-white p-0 shadow-xl"
>
<div className="p-4">
<div className="mb-4 flex items-start justify-between">
<div>
<div className="text-[30px] font-semibold leading-none text-black">
<div className="text-[22px] font-semibold leading-none text-black">
{currentPlan?.name || "Free"}
</div>
</div>
<Button
size="sm"
className="rounded-2xl bg-[#2f3542] px-5 text-white hover:bg-[#242a36]"
className="h-8 rounded-2xl bg-[#2f3542] px-4 text-[13px] text-white hover:bg-[#242a36]"
onClick={() => setUpgradeDialogOpen(true)}
>
升级
</Button>
</div>
<div className="space-y-3 border-t border-black/10 pt-4 text-base">
<div className="space-y-2.5 border-t border-black/10 pt-3 text-[14px]">
<div className="flex items-center justify-between">
<span className="inline-flex items-center gap-2 text-black/80">
<Sparkles className="h-4 w-4" />
<Sparkles className="h-3.5 w-3.5" />
积分
</span>
<span>{membershipData?.summary?.currentCredits ?? 0}</span>
</div>
<div className="flex items-center justify-between">
<span className="inline-flex items-center gap-2 text-black/80">
<Upload className="h-4 w-4" />
<Upload className="h-3.5 w-3.5" />
每日免费积分
</span>
<span>{membershipData?.summary?.dailyFreeCredits ?? 0}</span>
@ -792,7 +796,7 @@ export function LovartHome({
</div>
<button
type="button"
className="mt-6 inline-flex items-center gap-1 text-sm font-medium text-black/80 hover:text-black"
className="mt-4 inline-flex items-center gap-1 text-[12px] font-medium text-black/80 hover:text-black"
onClick={() => setUpgradeDialogOpen(true)}
>
使用详情
@ -816,28 +820,28 @@ export function LovartHome({
<HoverCardContent
align="end"
sideOffset={12}
className="w-[360px] rounded-3xl border border-black/10 bg-white p-0 shadow-xl"
className="w-[300px] rounded-3xl border border-black/10 bg-white p-0 shadow-xl"
>
<div className="p-4">
<div className="rounded-3xl border border-black/10 bg-white p-4">
<div className="p-3.5">
<div className="rounded-3xl border border-black/10 bg-white p-3.5">
<div className="flex justify-center">
<div className="flex h-14 w-14 items-center justify-center rounded-full bg-[#d4551f] text-[18px] font-semibold text-white">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#d4551f] text-[14px] font-semibold text-white">
{userInitials}
</div>
</div>
<div className="mt-3 flex items-center justify-between gap-3">
<div className="min-w-0">
<div className="truncate text-[18px] font-semibold text-black">
<div className="truncate text-[15px] font-semibold text-black">
{userDisplayName}
</div>
<div className="truncate text-[14px] text-black/45">
<div className="truncate text-[12px] text-black/45">
{user?.email || ""}
</div>
</div>
<Button
size="sm"
className="h-9 rounded-2xl bg-[#2f3542] px-6 text-[14px] text-white hover:bg-[#242a36]"
className="h-8 rounded-2xl bg-[#2f3542] px-4 text-[13px] text-white hover:bg-[#242a36]"
onClick={() => setUpgradeDialogOpen(true)}
>
升级
@ -847,11 +851,11 @@ export function LovartHome({
<div className="mt-4 border-t border-black/10 pt-3">
<button
type="button"
className="flex w-full items-center justify-between rounded-2xl px-1 py-1 text-[15px] font-semibold text-black/80 hover:bg-black/5"
className="flex w-full items-center justify-between rounded-2xl px-1 py-1 text-[13px] font-semibold text-black/80 hover:bg-black/5"
onClick={() => setUpgradeDialogOpen(true)}
>
<span>积分</span>
<span className="inline-flex items-center gap-2 text-[15px] font-semibold text-black/60">
<span className="inline-flex items-center gap-2 text-[13px] font-semibold text-black/60">
{membershipData?.summary?.currentCredits ?? 0}
<ArrowRight className="h-4 w-4" />
</span>