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 142e19a3..d6435e6e 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 0500d03b..e42faef2 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 a450c2c8..3fcebdc4 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 7d1801ea..e0c2d266 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 cc792c32..c1835587 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',
             )}