Removed tabler-react, clean up

Removed tabler-react from the page structure.

Changed sub nav to reactstrap.

Added the overview child item on LHS nav and the sub nav on the page.

Adjusted width of the sub nav and page contents.

embark-ui/src/components/ExplorerDashboardLayout.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import {
-  Page,
+  Col,
-  Grid
+  Row
-} from "tabler-react";
+} from "reactstrap";
 
 import AccountsContainer from '../containers/AccountsContainer';
 import BlocksContainer from '../containers/BlocksContainer';
@@ -10,24 +10,24 @@ import TransactionsContainer from '../containers/TransactionsContainer';
 
 const ExplorerDashboardLayout = () => (
   <React.Fragment>
-    <Grid.Row md={12}>
+    <Row>
-      <Grid.Col>
+      <Col>
-        <Page.Title className="my-5">Explorer</Page.Title>
+        <h1 className="my-5">Explorer</h1>
-      </Grid.Col>
+      </Col>
-    </Grid.Row>
+    </Row>
-    <Grid.Row>
+    <Row>
-      <Grid.Col className="pl-md-0 pr-md-0 ml-md-0 mr-md-0 pr-lg-3 mr-lg-3 pl-lg-2 ml-lg-2">
+      <Col>
         <AccountsContainer />
-      </Grid.Col>
+      </Col>
-    </Grid.Row>
+    </Row>
-    <Grid.Row>
+    <Row>
-      <Grid.Col md={6}>
+      <Col md={6}>
         <BlocksContainer />
-      </Grid.Col>
+      </Col>
-      <Grid.Col md={6}>
+      <Col md={6}>
         <TransactionsContainer />
-      </Grid.Col>
+      </Col>
-    </Grid.Row>
+    </Row>
   </React.Fragment>
 );
 

embark-ui/src/components/ExplorerLayout.js

@@ -1,10 +1,12 @@
 import React from 'react';
-import {NavLink, Route, Switch} from 'react-router-dom';
+import {NavLink as RouterNavLink, Route, Switch} from 'react-router-dom';
 import {
-  Page,
+  Row,
-  Grid,
+  Col,
-  List
+  Nav,
-} from "tabler-react";
+  NavItem,
+  NavLink
+} from "reactstrap";
 
 import AccountsContainer from '../containers/AccountsContainer';
 import AccountContainer from '../containers/AccountContainer';
@@ -14,36 +16,36 @@ import TransactionsContainer from '../containers/TransactionsContainer';
 import TransactionContainer from '../containers/TransactionContainer';
 
 const groupItems = [
-  {to: "/embark/explorer", icon: "compass", value: "Overview", exact: true},
+  {to: "/embark/explorer/overview", icon: "signal", value: "Overview"},
   {to: "/embark/explorer/accounts", icon: "users", value: "Accounts"},
-  {to: "/embark/explorer/blocks", icon: "book-open", value: "Blocks"},
+  {to: "/embark/explorer/blocks", icon: "stop", value: "Blocks"},
-  {to: "/embark/explorer/transactions", icon: "activity", value: "Transactions"}
+  {to: "/embark/explorer/transactions", icon: "tree", value: "Transactions"}
 ];
 
 const className = "d-flex align-items-center";
 
-const ExplorerLayout = () => (
+const ExplorerLayout = (props) => (
-  <Grid.Row>
+  <Row>
-    <Grid.Col md={3}>
+    <Col md={2}>
-      <Page.Title className="my-5">Explorer</Page.Title>
+      <h1 className="my-5">Explorer</h1>
       <div>
-        <List.Group transparent={true}>
+        <Nav vertical pills>
           {groupItems.map((groupItem) => (
-            <List.GroupItem
+            <NavItem 
-              key={groupItem.value}
+              key={groupItem.value}>
-              className={className}
+              <NavLink
-              to={groupItem.to}
+                className={className}
-              icon={groupItem.icon}
+                to={groupItem.to}
-              RootComponent={NavLink}
+                tag={RouterNavLink}
-              exact={groupItem.exact || false}
+              >
-            >
+                <i className={`fa fa-${groupItem.icon} mr-3`} />{groupItem.value}
-              {groupItem.value}
+              </NavLink>
-            </List.GroupItem>
+            </NavItem>
           ))}
-        </List.Group>
+        </Nav>
       </div>
-    </Grid.Col>
+    </Col>
-    <Grid.Col md={9}>
+    <Col md={10}>
       <Switch>
         <Route exact path="/embark/explorer/accounts" component={AccountsContainer} />
         <Route exact path="/embark/explorer/accounts/:address" component={AccountContainer} />
@@ -52,8 +54,8 @@ const ExplorerLayout = () => (
         <Route exact path="/embark/explorer/transactions" component={TransactionsContainer} />
         <Route exact path="/embark/explorer/transactions/:hash" component={TransactionContainer} />
       </Switch>
-    </Grid.Col>
+    </Col>
-  </Grid.Row>
+  </Row>
 );
 
 export default ExplorerLayout;

embark-ui/src/components/Layout.js

@@ -23,8 +23,8 @@ const sidebarNavItems = {items: [
   {name: "Dashboard", url: "/embark", icon: 'fa fa-tachometer'},
   {name: "Deployment", url: "/embark/deployment", icon: "fa fa-arrow-up"},
   {name: "Contracts", url: "/embark/contracts", icon: "fa fa-file-text"},
-  {name: "Explorer", url: "/embark/explorer", icon: "fa fa-signal", children: [
+  {name: "Explorer", url: "/embark/explorer", icon: "fa fa-compass", children: [
-    {url: "/embark/explorer", icon: "fa fa-compass", name: "Overview", exact: true},
+    {url: "/embark/explorer/overview", icon: "fa fa-signal", name: "Overview"},
     {url: "/embark/explorer/accounts", icon: "fa fa-users", name: "Accounts"},
     {url: "/embark/explorer/blocks", icon: "fa fa-stop", name: "Blocks"},
     {url: "/embark/explorer/transactions", icon: "fa fa-tree", name: "Transactions"},

embark-ui/src/routes.js

@@ -15,7 +15,7 @@ const routes = (
   <React.Fragment>
     <Switch>
       <Route exact path="/embark/" component={HomeContainer} />
-      <Route exact path="/embark/explorer" component={ExplorerDashboardLayout} />
+      <Route exact path="/embark/explorer/overview" component={ExplorerDashboardLayout} />
       <Route path="/embark/explorer" component={ExplorerLayout} />
       <Route path="/embark/deployment/" component={DeploymentContainer} />
       <Route path="/embark/contracts/:contractName" component={ContractLayoutContainer} />