From 806d2419cb38c030c931e0523fe2ce5de73a44a7 Mon Sep 17 00:00:00 2001 From: SethBurkart123 Date: Sun, 31 Mar 2024 12:02:46 +1100 Subject: [PATCH] styling: improve codeeditor component styling --- src/interface/components/CodeEditor.css | 11 ++++++++++ src/interface/components/CodeEditor.tsx | 28 +++++++++++++++++-------- src/interface/index.html | 11 ---------- src/interface/pages/ThemeCreator.tsx | 7 +++++-- 4 files changed, 35 insertions(+), 22 deletions(-) create mode 100644 src/interface/components/CodeEditor.css diff --git a/src/interface/components/CodeEditor.css b/src/interface/components/CodeEditor.css new file mode 100644 index 00000000..321236b7 --- /dev/null +++ b/src/interface/components/CodeEditor.css @@ -0,0 +1,11 @@ +.cm-editor { + border-radius: 8px; +} + +body:not(.dark) .cm-editor { + @apply bg-zinc-200; +} + +.cm-editor.cm-focused { + outline: none; +} \ No newline at end of file diff --git a/src/interface/components/CodeEditor.tsx b/src/interface/components/CodeEditor.tsx index f9b682ba..2e8759be 100644 --- a/src/interface/components/CodeEditor.tsx +++ b/src/interface/components/CodeEditor.tsx @@ -1,10 +1,11 @@ import CodeMirror, { ViewUpdate } from '@uiw/react-codemirror' import { githubDark, githubLight } from '@uiw/codemirror-theme-github' -import { color, colorView, colorTheme } from '@uiw/codemirror-extensions-color'; +import { color } from '@uiw/codemirror-extensions-color'; import { less } from '@codemirror/lang-less' import { useCallback, useEffect, useState } from 'react'; +import './CodeEditor.css' -export default function CodeEditor({ callback, initialState }: { callback: (value: string) => void, initialState: string }) { +export default function CodeEditor({ callback, initialState, height }: { callback: (value: string) => void, initialState: string, height: string }) { const [value, setValue] = useState(initialState) const [darkMode, setDarkMode] = useState(false) @@ -20,12 +21,21 @@ export default function CodeEditor({ callback, initialState }: { callback: (valu }, []) return( - + ) } \ No newline at end of file diff --git a/src/interface/index.html b/src/interface/index.html index 6aa88c5f..ba020507 100644 --- a/src/interface/index.html +++ b/src/interface/index.html @@ -4,17 +4,6 @@ BetterSEQTA+ Settings -
diff --git a/src/interface/pages/ThemeCreator.tsx b/src/interface/pages/ThemeCreator.tsx index cc255e84..8056c5ac 100644 --- a/src/interface/pages/ThemeCreator.tsx +++ b/src/interface/pages/ThemeCreator.tsx @@ -7,8 +7,11 @@ export default function ThemeCreator() { } return ( -
- +
+ +
+ +
); } \ No newline at end of file