Merge pull request blockscout#36 from mantlenetworkio/albert/theme

update theme color
shellteo · Dec 1, 2022 · 7dc9436 · 7dc9436
2 parents 5a17176 + 9135a2c
commit 7dc9436
Show file tree

Hide file tree

Showing 13 changed files with 64 additions and 29 deletions.
diff --git a/apps/block_scout_web/assets/css/_typography.scss b/apps/block_scout_web/assets/css/_typography.scss
@@ -1,4 +1,4 @@
-$common-link-color: #0A8FF7 !default;
+$common-link-color: #65B3AE !default;
 $blue: #4b89fb !default;
 $success: #34c0ad !default;
 

diff --git a/apps/block_scout_web/assets/css/components/_card.scss b/apps/block_scout_web/assets/css/components/_card.scss
@@ -51,8 +51,8 @@ $card-tab-icon-color-active: #fff !default;
 }
 
 .card-title {
-  font-size: 18px;
-  font-weight: normal;
+  font-size: 20px;
+  font-weight: 700;
   line-height: 1.2rem;
   margin-bottom: 2rem;
 
@@ -248,6 +248,7 @@ $card-tab-icon-color-active: #fff !default;
     border-radius:4px;
     box-shadow:0 0 30px 0 rgb(202 199 226 / 50%);
     border:1px solid #e7eaf3;
+    border-radius: 20px;
     .recent-preview-item-content{
       width:100%;
       box-sizing:border-box;
@@ -307,6 +308,16 @@ $card-tab-icon-color-active: #fff !default;
     font-size:18px;
     border-bottom:1px solid #e7eaf3;
   }
+  .view-btn {
+    padding: 10px;
+    border: none;
+    border-radius: 6px;
+    background: #CBE9E7;
+    color: #65B3AE;
+    font-size: 12px;
+    line-height: 12px;
+    margin: 20px 0;
+  }
 }
 .dark-theme-applied {
   .recent-preview-container{

diff --git a/apps/block_scout_web/assets/css/components/_footer.scss b/apps/block_scout_web/assets/css/components/_footer.scss
@@ -9,7 +9,7 @@ $footer-logo-width: auto !default;
 
 .footer {
   background: #091312;
-  color: #fff;
+  color: #6E767D;
   font-size: 12px;
   line-height: 1.67;
   margin: 0;

diff --git a/apps/block_scout_web/assets/css/components/_tile.scss b/apps/block_scout_web/assets/css/components/_tile.scss
@@ -15,7 +15,7 @@ $tile-status-error-reason: #ff7986 !default;
 $tile-status-awaiting-internal-transactions: $warning !default;
 $tile-padding: 1rem;
 $tile-title-color: #333 !default;
-$tile-body-a-color: #0A8FF7 !default;
+$tile-body-a-color: #65B3AE !default;
 
 @mixin generate-tile-block($prefix, $color, $label-color: false) {
   &#{ $prefix } {
@@ -286,12 +286,21 @@ $tile-body-a-color: #0A8FF7 !default;
 
   &.tile-type-block {
     max-width: 100%;
+    background-color: #F8F8F9;
+    border-radius: 12px;
     .tile-title {
       font-weight: 700;
       line-height: 1.2;
       margin-bottom: 12px;
       padding: 1rem 1rem 0 1rem;
     }
+    hr {
+      border-bottom: none;
+      border-left: none;
+      border-right: none;
+      border-top: 1px solid #CFD2D4;
+      margin: 0 1rem;
+    }
   }
 
   &.tile-type-contract-creation {

diff --git a/apps/block_scout_web/assets/css/theme/_mantle-theme.scss b/apps/block_scout_web/assets/css/theme/_mantle-theme.scss
@@ -5,7 +5,7 @@ $dark-light: #313355; // tile light top share
 $labels-dark: #21413F; // header nav, labels
 $dark-stakes-banned-background: #3e314c;
 $primary: #65B3AE !default;
-$dark-primary: #65B3AE !default;
+$dark-primary: #0A8FF6 !default;
 $dark-primary-alternate: #65B3AE !default;
 
 // Switcher
@@ -257,6 +257,7 @@ $dark-primary-alternate: #65B3AE !default;
 		background-color: transparent;
 		border-color: $dark-primary;
 		color: $dark-primary;
+		border-radius: 10px;
 		&:hover {
 			border-color: $dark-primary;
 			background-color: $dark-primary;

diff --git a/apps/block_scout_web/assets/css/theme/_neutral_variables-non-critical.scss b/apps/block_scout_web/assets/css/theme/_neutral_variables-non-critical.scss
@@ -1,5 +1,5 @@
 // general
-$primary: #0A8FF7;
+$primary: #65B3AE;
 $secondary: #87e1a9;
 $tertiary: #bf9cff;
 $additional-font: #fff;

diff --git a/apps/block_scout_web/assets/css/theme/_neutral_variables.scss b/apps/block_scout_web/assets/css/theme/_neutral_variables.scss
@@ -1,5 +1,5 @@
 // general
-$primary: #0A8FF7;
+$primary: #65B3AE;
 $secondary: #87e1a9;
 $tertiary: #bf9cff;
 $additional-font: #fff;

diff --git a/apps/block_scout_web/assets/css/theme/_poa_variables-non-critical.scss b/apps/block_scout_web/assets/css/theme/_poa_variables-non-critical.scss
@@ -1,5 +1,5 @@
 // general
-$primary: #0A8FF7;
+$primary: #65B3AE;
 $secondary: #87e1a9;
 $tertiary: #bf9cff;
 $additional-font: #fff;

diff --git a/apps/block_scout_web/assets/css/theme/_poa_variables.scss b/apps/block_scout_web/assets/css/theme/_poa_variables.scss
@@ -1,5 +1,5 @@
 // general
-$primary: #0A8FF7;
+$primary: #65B3AE;
 $secondary: #87e1a9;
 $tertiary: #bf9cff;
 $additional-font: #fff;

diff --git a/apps/block_scout_web/assets/static/images/mantle_logo_footer.svg b/apps/block_scout_web/assets/static/images/mantle_logo_footer.svg
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/chain/_block.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/chain/_block.html.eex
@@ -6,6 +6,7 @@
           to: block_path(BlockScoutWeb.Endpoint, :show, @block),
           "data-selector": "block-number"
         ) %>
+    <hr />
     <div class="tile-bottom-contents">
       <div class="tile-transactions">
         <span class="mr-2"><%= gettext("%{count} Transactions", count: Enum.count(@block.transactions)) %></span>

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
@@ -58,13 +58,13 @@
                       <% end %>
                   </span>
                 </div>
-                
+
             </div>
             <% end %>
           <% end %>
         </div>
         </div>
-        
+
       </div>
       <!-- Stats -->
       <div class="dashboard-banner-network-plain-container">
@@ -125,11 +125,11 @@
               </div>
           </div>
         </div>
-        
-        
+
+
       </div>
     </div>
-    
+
   </div>
   <img class="dashboard-banner-img" src="<%= static_path(@conn, "/images/banner_inner_bg.png") %>"/>
 </div>
@@ -158,7 +158,7 @@
         <div hidden data-selector="loading-message" class="col-lg-3" >
          <div data-selector="chain-block">
            <div class="tile tile-type-block n-p d-flex flex-column">
-             <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a> 
+             <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a>
              <div class="tile-bottom-contents">
                <div class="dark-block-loader"></div>
                <div class="dark-block-loader"></div>
@@ -169,7 +169,7 @@
         <div hidden data-selector="loading-message" class="col-lg-3" >
          <div data-selector="chain-block">
            <div class="tile tile-type-block n-p d-flex flex-column">
-             <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a> 
+             <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a>
              <div class="tile-bottom-contents">
                <div class="dark-block-loader"></div>
                <div class="dark-block-loader"></div>
@@ -187,7 +187,7 @@
             </div>
            </div>
          </div>
-        </div>   
+        </div>
       </div>
     </div>
   </div>
@@ -202,8 +202,8 @@
         </span>
         <a href="/txn-batches" style="font-size:16px;">View All</a>
       </p>
-      <span 
-        data-selector="txn-batch-list" 
+      <span
+        data-selector="txn-batch-list"
         data-txn-batches-path="<%= @txn_batches_path %>"
         style="display:flex;flex-direction:column;padding:0 10px;box-sizing:border-box;"
       >
@@ -212,12 +212,15 @@
             <%= gettext "Something went wrong, click to retry." %>
           </span>
         </button>
-        
+
       </span>
+      <a href="/txn-batches">
+        <button class="col-12 text-center view-btn">View all Txn batches</button>
+      </a>
     </div>
-
 
-    <div 
+
+    <div
       class="tile recent-preview-item"
       style="margin:0 10px;"
     >
@@ -227,14 +230,14 @@
         </span>
         <a href="/txs" style="font-size:16px;">View All</a>
       </p>
-      <%# <%= link(gettext("View All Transactions"), to: transaction_path(BlockScoutWeb.Endpoint, :index), class: "btn-line float-right") %> 
+      <%# <%= link(gettext("View All Transactions"), to: transaction_path(BlockScoutWeb.Endpoint, :index), class: "btn-line float-right") %>
       <div data-selector="channel-batching-message" style="display: none;">
         <div data-selector="reload-transactions-button" class="alert alert-info">
           <a href="#" class="alert-link"><span data-selector="channel-batching-count"></span> <%= gettext "More transactions have come in" %></a>
         </div>
       </div>
-      <span 
-        data-selector="transactions-list" 
+      <span
+        data-selector="transactions-list"
         data-transactions-path="<%= @transactions_path %>"
         style="display:flex;flex-direction:column;padding:0 10px;box-sizing:border-box;"
       >
@@ -243,11 +246,14 @@
             <%= gettext "Something went wrong, click to retry." %>
           </span>
         </button>
-       
+
       </span>
+      <a href="/txs">
+        <button class="col-12 text-center view-btn">View all Transactions</button>
+      </a>
     </div>
 
-    <div 
+    <div
       class="tile recent-preview-item"
     >
       <p class="recent-preview-item-title-container">
@@ -267,6 +273,9 @@
           </span>
         </button>
       </span>
+      <a href="/l1-to-l2-txns">
+        <button class="col-12 text-center view-btn">View all L1→L2 Transactions</button>
+      </a>
     </div>
   </div>
 </section>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/layout/_footer.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/layout/_footer.html.eex
@@ -19,7 +19,7 @@
 
     <div class="row">
       <div class="col-xs-12 col-lg-3">
-        <p class="footer-info-text"><%= gettext("Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Mantle Networks.") %></p>
+        <p class="footer-info-text"><%= gettext("Mantle is the first modular layer-2 blcokchain, combing hyperscale performance with security from Ethereum. Mantle powers whatever builders can dream.") %></p>
         <div class="footer-social-icons">
           <a href="<%= Application.get_env(:block_scout_web, :footer)[:github_link] %>" rel="noreferrer" target="_blank" class="footer-social-icon" title='<%= gettext("Github") %>'>
             <div class="footer-social-icon-container fontawesome-icon github"></div>