style(lovart-home): shrink top hover popovers by ~30% for consistency
This commit is contained in:
parent
e8bfbbf286
commit
f4a506540c
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user