From 3e8500d466b641ef34c24f8b0de8163a44ba7a9e Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Fri, 5 Mar 2021 22:17:18 -0800
Subject: refactoring css

---
 frontend/src/components/Inputs/Code.js | 35 ++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 frontend/src/components/Inputs/Code.js

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

diff --git a/frontend/src/components/Inputs/Code.js b/frontend/src/components/Inputs/Code.js
new file mode 100644
index 0000000..1353d95
--- /dev/null
+++ b/frontend/src/components/Inputs/Code.js
@@ -0,0 +1,35 @@
+import React, {useEffect, useRef} from "react";
+import * as indentation from "indent-textarea";
+import FloatingLabel from "../decorators/FloatingLabel";
+import CharLimit from "../decorators/CharLimit";
+import {RelPositioning} from "./shared";
+
+export const Code = ({content, ...props}) => {
+  const textInput = useRef(null);
+
+  useEffect(() => {
+    indentation.watch(textInput.current);
+  }, [textInput])
+
+  return (
+    <RelPositioning>
+      <FloatingLabel
+        label="content"
+        id={props.id}
+        value={content} />
+      <textarea
+        name="content"
+        readOnly={props.readOnly}
+        placeholder="Paste your text here"
+        value={content}
+        id={props.id}
+        ref={textInput}
+        required
+        onChange={props.onChange}
+        className="lt-shadow" />
+      <CharLimit
+        content={content}
+        maxLength={props.maxLength} />
+    </RelPositioning>
+  );
+}
\ No newline at end of file
-- 
cgit v1.2.3


From 7a671bc96ef06df3da3d2dce3caca559f32c6627 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Fri, 5 Mar 2021 23:12:28 -0800
Subject: text area styling

---
 frontend/src/components/Inputs/Code.js | 40 ++++++++++++++++------------------
 1 file changed, 19 insertions(+), 21 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 1353d95..0fd6240 100644
--- a/frontend/src/components/Inputs/Code.js
+++ b/frontend/src/components/Inputs/Code.js
@@ -1,8 +1,7 @@
 import React, {useEffect, useRef} from "react";
 import * as indentation from "indent-textarea";
-import FloatingLabel from "../decorators/FloatingLabel";
 import CharLimit from "../decorators/CharLimit";
-import {RelPositioning} from "./shared";
+import {Labelled} from "./shared";
 
 export const Code = ({content, ...props}) => {
   const textInput = useRef(null);
@@ -12,24 +11,23 @@ export const Code = ({content, ...props}) => {
   }, [textInput])
 
   return (
-    <RelPositioning>
-      <FloatingLabel
-        label="content"
-        id={props.id}
-        value={content} />
-      <textarea
-        name="content"
-        readOnly={props.readOnly}
-        placeholder="Paste your text here"
-        value={content}
-        id={props.id}
-        ref={textInput}
-        required
-        onChange={props.onChange}
-        className="lt-shadow" />
-      <CharLimit
-        content={content}
-        maxLength={props.maxLength} />
-    </RelPositioning>
+    <Labelled
+      label="content"
+      id={props.id}
+      value={content}>
+        <textarea
+          name="content"
+          readOnly={props.readOnly}
+          placeholder="Paste your text here"
+          value={content}
+          id={props.id}
+          ref={textInput}
+          required
+          onChange={props.onChange}
+          className="lt-shadow" />
+        <CharLimit
+          content={content}
+          maxLength={props.maxLength} />
+    </Labelled>
   );
 }
\ No newline at end of file
-- 
cgit v1.2.3


From cf59188dff4526a358d0386f8113f542e24fffc2 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sat, 6 Mar 2021 09:44:00 -0800
Subject: add more css mixins

