add deploy buttons

src/App.css

@@ -11,6 +11,10 @@
 .app-title-wrapper {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+}
+.app-title-text {
+  flex-grow: 1;
 }
 .App-header {
   background-color: #222;
@@ -23,10 +27,33 @@
 .App-title {
   font-size: 1.5em;
 }
-
 .App-intro {
   font-size: large;
 }
+.deploy-button-wrapper {
+  margin-right: 20px;
+}
+.deploy-button {
+  width: 250px;
+}
+.view-src {
+  margin-top: 15px;
+  text-align: center;
+}
+.view-src img {
+  margin-right: 10px;
+}
+.view-src a {
+  text-decoration: none;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.github-icon {
+  width: 25px;
+  fill: white;
+}
 
 .todo-list {
   padding: 60px;

src/App.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react'
 import logo from './logo.svg'
+import github from './github.svg'
+import deployButton from './deploy-to-netlify.svg'
 import ContentEditable from './components/ContentEditable'
 import './App.css'
 
@@ -188,12 +190,26 @@ class App extends Component {
         <header className="App-header">
           <div className="app-title-wrapper">
             <img src={logo} className="App-logo" alt="logo" />
-            <div>
+            <div className='app-title-text'>
               <h1 className="App-title">Netlify + Fauna DB</h1>
               <p className="App-intro">
                 Using FaunaDB & Netlify functions
               </p>
             </div>
+            <div className='deploy-button-wrapper'>
+              <a
+                target='_blank'
+                href="https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-faunadb-example">
+                <img src={deployButton} className="deploy-button" alt="deploy to netlify" />
+              </a>
+              <div className='view-src'>
+                <a
+                  target='_blank'
+                  href="https://github.com/netlify/netlify-faunadb-example">
+                  <img className='github-icon' src={github} /> View the source Luke
+                </a>
+              </div>
+            </div>
           </div>
         </header>
 

src/github.svg

@@ -0,0 +1,3 @@
+<svg height="1024" width="1024" fill='white' xmlns="http://www.w3.org/2000/svg">
+  <path d="M512 0C229.25 0 0 229.25 0 512c0 226.25 146.688 418.125 350.156 485.812 25.594 4.688 34.938-11.125 34.938-24.625 0-12.188-0.469-52.562-0.719-95.312C242 908.812 211.906 817.5 211.906 817.5c-23.312-59.125-56.844-74.875-56.844-74.875-46.531-31.75 3.53-31.125 3.53-31.125 51.406 3.562 78.47 52.75 78.47 52.75 45.688 78.25 119.875 55.625 149 42.5 4.654-33 17.904-55.625 32.5-68.375C304.906 725.438 185.344 681.5 185.344 485.312c0-55.938 19.969-101.562 52.656-137.406-5.219-13-22.844-65.094 5.062-135.562 0 0 42.938-13.75 140.812 52.5 40.812-11.406 84.594-17.031 128.125-17.219 43.5 0.188 87.312 5.875 128.188 17.281 97.688-66.312 140.688-52.5 140.688-52.5 28 70.531 10.375 122.562 5.125 135.5 32.812 35.844 52.625 81.469 52.625 137.406 0 196.688-119.75 240-233.812 252.688 18.438 15.875 34.75 47 34.75 94.75 0 68.438-0.688 123.625-0.688 140.5 0 13.625 9.312 29.562 35.25 24.562C877.438 930 1024 738.125 1024 512 1024 229.25 794.75 0 512 0z" />
+</svg>