ui styles fixed

app/commit.json

@@ -1 +1 @@
-{ "commit": "e5ecb0b7d5e0fb53f13654689cebd8eb99b10578" }
+{ "commit": "4ba5d37fcd16414a06dbeba56c7732173e734c63" }

app/components/settings/event-logs/EventLogsTab.tsx

@@ -4,6 +4,7 @@ import { toast } from 'react-toastify';
 import { Switch } from '~/components/ui/Switch';
 import { logStore, type LogEntry } from '~/lib/stores/logs';
 import { useStore } from '@nanostores/react';
+import { classNames } from '~/utils/classNames';
 
 export default function EventLogsTab() {
   const {} = useSettings();
@@ -19,8 +20,8 @@ export default function EventLogsTab() {
       const matchesLevel = !logLevel || log.level === logLevel;
       const matchesSearch =
         !searchQuery ||
-        log.message.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        log.message?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        JSON.stringify(log.details).toLowerCase().includes(searchQuery.toLowerCase());
+        JSON.stringify(log.details)?.toLowerCase()?.includes(searchQuery?.toLowerCase());
 
       return matchesLevel && matchesSearch;
     });
@@ -118,7 +119,7 @@ export default function EventLogsTab() {
   };
 
   return (
-    <div className="p-4">
+    <div className="p-4 h-full flex flex-col">
       <div className="flex flex-col space-y-4 mb-4">
         {/* Title and Toggles Row */}
         <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
@@ -140,7 +141,7 @@ export default function EventLogsTab() {
           <select
             value={logLevel}
             onChange={(e) => setLogLevel(e.target.value as LogEntry['level'])}
-            className="bg-bolt-elements-bg-depth-2 text-bolt-elements-textPrimary rounded-lg px-3 py-1.5 text-sm min-w-[100px]"
+            className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all lg:max-w-[20%] text-sm min-w-[100px]"
           >
             <option value="info">Info</option>
             <option value="warning">Warning</option>
@@ -153,20 +154,30 @@ export default function EventLogsTab() {
               placeholder="Search logs..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full bg-bolt-elements-bg-depth-2 text-bolt-elements-textPrimary rounded-lg px-3 py-1.5 text-sm"
+              className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor"
             />
           </div>
           {showLogs && (
             <div className="flex items-center gap-2 flex-nowrap">
               <button
                 onClick={handleExportLogs}
-                className="bg-blue-500 text-white rounded-lg px-3 py-1.5 hover:bg-blue-600 transition-colors duration-200 text-sm whitespace-nowrap"
+                className={classNames(
+                  'bg-bolt-elements-button-primary-background',
+                  'rounded-lg px-4 py-2 transition-colors duration-200',
+                  'hover:bg-bolt-elements-button-primary-backgroundHover',
+                  'text-bolt-elements-button-primary-text',
+                )}
               >
                 Export Logs
               </button>
               <button
                 onClick={handleClearLogs}
-                className="bg-red-500 text-white rounded-lg px-3 py-1.5 hover:bg-red-600 transition-colors duration-200 text-sm whitespace-nowrap"
+                className={classNames(
+                  'bg-bolt-elements-button-danger-background',
+                  'rounded-lg px-4 py-2 transition-colors duration-200',
+                  'hover:bg-bolt-elements-button-danger-backgroundHover',
+                  'text-bolt-elements-button-danger-text',
+                )}
               >
                 Clear Logs
               </button>
@@ -175,7 +186,7 @@ export default function EventLogsTab() {
         </div>
       </div>
 
-      <div className="bg-bolt-elements-bg-depth-1 rounded-lg p-4 h-[calc(100vh-250px)] min-h-[400px] overflow-y-auto logs-container">
+      <div className="bg-bolt-elements-bg-depth-1 rounded-lg p-4 h-[calc(100vh - 250px)] min-h-[400px] overflow-y-auto logs-container overflow-y-auto">
         {filteredLogs.length === 0 ? (
           <div className="text-center text-bolt-elements-textSecondary py-8">No logs found</div>
         ) : (

app/components/sidebar/Menu.client.tsx

@@ -11,7 +11,6 @@ import { logger } from '~/utils/logger';
 import { HistoryItem } from './HistoryItem';
 import { binDates } from './date-binning';
 import { useSearchFilter } from '~/lib/hooks/useSearchFilter';
-import { ClockIcon } from '@heroicons/react/24/outline';
 
 const menuVariants = {
   closed: {
@@ -49,7 +48,7 @@ function CurrentDateTime() {
 
   return (
     <div className="flex items-center gap-2 px-4 py-3 font-bold text-gray-700 dark:text-gray-300 border-b border-bolt-elements-borderColor">
-      <ClockIcon className="h-4 w-4" />
+      <div className="h-4 w-4 i-ph:clock-thin" />
       {dateTime.toLocaleDateString()} {dateTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
     </div>
   );

package.json

@@ -51,7 +51,6 @@
     "@codemirror/search": "^6.5.8",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.35.0",
-    "@heroicons/react": "^2.2.0",
     "@iconify-json/ph": "^1.2.1",
     "@iconify-json/svg-spinners": "^1.2.1",
     "@lezer/highlight": "^1.2.1",