From ccaa67b6b23dac0b67f67c67fef94fbca96482ed Mon Sep 17 00:00:00 2001
From: Andrew Trokhymenko <atrokhym@gmail.com>
Date: Sat, 30 Nov 2024 00:04:53 -0500
Subject: [PATCH] adjusting spaces for X button in file-preview

---
 app/components/chat/FilePreview.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/app/components/chat/FilePreview.tsx b/app/components/chat/FilePreview.tsx
index 4c842ee..0500d03 100644
--- a/app/components/chat/FilePreview.tsx
+++ b/app/components/chat/FilePreview.tsx
@@ -1,7 +1,5 @@
-// Remove the lucide-react import
 import React from 'react';
 
-// Rest of the interface remains the same
 interface FilePreviewProps {
   files: File[];
   imageDataList: string[];
@@ -14,19 +12,17 @@ const FilePreview: React.FC<FilePreviewProps> = ({ files, imageDataList, onRemov
   }
 
   return (
-    <div className="flex flex-row overflow-x-auto">
+    <div className="flex flex-row overflow-x-auto -mt-2">
       {files.map((file, index) => (
         <div key={file.name + file.size} className="mr-2 relative">
           {imageDataList[index] && (
-            <div className="relative">
+            <div className="relative pt-4 pr-4">
               <img src={imageDataList[index]} alt={file.name} className="max-h-20" />
               <button
                 onClick={() => onRemove(index)}
-                className="absolute -top-2 -right-2 z-10 bg-white rounded-full p-1 shadow-md hover:bg-gray-100"
+                className="absolute top-1 right-1 z-10 bg-black rounded-full w-5 h-5 shadow-md hover:bg-gray-900 transition-colors flex items-center justify-center"
               >
-                <div className="bg-black rounded-full p-1">
-                  <div className="i-ph:x w-3 h-3 text-gray-400" />
-                </div>
+                <div className="i-ph:x w-3 h-3 text-gray-200" />
               </button>
             </div>
           )}