add basic root page

4 files changed, 93 insertions, 14 deletions

diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index 3614fe1..eeb3e58 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -1,13 +1,12 @@
 import React from 'react';
+import Header from './Header'
+import PasteArea from './PasteArea'
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-      </header>
+    <div className="lt-content-column">
+      <Header />
+      <PasteArea />
     </div>
   );
 }
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
new file mode 100644
index 0000000..1f1f99f
--- /dev/null
+++ b/frontend/src/components/Header.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from 'styled-components'
+
+const SpacedTitle = styled.div`
+    margin-top: 10vh
+`
+
+const Header = () => {
+    return (
+        <SpacedTitle>
+            <h1>
+                <span role="img" aria-label="clipboard">📋&nbsp;</span>
+                ctrl-v
+            </h1>
+            <h3>pastebin but less ass.</h3>
+        </SpacedTitle>
+    );
+}
+
+export default Header;
\ No newline at end of file
diff --git a/frontend/src/components/PasteArea.js b/frontend/src/components/PasteArea.js
new file mode 100644
index 0000000..f7c060c
--- /dev/null
+++ b/frontend/src/components/PasteArea.js
@@ -0,0 +1,35 @@
+import React from 'react';
+
+class PasteArea extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { 
+            value: ''
+        };
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    handleChange(event) {
+        this.setState({ value: event.target.value });
+    }
+
+    handleSubmit(event) {
+        alert('paste content: ' + this.state.value);
+        event.preventDefault();
+    }
+
+    render() {
+        return (
+            <form onSubmit={this.handleSubmit}>
+                <textarea placeholder="Paste your text here"
+                    value={this.state.value} onChange={this.handleChange} className="lt-shadow"/>
+                <br></br>
+                <input className="lt-button lt-shadow lt-hover" type="submit" value="new paste" />
+            </form>
+        );
+    }
+}
+
+export default PasteArea
\ No newline at end of file
diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index ec2585e..3ef5b53 100644
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -1,13 +1,38 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  padding: 0;
+  background-color: #faf9f5;
+  font-family: 'Lora', serif;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+h1 {
+  font-size: 50px;
+  margin: 0 0;
 }
+
+form {
+  width: 100%;
+}
+
+textarea {
+  width: 100%;
+  height: 60vh;
+  font-family: 'Roboto Mono', monospace;
+  font-size: 0.8em;
+  padding: 0.8em;
+  border-radius: 3px;
+  border: 1px solid #565656;
+  outline: none;
+}
+
+input[type=submit] {
+  font-family: 'Lora', serif;
+  font-weight: 700;
+  margin: 1.5em 0;
+  color: #faf9f5;
+  background-color: #111111;
+}
+
+input[type=submit]:focus {
+  outline: 0;
+}
\ No newline at end of file