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

blockscout#23 UI: update dark mode
shellteo · Dec 2, 2022 · 851349d · 851349d
2 parents 312fc12 + 6e4b644
commit 851349d
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 27 deletions.
diff --git a/apps/block_scout_web/assets/css/components/_card.scss b/apps/block_scout_web/assets/css/components/_card.scss
@@ -188,6 +188,9 @@ $card-tab-icon-color-active: #fff !default;
   }
 }
 .dark-theme-applied{
+  .card-body {
+    background-color: #141918;
+  }
   .txn-list-container{
     .txn-list-table-head-container{
       background:  #313355;
@@ -317,13 +320,19 @@ $card-tab-icon-color-active: #fff !default;
     font-size: 12px;
     line-height: 12px;
     margin: 20px 0;
+    font-weight: 700;
+    &:hover {
+      background: #21413F;
+    }
   }
 }
 .dark-theme-applied {
   .recent-preview-container{
-    background:#1c1d31;
+    background: #080D0C;
     .recent-preview-item{
       box-shadow:none;
+      background-color: #141918;
+      border-color: #141918!important;
       .recent-preview-item-content{
         border-bottom:1px solid rgba(255,255,255,.1);
         color:#a3a9b5;
@@ -338,6 +347,9 @@ $card-tab-icon-color-active: #fff !default;
     .recent-preview-item-title-container{
       border-bottom:1px solid rgba(255,255,255,.1);
     }
+    .view-btn {
+      background: #21413F;
+    }
   }
 
 }

diff --git a/apps/block_scout_web/assets/css/theme/_mantle-theme.scss b/apps/block_scout_web/assets/css/theme/_mantle-theme.scss
@@ -1,12 +1,12 @@
-$body-dark: #1c1d31; // body background
+$body-dark: #080D0C; // body background
 $dark-bg: #22223a; // hero shade
-$dark-light-bg: #282945; // pills bg shade
+$dark-light-bg: #091312; // pills bg shade
 $dark-light: #313355; // tile light top share
-$labels-dark: #21413F; // header nav, labels
+$labels-dark: #585F65; // header nav, labels
 $dark-text-content-color: #7FD8D2;
 $dark-stakes-banned-background: #3e314c;
 $primary: #65B3AE !default;
-$dark-primary: #0A8FF6 !default;
+$dark-primary: #65B3AE !default;
 $dark-primary-alternate: #65B3AE !default;
 
 // Switcher
@@ -233,7 +233,7 @@ $dark-primary-alternate: #65B3AE !default;
 		}
 	}
 	.tile-bottom-contents {
-		background-color: $dark-bg;
+		background-color: transparent;
 	}
 	a.tile-title {
 		color: #fff !important;
@@ -261,7 +261,9 @@ $dark-primary-alternate: #65B3AE !default;
 		background-color: $dark-primary;
 	}
 	.tile.tile-type-block {
-		border-left-color: $dark-primary
+		border-color: #202524;
+		border-left-color: $dark-primary;
+		background-color: #202524;
 	}
 	.tile.tile-type-block .tile-status-label {
 		color: $dark-primary;

diff --git a/apps/block_scout_web/assets/css/theme/_neutral_variables.scss b/apps/block_scout_web/assets/css/theme/_neutral_variables.scss
@@ -75,6 +75,6 @@ $api-text-monospace-color: $primary;
 }
 
 // Dark theme
-$dark-primary: #9b62ff;
+$dark-primary: #65B3AE;
 $dark-secondary: #87e1a9;
 $dark-primary-alternate: #7e50d0; 
diff --git a/apps/block_scout_web/assets/css/theme/_poa_variables.scss b/apps/block_scout_web/assets/css/theme/_poa_variables.scss
@@ -76,6 +76,6 @@ $api-text-monospace-color: $primary;
 }
 
 // Dark theme
-$dark-primary: #9b62ff;
+$dark-primary: #65B3AE;
 $dark-secondary: #87e1a9;
 $dark-primary-alternate: #7e50d0; 
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
@@ -1,25 +1,12 @@
 <footer class="footer">
   <div class="footer-body container">
-    <!-- Logo -->
-    <div class="row footer-logo-row">
-      <div class="col-md-12">
-        <%= link to: webapp_url(@conn), class: "footer-brand" do %>
-          <%= if logo_footer() do %>
-            <img class="footer-logo" src="<%= static_path(@conn, logo_footer()) %>" alt="<%= subnetwork_title() %>" />
-          <% end %>
-          <%= if logo_text() do %>
-            <span class="logo-text in-footer <%= unless logo_footer(), do: "no-logo" %>"> <%= logo_text() %> </span>
-          <% end %>
-        <% end %>
-      </div>
-    </div>
 
     <% other_explorers = other_explorers() %>
     <% col_size = if Enum.empty?(other_explorers), do: 3, else: 2 %>
 
     <div class="row">
-      <div 
-        class="col-xs-12 foot-left-description-container" 
+      <div
+        class="col-xs-12 foot-left-description-container"
         style="display:flex;border: 1px solid rgba(255, 255, 255, 0.15);border-radius: 12px;padding:18px;width:480px;margin-right:80px;"
       >
         <img class="foot-left-description--logo" style="width:40px;height:40px;margin-right:20px;" src="/images/mantle_logo_img.png" />
@@ -103,6 +90,6 @@
       <% end %>
     </div>
 
-   
+
   </div>
 </footer>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex
@@ -152,13 +152,13 @@
             </span>
             Mantle Testnet
           </span>
-          
+
         </li>
       </ul>
       <!-- Dark mode changer -->
       <button class="dark-mode-changer" id="dark-mode-changer">
         <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16">
-            <path fill="#9B62FF" fill-rule="evenodd" d="M14.88 11.578a.544.544 0 0 0-.599-.166 5.7 5.7 0 0 1-1.924.321c-3.259 0-5.91-2.632-5.91-5.866 0-1.947.968-3.759 2.59-4.849a.534.534 0 0 0-.225-.97A5.289 5.289 0 0 0 8.059 0C3.615 0 0 3.588 0 8s3.615 8 8.059 8c2.82 0 5.386-1.423 6.862-3.806a.533.533 0 0 0-.041-.616z"/>
+            <path fill="#65B3AE" fill-rule="evenodd" d="M14.88 11.578a.544.544 0 0 0-.599-.166 5.7 5.7 0 0 1-1.924.321c-3.259 0-5.91-2.632-5.91-5.866 0-1.947.968-3.759 2.59-4.849a.534.534 0 0 0-.225-.97A5.289 5.289 0 0 0 8.059 0C3.615 0 0 3.588 0 8s3.615 8 8.059 8c2.82 0 5.386-1.423 6.862-3.806a.533.533 0 0 0-.041-.616z"/>
         </svg>
       </button>
     </div>