Update the popup's visual appearance for better consistency

Refactor `IncomingNotePopup` component to simplify structure, adjust background colors, and modify header/footer styling using Tailwind CSS classes.
This commit is contained in:
Riyadh
2026-05-07 10:17:44 +00:00
parent 48ce71dee0
commit 5deed223c3
@@ -373,20 +373,13 @@ export function IncomingNotePopup() {
>
<div
className={`rounded-2xl ring-4 ring-amber-400/70 shadow-2xl shadow-amber-500/30 overflow-hidden transition-transform duration-200 ${
// Default-color notes keep the original neutral popup
// chrome (bg-background) so uncolored notes look exactly
// like before. Only explicitly-colored notes paint the
// whole card with their palette tint.
current.color === "default"
? "bg-background"
: colorBg(current.color)
} ${enterAnim ? "scale-100" : "scale-95"}`}
data-popup-color={current.color}
>
{/* Drag handle / header — sits ON the tinted surface (no
opaque chrome behind it) so the whole card reads as one
continuous sticky note. Use a translucent dark divider
that works across every palette tint. */}
{/* Drag handle / header */}
<div
onPointerDown={onHandlePointerDown}
onPointerMove={onHandlePointerMove}
@@ -433,9 +426,7 @@ export function IncomingNotePopup() {
</button>
</div>
{/* Body sits directly on the tinted card surface — no
card-in-card. The whole popup IS the sticky note; only
the outer ring + header chrome remain as frame. */}
{/* Body — renders directly on the tinted card surface. */}
<div
className="p-4 space-y-3 max-h-[50vh] overflow-y-auto"
data-testid="incoming-note-popup-body"
@@ -465,10 +456,7 @@ export function IncomingNotePopup() {
)}
</div>
{/* Action row sits on its own faint divider strip so the
buttons stay legible against any tint, while still
letting the colored surface bleed through (no opaque
white footer). */}
{/* Action row */}
<div className="px-4 py-3 border-t border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5">
<div className="flex flex-wrap gap-2 sm:flex-nowrap justify-end">
<Button