code input style finalizations

7 files changed, 71 insertions, 46 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}
diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index 506d66c..14a8024 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -34,7 +34,7 @@ const NewPaste = () =>  {
     const [title, setTitle] = useState('');
     const [content, setContent] = useState('');
     const [pass, setPass] = useState('');
-    const [language, setLanguage] = useState(LANGS.auto);
+    const [language, setLanguage] = useState(LANGS.detect);
     const [expiry, setExpiry] = useState('');
     const [hash, setHash] = useState('');
     const [isPreview, setIsPreview] = useState(false);
@@ -76,8 +76,7 @@ const NewPaste = () =>  {
         const pasteInput = <Code
             setContentCallback={setContent}
             content={content}
-            maxLength="100000"
-            id="pasteInput" />
+            maxLength="100000" />
 
         if (isPreview) {
             var preview
diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
index 165fa6e..dc8eab5 100644
--- a/frontend/src/components/ViewPaste.js
+++ b/frontend/src/components/ViewPaste.js
@@ -24,7 +24,7 @@ const ViewPaste = (props) => {
     const [expiry, setExpiry] = useState('');
     const [theme, setTheme] = useState('atom');
     const [isRenderMode, setIsRenderMode] = useState(false);
-    const [language, setLanguage] = useState(LANGS.auto);
+    const [language, setLanguage] = useState(LANGS.detect);
 
     useEffect(() => {
         setIsRenderMode(language === 'latex' || language === 'markdown')
diff --git a/frontend/src/components/Watermark.js b/frontend/src/components/Watermark.js
index 1b7863d..6ab212b 100644
--- a/frontend/src/components/Watermark.js
+++ b/frontend/src/components/Watermark.js
@@ -2,9 +2,9 @@ import styled from "styled-components";
 import React from "react";
 
 const Logo = styled.h1`
-  position: absolute;
-  bottom: 0.75em;
-  left: 1em;
+  position: fixed;
+  bottom: 0.3em;
+  left: 0.5em;
   opacity: 0.3;
   font-size: 50px;
   margin: 0 0;
diff --git a/frontend/src/components/renderers/Code.js b/frontend/src/components/renderers/Code.js
index d9630fc..9243532 100644
--- a/frontend/src/components/renderers/Code.js
+++ b/frontend/src/components/renderers/Code.js
@@ -2,6 +2,7 @@ import React from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { atomOneLight, ascetic, atomOneDark, dracula, ocean } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import styled from 'styled-components'
+import {Rounded} from "../Form/mixins";
 
 export const THEMES = Object.freeze({
     'atom': atomOneLight,
@@ -14,43 +15,49 @@ export const THEMES = Object.freeze({
 export const LANGS = Object.freeze({
     'latex': 'latex',
     'markdown': 'markdown',
-    'auto': 'text',
+    'detect': 'text',
 })
 
-const StyledPre = styled.pre`
+export const StyledPre = styled.pre`
   width: 100%;
-  font-size: 0.8em;
-  min-height: 1.2em;
-  border-radius: 3px !important;
-  border: 1px solid #565656 !important;
+  font-size: 14px;
+  line-height: 1.2em;
   padding: calc(0.8em - 1px) !important;
-  outline: none;
   margin: 1.7em 0;
+  background: none !important;
+  position: relative;
+  ${Rounded}
+  outline: none;
+  border: 1px solid #565656 !important;
+  
+  & code {
+    font-family: JetBrains Mono !important;
+  }
 
-  & code:first-child {
+  & code:first-child:not(:only-of-type) {
     margin-right: 10px !important;
     border-radius: 0 !important;
     border-right: 1px solid #11111155 !important;
   }
 `
 
-export const Highlighter = ({language, theme, preTag, children}) => <SyntaxHighlighter
+export const Highlighter = ({language, lineNumbers, theme, pre = StyledPre, children}) => <SyntaxHighlighter
   language={LANGS[language]}
   style={THEMES[theme]}
-  showLineNumbers
-  PreTag={preTag}>
+  showLineNumbers={lineNumbers}
+  PreTag={pre}>
     {children}
 </SyntaxHighlighter>
 
 const CodeRenderer = React.forwardRef((props, ref) => {
     const Pre = (props) => <StyledPre {...props} ref={ref} />
-
     return (
         <div className="lt-shadow">
             <Highlighter
+                lineNumbers={true}
                 language={props.lang}
                 theme={props.theme}
-                preTag={Pre}
+                pre={Pre}
             >
                 {props.content}
             </Highlighter>