Better CSS for the app

src/App.css

-.App {
+body {
   background-color: #282c34;
-  color: white;
   justify-content: center;
+  color: white;
+}
+
+.App {
+  margin: 50px 20px 0px 20px;
 }
 
 .App-code-editors {
   display: flex;
+  margin-top: 10px;
+  width: auto;
+}
+
+.tree-wrapper {
+  background: white;
+  margin-top: 10px;
+  height: 20em;
+}
+
+.ace-editor {
+  width: auto;
+  padding-right: 5px;
+}
+
+.user-io {
+  width: auto;
+}
+
+.user-io-input {
+  width: auto;
+}
 
+.user-io-output {
+  width: auto;
 }
 
-.warning
-{
+.warning {
     background: rgba(255, 50, 50, 0.1);
     position: absolute;
 }
\ No newline at end of file

src/App.js

@@ -69,7 +69,7 @@ class App extends React.Component {
             readOnly={true} />
         </div>
 
-        <div id="treeWrapper" style={{ width: '50em', height: '20em', background: 'white' }}>
+        <div className="tree-wrapper">
           <Tree
             data={this.state.graphData}
             orientation="vertical" />

src/view/CodeEditor.js

@@ -18,7 +18,7 @@ class CodeEditor extends React.Component {
     // Render editor
     render() {
         return (
-            <div>
+            <div className="ace-editor">
                 {this.heading()}
                 <AceEditor
                     mode="java"
@@ -26,10 +26,12 @@ class CodeEditor extends React.Component {
                     className="aceeditor"
 
                     onChange={(newValue) => {
+                        if (this.props.onCodeChange !== undefined)
                             this.props.onCodeChange(newValue)
                     }}
                     value={this.props.value}
                     markers={this.props.markers}
+                    readOnly={this.props.readOnly}
 
                     editorProps={{ $blockScrolling: true }} />
             </div>

src/view/UserIO.js

@@ -22,10 +22,10 @@ class UserIO extends React.Component {
 
     render() {
         return (
-            <div className="userIO">
-                <textarea value={this.state.programOutput} />
+            <div className="user-io">
+                <textarea className="user-io-output" value={this.state.programOutput} />
 
-                <div className="userIO-input">
+                <div className="user-io-input">
                     <input value={this.state.programInput} onChange={this.onInputChange}></input>
                     <button type="submit">submit</button>
                 </div>