From 57584eeb0f8ba7212c613e0c79c20ec3dd67efc5 Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Sat, 6 Mar 2021 13:54:03 -0800 Subject: code input style finalizations --- frontend/src/components/Inputs/Code.js | 67 +++++++++++++++++++----------- frontend/src/components/Inputs/Dropdown.js | 2 +- frontend/src/components/Inputs/Password.js | 2 +- frontend/src/components/NewPaste.js | 5 +-- frontend/src/components/ViewPaste.js | 2 +- frontend/src/components/Watermark.js | 6 +-- frontend/src/components/renderers/Code.js | 33 +++++++++------ 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 ( - - {code} } - onValueChange={code => setContentCallback(code)} - padding={10} - style={{ - fontFamily: '"JetBrains Mono", monospace', - fontSize: 12, - }} - /> - - +
+ {code} } + onValueChange={code => setContentCallback(code)} + padding={15} + /> + +
); } \ 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) => { ); 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) => { 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 = + 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}) => + showLineNumbers={lineNumbers} + PreTag={pre}> {children} const CodeRenderer = React.forwardRef((props, ref) => { const Pre = (props) => - return (
{props.content} -- cgit v1.2.3