Improve tx and block lists designs

packages/frontend/src/index.css

@@ -72,25 +72,59 @@ code {
 }
 
 .page-item {
-  border-style: ridge;
-  padding: 5px;
+  padding: 1px 4px 2px;
+  margin: 0 2px;
   cursor: pointer;
   font-size: 14pt;
+  -webkit-user-select: none;
+  -ms-user-select: none; 
+  text-align: center;
+  border-radius: 5px;
+}
+
+.page-item:hover:not(.disabled) {
+  background-color: #ffffff10;
+}
+
+.page-item--next,
+.page-item--previous {
+  display: inline-block;
+  width: 22px;
+  padding: 0px 2px 2px;
+  border: 1px solid #ffffff75;
+  border-radius: 5px;
+  user-select: none;
+}
+
+.page-item--next:hover:not(.disabled),
+.page-item--previous:hover:not(.disabled) {
+  border: 1px solid #ffffff;
+  background-color: #ffffff15;
 }
 
 .page-link {
   position: relative;
 }
 
-.disabled {
-  cursor: not-allowed;
+.page-item.disabled {
+  cursor: default;
+  opacity: .3;
 }
 
-.active {
+.active, .active:hover {
   background-color: rgba(57, 175, 159, 0.55);
 }
 
-@media screen and (max-width: 786px) {
+.page-item.active:hover {
+  cursor: default;
+}
+
+.page-item--break-link {
+  padding: 1px 2px 2px;
+  margin: 0;
+}
+
+@media screen and (max-width: 440px) {
   .page-item:not(.active):not(.page-item--previous):not(.page-item--next) {
     display: none;
   }

packages/frontend/src/routes/blocks/blocks.css

@@ -1,16 +1,89 @@
 .block_list {
     background-color: #1a4049;
-    padding: 20px;
     box-sizing: border-box;
+    border-radius: 16px;
+    padding: 14px 20px;
+    margin-top: 20px;
+}
+
+.block_list__title {
+    margin-bottom: 6px;
+    display: block;
+    color: #ade4ff;
+}
+
+.block_list_item {
+    margin-bottom: 2px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid #ffffff14;
+}
+
+.block_list_item:last-child {
+    border-bottom: none;
 }
 
 .block_list_item a {
     text-decoration: none;
     color: white;
     word-break: break-all;
+
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    font-family: monospace;
+    font-size: 12pt;
 }
 
-.block_list_item a:hover {
+.block_list_item a:hover,
+.block_list_item a:hover .block_list_item__hash {
     text-decoration: none;
     color: gray;
 }
+
+
+.block_list_item__height {
+    font-weight: bold;
+    margin-right: 8px;
+    word-break: keep-all;
+}
+
+.block_list_item__timestamp {
+    margin-right: 16px;
+    text-wrap: nowrap;
+}
+
+.block_list_item__hash {
+    color: #dbdbdb;
+    flex-grow: 1;
+}
+
+.block_list_item__txs {
+    margin-left: 12px;
+}
+
+@media screen and (max-width: 620px) {
+    .block_list_item a {
+        flex-wrap: wrap;
+    }
+
+    .block_list_item__height {
+        order: 1;
+        margin-right: 4px;
+    }
+
+    .block_list_item__txs {
+        order: 2;
+        margin-left: 0;
+        margin-right: 6px;
+    }
+
+    .block_list_item__timestamp {
+        order: 3;
+    }
+
+    .block_list_item__hash {
+        order: 4;
+        flex-grow: unset;
+        margin-top: 2px;
+    }
+}

packages/frontend/src/routes/blocks/blocks.route.js

@@ -9,9 +9,12 @@ const blocksPerPage = 30;
 function Blocks({blocks}) {
     return blocks.map((block) =>
         <div key={block.header.hash} className={"block_list_item"}>
-            <span>{block.header.height} </span>
-            <Link to={`/block/${block.header.hash}`}>[{new Date(block.header.timestamp).toLocaleString()}] {block.header.hash}</Link>
-            <span> ({block.txs.length})</span>
+            <Link to={`/block/${block.header.hash}`}>
+                <span className={"block_list_item__height"}>{block.header.height} </span>
+                <span className={"block_list_item__timestamp"}>{new Date(block.header.timestamp).toLocaleString()}</span>
+                <span className={"block_list_item__hash"}>{block.header.hash}</span>
+                <span className={"block_list_item__txs"}>({block.txs.length} txs)</span>
+            </Link>
         </div>
     )
 }
@@ -41,22 +44,24 @@ function BlocksRoute() {
     return (
         <div className="container">
             <div className={"block_list"}>
+                <span className="block_list__title">Last blocks</span>
+
                 <Blocks blocks={blocks}/>
                 <ReactPaginate
                     breakLabel="..."
-                    nextLabel="next >"
+                    nextLabel=">"
                     onPageChange={handlePageClick}
-                    pageRangeDisplayed={5}
+                    pageRangeDisplayed={2}
+                    marginPagesDisplayed={1}
                     pageCount={pageCount}
-                    previousLabel="< previous"
+                    previousLabel="<"
                     pageClassName="page-item"
                     pageLinkClassName="page-link"
                     previousClassName="page-item page-item--previous"
                     previousLinkClassName="page-link"
                     nextClassName="page-item page-item--next"
                     nextLinkClassName="page-link"
-                    breakClassName="page-item"
-                    breakLinkClassName="page-link"
+                    breakClassName="page-item  page-item--break-link"
                     containerClassName="pagination"
                     activeClassName="active"
                     renderOnZeroPageCount={true}

packages/frontend/src/routes/dataContract/data_contract.css

@@ -2,6 +2,9 @@
     margin-top: 20px;
     background-color: #1a491c;
     padding: 10px;
+    word-wrap: break-word;
+    max-width: 100%;
+    box-sizing: border-box;
 }
 
 .data_contract_schema {
@@ -10,5 +13,12 @@
     padding: 10px;
     white-space: break-spaces;
     height: 80%;
+    border-radius: 16px;
+    padding: 14px 20px;
+    word-wrap: break-word;
+    max-width: 100%;
+    box-sizing: border-box;
+    font-family: monospace;
+    font-size: 12pt;
 }
 

packages/frontend/src/routes/dataContracts/data_contracts.css

@@ -3,22 +3,31 @@
     text-decoration: none;
     background-color: #1a491c;
     padding: 10px 5px;
+
+    border-radius: 16px;
+    padding: 14px 20px;
+    max-width: 100%;
+    box-sizing: border-box;
+    font-family: monospace;
+    font-size: 12pt;
 }
 
 .data_contracts_item {
     text-decoration: none;
-    padding: 4px;
+    padding: 4px 0;
     text-align: left;
-    margin: 2px 10px;
-    background-color: #1a492a;
+    margin-bottom: 2px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid #ffffff14;
 }
 
 .data_contracts_item a {
     text-decoration: none;
+    word-wrap: break-word;
     color: white;
 }
 
 .data_contracts_item a:hover {
-    text-decoration: underline;
-    color: #76b2d2;
+    text-decoration: none;
+    color: gray;
 }

packages/frontend/src/routes/home/home.css

@@ -18,23 +18,84 @@
     background-color: #492f1a;
     padding: 10px;
     color: wheat;
+
+    border-radius: 16px;
+    padding: 14px 20px;
+}
+
+.last_transactions__title {
+    margin-bottom: 6px;
 }
 
 .last_transactions_item {
     padding-top: 5px;
     color: black;
     word-break: break-all;
+
+    margin-bottom: 2px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid #ffffff14;
+    font-family: monospace;
+    font-size: 12pt;
+}
+
+.last_transactions_item:last-child {
+    border-bottom: none;
 }
 
 .last_transactions_item a {
     color: white;
     text-decoration: none;
+    width: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+}
+
+.last_transactions_item a:hover,
+.last_transactions_item a:hover .last_transactions_item__hash, 
+.last_transactions_item a:hover .last_transactions_item__type {
+    text-decoration: none;
+    color: gray;
 }
 
+.last_transactions_item__timestamp {
+    font-style: normal;
+    margin-right: 16px;
+    display: inline-block;
+    text-wrap: nowrap;
+}
 
-.last_transactions_item a:hover {
+.last_transactions_item__hash {
+    color: #dbdbdb;
+    flex-grow: 1;
+}
+
+.last_transactions_item__type {
     color: white;
-    text-decoration: underline;
+    margin-left: 12px;
+    text-wrap: nowrap;
+}
+
+@media screen and (max-width: 620px) {
+    .last_transactions_item a {
+        flex-wrap: wrap;
+    }
+
+    .last_transactions_item__timestamp {
+        order: 1;
+        width: auto;
+    }
+
+    .last_transactions_item__type {
+        order: 2;
+        margin-left: 0;
+    }
+
+    .last_transactions_item__hash {
+        order: 3;
+        width: 100%;
+        margin-top: 2px;
+    }
 }
 
 @media screen and (max-width: 350px) {

packages/frontend/src/routes/home/home.route.js

@@ -14,7 +14,11 @@ export async function loader({}) {
 function Transactions({transactions}) {
     return transactions.map((tx) =>
         <div key={tx.hash} className={"last_transactions_item"}>
-            <Link to={`transaction/${tx.hash}`}>[{new Date(tx.timestamp).toLocaleString()}] {tx.hash} ({getTransitionTypeString(tx.type)})</Link>
+            <Link to={`transaction/${tx.hash}`}>
+                <span className="last_transactions_item__timestamp">{new Date(tx.timestamp).toLocaleString("en-US")}</span> 
+                <span className="last_transactions_item__hash">{tx.hash}</span> 
+                <span className="last_transactions_item__type">({getTransitionTypeString(tx.type)})</span>
+            </Link>
         </div>
     )
 }
@@ -54,7 +58,7 @@ function HomeRoute() {
             </div>
 
             <div className="last_transactions">
-                <span>Last transactions</span>
+                <span className="last_transactions__title">Last transactions</span>
                 <Transactions transactions={transactions}/>
             </div>
         </div>