From 61339db27ad7bad8cf3a0b6f160b1dea1ba1f825 Mon Sep 17 00:00:00 2001
From: BinHong Lee <binhong@binhong.me>
Date: Thu, 2 Nov 2017 14:41:56 -0700
Subject: [PATCH] Making header and footer share the same look

---
 public/index.html |  5 ++++-
 src/App.css       | 12 +-----------
 src/App.js        |  3 ---
 3 files changed, 5 insertions(+), 15 deletions(-)
diff --git a/public/index.html b/public/index.html
index 1d5b994..8fe3b4e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,13 +8,16 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <title>Breakups</title>
   </head>
+  <header style="position: fixed; width: 100%; text-align: center; background-color: #222; height: 80px; left: 0px; top: 0px; right: 0px; color: white;">
+    <h1>Breakups</h1>
+  </header>
   <body>
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
   </body>
-  <footer style="position: fixed; bottom: 0px; left: 0px; text-align: center; width:100%; background-color: #222; height: 80px; color: white;">
+  <footer style="position: fixed; bottom: 0px; left: 0px; text-align: center; width:100%; background-color: #222; height: 60px; color: white;">
     <h3>Made by <a href="https://binhonglee.github.io/" style="color:#04B45F">@binhonglee</a>. Fork this on <a href="https://github.com/binhonglee/breakups-webapp" style="color:cyan">GitHub</a>.</h5>
   </footer>
 </html>
diff --git a/src/App.css b/src/App.css
index 8daa620..ead46fa 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,18 +1,8 @@
 .App {
+    margin-top: 100px;
     text-align: center;
 }
 
-.App-header {
-    background-color: #222;
-    height: 80px;
-    padding: 10px;
-    color: white;
-}
-
-.App-title {
-    font-size: 1.5em;
-}
-
 .Forms {
     align-content: center;
     align-items: center;
diff --git a/src/App.js b/src/App.js
index fad4212..72a81af 100644
--- a/src/App.js
+++ b/src/App.js
@@ -17,9 +17,6 @@ class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <h1>Breakups</h1>
-        </header>
         <h3>Easy way to split bills among multiple people.</h3>
         <div className="Forms">
           <form className="Main-form" onSubmit={this.populatePeople.bind(this)}>
