Add and use todomvc-app-css

Paul Korzhyk · Paul Korzhyk · commit 1fbbda8263cb · 2019-03-20T17:20:12.000+02:00
diff --git a/package.json b/package.json
@@ -5,7 +5,8 @@
   "dependencies": {
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
-    "react-scripts": "2.1.8"
+    "react-scripts": "2.1.8",
+    "todomvc-app-css": "^2.1.2"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/public/index.html b/public/index.html
@@ -7,10 +7,16 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <title>Dgraph TODO MVC</title>
+    <title>Dgraph + React • TodoMVC</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <section id="root" class="todoapp"></section>
+
+    <footer class="info">
+      <p>Double-click to edit a todo</p>
+      <p>Created by <a href="http://github.com/petehunt/" target="_blank">petehunt</a></p>
+      <p>Updated by <a href="http://github.com/dgraph-io/" target="_blank">Dgraph Labs</a></p>
+    </footer>
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
@@ -1,12 +1,21 @@
 import React, { Component } from 'react'
+import 'todomvc-app-css/index.css'
+
 import './App.css'
 
 export default class App extends Component {
   render() {
     return (
       <div>
-        <h1>TODO: Insert our app here</h1>
-      </div>
+				<header className="header">
+					<h1>todos</h1>
+					<input
+						className="new-todo"
+						placeholder="What needs to be done?"
+						autoFocus={true}
+					/>
+				</header>
+			</div>
     )
   }
 }
diff --git a/yarn.lock b/yarn.lock
