add header and basic admin page

app/js/App.js

@@ -1,10 +1,13 @@
 /*global web3*/
-import React from 'react';
+import React, {Fragment} from 'react';
 import {HashRouter, Route, Redirect, Switch} from "react-router-dom";
+import ThemeProvider from 'react-bootstrap/ThemeProvider';
 
 import EmbarkJS from 'Embark/EmbarkJS';
 
+import Header from './components/Header';
 import Home from './components/Home';
+import Admin from './components/Admin';
 
 const MAINNET = 1;
 const TESTNET = 3;
@@ -50,11 +53,15 @@ class App extends React.Component {
     }
 
     return (<HashRouter>
+      <ThemeProvider prefixes={{ btn: 'my-btn' }}>
+        <Header/>
         <Switch>
           <Route exact path="/" component={Home}/>
+          <Route exact path="/admin" component={Admin}/>
 
           <Redirect to="/404"/>
         </Switch>
+      </ThemeProvider>
     </HashRouter>);
   }
 }

app/js/components/Admin.js

@@ -0,0 +1,14 @@
+/*global web3*/
+import React from 'react';
+
+class Admin extends React.Component {
+
+  render() {
+
+    return (<div>
+      <h3>Admin Panel</h3>
+    </div>);
+  }
+}
+
+export default Admin;

app/js/components/Header.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import {Navbar, Nav} from 'react-bootstrap';
+
+const Header = () => (<Navbar bg="light" expand="lg">
+    <Navbar.Brand href="/#/">Meritocracy</Navbar.Brand>
+    <Navbar.Toggle aria-controls="basic-navbar-nav"/>
+    <Navbar.Collapse id="basic-navbar-nav">
+      <Nav className="mr-auto">
+          <Nav.Link href="/#/">Home</Nav.Link>
+          <Nav.Link href="/#/admin">Admin</Nav.Link>
+      </Nav>
+    </Navbar.Collapse>
+  </Navbar>
+);
+
+export default Header

app/js/components/Home.js

@@ -1,13 +1,11 @@
 /*global web3*/
 import React from 'react';
-import {Button, Grid, Row, Col, Alert } from 'react-bootstrap';
+import {Row, Col, Alert, Button, Container, Form} from 'react-bootstrap';
-import * as NumericInput from 'react-numeric-input';
+import NumericInput from 'react-numeric-input';
 import Select from 'react-select';
 
 import Meritocracy from 'Embark/contracts/Meritocracy';
 
-// import './css/dapp.css';
-
 /*
 TODO:
 - list praise for contributor
@@ -189,8 +187,6 @@ class Home extends React.Component {
     const maxAllocation = selectedContributors.length ? currentContributor.allocation / selectedContributors.length : 0;
 
     return (<div>
-      <h3>Status Meritocracy</h3>
-
       {errorMsg && <Alert bsStyle="danger">{errorMsg}</Alert>}
 
       {currentContributor.name &&  <h2>Hello, {currentContributor.name} !</h2>}
@@ -206,27 +202,31 @@ class Home extends React.Component {
           placeholder="Choose Contributor(s)..."
           isDisabled={busy}
         />
-      <span>Your Allocatable Kudos: { currentContributor.allocation } SNT</span> <br/>
+      <p>Your Allocatable Kudos: { currentContributor.allocation } SNT</p>
 
+      {selectedContributors.length === 0 && <Alert variant="warning">
+        Please select one or more contributors
+      </Alert>}
 
-      <br/>
+      <NumericInput mobile step={5} min={0} max={maxAllocation} onChange={this.handleAwardChange} value={award} disabled={busy}/>
-      <NumericInput mobile step={5} min={0} max={maxAllocation} onChange={this.handleAwardChange} value={award} disabled={busy} />  <br/>
 
-      <input disabled={busy} placeholder="Enter your praise..." onChange={this.handlePraiseChange} value={praise} />  <br/>
+      <Form>
+        <Form.Control disabled={busy} placeholder="Enter your praise..." onChange={this.handlePraiseChange}
+                      value={praise} />
+      </Form>
       <span> Total Awarding: {award * selectedContributors.length} SNT </span>   <br/>
       <Button disabled={busy} variant="outline-primary" onClick={this.awardTokens}>Award</Button>
 
-
       <h4>Your Kudos History</h4>
-      <span>Your Received Kudos: <b>{ currentContributor.received } SNT</b> <Button variant="outline-primary"  onClick={this.withdrawTokens} disabled={busy}>Withdraw</Button></span>  <br/>
+      <span>Your Received Kudos: <b>{ currentContributor.received } SNT</b> <Button variant="outline-primary" onClick={this.withdrawTokens} disabled={busy}>Withdraw</Button></span>  <br/>
-      <Grid>
+      <Container>
         <Row>
           {currentContributor.praises && currentContributor.praises.map((item, i) => {
             const name = options.find(x => x.value === item.author);
             return <Col key={i}>{(name && name.label) || item.author} has sent you {web3.utils.fromWei(item.amount, "ether")} SNT {item.praise && "\"" + item.praise + "\""}</Col>;
           })}
         </Row>
-      </Grid>
+      </Container>
 
     </div>);
   }

app/js/index.js

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
 
 import App from './App';
 
+import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
+
 ReactDOM.render(
     <App/>,
   document.getElementById('app')