From 9123b35a85d9dfdb0d36f857528c97f1a92e75f7 Mon Sep 17 00:00:00 2001
From: arkml <arkm85@gmail.com>
Date: Fri, 19 Sep 2025 18:36:55 +0530
Subject: [PATCH] move to x icon for dismiss

---
 .../common/compose-box-playground.tsx         | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/apps/rowboat/components/common/compose-box-playground.tsx b/apps/rowboat/components/common/compose-box-playground.tsx
index 229582df..28ed35a3 100644
--- a/apps/rowboat/components/common/compose-box-playground.tsx
+++ b/apps/rowboat/components/common/compose-box-playground.tsx
@@ -133,7 +133,7 @@ export function ComposeBoxPlayground({
                 {/* Textarea */}
                 <div className="flex-1">
                     {pendingImage && (
-                        <div className="mb-2 flex items-center gap-2">
+                        <div className="mb-2 inline-block relative">
                             <img
                                 src={pendingImage.previewSrc || pendingImage.url}
                                 alt="Uploaded image preview"
@@ -141,7 +141,8 @@ export function ComposeBoxPlayground({
                             />
                             <button
                                 type="button"
-                                className="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 border border-gray-200 dark:border-gray-700"
+                                aria-label="Remove image"
+                                className="absolute -top-1 -right-1 p-1 rounded-full bg-white dark:bg-zinc-900 border border-gray-200 dark:border-gray-700 shadow hover:bg-gray-50 dark:hover:bg-zinc-800"
                                 onClick={() => {
                                     if (pendingImage?.previewSrc) {
                                         try { URL.revokeObjectURL(pendingImage.previewSrc); } catch {}
@@ -149,7 +150,7 @@ export function ComposeBoxPlayground({
                                     setPendingImage(null);
                                 }}
                             >
-                                Dismiss
+                                <XIcon size={12} />
                             </button>
                         </div>
                     )}
@@ -276,3 +277,22 @@ function ImageIcon({ size, className }: { size: number, className?: string }) {
         </svg>
     );
 }
+
+function XIcon({ size, className }: { size: number, className?: string }) {
+    return (
+        <svg
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className={className}
+        >
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+    );
+}