Multiple minor tweaks from 1st round of feedback

package.json

@@ -68,9 +68,11 @@
     "dotenv-webpack": "^1.5.4",
     "lodash": "^4.17.10",
     "materialize-css": "^0.100.2",
+    "openzeppelin-zos": "^1.9.0-beta",
     "react": "^15.6.1",
     "react-color": "^2.13.8",
     "react-dom": "^15.6.1",
+    "react-fontawesome": "^1.6.1",
     "react-modal": "^3.1.0",
     "react-redux": "^5.0.6",
     "react-router": "^4.2.0",
@@ -81,7 +83,6 @@
     "truffle-contract": "^3.0.3",
     "web3": "~0.20.1",
     "zos": "^0.6.0",
-    "zos-lib": "^0.1.24",
-    "openzeppelin-zos": "^1.9.0-beta"
+    "zos-lib": "^0.1.24"
   }
 }

src/app.scss

@@ -20,6 +20,11 @@ html, body{
   padding-top: 15px;
 }
 
+.info {
+  text-align: center;
+  text-color: $grey;
+}
+
 @import "./css/buttons";
 @import "./css/navbar";
 @import "./css/forms";

src/css/donations.scss

@@ -98,7 +98,7 @@
 }
 
 .titleList {
-    margin: 150px 0 50px;
+    margin: 150px 0 10px;
     font-size: 2.4rem;
     line-height: 110%;
     text-align: center;
@@ -107,6 +107,16 @@
     color: grey;
 }
 
+.subtitleList {
+    margin: 0 0 50px;
+    font-size: 2.0rem;
+    line-height: 100%;
+    text-align: center;
+    font-family: roboto;
+    font-weight: 300;
+    color: blue;
+}
+
 .donationAddress {
     text-align: center;
     font-size: 0.7em;
@@ -135,4 +145,4 @@
     border-bottom-right-radius: 6px;
     margin-bottom: 30px;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 10px 0 rgba(0, 0, 0, 0.05);
-}
+}

src/css/navbar.scss

@@ -3,7 +3,7 @@
 .container.main-nav {
   background-color: $white;
   box-shadow: none;
-  margin-bottom: 50px;
+  margin-bottom: 30px;
 
   .search-contract {
     width: 350px;
@@ -15,13 +15,17 @@
     position: relative;
     font-family: Lato;
     font-size: 25px;
-    padding-top: 10px;
+    padding-top: 0px;
   }
 
   .nav-wrapper {
     margin: auto;
   }
 
+  .icon {
+    color: $blue;
+  }
+
   .col {
     padding: 0;
   }
@@ -31,6 +35,6 @@
   }
 
   li {
-    margin-left: 30px;
+    margin-left: 20px;
   }
-}
+}

src/index.template.ejs

@@ -4,6 +4,7 @@
     <title>Zeppelin's Basil</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">    
     <link rel="icon" href="/images/favicon.ico">
     <link href="https://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,700,400italic,700italic" rel="stylesheet" type="text/css">
   </header>

src/js/actions/donations.js

@@ -38,8 +38,7 @@ const DonationsActions = {
         await basil.donate(r, g, b, { 
           from: donor, 
           value: toWei(value),
-          gas: 400000,
-          gasPrice: 22000000000
+          gas: 400000
         })
         dispatch(FetchingActions.stop())
       } catch(error) {

src/js/components/App.react.js

@@ -8,6 +8,7 @@ import DonateForm from './DonateForm.react'
 import NetworkActions from "../actions/network";
 import DonationsList from './DonationsList.react'
 import { withRouter, Switch } from 'react-router-dom'
+import FontAwesome from "react-fontawesome";
 
 class App extends React.Component {
 
@@ -24,16 +25,22 @@ class App extends React.Component {
         <Modal open={fetching} progressBar message={fetching}/> :
         <div>
           <Navbar/>
+
           <div className="container">
             <Alert/>
             <DonateForm/>
+            <div className='info grey-text'>
+              <span><FontAwesome name="flash"/> powered by <a href="https://zeppelinos.org" target="_blank">ZeppelinOS</a></span><br/>
+              <span><FontAwesome name="github"/> github <a href="https://github.com/zeppelinos/basil" target="_blank">Basil</a></span>
+            </div>
             <DonationsList/>
           </div>
+
         </div>
       ) :
       <div>
         <Modal dark open={!network.connected} message={'Please access using MIST or Metamask'}/>
-        <Modal dark open={network.connected && !network.couldAccessAccount} message={'Please enable your account'}/>
+        <Modal dark open={network.connected && !network.couldAccessAccount} message={'Please enable your account and connect to the ropsten network'}/>
       </div>
   }
 }

src/js/components/DonateForm.react.js

@@ -17,24 +17,52 @@ class DonateForm extends React.Component {
     Store.dispatch(AccountActions.findAccount());
   }
 
