Rework components. Initialize book component.

frontend/src/components/BookPage.js

@@ -3,9 +3,25 @@ import React, { Component } from "react";
 export default class BookPage extends Component {
     constructor(props) {
       super(props);
+      this.state = {
+        orders: null,
+      };
+      this.currency = 2;
+      this.type = 1;
+      this.getOrderDetails()
+    }
+    getOrderDetails() {
+      fetch('/api/book' + '?currency=' + this.currency + "&type=" + this.type)
+        .then((response) => response.json())
+        .then((data) => console.log(data));
+        // this.setState({orders: data}));
     }
-
     render() {
-        return <p>This is the order book page</p>;
+        return (
+        <div className="col">
+        <h1>Book</h1>
+        {/* {this.state.orders.map(order => <div>{order.maker_nick}</div>)} */}
+      </div>
+      );
     }
 }

frontend/src/components/MakerPage.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup, Menu} from "@material-ui/core"
+import { Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup, Menu} from "@material-ui/core"
 import { Link } from 'react-router-dom'
 
 function getCookie(name) {
@@ -110,13 +110,20 @@ export default class MakerPage extends Component {
   render() {
     return (
         <Grid container spacing={1}>
+            <Grid item xs={12} align="center">
                 <Grid item xs={12} align="center">
                     <Typography component="h4" variant="h4">
                         Make an Order
                     </Typography>
                 </Grid>
+                <Paper elevation={12} style={{ padding: 8,}}>
                 <Grid item xs={12} align="center">
                     <FormControl component="fieldset">
+                    <FormHelperText>
+                        <div align='center'>
+                        Choose Buy or Sell Bitcoin
+                        </div>
+                    </FormHelperText>
                         <RadioGroup row defaultValue="0" onChange={this.handleTypeChange}>
                             <FormControlLabel 
                                 value="0" 
@@ -131,11 +138,6 @@ export default class MakerPage extends Component {
                                 labelPlacement="Top"
                             />
                         </RadioGroup>
-                    <FormHelperText>
-                        <div align='center'>
-                        Choose Buy or Sell Bitcoin
-                        </div>
-                    </FormHelperText>
                     </FormControl>
                 </Grid>
                 <Grid item xs={12} align="center">
@@ -206,7 +208,7 @@ export default class MakerPage extends Component {
                         </FormHelperText>
                     </FormControl>
                 </Grid>
-{/* conditional shows either Premium % field or Satoshis field based on pricing method */}
+    {/* conditional shows either Premium % field or Satoshis field based on pricing method */}
                 { this.state.isExplicit 
                         ? <Grid item xs={12} align="center">
                             <TextField 
@@ -235,6 +237,8 @@ export default class MakerPage extends Component {
                                 />
                             </Grid>
                     }
+                </Paper>
+            </Grid>
             <Grid item xs={12} align="center">
                 <Button color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed}>
                     Create Order

frontend/src/components/OrderPage.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Button , Grid, Typography, List, ListItem, ListItemText, ListItemAvatar, Avatar, Divider} from "@material-ui/core"
+import { Paper, Button , Grid, Typography, List, ListItem, ListItemText, ListItemAvatar, Avatar, Divider} from "@material-ui/core"
 import { Link } from 'react-router-dom'
 
 // pretty numbers
@@ -46,8 +46,9 @@ export default class OrderPage extends Component {
       <Grid container spacing={1}>
         <Grid item xs={12} align="center">
           <Typography component="h5" variant="h5">
-          Robosat BTC {this.state.type ? " Sell " : " Buy "} Order
+          BTC {this.state.type ? " Sell " : " Buy "} Order
           </Typography>
+          <Paper elevation={12} style={{ padding: 8,}}>
           <List component="nav" aria-label="mailbox folders">
             <ListItem>
               <ListItemAvatar sx={{ width: 56, height: 56 }}>
@@ -97,6 +98,7 @@ export default class OrderPage extends Component {
           <Grid item xs={12} align="center">
           {this.state.isParticipant ? "" : <Button variant='contained' color='primary' to='/home' component={Link}>Take Order</Button>}
           </Grid>
+        </Paper>
         </Grid>
       </Grid>
     );

frontend/src/components/UserGenPage.js

@@ -131,9 +131,9 @@ export default class UserGenPage extends Component {
           </Grid>
           <Grid item xs={12} align="center">
             <ButtonGroup variant="contained" aria-label="outlined primary button group">
-              <Button color='primary' to='/home' component={Link}>Buy BTC</Button>
+              <Button color='primary' to='/make' component={Link}>Make Order</Button>
               <Button to='/home' component={Link}>INFO</Button>
-              <Button color='secondary' to='/home' component={Link}>Sell BTC</Button>
+              <Button color='secondary' to='/book' component={Link}>View Book</Button>
             </ButtonGroup>
           </Grid>
           <Grid item xs={12} align="center">