Merge pull request blockscout#1 from mantlenetworkio/feat/jayce

blockscout#212 UI: dark mode UI for tx list pages
shellteo · Nov 9, 2022 · ff99380 · ff99380
2 parents a7338f1 + e033336
commit ff99380
Show file tree

Hide file tree

Showing 24 changed files with 365 additions and 158 deletions.
diff --git a/apps/block_scout_web/assets/css/components/_card.scss b/apps/block_scout_web/assets/css/components/_card.scss
@@ -157,6 +157,49 @@ $card-tab-icon-color-active: #fff !default;
   padding: $card-horizontal-padding;
 }
 
+.txn-list-container{
+
+  .txn-list-table-head-container{
+    background:#f8fafd;
+    display:flex;
+    align-items:center;
+    height:42px;
+    padding:0 10px;
+    font-weight:500;
+    font-size:16px;
+    width:100%;
+    border-top:1px solid #cccccc;
+    border-bottom:2px solid #cccccc;
+    color:#6c757e;
+  }
+  .txn-list-table-item{
+    width:100%;
+    height:42px;
+    display:flex;
+    align-items:center;
+    font-size:14px;
+    padding:0 10px;
+    border-bottom:1px solid #e7eaf3;
+  }
+}
+.dark-theme-applied{
+  .txn-list-container{
+    .txn-list-table-head-container{
+      background:  #313355;
+      color:#ffffff;
+    }
+    .txn-list-table-head-container{
+      border-top:1px solid rgba(255,255,255,.1);
+      border-bottom:2px solid rgba(255,255,255,.1);
+
+    }
+    .txn-list-table-item{
+      border-color:rgba(255,255,255,.1);
+    }
+  }
+}
+
+
 .card-body-flex-column-space-between {
   display: flex;
   flex-direction: column;
@@ -184,7 +227,103 @@ $card-tab-icon-color-active: #fff !default;
 
   .tile {
     margin-bottom: 0;
+    box-shadow: none;
+  }
+}
+
+.recent-preview-container{
+  background:#fbfafc;
+  display:flex;
+  flex-direction:row;
+  box-shadow:none;
+  margin-bottom:20px;
+  .recent-preview-item{
+    flex:1;
+    margin-top:0 !important;
+    border-radius:4px;
+    box-shadow:0 0 30px 0 rgb(202 199 226 / 50%);
+    border:1px solid #e7eaf3;
+    .recent-preview-item-content{
+      width:100%;
+      box-sizing:border-box;
+      height:80px;
+      display:flex;
+      align-items:center;
+      font-size:14px;padding:0;
+      border-bottom:1px solid #e7eaf3;
+      .recent-preview-item-content-title{
+        width:44px;
+        flex:0 0 44px;
+        height:44px;
+        flex:0 0 44px;
+        color: #77838f;
+        background: rgba(119,131,143,.1);
+        font-size:18px;
+        font-weight:500;
+        border-radius:8px;
+        text-align:center;
+        line-height:44px;
+        margin-right:10px;
+      }
+      .recent-preview-item-content-latest-txs{
+        flex:1;
+        .recent-preview-item-content-latest-txs-tag-wrap{
+          margin-left:5px;
+          font-size:12px;position:relative;
+          padding:0 5px 0 18px;
+          letter-spacing:0.8px;
+          border-top-right-radius:6px;
+          border-bottom-right-radius:6px;
+          color:#77838f;
+          background:rgba(119,131,143,.1);
+          height:20px;
+          .recent-preview-item-content-latest-txs-tag{
+            position:absolute;
+            left:0;
+            top:0;
+            border-top:10px solid transparent;
+            border-bottom: 10px solid transparent;
+            border-left:10px solid #fff;
+          }
+        }
+
+      }
+    }
+  }
+  .recent-preview-item-title-container{
+    font-size:16px;
+    display:flex;justify-content:space-between;
+    align-items:center;
+    height:46px;
+    padding:0 10px; 
+    line-height:46px;
+    color:#4a4f55;
+    font-weight:600;
+    font-size:18px;
+    border-bottom:1px solid #e7eaf3;
+  }
+}
+.dark-theme-applied {
+  .recent-preview-container{
+    background:#1c1d31;
+    .recent-preview-item{
+      box-shadow:none;
+      .recent-preview-item-content{
+        border-bottom:1px solid rgba(255,255,255,.1);
+        color:#a3a9b5;
+        .recent-preview-item-content-latest-txs-tag-wrap{
+          .recent-preview-item-content-latest-txs-tag{
+            border-left:10px solid #313355 !important;
+          }
+        }
+      }
+
+    }
+    .recent-preview-item-title-container{
+      border-bottom:1px solid rgba(255,255,255,.1);
+    }
   }
+
 }
 
 .card-tabs {

diff --git a/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex
@@ -207,13 +207,10 @@
 
   <%= render BlockScoutWeb.Advertisement.BannersAdView, "_banner_728.html", conn: @conn %>
 
-  <div 
-    class="card card-chain-transactions"
-    style="display:flex;flex-direction:row;background:#fbfafc;box-shadow:none;"
-  >
-    <div style="flex:1;border:1px solid #e7eaf3;border-radius:5px;box-shadow:0 0 30px 0 rgb(202 199 226 / 50%);">
-      <p style="font-size:16px;display:flex;justify-content:space-between;align-items:center;height:46px;padding:0 10px; line-height:46px;color:#4a4f55;font-weight:600;font-size:18px;border-bottom:1px solid #e7eaf3;">
-        <span style="font-size:16px;">
+  <div class="card-chain-transactions recent-preview-container">
+    <div class="tile recent-preview-item">
+      <p class="recent-preview-item-title-container">
+        <span style="font-size:16px;" class="tile-title">
           Latest L1 Batches
         </span>
         <a href="/txn-batch" style="font-size:16px;">View All</a>
@@ -234,10 +231,11 @@
 
 
     <div 
-      style="margin:0 15px;flex:1;border:1px solid #e7eaf3;border-radius:5px;box-shadow:0 0 30px 0 rgb(202 199 226 / 50%);"
+      class="tile recent-preview-item"
+      style="margin:0 10px;"
     >
-      <p style="font-size:16px;display:flex;justify-content:space-between;align-items:center;height:46px;padding:0 10px; line-height:46px;color:#4a4f55;font-weight:600;font-size:18px;border-bottom:1px solid #e7eaf3;">
-        <span style="font-size:16px;">
+      <p class="recent-preview-item-title-container">
+        <span style="font-size:16px;" class="tile-title">
           Latest Transactions
         </span>
         <a href="/txs" style="font-size:16px;">View All</a>
@@ -262,9 +260,11 @@
       </span>
     </div>
 
-    <div style="flex:1;border:1px solid #e7eaf3;border-radius:5px;box-shadow:0 0 30px 0 rgb(202 199 226 / 50%);">
-      <p style="font-size:16px;display:flex;justify-content:space-between;align-items:center;height:46px;padding:0 10px; line-height:46px;color:#4a4f55;font-weight:600;font-size:18px;border-bottom:1px solid #e7eaf3;">
-        <span style="font-size:16px;">
+    <div 
+      class="tile recent-preview-item"
+    >
+      <p class="recent-preview-item-title-container">
+        <span style="font-size:16px;" class="tile-title">
           Latest L1->L2 Transactions
         </span>
         <a href="/l1-to-l2-txn" style="font-size:16px;">View All</a>

diff --git a/apps/block_scout_web/lib/block_scout_web/templates/l1_to_l2_txn/_recent_tile.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/l1_to_l2_txn/_recent_tile.html.eex
@@ -1,9 +1,9 @@
 <div 
     data-identifier-hash="<%= @l1_to_l2.queue_index %>"
-    style="width:100%;box-sizing:border-box;height:80px;display:flex;align-items:center;font-size:14px;padding:0;border-bottom:1px solid #e7eaf3;"
+    class="recent-preview-item-content"
 >
     <span
-        style="width:44px;flex:0 0 44px;height:44px;flex:0 0 44px;color: #77838f;background: rgba(119,131,143,.1);font-size:18px;font-weight:500;border-radius:8px;text-align:center;line-height:44px;margin-right:10px;"
+        class="recent-preview-item-content-title"
     >
         Tx
     </span>
@@ -18,14 +18,14 @@
             <a 
                 href="https://goerli.etherscan.io/tx/<%= @l1_to_l2.hash %>" 
                 target="_blank"
-                style="width:110px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"
+                style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"
             >
                 L2 <%= sub_hash_string(@l1_to_l2.hash, 15) %>...
             </a>
             <span style="margin-left:5px;">L2 Tx#</span>
             <a 
                 href="/tx/<%= @l1_to_l2.l2_hash %>"
-                style="width:110px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"
+                style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"
             >
                 <%= @l1_to_l2.l2_hash %>...
             </a>

diff --git a/apps/block_scout_web/lib/block_scout_web/templates/l1_to_l2_txn/_tile.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/l1_to_l2_txn/_tile.html.eex
@@ -1,7 +1,6 @@
 <div
-    class="fade-in"
+    class="fade-in txn-list-table-item"
     data-identifier-hash="<%= @l1_to_l2.queue_index %>"
-    style="width:100%;height:42px;display:flex;align-items:center;font-size:14px;padding:0 10px;border-bottom:1px solid #e7eaf3;"
 >
 
     <span style="width: 10%;">

diff --git a/apps/block_scout_web/lib/block_scout_web/templates/l1_to_l2_txn/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/l1_to_l2_txn/index.html.eex
@@ -7,7 +7,7 @@
 <section class="container" data-page="transaction-list">
   <%= render BlockScoutWeb.Advertisement.TextAdView, "index.html", conn: @conn %>
   <div class="card">
-    <div class="card-body" data-async-listing="<%= @current_path %>">
+    <div class="card-body txn-list-container" data-async-listing="<%= @current_path %>">
       <h1 class="card-title list-title-description"><%= gettext "L1 to L2 Transactions" %></h1>
       <div class="list-top-pagination-container-wrapper">
         <%= render BlockScoutWeb.CommonComponentsView, "_rap_pagination_container.html", position: "top", showing_limit: if Chain.l1_to_l2_available_count() == Chain.limit_showing_transactions(), do: Chain.limit_showing_transactions(), else: nil %>
@@ -31,26 +31,26 @@
           </span>
         </div>
       </div>
-      <div style="background:#f8fafd;display:flex;align-items:center;height:42px;padding:0 10px;font-weight:500;font-size:16px;width:100%;border-top:1px solid #cccccc;border-bottom:2px solid #cccccc">
-        <span style="width: 10%;color:#6c757e;">
+      <div class="txn-list-table-head-container">
+        <span style="width: 10%;">
           Block No
         </span>
-        <span style="width: 10%;color:#6c757e;">
+        <span style="width: 10%;">
           Queue Index
         </span>
-        <span style="width: 20%;color:#6c757e;">
+        <span style="width: 20%;">
           L2 Tx Hash
         </span>
-        <span style="width: 10%;color:#6c757e;">
+        <span style="width: 10%;">
           Age
         </span>
-        <span style="width: 20%;color:#6c757e;">
+        <span style="width: 20%;">
           L1 Txn Hash
         </span>
-        <span style="width: 20%;color:#6c757e;">
+        <span style="width: 20%;">
           L1 Tx Origin
         </span>
-        <span style="width: 10%;color:#6c757e;">
+        <span style="width: 10%;">
           Gas Limit
         </span>
 

diff --git a/apps/block_scout_web/lib/block_scout_web/templates/l2_to_l1_txn/_tile.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/l2_to_l1_txn/_tile.html.eex
@@ -1,7 +1,6 @@
 <div
-    class="fade-in"
+    class="fade-in txn-list-table-item"
     data-identifier-hash="<%= @l2_to_l1.msg_nonce %>"
-    style="width:100%;height:42px;display:flex;align-items:center;font-size:14px;padding:0 10px;border-bottom:1px solid #e7eaf3;"
 >
     <span style="width: 10%;">
        <%= @l2_to_l1.msg_nonce %>

diff --git a/apps/block_scout_web/lib/block_scout_web/templates/l2_to_l1_txn/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/l2_to_l1_txn/index.html.eex
@@ -7,7 +7,7 @@
 <section class="container" data-page="transaction-list">
   <%= render BlockScoutWeb.Advertisement.TextAdView, "index.html", conn: @conn %>
   <div class="card">
-    <div class="card-body" data-async-listing="<%= @current_path %>">
+    <div class="card-body txn-list-container" data-async-listing="<%= @current_path %>">
       <h1 class="card-title list-title-description"><%= gettext "L2 to L1 Transactions" %></h1>
       <div class="list-top-pagination-container-wrapper">
         <%= render BlockScoutWeb.CommonComponentsView, "_rap_pagination_container.html", position: "top", showing_limit: if Chain.transactions_available_count() == Chain.limit_showing_transactions(), do: Chain.limit_showing_transactions(), else: nil %>
@@ -31,26 +31,26 @@
           </span>
         </div>
       </div>
-      <div style="background:#f8fafd;display:flex;align-items:center;height:42px;padding:0 10px;font-weight:500;font-size:16px;width:100%;border-top:1px solid #cccccc;border-bottom:2px solid #cccccc">
-        <span style="width: 10%;color:#6c757e;">
+      <div class="txn-list-table-head-container">
+        <span style="width: 10%;">
           Msg Nonde
         </span>
-        <span style="width: 20%;color:#6c757e;">
+        <span style="width: 20%;">
           From
         </span>
-        <span style="width: 20%;color:#6c757e;">
+        <span style="width: 20%;">
           L2 Tx Hash
         </span>
-        <span style="width: 10%;color:#6c757e;">
+        <span style="width: 10%;">
           Age
         </span>
-        <span style="width: 10%;color:#6c757e;">
+        <span style="width: 10%;">
           Status
         </span>
-        <span style="width: 20%;color:#6c757e;">
+        <span style="width: 20%;">
           L1 Tx Hash
         </span>
-        <span style="width: 10%;color:#6c757e;">
+        <span style="width: 10%;">
           Time Left
         </span>
       </div>

diff --git a/apps/block_scout_web/lib/block_scout_web/templates/state_batch/_tile.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/state_batch/_tile.html.eex
@@ -1,7 +1,6 @@
 <div 
-    class="fade-in" 
+    class="fade-in txn-list-table-item" 
     data-identifier-hash="<%= @state_batch.batch_index %>"
-    style="width:100%;height:42px;display:flex;align-items:center;font-size:14px;padding:0 10px;border-bottom:1px solid #e7eaf3;"
 >
 
     <span style="width: 18%;">

diff --git a/apps/block_scout_web/lib/block_scout_web/templates/state_batch/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/state_batch/index.html.eex
@@ -8,7 +8,7 @@
 <section class="container" data-page="transaction-list">
   <%= render BlockScoutWeb.Advertisement.TextAdView, "index.html", conn: @conn %>
   <div class="card">
-    <div class="card-body" data-async-listing="<%= @current_path %>">
+    <div class="card-body txn-list-container" data-async-listing="<%= @current_path %>">
       <h1 class="card-title list-title-description"><%= gettext "State Batches" %></h1>
       <div class="list-top-pagination-container-wrapper">
         <%= render BlockScoutWeb.CommonComponentsView, "_rap_pagination_container.html", position: "top", showing_limit: if Chain.transactions_available_count() == Chain.limit_showing_transactions(), do: Chain.limit_showing_transactions(), else: nil %>
@@ -32,7 +32,7 @@
           </span>
         </div>
       </div>
-      <div style="background:#f8fafd;display:flex;align-items:center;height:42px;padding:0 10px;font-weight:500;font-size:16px;width:100%;border-top:1px solid #cccccc;border-bottom:2px solid #cccccc">
+      <div class="txn-list-table-head-container">
         <span style="width: 18%;color:#6c757e;">
           State Batch
         </span>