From cdabfc3f6f060243cb115d73c1754c3dabf08f82 Mon Sep 17 00:00:00 2001
From: KevIsDev <zennerd404@gmail.com>
Date: Thu, 24 Apr 2025 11:55:14 +0100
Subject: [PATCH] style(chat): update button variants and improve file preview
 styling

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.
---
 app/components/chat/BaseChat.tsx              | 22 ++++++++++---------
 app/components/chat/FilePreview.tsx           | 15 +++++++++----
 app/components/chat/GitCloneButton.tsx        |  4 ++--
 app/components/chat/ImportFolderButton.tsx    |  4 ++--
 .../chatExportAndImport/ImportButtons.tsx     |  4 ++--
 5 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 142e19a..d6435e6 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -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>
diff --git a/app/components/chat/FilePreview.tsx b/app/components/chat/FilePreview.tsx
index 0500d03..e42faef 100644
--- a/app/components/chat/FilePreview.tsx
+++ b/app/components/chat/FilePreview.tsx
@@ -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>
diff --git a/app/components/chat/GitCloneButton.tsx b/app/components/chat/GitCloneButton.tsx
index a450c2c..3fcebdc 100644
--- a/app/components/chat/GitCloneButton.tsx
+++ b/app/components/chat/GitCloneButton.tsx
@@ -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,
diff --git a/app/components/chat/ImportFolderButton.tsx b/app/components/chat/ImportFolderButton.tsx
index 7d1801e..e0c2d26 100644
--- a/app/components/chat/ImportFolderButton.tsx
+++ b/app/components/chat/ImportFolderButton.tsx
@@ -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,
diff --git a/app/components/chat/chatExportAndImport/ImportButtons.tsx b/app/components/chat/chatExportAndImport/ImportButtons.tsx
index cc792c3..c183558 100644
--- a/app/components/chat/chatExportAndImport/ImportButtons.tsx
+++ b/app/components/chat/chatExportAndImport/ImportButtons.tsx
@@ -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',
             )}