feat(inbox): redesenho do card de pré-lançamento

Logo maior (40px), nome do app em font-semibold, data em linha
separada e valor monetário em destaque — melhor hierarquia visual.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-04-11 17:51:17 +00:00
parent 1f9098879e
commit a7268d8f05

View File

@@ -104,11 +104,11 @@ export const InboxCard = memo(function InboxCard({
return ( return (
<Card <Card
className={`flex h-54 flex-col gap-0 py-0 transition-colors ${selected ? "ring-2 ring-primary" : ""}`} className={`flex h-54 flex-col gap-0 py-0 transition-colors ${selected ? "ring-2 ring-primary/30" : ""}`}
> >
<CardHeader className="pt-4"> <CardHeader className="pt-4">
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between">
<CardTitle className="flex min-w-0 items-center gap-1.5 text-sm"> <CardTitle className="flex min-w-0 items-center gap-3 text-sm">
{onSelectToggle && ( {onSelectToggle && (
<Checkbox <Checkbox
checked={!!selected} checked={!!selected}
@@ -117,29 +117,34 @@ export const InboxCard = memo(function InboxCard({
className="shrink-0" className="shrink-0"
/> />
)} )}
<div className="relative size-8 shrink-0 overflow-hidden rounded-full"> <div className="relative shrink-0 overflow-hidden ">
<Image <Image
src={displayLogo} src={displayLogo}
alt="" alt={item.sourceAppName || item.sourceApp}
fill width={40}
sizes="32px" height={40}
className="object-cover" className="size-10 rounded-full object-cover"
/> />
</div> </div>
<span className="truncate"> <div className="flex min-w-0 flex-col">
{item.sourceAppName || item.sourceApp} <span className="truncate font-semibold text-base">
</span> {item.sourceAppName || item.sourceApp}
<Tooltip> </span>
<TooltipTrigger asChild> <Tooltip>
<span className="shrink-0 cursor-default text-xs font-normal text-muted-foreground underline decoration-dotted underline-offset-2"> <TooltipTrigger asChild>
{timeAgo} <span className="cursor-default text-xs text-muted-foreground underline decoration-dotted underline-offset-2">
</span> {timeAgo}
</TooltipTrigger> </span>
<TooltipContent>{fullDate}</TooltipContent> </TooltipTrigger>
</Tooltip> <TooltipContent>{fullDate}</TooltipContent>
</Tooltip>
</div>
</CardTitle> </CardTitle>
{amount !== null && ( {amount !== null && (
<MoneyValues amount={amount} className="shrink-0 text-sm" /> <MoneyValues
amount={amount}
className="shrink-0 text-base font-semibold"
/>
)} )}
</div> </div>
</CardHeader> </CardHeader>