Adding styles for management panel

app/css/app.css

@@ -94,8 +94,30 @@ h1.title {
     }
   }
 
-input[type=text] {
-    background: none;
-    border: 1px solid #555;
-    color: #fff;
+
+#management {
+    background: #fdfdfd;
+    color: #333;
+    float: left;
+    width: 100%;
+    clear: both;
+    padding-top: 20px;
+    opacity: 0.7;
+    
+}
+
+#management span.close {
+    float: right;
+    margin-right: 20px;
+    font-size: 15px;
+    color: #000;
+    font-weight: bold;
+}
+
+#management b {
+    margin-right: 10px;
+}
+
+#management div.row {
+    margin-bottom: 1em;
 }

app/js/components/addToken.js

@@ -2,7 +2,7 @@ import EmbarkJS from 'Embark/EmbarkJS';
 import React, { Fragment, Component } from 'react';
 import ReactDOM from 'react-dom';
 import SpaceshipToken from 'Embark/contracts/SpaceshipToken';
-import { Form, FormGroup, FormControl, InputGroup, HelpBlock, Button } from 'react-bootstrap';
+import { Form, FormGroup, FormControl, InputGroup, Button, Grid, Row, Col, ControlLabel} from 'react-bootstrap';
  
 const emptyState = {
   fileToUpload: '',
@@ -85,29 +85,33 @@ class AddToken extends Component {
   }
 
   render(){
-    return <div id="addToken">
-      <Form>
+    return <Grid>
+            <h4>Crear nave</h4>
             <FormGroup>
-              Energ&iacute;a
+              <Row>
+                <Col sm={2} md={2}>
+                  <ControlLabel>Energ&iacute;a</ControlLabel>                  
                   <FormControl
                     type="text"
                     value={this.state.energy}
                     onChange={(e) => this.handleChange('energy', e.target.value)} />
-
-              Lasers
+                </Col>
+                <Col sm={2} md={2}>
+                  <ControlLabel>Lasers</ControlLabel>                  
                   <FormControl
                     type="text"
                     value={this.state.lasers}
                     onChange={(e) => this.handleChange('lasers', e.target.value)} />
-
-
-              Escudo
+                </Col>
+                <Col sm={2} md={2}>
+                  <ControlLabel>Escudo</ControlLabel>                  
                   <FormControl
                     type="text"
                     value={this.state.shield}
                     onChange={(e) => this.handleChange('shield', e.target.value)} />
-
-              Precio
+                </Col>
+                <Col sm={2} md={2}>
+                  <ControlLabel>Precio</ControlLabel>                  
                   <InputGroup>
                     <FormControl
                       type="text"
@@ -115,17 +119,21 @@ class AddToken extends Component {
                       onChange={(e) => this.handleChange('price', e.target.value)} />                
                       <InputGroup.Addon>Ξ</InputGroup.Addon>
                   </InputGroup>
-               
-              Imagen
+                </Col>
+                <Col sm={4} md={4}>
+                  <ControlLabel>Imagen</ControlLabel>                  
                   <FormControl
                     type="file"
                     onChange={(e) => this.handleChange('fileToUpload', [e.target])} />
-
-              <Button bsStyle="primary" onClick={(e) => this.handleClick(e)}>Create</Button>
+                </Col>
+              </Row>
+              <Row>
+                <Col sm={2} md={2}>
+                  <Button onClick={(e) => this.handleClick(e)}>Crear</Button>
+                </Col>
+              </Row>
             </FormGroup>
-          </Form>
-
-    </div>;
+          </Grid>;
   }
 }
 

app/js/components/withdrawBalance.js

@@ -3,7 +3,7 @@ import web3 from "Embark/web3"
 import React, { Component, Fragment } from 'react';
 import ReactDOM from 'react-dom';
 import SpaceshipToken from 'Embark/contracts/SpaceshipToken';
-import { Button } from 'react-bootstrap';
+import { Button, Grid, Row, Col } from 'react-bootstrap';
 
 class WithdrawBalance extends Component {
 
@@ -63,10 +63,15 @@ class WithdrawBalance extends Component {
 
   render(){
     const { balance } = this.state;
-    return <Fragment>
-      { balance } Ξ
-      {<Button onClick={(e) => this.handleClick(e)} disabled={balance == "0"}>withdraw</Button>}
-      </Fragment>;
+    return <Grid>
+        <h4>Fondos</h4>
+        <Row>
+          <Col sm={3} md={3}>
+            Balance Disponible: <b>{ balance } Ξ</b>              
+            <Button onClick={(e) => this.handleClick(e)} disabled={balance == "0"}>Retirar</Button>
+          </Col>
+        </Row>
+      </Grid>;
   }
 }
 

app/js/index.js

@@ -13,6 +13,7 @@ class App extends Component {
         super(props);
         this.state = {
             isOwner: false,
+            hidePanel: false
         }
     }
 
@@ -32,19 +33,19 @@ class App extends Component {
     }
 
     render(){
-        const { isOwner } = this.state;
+        const { isOwner, hidePanel } = this.state;
 
         return (
         <Fragment>
-            <MyShips />
-            <Shipyard />
-            { isOwner ? 
-                <Fragment>
+            { isOwner && !hidePanel ? 
+                <div id="management">
+                    <span className="close" onClick={ (e) => this.setState({'hidePanel': true})}>cerrar</span>
                     <WithdrawBalance />
                     <AddToken />
-                </Fragment> : '' 
+                </div> : '' 
             }
-            
+            <MyShips />
+            <Shipyard />
         </Fragment>);
     }
 }