Skip to content

Commit b277027

Browse files
viper151viper151
committed
Refactor CodeEditor component to improve dark mode support and enhance loading styles
1 parent c8aa3d5 commit b277027

File tree

1 file changed

+30
-18
lines changed

1 file changed

+30
-18
lines changed

‎src/components/CodeEditor.jsx

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ function CodeEditor({ file, onClose, projectPath }) {
7676
const lineStart = pos;
7777
const lineEnd = pos + oldLines[i].length;
7878
builder.add(lineStart, lineEnd, Decoration.line({
79-
class: 'diff-removed-light'
79+
class: isDarkMode ? 'diff-removed-dark' : 'diff-removed-light'
8080
}));
8181
pos += oldLines[i].length + 1;
8282
}
@@ -171,7 +171,7 @@ function CodeEditor({ file, onClose, projectPath }) {
171171
});
172172
}
173173
}
174-
}, [content, file.diffInfo, showDiff]);
174+
}, [content, file.diffInfo, showDiff, isDarkMode]);
175175

176176
const handleSave = async () => {
177177
setSaving(true);
@@ -242,14 +242,26 @@ function CodeEditor({ file, onClose, projectPath }) {
242242

243243
if (loading) {
244244
return (
245-
<div className="fixed inset-0 z-50 md:bg-black/50 md:flex md:items-center md:justify-center">
246-
<div className="bg-white w-full h-full md:rounded-lg md:w-auto md:h-auto p-8 flex items-center justify-center">
247-
<div className="flex items-center gap-3">
248-
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
249-
<span className="text-gray-900">Loading {file.name}...</span>
245+
<>
246+
<style>
247+
{`
248+
.code-editor-loading {
249+
background-color: ${isDarkMode ? '#111827' : '#ffffff'} !important;
250+
}
251+
.code-editor-loading:hover {
252+
background-color: ${isDarkMode ? '#111827' : '#ffffff'} !important;
253+
}
254+
`}
255+
</style>
256+
<div className="fixed inset-0 z-50 md:bg-black/50 md:flex md:items-center md:justify-center">
257+
<div className="code-editor-loading w-full h-full md:rounded-lg md:w-auto md:h-auto p-8 flex items-center justify-center">
258+
<div className="flex items-center gap-3">
259+
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
260+
<span className="text-gray-900 dark:text-white">Loading {file.name}...</span>
261+
</div>
250262
</div>
251263
</div>
252-
</div>
264+
</>
253265
);
254266
}
255267

@@ -288,7 +300,7 @@ function CodeEditor({ file, onClose, projectPath }) {
288300
{file.diffInfo && (
289301
<button
290302
onClick={() => setShowDiff(!showDiff)}
291-
className="p-2 md:p-2 text-gray-600 hover:text-gray-900 rounded-md hover:bg-gray-100 min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
303+
className="p-2 md:p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
292304
title={showDiff ? "Hide diff highlighting" : "Show diff highlighting"}
293305
>
294306
{showDiff ? <EyeOff className="w-5 h-5 md:w-4 md:h-4" /> : <Eye className="w-5 h-5 md:w-4 md:h-4" />}
@@ -306,18 +318,18 @@ function CodeEditor({ file, onClose, projectPath }) {
306318
>
307319
<span className="text-sm md:text-xs font-mono font-bold">↵</span>
308320
</button>
309-
321+
310322
<button
311323
onClick={() => setIsDarkMode(!isDarkMode)}
312-
className="p-2 md:p-2 text-gray-600 hover:text-gray-900 rounded-md hover:bg-gray-100 min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
313-
title="Toggle editor theme"
324+
className="p-2 md:p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
325+
title="Toggle theme"
314326
>
315327
<span className="text-lg md:text-base">{isDarkMode ? '☀️' : '🌙'}</span>
316328
</button>
317329

318330
<button
319331
onClick={handleDownload}
320-
className="p-2 md:p-2 text-gray-600 hover:text-gray-900 rounded-md hover:bg-gray-100 min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
332+
className="p-2 md:p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
321333
title="Download file"
322334
>
323335
<Download className="w-5 h-5 md:w-4 md:h-4" />
@@ -349,15 +361,15 @@ function CodeEditor({ file, onClose, projectPath }) {
349361

350362
<button
351363
onClick={toggleFullscreen}
352-
className="hidden md:flex p-2 text-gray-600 hover:text-gray-900 rounded-md hover:bg-gray-100 items-center justify-center"
364+
className="hidden md:flex p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 items-center justify-center"
353365
title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
354366
>
355367
{isFullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
356368
</button>
357369

358370
<button
359371
onClick={onClose}
360-
className="p-2 md:p-2 text-gray-600 hover:text-gray-900 rounded-md hover:bg-gray-100 min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
372+
className="p-2 md:p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
361373
title="Close"
362374
>
363375
<X className="w-6 h-6 md:w-4 md:h-4" />
@@ -399,14 +411,14 @@ function CodeEditor({ file, onClose, projectPath }) {
399411
</div>
400412

401413
{/* Footer */}
402-
<div className="flex items-center justify-between p-3 border-t border-gray-200 bg-gray-50 flex-shrink-0">
403-
<div className="flex items-center gap-4 text-sm text-gray-600">
414+
<div className="flex items-center justify-between p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 flex-shrink-0">
415+
<div className="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
404416
<span>Lines: {content.split('\n').length}</span>
405417
<span>Characters: {content.length}</span>
406418
<span>Language: {file.name.split('.').pop()?.toUpperCase() || 'Text'}</span>
407419
</div>
408420

409-
<div className="text-sm text-gray-500">
421+
<div className="text-sm text-gray-500 dark:text-gray-400">
410422
Press Ctrl+S to save • Esc to close
411423
</div>
412424
</div>

0 commit comments

Comments
 (0)