From 1de0c55859889599cf1d756bd0d6ce15790a449a Mon Sep 17 00:00:00 2001
From: Dustin Loring <dustinwloring1988@gmail.com>
Date: Sat, 18 Jan 2025 15:49:13 -0500
Subject: [PATCH] chore: ui updates

some small ui updates for preview popout and chat history popout
---
 app/components/chat/ChatHistory.client.tsx | 23 ++++++++++++----------
 app/components/workbench/Preview.tsx       |  4 ++--
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/app/components/chat/ChatHistory.client.tsx b/app/components/chat/ChatHistory.client.tsx
index f393a05..45ec78e 100644
--- a/app/components/chat/ChatHistory.client.tsx
+++ b/app/components/chat/ChatHistory.client.tsx
@@ -59,27 +59,30 @@ export function ChatHistory() {
       </IconButton>
 
       {isOpen && (
-        <div className="absolute bottom-full left-0 mb-2 w-[300px] max-h-[400px] overflow-y-auto bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded-lg shadow-lg">
-          <div className="p-2">
-            <h3 className="text-sm font-medium text-bolt-elements-textPrimary px-2 py-1">Chat History</h3>
-            <div className="mt-1">
+        <>
+          <div className="fixed inset-0 z-[9998]" onClick={() => setIsOpen(false)} />
+          <div className="absolute bottom-full left-0 mb-2 z-[9999] min-w-[300px] max-h-[400px] overflow-y-auto bg-bolt-elements-background-depth-2 rounded-xl shadow-2xl border border-bolt-elements-borderColor overflow-hidden">
+            <div className="px-4 py-3.5 border-b border-bolt-elements-borderColor">
+              <h3 className="text-sm font-medium text-bolt-elements-textPrimary">Chat History</h3>
+            </div>
+            <div>
               {history.map((item) => (
                 <button
                   key={item.id}
                   onClick={() => handleRestore(item)}
-                  className="w-full text-left px-2 py-1.5 hover:bg-bolt-elements-item-backgroundHover rounded transition-colors"
+                  className="w-full px-4 py-3.5 text-left bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-item-backgroundAccent text-bolt-elements-textPrimary text-sm whitespace-nowrap transition-all duration-200 flex flex-col group"
                 >
-                  <div className="text-sm text-bolt-elements-textPrimary truncate">
+                  <span className="font-medium text-bolt-elements-textPrimary group-hover:text-bolt-elements-item-contentAccent transition-colors duration-200 truncate">
                     {item.description || `Version ${new Date(item.timestamp).toLocaleTimeString()}`}
-                  </div>
-                  <div className="text-xs text-bolt-elements-textTertiary">
+                  </span>
+                  <span className="text-xs text-bolt-elements-textSecondary group-hover:text-bolt-elements-textPrimary transition-colors duration-200">
                     {new Date(item.timestamp).toLocaleDateString()} {new Date(item.timestamp).toLocaleTimeString()}
-                  </div>
+                  </span>
                 </button>
               ))}
             </div>
           </div>
-        </div>
+        </>
       )}
     </div>
   );
diff --git a/app/components/workbench/Preview.tsx b/app/components/workbench/Preview.tsx
index a1633f4..9bb70c6 100644
--- a/app/components/workbench/Preview.tsx
+++ b/app/components/workbench/Preview.tsx
@@ -325,7 +325,7 @@ export const Preview = memo(() => {
                   {WINDOW_SIZES.map((size) => (
                     <button
                       key={size.name}
-                      className="w-full px-4 py-3.5 text-left hover:bg-bolt-elements-item-backgroundAccent text-bolt-elements-textSecondary text-sm whitespace-nowrap transition-all duration-200 flex items-center gap-3 group"
+                      className="w-full px-4 py-3.5 text-left bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-item-backgroundAccent text-bolt-elements-textPrimary text-sm whitespace-nowrap transition-all duration-200 flex items-center gap-3 group"
                       onClick={() => {
                         setSelectedWindowSize(size);
                         setIsWindowSizeDropdownOpen(false);
@@ -333,7 +333,7 @@ export const Preview = memo(() => {
                       }}
                     >
                       <div
-                        className={`${size.icon} w-5 h-5 text-bolt-elements-textSecondary group-hover:text-bolt-elements-item-contentAccent transition-colors duration-200`}
+                        className={`${size.icon} w-5 h-5 text-bolt-elements-textPrimary group-hover:text-bolt-elements-item-contentAccent transition-colors duration-200`}
                       />
                       <div className="flex flex-col">
                         <span className="font-medium text-bolt-elements-textPrimary group-hover:text-bolt-elements-item-contentAccent transition-colors duration-200">