Merge pull request #7 from jackyzha0/react

add basic root page
author: Ryan Mehri <[email protected]> 2020-05-09 23:07:01 -0600
committer: GitHub <[email protected]> 2020-05-09 23:07:01 -0600
commit: 716e0b2633f14e13930c688f49859018dd01c592 (patch)
tree: d00576287ced311b9eec10dd4bb5a516fbd91124
parent: Merge pull request #6 from jackyzha0/backend (diff)
parent: change from npm to yarn (diff)
download: ctrl-v-716e0b2633f14e13930c688f49859018dd01c592.tar.xz
ctrl-v-716e0b2633f14e13930c688f49859018dd01c592.zip
8 files changed, 97 insertions, 27 deletions
diff --git a/frontend/package.json b/frontend/package.json
index 4ff295a..6cb6a53 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,7 +8,8 @@
     "@testing-library/user-event": "^7.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "styled-components": "^5.1.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 18f4c64..1e1d637 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -2,28 +2,18 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="ctrl-v"
       content="some_description"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jackyzha0/lite.css@latest/src/lite.css">
+    <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600&family=Roboto+Mono&display=swap" rel="stylesheet">
     <title>📋 ctrl-v</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/frontend/public/logo192.png b/frontend/public/logo192.png
deleted file mode 100644
index fc44b0a..0000000
--- a/frontend/public/logo192.png
+++ /dev/null
diff --git a/frontend/public/logo512.png b/frontend/public/logo512.png
deleted file mode 100644
index a4e47a6..0000000
--- a/frontend/public/logo512.png
+++ /dev/null
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
author	Ryan Mehri <[email protected]>	2020-05-09 23:07:01 -0600
committer	GitHub <[email protected]>	2020-05-09 23:07:01 -0600
commit	716e0b2633f14e13930c688f49859018dd01c592 (patch)
tree	d00576287ced311b9eec10dd4bb5a516fbd91124
parent	Merge pull request #6 from jackyzha0/backend (diff)
parent	change from npm to yarn (diff)
download	ctrl-v-716e0b2633f14e13930c688f49859018dd01c592.tar.xz ctrl-v-716e0b2633f14e13930c688f49859018dd01c592.zip