From 57584eeb0f8ba7212c613e0c79c20ec3dd67efc5 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sat, 6 Mar 2021 13:54:03 -0800
Subject: code input style finalizations

---
 frontend/src/components/Inputs/Code.js | 67 ++++++++++++++++++++++------------
 1 file changed, 43 insertions(+), 24 deletions(-)

(limited to 'frontend/src/components/Inputs/Code.js')

diff --git a/frontend/src/components/Inputs/Code.js b/frontend/src/components/Inputs/Code.js
index e313152..5b8e06a 100644
--- a/frontend/src/components/Inputs/Code.js
+++ b/frontend/src/components/Inputs/Code.js
@@ -1,33 +1,52 @@
 import React from "react";
+import styled from 'styled-components'
 import CharLimit from "../decorators/CharLimit";
-import {Labelled} from "../decorators/Labelled";
 import Editor from 'react-simple-code-editor';
 import {Highlighter} from "../renderers/Code";
 
+const EditorWrapper = styled(Editor)`
+  overflow: visible !important;
+  
+  & > * {
+    padding: 0 !important;
+    width: 100%;
+  }
+  
+  & pre, & code, & > textarea {
+    font-family: JetBrains Mono !important;
+    font-size: 14px !important;
+    line-height: 1.2em !important;
+    min-height: 40vh;
+  }
+  
+  & > textarea {
+    padding: 0.8em !important;
+    z-index: 1;
+    border: none !important;
+    background-color: transparent !important;
+    outline: none !important;
+  }
+`
+
+const DefaultText = `Paste your text here`
+
 export const Code = ({content, id, readOnly, setContentCallback, ...props}) => {
   return (
-    <Labelled
-      label="content"
-      id={id}
-      value={content}>
-        <Editor
-          name="content"
-          readOnly={readOnly}
-          placeholder="Paste your text here"
-          value={content}
-          id={id}
-          required
-          highlight={code => <Highlighter theme="atom">{code}</Highlighter> }
-          onValueChange={code => setContentCallback(code)}
-          padding={10}
-          style={{
-            fontFamily: '"JetBrains Mono", monospace',
-            fontSize: 12,
-          }}
-        />
-        <CharLimit
-          content={content}
-          maxLength={props.maxLength} />
-    </Labelled>
+    <div>
+      <EditorWrapper
+        name="content"
+        readOnly={readOnly}
+        placeholder={DefaultText}
+        value={content}
+        id={id}
+        required
+        highlight={code => <Highlighter theme="atom">{code}</Highlighter> }
+        onValueChange={code => setContentCallback(code)}
+        padding={15}
+      />
+      <CharLimit
+        content={content}
+        maxLength={props.maxLength} />
+    </div>
   );
 }
\ No newline at end of file
-- 
cgit v1.2.3