title refactor

8 files changed, 62 insertions, 31 deletions

diff --git a/frontend/package.json b/frontend/package.json
index 376660a..f972a30 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,7 @@
     "react-render-html": "^0.6.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
+    "react-simple-code-editor": "^0.11.0",
     "react-syntax-highlighter": "^12.2.1",
     "serialize-javascript": "^4.0.0",
     "styled-components": "^5.1.0",
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 0a92619..b328944 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -10,7 +10,8 @@
     />
     <link rel="icon" href="icon.png">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jackyzha0/[email protected]/src/lite.css">
-    <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600&family=Roboto+Mono&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&display=swap" rel="stylesheet">
     <title>ctrl-v | a modern, open-source pastebin </title>
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-DE1TYY2F24"></script>
diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index 543cd46..f28a220 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -7,35 +7,33 @@ import {
   BrowserRouter as Router,
   Switch,
   Route,
-  Link,
   useParams
 } from "react-router-dom";
 import Raw from './renderers/Raw'
 
-const SpacedTitle = styled.div`
-    margin-top: 10vh
+const Logo = styled.div`
+    position: absolute;
+    bottom: 1.5em;
+    left: 2em;
+    opacity: 0.3;
+    
+    & h1 {
+      font-size: 3rem;
+    }
 `
 
-const Desc = () => {
-  return (
-    <h3>a modern, <a href="https://github.com/jackyzha0/ctrl-v" target="_blank" rel="noopener noreferrer">open-source</a> pastebin with latex and markdown rendering support</h3>
-  );
-}
+const Main = styled.main`
+  margin-top: 10vh;
+`
 
 const GetPasteWithParam = () => {
   let { hash } = useParams();
-
-  return (
-    <ViewPaste hash = {hash} />
-  );
+  return <ViewPaste hash = {hash} />;
 }
 
 const GetRawWithParam = () => {
   let { hash } = useParams();
-
-  return (
-    <Raw hash={hash} />
-  );
+  return <Raw hash={hash} />;
 }
 
 const App = () => {
@@ -47,17 +45,15 @@ const App = () => {
         />
         <Route>
           <div className="lt-content-column">
-            <SpacedTitle>
+            <Logo>
               <nav>
                 <h1 className="mainLogo">
-                  <span role="img" aria-label="clipboard">📋&nbsp;</span>
-                  <Link to="/">ctrl-v</Link>
+                  <a href="https://github.com/jackyzha0/ctrl-v">ctrl-v</a>
                 </h1>
-                <Desc />
               </nav>
-            </SpacedTitle>
+            </Logo>
 
-            <main id="appElement">
+            <Main id="appElement">
               <Switch>
                 <Route path="/:hash"
                   children={<GetPasteWithParam />}
@@ -66,7 +62,7 @@ const App = () => {
                   <NewPaste />
                 </Route>
               </Switch>
-            </main>
+            </Main>
 
             <Footer />
           </div>
diff --git a/frontend/src/components/Editor.js b/frontend/src/components/Editor.js
new file mode 100644
index 0000000..83d8464
--- /dev/null
+++ b/frontend/src/components/Editor.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import Editor from 'react-simple-code-editor';
+import { highlight, languages } from 'prismjs/components/prism-core';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+
+const code = `function add(a, b) {
+  return a + b;
+}
+`;
+
+class App extends React.Component {
+  state = { code };
+
+  render() {
+    return (
+      <Editor
+        value={this.state.code}
+        onValueChange={code => this.setState({ code })}
+        highlight={code => highlight(code, languages.js)}
+        padding={10}
+        style={{
+          fontFamily: '"JetBrains Mono", monospace',
+          fontSize: 12,
+        }}
+      />
+    );
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js
index c7878e5..3186a42 100644
--- a/frontend/src/components/Footer.js
+++ b/frontend/src/components/Footer.js
@@ -14,7 +14,7 @@ const Link = (props) => {
 const Footer = () => {
     return (
         <SpacedFooter>
-            © 2020 &mdash; <Link link="https://jzhao.xyz/" name="jacky" />, <Link link="https://ryanmehri.tech/" name="ryan" />
+            (c) 2020 &mdash; <Link link="https://jzhao.xyz/" name="jacky" />, <Link link="https://ryanmehri.tech/" name="ryan" />
         </SpacedFooter>
     );
 }
diff --git a/frontend/src/components/decorators/CharLimit.js b/frontend/src/components/decorators/CharLimit.js
index 5a6fdca..1b5de91 100644
--- a/frontend/src/components/decorators/CharLimit.js
+++ b/frontend/src/components/decorators/CharLimit.js
@@ -4,7 +4,6 @@ import styled, { css } from 'styled-components'
 // show char limit if length > half of max
 const Chars = styled.p`
     color: #11111100;
-    font-family: 'Roboto Mono', monospace;
     position: absolute; 
     font-size: 0.8em;
     writing-mode: vertical-rl;
diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index fcda1a3..39da6d1 100644
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -8,7 +8,7 @@ body {
   margin: 0;
   padding: 0;
   background-color: #faf9f5;
-  font-family: 'Lora', serif;
+  font-family: 'JetBrains Mono', serif;
 }
 
 form {
@@ -17,7 +17,7 @@ form {
 
 textarea, input[type=text], input[type=password], .Dropdown-root {
   width: 100%;
-  font-family: 'Roboto Mono', monospace;
+  font-family: 'JetBrains Mono', monospace;
   font-size: 0.8em;
   padding: calc(0.8em - 1px);
   border-radius: 3px;
@@ -37,7 +37,7 @@ textarea, input[type=text], input[type=password], .Dropdown-root {
 
 code, pre {
   background: #00000000;
-  font-family: 'Roboto Mono', monospace;
+  font-family: 'JetBrains Mono', monospace;
   padding: initial;
   border-radius: 3px;
   outline: none;
@@ -105,7 +105,7 @@ a {
 }
 
 input[type=submit], button[type=submit] {
-  font-family: 'Lora', serif;
+  font-family: 'JetBrains Mono', serif;
   font-weight: 700;
   color: #faf9f5;
   background-color: #111111;
@@ -115,7 +115,7 @@ input[type=submit], button[type=submit] {
 }
 
 button[type=button] {
-  font-family: 'Lora', serif;
+  font-family: 'JetBrains Mono', serif;
   font-weight: 700;
   width: 8em;
   padding: calc(0.8em - 1px) 1.5em;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 2289530..72d0506 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -9464,6 +9464,11 @@ [email protected]:
   optionalDependencies:
     fsevents "2.1.2"
 
+react-simple-code-editor@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz#bb57c7c29b570f2ab229872599eac184f5bc673c"
+  integrity sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==
+
 react-syntax-highlighter@^12.2.1:
   version "12.2.1"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-12.2.1.tgz#14d78352da1c1c3f93c6698b70ec7c706b83493e"