From deef4d9c4ddf5d53001e821d3a56ff778a6b63ea Mon Sep 17 00:00:00 2001
From: KevIsDev <zennerd404@gmail.com>
Date: Thu, 24 Apr 2025 12:08:08 +0100
Subject: [PATCH] style(FilePreview): remove border and adjust styling for
 better UI consistency

The border around the image was removed to simplify the design, and the bottom text container was updated to include a background color and rounded corners for better visual coherence
---
 app/components/chat/FilePreview.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/app/components/chat/FilePreview.tsx b/app/components/chat/FilePreview.tsx
index e42faef2..e1400cf8 100644
--- a/app/components/chat/FilePreview.tsx
+++ b/app/components/chat/FilePreview.tsx
@@ -17,18 +17,14 @@ const FilePreview: React.FC<FilePreviewProps> = ({ files, imageDataList, onRemov
         <div key={file.name + file.size} className="mr-2 relative">
           {imageDataList[index] && (
             <div className="relative">
-              <img
-                src={imageDataList[index]}
-                alt={file.name}
-                className="max-h-20 border border-bolt-elements-borderColor rounded-lg"
-              />
+              <img src={imageDataList[index]} alt={file.name} className="max-h-20 rounded-lg" />
               <button
                 onClick={() => onRemove(index)}
                 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="i-ph:x w-3 h-3 text-gray-200" />
               </button>
-              <div className="px-2 absolute bottom-0 w-full h-5 flex items-center border-t border-bolt-elements-borderColor text-bolt-elements-textTertiary font-thin text-xs">
+              <div className="absolute bottom-0 w-full h-5 flex items-center px-2 rounded-b-lg text-bolt-elements-textTertiary font-thin text-xs bg-bolt-elements-background-depth-2">
                 <span className="truncate">{file.name}</span>
               </div>
             </div>