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(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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/components/chat/BaseChat.tsx
View File

@ -641,23 +641,25 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
</div>
</div>
</StickToBottom>
<div className="flex flex-col justify-center gap-5">
<div className="flex flex-col justify-center">
{!chatStarted && (
<div className="flex justify-center gap-2">
{ImportButtons(importChat)}
<GitCloneButton importChat={importChat} />
</div>
)}
{!chatStarted &&
ExamplePrompts((event, messageInput) => {
if (isStreaming) {
handleStop?.();
return;
}
<div className="flex flex-col gap-5">
{!chatStarted &&
ExamplePrompts((event, messageInput) => {
if (isStreaming) {
handleStop?.();
return;
}
handleSendMessage?.(event, messageInput);
})}
{!chatStarted && <StarterTemplates />}
handleSendMessage?.(event, messageInput);
})}
{!chatStarted && <StarterTemplates />}
</div>
</div>
</div>
<ClientOnly>

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>

4
app/components/chat/GitCloneButton.tsx
View File

@ -156,13 +156,13 @@ ${escapeBoltTags(file.content)}
<Button
onClick={() => setIsDialogOpen(true)}
title="Clone a Git Repo"
variant="outline"
variant="default"
size="lg"
className={classNames(
'gap-2 bg-bolt-elements-background-depth-1',
'text-bolt-elements-textPrimary',
'hover:bg-bolt-elements-background-depth-2',
'border-[rgba(0,0,0,0.08)] dark:border-[rgba(255,255,255,0.08)]',
'border border-bolt-elements-borderColor',
'h-10 px-4 py-2 min-w-[120px] justify-center',
'transition-all duration-200 ease-in-out',
className,

4
app/components/chat/ImportFolderButton.tsx
View File

@ -120,13 +120,13 @@ export const ImportFolderButton: React.FC<ImportFolderButtonProps> = ({ classNam
input?.click();
}}
title="Import Folder"
variant="outline"
variant="default"
size="lg"
className={classNames(
'gap-2 bg-bolt-elements-background-depth-1',
'text-bolt-elements-textPrimary',
'hover:bg-bolt-elements-background-depth-2',
'border-[rgba(0,0,0,0.08)] dark:border-[rgba(255,255,255,0.08)]',
'border border-bolt-elements-borderColor',
'h-10 px-4 py-2 min-w-[120px] justify-center',
'transition-all duration-200 ease-in-out',
className,

4
app/components/chat/chatExportAndImport/ImportButtons.tsx
View File

@ -64,13 +64,13 @@ export function ImportButtons(importChat: ((description: string, messages: Messa
const input = document.getElementById('chat-import');
input?.click();
}}
variant="outline"
variant="default"
size="lg"
className={classNames(
'gap-2 bg-bolt-elements-background-depth-1',
'text-bolt-elements-textPrimary',
'hover:bg-bolt-elements-background-depth-2',
'border-[rgba(0,0,0,0.08)] dark:border-[rgba(255,255,255,0.08)]',
'border border-bolt-elements-borderColor',
'h-10 px-4 py-2 min-w-[120px] justify-center',
'transition-all duration-200 ease-in-out',
)}