code input style finalizations

3 files changed, 45 insertions, 26 deletions

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
diff --git a/frontend/src/components/Inputs/Dropdown.js b/frontend/src/components/Inputs/Dropdown.js
index 1c2e0b7..851a692 100644
--- a/frontend/src/components/Inputs/Dropdown.js
+++ b/frontend/src/components/Inputs/Dropdown.js
@@ -102,7 +102,7 @@ export const Language = (props) => {
     <GenericDropdown
       {...props}
       options={options}
-      placeholder={LANGS.auto}
+      placeholder={LANGS.detect}
       label='language'
     />
   );
diff --git a/frontend/src/components/Inputs/Password.js b/frontend/src/components/Inputs/Password.js
index 6c37d3c..6394dd2 100644
--- a/frontend/src/components/Inputs/Password.js
+++ b/frontend/src/components/Inputs/Password.js
@@ -5,7 +5,7 @@ import {Input} from "../Form/Input";
 export const Password = (props) => <Labelled label="password">
   <Input
     name="pass"
-    placeholder="password"
+    placeholder="add password"
     type="password"
     autoComplete="off"
     onChange={props.onChange}