Add background to codeeditor

GMOD · Mar 23, 2022 · 551dc59 · 551dc59
1 parent a40c0fc
commit 551dc59
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 56 deletions.
diff --git a/plugins/config/src/ConfigurationEditorWidget/components/CodeEditor.js b/plugins/config/src/ConfigurationEditorWidget/components/CodeEditor.js
@@ -12,20 +12,21 @@ const fontSize = '12px'
 const fontFamily =
   'Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace'
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   callbackEditor: {
     fontFamily,
     fontSize,
+    background: theme.palette.background.default,
     overflowX: 'auto',
     marginTop: '16px',
-    borderBottom: '1px solid rgba(0,0,0,0.42)',
+    border: '1px solid rgba(0,0,0,0.42)',
   },
   syntaxHighlighter: {
     margin: 0,
     fontFamily,
     fontSize,
   },
-})
+}))
 
 // eslint-disable-next-line react/prop-types
 export default function CodeEditor({ contents, setContents }) {

diff --git a/plugins/config/src/ConfigurationEditorWidget/components/SlotEditor.js b/plugins/config/src/ConfigurationEditorWidget/components/SlotEditor.js
@@ -37,6 +37,8 @@ import CallbackEditor from './CallbackEditor'
 import ColorEditor from './ColorEditor'
 import JsonEditor from './JsonEditor'
 
+// adds ability to have html in helperText. note that FormHelperTextProps is
+// div because the default is p which does not like div children
 const MyTextField = props => {
   return (
     <TextField