n/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy.git synced 2025-06-18 01:49:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

style(FilePreview): remove border and adjust styling for better UI consistency

Browse Source 
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
This commit is contained in:
KevIsDev 2025-04-24 12:08:08 +01:00
parent cdabfc3f6f
commit deef4d9c4d
1 changed files with 2 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/chat/FilePreview.tsx
View File

@ -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>