review comments

embark-ui/src/components/ExplorerLayout.js

@@ -8,21 +8,17 @@ import BlockContainer from '../containers/BlockContainer';
 import TransactionsContainer from '../containers/TransactionsContainer';
 import TransactionContainer from '../containers/TransactionContainer';
 
-class ExplorerLayout extends React.Component {
-  render() {
-    return (
-      <React.Fragment>
-        <Switch>
-          <Route exact path="/embark/explorer/accounts" component={AccountsContainer}/>
-          <Route exact path="/embark/explorer/accounts/:address" component={AccountContainer}/>
-          <Route exact path="/embark/explorer/blocks" component={BlocksContainer}/>
-          <Route exact path="/embark/explorer/blocks/:blockNumber" component={BlockContainer}/>
-          <Route exact path="/embark/explorer/transactions" component={TransactionsContainer}/>
-          <Route exact path="/embark/explorer/transactions/:hash" component={TransactionContainer}/>
-        </Switch>
-      </React.Fragment>
-    );
-  }
-}
+const ExplorerLayout = () => (
+  <React.Fragment>
+    <Switch>
+      <Route exact path="/embark/explorer/accounts" component={AccountsContainer}/>
+      <Route exact path="/embark/explorer/accounts/:address" component={AccountContainer}/>
+      <Route exact path="/embark/explorer/blocks" component={BlocksContainer}/>
+      <Route exact path="/embark/explorer/blocks/:blockNumber" component={BlockContainer}/>
+      <Route exact path="/embark/explorer/transactions" component={TransactionsContainer}/>
+      <Route exact path="/embark/explorer/transactions/:hash" component={TransactionContainer}/>
+    </Switch>
+  </React.Fragment>
+);
 
 export default ExplorerLayout;

embark-ui/src/components/Layout.js

@@ -130,7 +130,9 @@ class Layout extends React.Component {
   renderRightNav() {
     return (<Nav className="ml-auto" navbar>
       {<SearchBar hidden={this.state.searchLoading} searchSubmit={searchValue => this.searchTheExplorer(searchValue)}/>}
-      {this.state.searchLoading && <p className="search-loading">Searching... <FontAwesome name="spinner" spin /></p>}
+      {this.state.searchLoading && <p className="search-loading">
+        Searching... <FontAwesome name="spinner" size="2x" spin className="align-middle ml-2"/>
+      </p>}
 
       {this.renderSettings()}
     </Nav>);

embark-ui/src/components/Loading.js

@@ -7,7 +7,7 @@ import "./Loading.css";
 const Loading = () => (
   <Row className="align-items-center mt-5">
     <Col className="text-center">
-      <FontAwesome name="spinner" spin className="fa-3x fa-fw" />
+      <FontAwesome name="spinner" spin size="3x" />
     </Col>
   </Row>
 );

embark-ui/src/components/SearchBar.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Form, FormGroup, Input, Button, Row, Col} from 'reactstrap';
 import FontAwesome from 'react-fontawesome';
+import classNames from 'classnames';
 
 import './search.css';
 
@@ -33,19 +34,16 @@ class SearchBar extends React.Component {
 
   render() {
     return (
-      <Row className={this.props.hidden ? 'hidden' : ''}>
-        <Col className="col-sm-12">
-          <Form inline className="search-bar float-right my-2">
-            <FormGroup>
-              <Input type="text" name="search-bar" placeholder="Search by Address / Txhash / Block" onChange={(e) => this.onChange(e)}
-                     value={this.state.searchValue} onKeyPress={e => this.onKeyPress(e)} />
-              <Button color="secondary" onClick={(e) => this.onSubmit(e)}>
-                <FontAwesome name="search"/>
-              </Button>
-            </FormGroup>
-          </Form>
-        </Col>
-      </Row>
+      <Form inline className={classNames('search-bar', 'float-right', 'my-2', {hidden: this.props.hidden})}>
+        <FormGroup>
+          <Input type="text" name="search-bar" placeholder="Search by Address / Txhash / Block"
+                 onChange={(e) => this.onChange(e)}
+                 value={this.state.searchValue} onKeyPress={e => this.onKeyPress(e)}/>
+          <Button color="secondary" onClick={(e) => this.onSubmit(e)}>
+            <FontAwesome name="search"/>
+          </Button>
+        </FormGroup>
+      </Form>
     );
   }
 }

embark-ui/src/components/search.css

@@ -22,12 +22,6 @@
   margin-top: 16px;
 }
 
-.search-loading .fa-spinner {
-  font-size: 2em;
-  vertical-align: middle;
-  margin-left: 10px;
-}
-
 .search-error-close {
   position: absolute;
   cursor: pointer;