Updated some fonts and formatting. Also added an icon.

7 年之前 · e620291d9c
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/index.html
+++ b/public/index.html
@@ -1,15 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
    <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 style="position: fixed; width: 100%; text-align: center; background-color: #222; height: 90px; left: 0px; top: 0px; right: 0px; color: white;">
    <h1 style="-webkit-margin-before: 10px; -webkit-margin-after: 0px; font-family: 'PT Sans'">Breakups</h1>
    <h4 style="-webkit-margin-before: 5px; font-family: 'PT Sans'">Split bills among multiple people.</h3>
  </header>
  <body>
    <noscript>
@@ -17,7 +19,8 @@
    </noscript>
    <div id="root"></div>
  </body>
  <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 style="position: fixed; bottom: 0px; left: 0px; text-align: center; width:100%; background-color: #222; height: 85px; color: white;">
    <h3 style="-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="-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>
--- a/src/App.css
+++ b/src/App.css
@@ -1,9 +1,13 @@
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');

 .App {
    font-family: 'Titillium Web';
    margin-top: 100px;
    text-align: center;
 }

 .Forms {
    font-family: 'Titillium Web';
    align-content: center;
    align-items: center;
    align-self: center;
@@ -11,11 +15,11 @@
 }

 .Peoples {
    max-width: 250px;
    line-height: 1.8em;
    max-width: 180px;
    line-height: 1.4em;
    margin: 0 auto;
 }

 .PaymentChain {
    margin-bottom: 130px;
 }
    margin-bottom: 80px;
 }
--- a/src/App.js
+++ b/src/App.js
@@ -17,16 +17,15 @@ class App extends Component {
  render() {
    return (
      <div className="App">
        <h3>Easy way to split bills among multiple people.</h3>
        <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 className="Main-form" onSubmit={this.populatePeople.bind(this)} style={{height: '30px'}}>
            Number of people: <input type="text" ref="noOfPeople" style={{width: 30}}/> <input type="submit" value="Submit"/>
          </form>
          <br/>
          <div className="Peoples">
            {this.state.peoples}
          </div>
        </div>
        <br/>
        {this.state.actionButtons}
        <PaymentChain className="PaymentChain" paymentChain={this.state.paymentChain} />
      </div>
@@ -73,7 +72,7 @@ class App extends Component {
      actionButtons.push(<input key="email" type="submit" value="Send email reminder (non-functional yet)"/>);
      this.setState({peoples:peoples, info:info, actionButtons:actionButtons});
    }
    

    e.preventDefault();
  }

@@ -93,7 +92,7 @@ class App extends Component {
        'Content-Length': Buffer.byteLength(JSON.stringify(data))
      }
    };
    

    var post_req = https.request(post_options, res => {
      res.setEncoding('utf8');
      var returnData = "";
--- a/src/Components/People.js
+++ b/src/Components/People.js
@@ -3,21 +3,17 @@ import React, { Component } from 'react';
 class People extends Component {
    constructor() {
        super();
        this.state = {
            space: `\t`
        }
    }

    render() {
        return (
            <div className="People">
                Person {this.props.people}<br/>
                <p style={{'line-height': '0.5em'}}>Person {this.props.people} <br/></p>
                <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/>
                    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/>
                </form>
                <br/>
            </div>
        );
    }
@@ -36,4 +32,4 @@ class People extends Component {
    }
 }

 export default People;
 export default People;