From 5deed223c34531f197ab24edf07083314c315ed0 Mon Sep 17 00:00:00 2001
From: Riyadh <dev@tx.local>
Date: Thu, 7 May 2026 10:17:44 +0000
Subject: [PATCH] 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.
---
 .../components/notes/incoming-note-popup.tsx   | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/artifacts/tx-os/src/components/notes/incoming-note-popup.tsx b/artifacts/tx-os/src/components/notes/incoming-note-popup.tsx
index 667eead8..d7b349e0 100644
--- a/artifacts/tx-os/src/components/notes/incoming-note-popup.tsx
+++ b/artifacts/tx-os/src/components/notes/incoming-note-popup.tsx
@@ -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