From 099e0662239ffb73c87a263c7641098a6c313c81 Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Mon, 22 Jun 2026 12:15:15 -0700
Subject: [PATCH] Fix drag and drop and code viewer color palete

---
 frontend/src/components/FileExplorer.tsx | 6 +++---
 frontend/src/components/FilePreview.tsx  | 7 ++++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/FileExplorer.tsx b/frontend/src/components/FileExplorer.tsx
index d8720bb..93fbcc9 100644
--- a/frontend/src/components/FileExplorer.tsx
+++ b/frontend/src/components/FileExplorer.tsx
@@ -881,9 +881,9 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
   }
 
   function handleDragOver(e: React.DragEvent) {
-    if (draggedFile || activeSection === 'trash') return;
-    if (!e.dataTransfer.types.includes('Files')) return;
     e.preventDefault();
+    if (draggedFile || activeSection === 'trash') return;
+    if (!Array.from(e.dataTransfer.types).includes('Files')) return;
     setDragOver(true);
   }
 
@@ -2639,7 +2639,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
       </AnimatePresence>
 
       <TaskManager />
-      <FilePreview file={previewFile} onClose={() => setPreviewFile(null)} downloadToken={downloadToken} />
+      <FilePreview file={previewFile} onClose={() => setPreviewFile(null)} downloadToken={downloadToken} theme={theme} />
       <AnimatePresence>
         {sharingFile && (
           <ShareModal filePath={sharingFile} onClose={() => setSharingFile(null)} />
diff --git a/frontend/src/components/FilePreview.tsx b/frontend/src/components/FilePreview.tsx
index f10d785..c220cca 100644
--- a/frontend/src/components/FilePreview.tsx
+++ b/frontend/src/components/FilePreview.tsx
@@ -6,7 +6,7 @@ import { X, Download, File, Image as ImageIcon, Film, Music, FileText, Code, Loa
 import api from '@/lib/api';
 import dynamic from 'next/dynamic';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { vscDarkPlus, vs } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { formatSize, getFileDisplayName } from '@/lib/utils';
 
 const DynamicPdfViewer = dynamic(() => import('./PdfViewer'), { ssr: false });
@@ -22,11 +22,12 @@ interface FilePreviewProps {
   } | null;
   onClose: () => void;
   downloadToken?: string;
+  theme?: string;
 }
 
 // getFileDisplayName imported from utils
 
-export default function FilePreview({ file, onClose, downloadToken }: FilePreviewProps) {
+export default function FilePreview({ file, onClose, downloadToken, theme = 'dark' }: FilePreviewProps) {
   const [content, setContent] = useState<string | null>(null);
   const [archiveItems, setArchiveItems] = useState<{name: string, size: number, path: string}[] | null>(null);
   const [archivePath, setArchivePath] = useState<string>('');
@@ -333,7 +334,7 @@ export default function FilePreview({ file, onClose, downloadToken }: FilePrevie
                   <div className="w-full h-full overflow-auto rounded-lg" style={{ backgroundColor: 'var(--color-bg-secondary)', border: '1px solid var(--color-border-subtle)' }}>
                     <SyntaxHighlighter
                       language={file.name.split('.').pop()?.toLowerCase() || 'text'}
-                      style={vscDarkPlus}
+                      style={theme === 'light' ? vs : vscDarkPlus}
                       customStyle={{ margin: 0, background: 'transparent', height: '100%', fontSize: '14px' }}
                       showLineNumbers={true}
                     >