Merge pull request #2077 from maxgrapps/master

UI Issues

CHANGELOG.md

@@ -23,6 +23,7 @@
 - [#2012](https://github.com/poanetwork/blockscout/pull/2012) - make all pages pagination async
 
 ### Fixes
+- [#2077](https://github.com/poanetwork/blockscout/pull/2077) - ui issues
 - [#2072](https://github.com/poanetwork/blockscout/pull/2072) - Fixed checkmarks not showing correctly in tabs.
 - [#2066](https://github.com/poanetwork/blockscout/pull/2066) - fixed length of logs search input
 - [#2056](https://github.com/poanetwork/blockscout/pull/2056) - log search form styles added

apps/block_scout_web/assets/css/components/_btn_dropdown_line.scss

@@ -3,4 +3,11 @@ $btn-dropdown-line-color: $primary !default;
 
 .btn-dropdown-line {
     @include btn-line($btn-dropdown-line-bg, $btn-dropdown-line-color);
+    outline: none !important;
+    color: #333;
+    border-color: #e2e5ec;
+    &:hover {
+    	background-color: transparent;
+    	color: #333;
+    }
 }

apps/block_scout_web/assets/css/components/_card.scss

@@ -178,7 +178,9 @@ $card-tab-icon-color-active: #20b760 !default;
   text-align: center;
 
   &:hover {
-    text-decoration: underline;
+    background-color: rgba($card-tab-active, .1);
+    color: $card-tab-active;
+    text-decoration: none;
   }
 
   @include media-breakpoint-down(md) {

apps/block_scout_web/assets/css/components/_dropdown.scss

@@ -1,6 +1,6 @@
 // These styles extend the default Bootstrap styles
 .dropdown-menu {
-  border-radius: 8px !important;
+  border-radius: 0 0 8px 8px !important;
   border: none;
   box-shadow: $box-shadow;
   padding: 0;
@@ -32,8 +32,8 @@
   }
 
   &:first-child {
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
   }
 
   &:last-child {
@@ -46,7 +46,7 @@
     &:hover,
     &:active {
       padding-left: 10px;
-      background-color: transparent;
+      background-color: #fff !important;
       cursor: default;
       color: #333;
       font-weight: 700;

apps/block_scout_web/assets/css/components/_modal.scss

@@ -17,12 +17,17 @@ $modal-gray-background: #f6f7f9 !default;
   padding: #{$modal-vertical-padding} #{$modal-horizontal-padding};
 }
 
-.close.close-modal {
+.close.close-modal{
   left: auto;
   opacity: 1;
   position: absolute;
   right: -35px;
   top: -35px;
+  outline: none !important;
+}
+
+.close {
+  outline: none !important;
 }
 
 .modal-body {

apps/block_scout_web/assets/css/theme/_neutral_variables.scss

@@ -57,3 +57,15 @@ $btn-qr-color: $primary; // btn qr-code
 // card
 $card-background-1: $primary;
 $card-tab-active: $primary;
+
+.footer {
+  .tooltip {
+    .tooltip-inner  {
+      background-color: darken($footer-background-color, 10) !important;
+    }
+    .arrow::before {
+      border-top-color: darken($footer-background-color, 10) !important;
+      border-bottom-color: darken($footer-background-color, 10) !important;
+    }
+  }
+}

apps/block_scout_web/lib/block_scout_web/templates/layout/_footer.html.eex

@@ -16,13 +16,13 @@
       <div class="col-md-<%= col_size %>">
         <p class="footer-info-text"><%= gettext("Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.") %></p>
         <div class="footer-social-icons">
-          <a href="https://github.com/poanetwork/blockscout" rel="noreferrer" target="_blank" class="footer-social-icon" data-toggle="tooltip" data-placement="top" title='<%= gettext("Github") %>'>
+          <a href="https://github.com/poanetwork/blockscout" rel="noreferrer" target="_blank" class="footer-social-icon" title='<%= gettext("Github") %>'>
             <i class="fab fa-github"></i>
           </a>
-          <a href="https://www.twitter.com/_blockscout/" rel="noreferrer" target="_blank" class="footer-social-icon" data-toggle="tooltip" data-placement="top" title='<%= gettext("Twitter") %>'>
+          <a href="https://www.twitter.com/_blockscout/" rel="noreferrer" target="_blank" class="footer-social-icon" title='<%= gettext("Twitter") %>'>
             <i class="fab fa-twitter"></i>
           </a>
-          <a href="https://t.me/poa_network" rel="noreferrer" target="_blank" class="footer-social-icon" data-toggle="tooltip" data-placement="top" title='<%= gettext("Telegram") %>'>
+          <a href="https://t.me/poa_network" rel="noreferrer" target="_blank" class="footer-social-icon" title='<%= gettext("Telegram") %>'>
             <i class="fab fa-telegram-plane"></i>
           </a>
         </div>

apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex

@@ -92,7 +92,7 @@
             <%= for %{url: url, title: title} <- test_nets(dropdown_nets()) do %>
               <a class="dropdown-item" href="<%= url%>"><%= title %></a>
             <% end %>
-            <a class="dropdown-item header division">Other networks</a>
+            <a class="dropdown-item header division">Other Networks</a>
             <%= for %{url: url, title: title} <- dropdown_other_nets() do %>
               <a class="dropdown-item" href="<%= url%>"><%= title %></a>
             <% end %>

apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex

@@ -71,18 +71,18 @@
           <dl class="row">
             <dt class="col-sm-3 text-muted"><%= gettext "Block Confirmations" %></dt>
             <dd class="col-sm-9">
-              <span data-selector="block-confirmations" class="font-weight-bold"><%= confirmations(@transaction, block_height: @block_height) %></span>
+              <span data-selector="block-confirmations"><%= confirmations(@transaction, block_height: @block_height) %></span>
           </dd>
           </dl>
           <!-- Nonce -->
           <dl class="row">
             <dt class="col-sm-3 text-muted"> <%= gettext "Nonce" %> </dt>
-            <dd class="col-sm-9 font-weight-bold"> <%= @transaction.nonce %> </dd>
+            <dd class="col-sm-9"> <%= @transaction.nonce %> </dd>
           </dl>
           <!-- TX Fee -->
           <dl class="row">
             <dt class="col-sm-3 text-muted"> <%= gettext "TX Fee" %> </dt>
-            <dd class="col-sm-9 font-weight-bold">
+            <dd class="col-sm-9">
               <%= formatted_fee(@transaction, denomination: :ether) %>
 
               <%= if !empty_exchange_rate?(@exchange_rate) do %>