review comments

embark-ui/src/components/ExplorerLayout.js

@@ -8,9 +8,7 @@ import BlockContainer from '../containers/BlockContainer';
 import TransactionsContainer from '../containers/TransactionsContainer';
 import TransactionContainer from '../containers/TransactionContainer';
 
-class ExplorerLayout extends React.Component {
-  render() {
-    return (
+const ExplorerLayout = () => (
   <React.Fragment>
     <Switch>
       <Route exact path="/embark/explorer/accounts" component={AccountsContainer}/>
@@ -21,8 +19,6 @@ class ExplorerLayout extends React.Component {
       <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">
+      <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)} />
+          <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>
     );
   }
 }

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;