5 files changed, 54 insertions, 30 deletions

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;