iBoss/bolt-diy
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style(chat): update button variants and improve file preview styling

Browse Source 
Change button variants from 'outline' to 'default' for consistency across components. Enhance FilePreview component with better spacing, borders, and file name display to improve visual clarity and user experience.
This commit is contained in:
KevIsDev
2025-04-24 11:55:14 +01:00
parent 516dc9dc28
commit cdabfc3f6f
5 changed files with 29 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,18 +12,25 @@ const FilePreview: React.FC<FilePreviewProps> = ({ files, imageDataList, onRemov
}
return (
<div className="flex flex-row overflow-x-auto -mt-2">
<div className="flex flex-row overflow-x-auto mx-2 -mt-1 p-2 bg-bolt-elements-background-depth-3 border border-b-none border-bolt-elements-borderColor rounded-lg rounded-b-none">
{files.map((file, index) => (
<div key={file.name + file.size} className="mr-2 relative">
{imageDataList[index] && (
<div className="relative pt-4 pr-4">
<img src={imageDataList[index]} alt={file.name} className="max-h-20" />
<div className="relative">
<img
src={imageDataList[index]}
alt={file.name}
className="max-h-20 border border-bolt-elements-borderColor 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"
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">
<span className="truncate">{file.name}</span>
</div>
</div>
)}
</div>