+  componentWillReceiveProps(nextProps) {
+
+    // Init value set
+    let highestDonation = parseFloat(nextProps.basil.highestDonation, 10);
+    if(highestDonation != 0) {
+      this.setState({
+        value: nextProps.basil.highestDonation + 0.01
+      });
+    }
+
+    // Init color set
+    const r = parseInt(nextProps.basil.r, 10);
+    const g = parseInt(nextProps.basil.g, 10);
+    const b = parseInt(nextProps.basil.b, 10);
+    const currentRgbIsRed = this.state.color.rgb.r == 255 && this.state.color.rgb.g == 0 && this.state.color.rgb.b == 0;
+    const incomingRgbIsZero = r == 0 && g == 0 && b == 0;
+    if(currentRgbIsRed && !incomingRgbIsZero) {
+      this.setState({
+        color: {
+          rgb: {r, g, b} 
+        }
+      });
+    }
+  }
+
   render() {
     const rgb = this.state.color.rgb;
     const { address, balance } = this.props.account;
+    let { highestDonation } = this.props.basil;
+    highestDonation = parseFloat(highestDonation, 10);
+    const newHighestDonation = highestDonation + 0.01
     return (
       <form className="basil card" onSubmit={this._handleSubmit}>
         <div className="card-content">
           <div className="row no-margin">
             <div className="col s6">
               <div className="donate-form">
-                <h3 className="title">Customize the Zeppelin LED</h3>
+                <h3 className="title">Donate more than {highestDonation} ETH to change the color of the Hue lamp in Zeppelin's Office!</h3>
 
                 <HuePicker className="color-picker" style={{width: 100}} onChangeComplete={this._updateColor} color={rgb}/>
 
                 <input value={address} type="text" id="owner" disabled required/>
 
                 <div className="row no-margin">
                   <div className="input-field col s6">
-                    <label htmlFor="value">Value (ETH)</label>
+                    <label htmlFor="value">{newHighestDonation} ETH</label>
                     <input onChange={this._updateValue} type="number" step="any" id="value" required/>
                   </div>
                   <div className="input-field submit col s6">
@@ -71,8 +99,8 @@ class DonateForm extends React.Component {
   }
 }
 
-function mapStateToProps({ account, donations }) {
-  return { account, donations }
+function mapStateToProps({ account, donations, basil }) {
+  return { account, donations, basil }
 }
 
 export default connect(mapStateToProps)(DonateForm)

src/js/components/DonationsList.react.js

@@ -14,10 +14,13 @@ class DonationsList extends React.Component {
     const donations = this.props.donations.list
     return (
       <div>
-        <h3 className="titleList">Some have already thought about our basil</h3>
-        <div className="donations-list">
-          { donations.length === 0 ? <em>Loading...</em> : <div>{this._buildDonationsList(donations)}</div>}
-        </div>
+        {this._buildTitle(donations.length)}
+        <a href='http://www.twitter.com/zeppelinbasil' target='_blank'><h4 className='subtitleList'>twitter.com/zeppelinbasil</h4></a>
+        { donations.length > 0 &&
+          <div className="donations-list">
+            { donations.length === 0 ? <em>Loading...</em> : <div>{this._buildDonationsList(donations)}</div>}
+          </div>
+        }
       </div>
     )
   }
@@ -40,6 +43,18 @@ class DonationsList extends React.Component {
     // TODO: delete chip css object
   }
 
+  _buildTitle(numDonations) {
+    if(numDonations === 0) {
+      return <h3 className="titleList"></h3>
+    } 
+    else if(numDonations === 1) {
+      return <h3 className="titleList">Someone has thought about our Basil</h3>
+    }
+    else {
+      return <h3 className="titleList">Many have thought about our Basil</h3>
+    }
+  }
+
   _buildDonationItem(donation) {
     if(!donation) return <div className="col s4"></div>
     const style = { backgroundColor: `rgb(${[donation.r, donation.g, donation.b]})` }

src/js/components/Navbar.react.js

@@ -3,6 +3,7 @@ import Store from '../store'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import BasilActions from "../actions/basil";
+import FontAwesome from "react-fontawesome";
 
 class Navbar extends React.Component {
 
@@ -15,20 +16,29 @@ class Navbar extends React.Component {
     return (
       <nav className="container main-nav">
         <div className="row nav-wrapper">
-          <div className="col m12 l6">
+
+          <div className="col m12 l4">
             <Link to="/" className="brand-logo">
               <img width="150" src={require('../../images/zeppelin-logo.png')}/>
             </Link>
           </div>
-          <div className="col m12 l6">
+
+          <div className="col m12 l8">
             {basil &&
               <ul className="right grey-text">
                 <li>Last donation: <strong>{basil.highestDonation} ETH</strong></li>
                 &nbsp;
                 <li>RGB: <strong>{basil.r} - {basil.g} - {basil.b}</strong></li>
+                &nbsp;
+                <li>
+                  <a href='http://www.twitter.com/zeppelinbasil' target='_blank'>
+                    <FontAwesome name='twitter' className='icon' size='2x'/>
+                  </a>
+                </li>
               </ul>
             }
           </div>
+
         </div>
       </nav>
     )

webpack.common.js

@@ -32,10 +32,6 @@ const config = {
       {
         test: /\.(woff|woff2|eot|ttf)$/,
         loader: 'file-loader?name=fonts/[name].[ext]'
-      },
-      {
-          test: /\.jpe?g$|\.ico$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/,
-          loader: 'file-loader?name=[name].[ext]'  // <-- retain original file name
       }
     ]
   },