fix: theme and a bit nicer

block · Jul 24, 2024 · 18c36e6 · 18c36e6
1 parent 2123f11
commit 18c36e6
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/frontend/src/components/CodeEditor.tsx b/frontend/src/components/CodeEditor.tsx
@@ -1,4 +1,5 @@
 import {useEffect, useState} from 'react'
+import {useDarkMode} from '../providers/dark-mode-provider.tsx'
 
 export interface InitialState {
   initialText: string
@@ -11,6 +12,7 @@ export const CodeEditor = (
     { initialState: InitialState, onTextChanged?: (text: string) => void }
 ) => {
   const [editorText, setEditorText] = useState(initialState.initialText)
+  const { isDarkMode } = useDarkMode()
 
   useEffect(() => {
     setEditorText(initialState.initialText)
@@ -23,12 +25,14 @@ export const CodeEditor = (
     }
   }
 
+  const extraClass = (isDarkMode) ? 'bg-gray-800 text-white' : 'bg-gray-100 text-black'
+
   return (
     <textarea
       value={editorText}
       readOnly={initialState.readonly}
       onChange={(e) => handleChange(e.target.value)}
-      style={{ width: '100%',fontFamily: 'monospace' }}
+      className={`w-full h-full p-2 text-sm font-mono ${extraClass}`}
     />
   )
 }