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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user