Block explorer transaction table redesign

shyftBlockExplorerUI/src/components/nav/nav.css

@@ -1,5 +1,5 @@
 .navHeader {
-    height: 27.5vh;
+    height: 150pt;
     background-color: #4f2e7e;
     padding-top: 30pt;
     padding-left: 2.5%;

shyftBlockExplorerUI/src/components/nav/nav.js

@@ -36,7 +36,6 @@ class navBar extends React.Component  {
               <button className={classes.btn}> ACCOUNTS </button>
             </Link>   
 
-
           </div>
         </div>
       </div>

shyftBlockExplorerUI/src/components/table/blocks/blockRows.js

@@ -42,7 +42,7 @@ class BlocksTable extends Component {
 
         let combinedClasses = ['responsive-table', classes.table];
         return (
-            <div className={classes.tableContainer} >
+            <div>
                 <table className={combinedClasses.join(' ')}>
                     <thead>
                     <tr>

shyftBlockExplorerUI/src/components/table/blocks/blockTable.js

@@ -6,10 +6,10 @@ const BlockTable = (props) => {
     return (
           <tbody>
             <tr style={{ borderTop: '1px solid #e0defb' }}>
-                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }} ><Link to="/blocks/detail" style={{ color: '#8f67c9' }} onClick={() => props.detailBlockHandler(props.Number)}>
+                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }} className={classes.height} ><Link to="/blocks/detail" style={{ color: '#8f67c9' }} onClick={() => props.detailBlockHandler(props.Number)}>
                     {props.Number}
                 </Link></td>
-                <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'   }} className={classes.addressTag}>{props.Hash}</td>
+                <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'   }} className={classes.hash}>{props.Hash}</td>
                 <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'   }}>{props.AgeGet}</td>
                 <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.TxCount}</td>
                 <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'   }}>{props.UncleCount}</td>

shyftBlockExplorerUI/src/components/table/blocks/table.css

@@ -3,9 +3,9 @@
     width: 95%;
     margin: 0 auto;  
     background-color: white;
-    top: 20vh;
+    top: 107pt;
     left: 2.5%;
-    position: fixed;
+    position: absolute;
 }
 
 thead {
@@ -28,12 +28,24 @@ td {
     font-family: 'Open Sans', sans-serif;
 }
 
+.height {
+    width: 50px;
+}
+
+.hash {
+    display: inline-block;
+    vertical-align: bottom;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 220px;
+}
+
 .addressTag {
     display: inline-block;
     vertical-align: bottom;
     text-overflow: ellipsis;
     overflow: hidden;
-    width: 100px;
+    width: 150px;
 }
 
 .ageTag{

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

@@ -1,16 +1,31 @@
 .table {
     border-spacing: 100rem;
-    width: 100%;
-    margin-top: 50px;
+    width: 95%;
+    margin: 0 auto;  
+    background-color: white;
+    top: 107pt;
+    left: 2.5%;
+    position: absolute;
 }
 
 .tHead {
-    font-size: 1rem;
+    font-size: 7pt;
+    background-color: white;
+    font-family: 'Open Sans', sans-serif;
+    color: #593c83;
 }
 
 th {
-    background-color: aliceblue;
-    padding-right: 10px;
+    background-color: white;
+    padding: 15pt 30pt ;
+    color: #593c83;
+    font-family: 'Open Sans', sans-serif;
+}
+
+td {
+    font-size: 6pt;
+    background-color: white;
+    font-family: 'Open Sans', sans-serif;
 }
 
 .addressTag {
@@ -18,7 +33,7 @@ th {
     vertical-align: bottom;
     text-overflow: ellipsis;
     overflow: hidden;
-    width: 132px;
+    width: 250px;
 }
 
 .ageTag{
@@ -56,7 +71,6 @@ th {
 .arrow {
     width: 25px;
     height: 25px;
-    margin-left: 15px;
 }
 
 .disabled {

shyftBlockExplorerUI/src/components/table/transactions/transactionRow.js

@@ -21,7 +21,6 @@ class TransactionTable extends Component {
         }
     }
 
-
     render() {
 
         const table = this.state.data.map((data, i) => {
@@ -44,16 +43,16 @@ class TransactionTable extends Component {
         let combinedClasses = ['responsive-table', classes.table];
         return (
             <table key={this.state.data.TxHash} className={combinedClasses.join(' ')}>
-                <thead className={classes.tHead}>
+                <thead>
                 <tr>
-                    <th scope="col">TxHash</th>
-                    <th scope="col">Block</th>
-                    <th scope="col">Age</th>
-                    <th scope="col">From</th>
-                    <th scope="col"></th>
-                    <th scope="col">To</th>
-                    <th scope="col">Value</th>
-                    <th scope="col">TxFee</th>
+                    <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>TxHash</th>
+                    <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Block</th>
+                    <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Age</th>
+                    <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>From</th>
+                    <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}></th>
+                    <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>To</th>
+                    <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Value</th>
+                    <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >TxFee</th>
                 </tr>
                 </thead>
                 {table}

shyftBlockExplorerUI/src/components/table/transactions/transactionTable.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classes from './table.css';
-import arrow from '../../assets/arrow_right.png';
+import arrow from '../../assets/arrow_right_black.png';
 import { Link } from 'react-router-dom'
 
 const TransactionTable = (props) => {
@@ -13,18 +13,18 @@ const TransactionTable = (props) => {
 
     return (
           <tbody>
-            <tr>
-                <td className={classes.addressTag}>
-                    <Link to="/transaction/details" className={flag ? "" : classes.disabled} onClick={() => props.detailTransactionHandler(props.txHash)}>
+            <tr style={{ borderTop: '1px solid #e0defb' }}>
+                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }} className={classes.addressTag}>
+                    <Link to="/transaction/details" style={{ color: '#8f67c9' }} className={flag ? "" : classes.disabled} onClick={() => props.detailTransactionHandler(props.txHash)}>
                         {props.txHash}</Link>
                 </td>
-                <td><Link to="/block/transactions" onClick={() => props.getBlockTransactions(props.blockNumber)}>{props.blockNumber}</Link></td>
-                <td>{props.age}</td>
-                <td className={flag ? classes.fromTag : classes.disabled }><Link to="/account/detail" onClick={() => props.detailAccountHandler(props.from)}>{props.from}</Link></td>
-                <td><img className={classes.arrow} src={arrow} alt="arrow"/></td>
-                <td className={classes.toTag}><Link to="/account/detail" onClick={() => props.detailAccountHandler(props.to)}>{props.to}</Link></td>
-                <td>{props.value}</td>
-                <td>{props.cost}</td>
+                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}><Link  style={{ color: '#8f67c9' }}  to="/block/transactions" onClick={() => props.getBlockTransactions(props.blockNumber)}>{props.blockNumber}</Link></td>
+                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.age}</td>
+                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }} className={flag ? classes.fromTag : classes.disabled }><Link  style={{ color: '#8f67c9' }}  to="/account/detail" onClick={() => props.detailAccountHandler(props.from)}>{props.from}</Link></td>
+                <td style={{ paddingLeft: '0pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}><img className={classes.arrow} src={arrow} alt="arrow"/></td>
+                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }} className={classes.toTag}><Link style={{ color: '#8f67c9' }} to="/account/detail" onClick={() => props.detailAccountHandler(props.to)}>{props.to}</Link></td>
+                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.value}</td>
+                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.cost}</td>
             </tr>
             </tbody>
     )

shyftBlockExplorerUI/src/containers/App.js

@@ -97,100 +97,96 @@ class App extends Component {
   render() {
     return (
         <BrowserRouter>
-    
             <div style={{backgroundColor:"#f7f8f9", paddingBottom:"5%" }}>
-
-            {/* <div className={"row"}> */}
                 <Nav />
-            {/* </div> */}
     
-            <Route path="/" exact render={({ match }) =>
-                <Home/>}
-            />
+                <Route path="/" exact render={({ match }) =>
+                    <Home/>}
+                />
 
-            <Route path="/transactions" render={({match}) =>
-              <div>
-                  <TransactionHeader />
-                  <TransactionRow
-                      getBlockTransactions={this.getBlockTransactions}
-                      detailTransactionHandler={this.detailTransactionHandler}
-                      detailAccountHandler={this.detailAccountHandler}/>
-              </div>}
-            />
+                <Route path="/transactions" render={({match}) =>
+                <div>
+                    {/* <TransactionHeader /> */}
+                    <TransactionRow
+                        getBlockTransactions={this.getBlockTransactions}
+                        detailTransactionHandler={this.detailTransactionHandler}
+                        detailAccountHandler={this.detailAccountHandler}/>
+                </div>}
+                />
 
-            <Route path="/blocks" exact render={({match}) =>
-              <div>
-                  {/* <BlockHeader/> */}
+                <Route path="/blocks" exact render={({match}) =>
+                <div>
+                    {/* <BlockHeader/> */}
                     
-                <BlocksRow
-                    getBlocksMined={this.getBlocksMined}
-                    getBlockTransactions={this.getBlockTransactions}
-                    detailBlockHandler={this.detailBlockHandler}/>
+                    <BlocksRow
+                        getBlocksMined={this.getBlocksMined}
+                        getBlockTransactions={this.getBlockTransactions}
+                        detailBlockHandler={this.detailBlockHandler}/>
                     
-              </div>}
-            />
+                </div>}
+                />
 
-            <Route path="/accounts" exact render={({match}) =>
-              <div>
-                  <AccountHeader/>
-                  <AccountsRow detailAccountHandler={this.detailAccountHandler}/>
-              </div>}
-            />
+                <Route path="/accounts" exact render={({match}) =>
+                <div>
+                    <AccountHeader/>
+                    <AccountsRow detailAccountHandler={this.detailAccountHandler}/>
+                </div>}
+                />
 
-            <Route path="/transaction/details" exact render={({match}) =>
-              <div>
-                  <TransactionDetailHeader
-                    txHash={this.state.transactionDetailData.TxHash}/>
-                  <DetailTransactionTable
-                    data={this.state.transactionDetailData}/>
-              </div>}
-            />
+                <Route path="/transaction/details" exact render={({match}) =>
+                <div>
+                    <TransactionDetailHeader
+                        txHash={this.state.transactionDetailData.TxHash}/>
+                    <DetailTransactionTable
+                        data={this.state.transactionDetailData}/>
+                </div>}
+                />
 
-            <Route path="/blocks/detail" exact render={({match}) =>
-              <div>
-                  <BlockDetailHeader
-                      blockNumber={this.state.blockDetailData.Number}/>
-                  <DetailBlockTable
-                      getBlockTransactions={this.getBlockTransactions}
-                      data={this.state.blockDetailData}/>
-              </div>}
-            />
+                <Route path="/blocks/detail" exact render={({match}) =>
+                <div>
+                    <BlockDetailHeader
+                        blockNumber={this.state.blockDetailData.Number}/>
+                    <DetailBlockTable
+                        getBlockTransactions={this.getBlockTransactions}
+                        data={this.state.blockDetailData}/>
+                </div>}
+                />
 
-            <Route path="/block/transactions" exact render={({match}) =>
-              <div>
-                  <BlockDetailHeader
-                      blockNumber={this.state.reqBlockNum}/>
-                  <BlockTxs
-                      data={this.state.blockTransactions}
-                      getBlockTransactions={this.getBlockTransactions}
-                      detailTransactionHandler={this.detailTransactionHandler}
-                      detailAccountHandler={this.detailAccountHandler}/>
+                <Route path="/block/transactions" exact render={({match}) =>
+                <div>
+                    <BlockDetailHeader
+                        blockNumber={this.state.reqBlockNum}/>
+                    <BlockTxs
+                        data={this.state.blockTransactions}
+                        getBlockTransactions={this.getBlockTransactions}
+                        detailTransactionHandler={this.detailTransactionHandler}
+                        detailAccountHandler={this.detailAccountHandler}/>
 
-              </div>}
-            />
+                </div>}
+                />
 
-            <Route path="/mined/blocks" exact render={({match}) =>
-              <div>
-                  <BlockCoinbaseHeader
-                      coinbase={this.state.reqCoinbase}/>
-                  <BlocksMinedTable
-                      getBlockTransactions={this.getBlockTransactions}
-                      getBlocksMined={this.getBlocksMined}
-                      data={this.state.blocksMined}/>
-              </div>}
-            />
+                <Route path="/mined/blocks" exact render={({match}) =>
+                <div>
+                    <BlockCoinbaseHeader
+                        coinbase={this.state.reqCoinbase}/>
+                    <BlocksMinedTable
+                        getBlockTransactions={this.getBlockTransactions}
+                        getBlocksMined={this.getBlocksMined}
+                        data={this.state.blocksMined}/>
+                </div>}
+                />
 
-            <Route path="/account/detail" exact render={({match}) =>
-              <div>
-                  <AccountDetailHeader
-                      addr={this.state.reqAccount}
-                      data={this.state.accountDetailData}/>
-                  <DetailAccountsTable
-                      transactionDetailHandler={this.detailTransactionHandler}
-                      addr={this.state.reqAccount}
-                      data={this.state.accountDetailData}/>
-              </div>}
-            />
+                <Route path="/account/detail" exact render={({match}) =>
+                <div>
+                    <AccountDetailHeader
+                        addr={this.state.reqAccount}
+                        data={this.state.accountDetailData}/>
+                    <DetailAccountsTable
+                        transactionDetailHandler={this.detailTransactionHandler}
+                        addr={this.state.reqAccount}
+                        data={this.state.accountDetailData}/>
+                </div>}
+                />
         </div>
     </BrowserRouter>
     );