From c4c10b5087ad47b652bd32a4233b6fa85c47008b Mon Sep 17 00:00:00 2001
From: BinHong Lee <binhong@binhong.me>
Date: Mon, 1 Jan 2018 12:00:46 -0800
Subject: [PATCH] Fixed non-webkit UI

---
 public/index.html        |  8 ++++----
 src/App.css              | 15 +++++++++++++++
 src/Components/People.js |  8 ++++----
 3 files changed, 23 insertions(+), 8 deletions(-)
diff --git a/public/index.html b/public/index.html
index ed79bee..cf3e28d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,8 +10,8 @@
     <title>Breakups</title>
   </head>
   <header style="position: fixed; width: 100%; text-align: center; background-color: #222; height: 90px; left: 0px; top: 0px; right: 0px; color: white;">
-    <h1 style="top: 10px; bottom: 0px; -webkit-margin-before: 10px; -webkit-margin-after: 0px; font-family: 'PT Sans'">Breakups</h1>
-    <h4 style="top: 5px; -webkit-margin-before: 5px; font-family: 'PT Sans'">Split bills among multiple people.</h3>
+    <h1 style="margin-top: 10px; margin-bottom: 0px; -webkit-margin-before: 10px; -webkit-margin-after: 0px; font-family: 'PT Sans'">Breakups</h1>
+    <h4 style="margin-top: 5px; -webkit-margin-before: 5px; font-family: 'PT Sans'">Split bills among multiple people.</h3>
   </header>
   <body>
     <noscript>
@@ -20,7 +20,7 @@
     <div id="root"></div>
   </body>
   <footer style="position: fixed; bottom: 0px; left: 0px; text-align: center; width:100%; background-color: #222; height: 85px; color: white;">
-    <h3 style="bottom: 0px; -webkit-margin-after: 0px; font-family: 'PT Sans'">Made by <a href="https://binhonglee.github.io/" style="color:#04B45F">@binhonglee</a>. <a href="https://github.com/binhonglee/breakups-webapp" style="color:cyan">GitHub</a></h3>
-    <h5 style="top: 5px; -webkit-margin-before: 5px; font-family: 'PT Sans'">Icons made by <a href="http://www.freepik.com" title="Freepik"  style="color:cyan">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon" style="color:cyan">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank" style="color:cyan">CC 3.0 BY</a></h5>
+    <h3 style="margin-bottom: 0px; -webkit-margin-after: 0px; font-family: 'PT Sans'">Made by <a href="https://binhonglee.github.io/" style="color:#04B45F">@binhonglee</a>. <a href="https://github.com/binhonglee/breakups-webapp" style="color:cyan">GitHub</a></h3>
+    <h5 style="margin-top: 5px; -webkit-margin-before: 5px; font-family: 'PT Sans'">Icons made by <a href="http://www.freepik.com" title="Freepik"  style="color:cyan">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon" style="color:cyan">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank" style="color:cyan">CC 3.0 BY</a></h5>
   </footer>
 </html>
diff --git a/src/App.css b/src/App.css
index 702c27f..6120d2d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -23,3 +23,18 @@
 .PaymentChain {
     margin-bottom: 80px;
 }
+
+.personInput {
+    float: right;
+    width: 100px;
+    height: 0.9em;
+}
+
+p {
+    margin: 0px;
+}
+
+.personNum {
+    line-height: 0.5em;
+    margin: 10px;
+}
diff --git a/src/Components/People.js b/src/Components/People.js
index 70f1fa5..51d150e 100644
--- a/src/Components/People.js
+++ b/src/Components/People.js
@@ -4,11 +4,11 @@ class People extends Component {
     render() {
         return (
             <div className="People">
-                <p style={{'line-height': '0.5em'}}>Person {this.props.people} <br/></p>
+                <p className="personNum">Person {this.props.people} <br/></p>
                 <form style={{textAlign:'left'}}>
-                    Name: <input type = "text" ref="name" onBlur={this.updateProps.bind(this)} style={{float:'right', width: 100}}/><br/>
-                    Email: <input type = "text" ref="email" onBlur={this.updateProps.bind(this)} style={{float:'right', width: 100}}/><br/>
-                    Amount: <input type = "text" ref="amount" onBlur={this.updateProps.bind(this)} style={{float:'right', width: 100}}/><br/>
+                    <p>Name: <input className="personInput" type = "text" ref="name" onBlur={this.updateProps.bind(this)}/><br/></p>
+                    <p>Email: <input className="personInput" type = "text" ref="email" onBlur={this.updateProps.bind(this)}/><br/></p>
+                    <p>Amount: <input className="personInput" type = "text" ref="amount" onBlur={this.updateProps.bind(this)}/><br/></p>
                 </form>
             </div>
         );
