From 5a6a70e226c29d40fecaf602ef31bf6663034416 Mon Sep 17 00:00:00 2001
From: emizzle <ericmastro@status.im>
Date: Tue, 16 Oct 2018 11:22:51 +1100
Subject: [PATCH] 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.
---
 .../src/components/ExplorerDashboardLayout.js | 36 ++++++------
 embark-ui/src/components/ExplorerLayout.js    | 58 ++++++++++---------
 embark-ui/src/components/Layout.js            |  4 +-
 embark-ui/src/routes.js                       |  2 +-
 4 files changed, 51 insertions(+), 49 deletions(-)

diff --git a/embark-ui/src/components/ExplorerDashboardLayout.js b/embark-ui/src/components/ExplorerDashboardLayout.js
index 9473dc04f..97e9ad282 100644
--- a/embark-ui/src/components/ExplorerDashboardLayout.js
+++ b/embark-ui/src/components/ExplorerDashboardLayout.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import {
-  Page,
-  Grid
-} from "tabler-react";
+  Col,
+  Row
+} 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}>
-      <Grid.Col>
-        <Page.Title className="my-5">Explorer</Page.Title>
-      </Grid.Col>
-    </Grid.Row>
-    <Grid.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">
+    <Row>
+      <Col>
+        <h1 className="my-5">Explorer</h1>
+      </Col>
+    </Row>
+    <Row>
+      <Col>
         <AccountsContainer />
-      </Grid.Col>
-    </Grid.Row>
-    <Grid.Row>
-      <Grid.Col md={6}>
+      </Col>
+    </Row>
+    <Row>
+      <Col md={6}>
         <BlocksContainer />
-      </Grid.Col>
-      <Grid.Col md={6}>
+      </Col>
+      <Col md={6}>
         <TransactionsContainer />
-      </Grid.Col>
-    </Grid.Row>
+      </Col>
+    </Row>
   </React.Fragment>
 );
 
diff --git a/embark-ui/src/components/ExplorerLayout.js b/embark-ui/src/components/ExplorerLayout.js
index 9854d80af..360a42c53 100644
--- a/embark-ui/src/components/ExplorerLayout.js
+++ b/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,
-  Grid,
-  List
-} from "tabler-react";
+  Row,
+  Col,
+  Nav,
+  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/transactions", icon: "activity", value: "Transactions"}
+  {to: "/embark/explorer/blocks", icon: "stop", value: "Blocks"},
+  {to: "/embark/explorer/transactions", icon: "tree", value: "Transactions"}
 ];
 
 const className = "d-flex align-items-center";
 
-const ExplorerLayout = () => (
-  <Grid.Row>
-    <Grid.Col md={3}>
-      <Page.Title className="my-5">Explorer</Page.Title>
+const ExplorerLayout = (props) => (
+  <Row>
+    <Col md={2}>
+      <h1 className="my-5">Explorer</h1>
       <div>
-        <List.Group transparent={true}>
+        <Nav vertical pills>
           {groupItems.map((groupItem) => (
-            <List.GroupItem
-              key={groupItem.value}
-              className={className}
-              to={groupItem.to}
-              icon={groupItem.icon}
-              RootComponent={NavLink}
-              exact={groupItem.exact || false}
-            >
-              {groupItem.value}
-            </List.GroupItem>
+            <NavItem 
+              key={groupItem.value}>
+              <NavLink
+                className={className}
+                to={groupItem.to}
+                tag={RouterNavLink}
+              >
+                <i className={`fa fa-${groupItem.icon} mr-3`} />{groupItem.value}
+              </NavLink>
+            </NavItem>
           ))}
-        </List.Group>
+        </Nav>
       </div>
-    </Grid.Col>
-    <Grid.Col md={9}>
+    </Col>
+    <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>
-  </Grid.Row>
+    </Col>
+  </Row>
 );
 
 export default ExplorerLayout;
diff --git a/embark-ui/src/components/Layout.js b/embark-ui/src/components/Layout.js
index 2bc46359c..1abf564a4 100644
--- a/embark-ui/src/components/Layout.js
+++ b/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: [
-    {url: "/embark/explorer", icon: "fa fa-compass", name: "Overview", exact: true},
+  {name: "Explorer", url: "/embark/explorer", icon: "fa fa-compass", children: [
+    {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"},
diff --git a/embark-ui/src/routes.js b/embark-ui/src/routes.js
index d458cd9b1..6c53b9c15 100644
--- a/embark-ui/src/routes.js
+++ b/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} />