Block explorer nav bar button/tabs are dynamic with active highlights

shyftBlockExplorerUI/src/components/nav/nav.css

@@ -33,6 +33,18 @@
     font-weight: 300;
 }
 
+button.btnActive {
+    color: #4f2e7e;
+    background-color: white;
+    font-size: 8px;
+    letter-spacing: 1.6px;
+    font-family: 'Open Sans', sans-serif;
+    width: 120px;
+    height: 32px;
+    margin-right: 1%;
+    font-weight: 300;
+}
+
 .btn:hover { 
     color: #4f2e7e;
     background-color: #ffffff;

shyftBlockExplorerUI/src/components/nav/nav.js

@@ -7,13 +7,13 @@ class navBar extends React.Component  {
   constructor(props) {
     super(props);
     this.state = {
-      selected: ""
+      active: "blocks"
     };
   }
 
-  // updateSelected = (page) => {
+  updateActive = (page) => {
-  //   this.setState({ selected });
+    this.setState({ active: page  });
-  // }
+  }
 
   render() {
     return (
@@ -21,40 +21,35 @@ class navBar extends React.Component  {
         <div className={classes.navHeader}>
           <h5 className={classes.headerText}> Block Explorer </h5>
           <div className={classes.buttonContainer}>
-
             <Link to="/blocks">  
-              <button className={classes.btn} > BLOCKS </button> 
+              <button 
-            </Link>   
+                className={this.state.active === "blocks" ? classes.btnActive : classes.btn}
-
+                onClick={ ()=>this.updateActive("blocks") } > 
-            <Link to="/transactions">  
+                BLOCKS 
-              <button className={classes.btn} > TRANSACTIONS </button>
-            </Link>   
-
-            <button className={classes.btn}> INTERNAL TX </button>
-      
-            <Link to="/accounts">  
-              <button className={classes.btn}> ACCOUNTS </button>
-            </Link>   
-
-          </div>
-        </div>
-      </div>
-
-     /* <nav className="navbar navbar-light justify-content-between">
-      <a className={combinedClasses.join(" ")}>Block Explorer Test UI</a>
-     <form className="form-inline">
-        <input
-          className="form-control mr-sm-2"
-          type="search"
-          placeholder="Search"ls
-
-          aria-label="Search"
-        />
-        <button className="btn btn-outline-success my-2 my-sm-0" type="submit">
-          Search
               </button> 
-      </form> 
+            </Link>   
-    </nav>*/
+            <Link to="/transactions">  
+              <button 
+                className={this.state.active === "transactions" ? classes.btnActive : classes.btn}
+                onClick={ ()=>this.updateActive("transactions") }> 
+                TRANSACTIONS 
+              </button>
+            </Link>   
+            <button 
+              className={this.state.active === "internal" ? classes.btnActive : classes.btn}
+              onClick={ ()=> this.updateActive("internal") }> 
+              INTERNAL TX 
+            </button>      
+            <Link to="/accounts">  
+              <button 
+               className={this.state.active === "accounts" ? classes.btnActive : classes.btn}
+                onClick={ ()=>this.updateActive("accounts") }>                 
+                ACCOUNTS 
+              </button>
+            </Link>   
+          </div>
+        </div>
+      </div>
     )
   };
 };

shyftBlockExplorerUI/src/components/table/transactions/table.css

@@ -8,13 +8,6 @@
     position: absolute;
 }
 
-/* .tHead {
-    font-size: 7pt;
-    background-color: white;
-    font-family: 'Open Sans', sans-serif;
-    color: #593c83;
-} */
-
 th {
     background-color: white;
     padding: 15pt 30pt ;