---
 frontend/src/components/Inputs/Code.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(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 0fd6240..67b3f76 100644
--- a/frontend/src/components/Inputs/Code.js
+++ b/frontend/src/components/Inputs/Code.js
@@ -1,7 +1,7 @@
 import React, {useEffect, useRef} from "react";
 import * as indentation from "indent-textarea";
 import CharLimit from "../decorators/CharLimit";
-import {Labelled} from "./shared";
+import {Labelled} from "../decorators/Labelled";
 
 export const Code = ({content, ...props}) => {
   const textInput = useRef(null);
-- 
cgit v1.2.3


From a866d5a9fad78074fdf5c124d7900ab436e01958 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sat, 6 Mar 2021 10:17:28 -0800
Subject: base editor comp

---
 frontend/src/components/Inputs/Code.js | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 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 67b3f76..e313152 100644
--- a/frontend/src/components/Inputs/Code.js
+++ b/frontend/src/components/Inputs/Code.js
@@ -1,30 +1,30 @@
-import React, {useEffect, useRef} from "react";
-import * as indentation from "indent-textarea";
+import React from "react";
 import CharLimit from "../decorators/CharLimit";
 import {Labelled} from "../decorators/Labelled";
+import Editor from 'react-simple-code-editor';
+import {Highlighter} from "../renderers/Code";
 
-export const Code = ({content, ...props}) => {
-  const textInput = useRef(null);
-
-  useEffect(() => {
-    indentation.watch(textInput.current);
-  }, [textInput])
-
+export const Code = ({content, id, readOnly, setContentCallback, ...props}) => {
   return (
     <Labelled
       label="content"
-      id={props.id}
+      id={id}
       value={content}>
-        <textarea
+        <Editor
           name="content"
-          readOnly={props.readOnly}
+          readOnly={readOnly}
           placeholder="Paste your text here"
           value={content}
-          id={props.id}
-          ref={textInput}
+          id={id}
           required
-          onChange={props.onChange}
-          className="lt-shadow" />
+          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} />
-- 
cgit v1.2.3


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


From e9a7416fabbbb0155c09ee86e7843a4d87e0c118 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sat, 6 Mar 2021 14:44:15 -0800
Subject: code renderer virtualization, better visuals

---
 frontend/src/components/Inputs/Code.js | 14 +++++---------
 1 file changed, 5 insertions(+), 9 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 5b8e06a..d5e063a 100644
--- a/frontend/src/components/Inputs/Code.js
+++ b/frontend/src/components/Inputs/Code.js
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import CharLimit from "../decorators/CharLimit";
 import Editor from 'react-simple-code-editor';
 import {Highlighter} from "../renderers/Code";
+import {CodeLike, Hover} from "../Form/mixins";
 
 const EditorWrapper = styled(Editor)`
   overflow: visible !important;
@@ -13,30 +14,25 @@ const EditorWrapper = styled(Editor)`
   }
   
   & pre, & code, & > textarea {
-    font-family: JetBrains Mono !important;
-    font-size: 14px !important;
-    line-height: 1.2em !important;
+    ${CodeLike}
     min-height: 40vh;
   }
   
   & > textarea {
-    padding: 0.8em !important;
+    ${Hover}
+    padding: 0.6em !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 (
     <div>
       <EditorWrapper
         name="content"
         readOnly={readOnly}
-        placeholder={DefaultText}
+        placeholder="Paste your text here"
         value={content}
         id={id}
         required
-- 
cgit v1.2.3


From 37f05def31112563fd9d8f3b0c9bf8cebb607d86 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sat, 6 Mar 2021 15:44:54 -0800
Subject: fix modal zindex

---
 frontend/src/components/Inputs/Code.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(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 d5e063a..6817db2 100644
--- a/frontend/src/components/Inputs/Code.js
+++ b/frontend/src/components/Inputs/Code.js
@@ -18,10 +18,13 @@ const EditorWrapper = styled(Editor)`
     min-height: 40vh;
   }
   
+  & pre {
+    z-index: -1 !important;
+  }
+  
   & > textarea {
     ${Hover}
     padding: 0.6em !important;
-    z-index: 1;
     outline: none !important;
   }
 `
-- 
cgit v1.2.3


From dbf726d9e021a692254defdab8b993063b15354f Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sat, 6 Mar 2021 16:09:51 -0800
Subject: update watermark styling

---
 frontend/src/components/Inputs/Code.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 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 6817db2..0767808 100644
--- a/frontend/src/components/Inputs/Code.js
+++ b/frontend/src/components/Inputs/Code.js
@@ -5,6 +5,9 @@ import Editor from 'react-simple-code-editor';
 import {Highlighter} from "../renderers/Code";
 import {CodeLike, Hover} from "../Form/mixins";
 
+const Wrapper = styled.div`
+  position: relative;
+`
 const EditorWrapper = styled(Editor)`
   overflow: visible !important;
   
@@ -31,7 +34,7 @@ const EditorWrapper = styled(Editor)`
 
 export const Code = ({content, id, readOnly, setContentCallback, ...props}) => {
   return (
-    <div>
+    <Wrapper>
       <EditorWrapper
         name="content"
         readOnly={readOnly}
@@ -46,6 +49,6 @@ export const Code = ({content, id, readOnly, setContentCallback, ...props}) => {
       <CharLimit
         content={content}
         maxLength={props.maxLength} />
-    </div>
+    </Wrapper>
   );
 }
\ No newline at end of file
-- 
cgit v1.2.3


From 75e8bdd2d4cdaefe28ed40a7735c993f98d15754 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sat, 6 Mar 2021 16:32:09 -0800
Subject: refactor form -> common

---
 frontend/src/components/Inputs/Code.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(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 0767808..adb1536 100644
--- a/frontend/src/components/Inputs/Code.js
+++ b/frontend/src/components/Inputs/Code.js
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import CharLimit from "../decorators/CharLimit";
 import Editor from 'react-simple-code-editor';
 import {Highlighter} from "../renderers/Code";
-import {CodeLike, Hover} from "../Form/mixins";
+import {CodeLike, Hover} from "../Common/mixins";
 
 const Wrapper = styled.div`
   position: relative;
-- 
cgit v1.2.3