UI enhancement

public/index.html

@@ -14,4 +14,7 @@
     </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;">
+    <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>

src/App.css

@@ -0,0 +1,31 @@
+.App {
+    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;
+    align-self: center;
+    text-align: center;
+}
+
+.Peoples {
+    max-width: 250px;
+    line-height: 1.8em;
+    margin: 0 auto;
+}
+
+.PaymentChain {
+    margin-bottom: 130px;
+}

src/App.js

@@ -9,23 +9,29 @@ class App extends Component {
     this.state = {
       peoples: [],
       info: [],
-      paymentChain: []
+      paymentChain: [],
+      actionButtons:[]
     }
   }
 
   render() {
     return (
       <div className="App">
-        <h1>Breakups</h1>
+        <header className="App-header">
+          <h1>Breakups</h1>
+        </header>
         <h3>Easy way to split bills among multiple people.</h3>
-        <form onSubmit={this.populatePeople.bind(this)}>
-          Number of people: <input type="text" ref="noOfPeople"/> <input type="submit" value="Submit" />
-        </form>
-        <br/>
-        {this.state.peoples}
-        <br/>
-        <PaymentChain paymentChain={this.state.paymentChain} />
-        <br/>
+        <div className="Forms">
+          <form className="Main-form" onSubmit={this.populatePeople.bind(this)}>
+            Number of people: <input type="text" ref="noOfPeople"/> <input type="submit" value="Submit" />
+          </form>
+          <br/>
+          <div className="Peoples">
+            {this.state.peoples}
+          </div>
+        </div>
+        {this.state.actionButtons}
+        <PaymentChain className="PaymentChain" paymentChain={this.state.paymentChain} />
       </div>
     );
   }
@@ -65,9 +71,10 @@ class App extends Component {
         peoples.push(<People key={i} id={i} people={(i+1)} info={this.updateInfo.bind(this)} />);
       }
 
-      peoples.push(<input key="paymentChain" type="submit" value="Get Payment Chain" onClick={this.getPaymentChain.bind(this)}/>);
-      peoples.push(<input key="email" type="submit" value="Send email reminder (non-functional yet)"/>);
-      this.setState({peoples:peoples, info:info});
+      let actionButtons = []
+      actionButtons.push(<input key="paymentChain" type="submit" value="Get Payment Chain" onClick={this.getPaymentChain.bind(this)}/>);
+      actionButtons.push(<input key="email" type="submit" value="Send email reminder (non-functional yet)"/>);
+      this.setState({peoples:peoples, info:info, actionButtons:actionButtons});
     }
     
     e.preventDefault();

src/Components/PaymentChain.js

@@ -14,7 +14,9 @@ class PaymentChain extends Component {
 
         return (
             <div className="PaymentChain">
+                <br/>
                 {payments}
+                <br/>
             </div>
         );
     }

src/Components/People.js

@@ -1,14 +1,21 @@
 import React, { Component } from 'react';
 
 class People extends Component {
+    constructor() {
+        super();
+        this.state = {
+            space: `\t`
+        }
+    }
+
     render() {
         return (
             <div className="People">
-                <form className="form">
-                    Person {this.props.people}<br/>
-                    Name: <input type = "text" ref="name" onBlur={this.updateProps.bind(this)}/><br/>
-                    Email: <input type = "text" ref="email" onBlur={this.updateProps.bind(this)}/><br/>
-                    Amount: <input type = "text" ref="amount" onBlur={this.updateProps.bind(this)}/><br/>
+                Person {this.props.people}<br/>
+                <form style={{textAlign:'left'}}>
+                    Name:{this.state.space}<input type = "text" ref="name" onBlur={this.updateProps.bind(this)} style={{float:'right'}}/><br/>
+                    Email:{this.state.space}<input type = "text" ref="email" onBlur={this.updateProps.bind(this)} style={{float:'right'}}/><br/>
+                    Amount:{this.state.space}<input type = "text" ref="amount" onBlur={this.updateProps.bind(this)} style={{float:'right'}}/><br/>
                 </form>
                 <br/>
             </div>