Merge pull request #2072 from poanetwork/fix/#2068-missing-checkmarks

(Fix) Missing checkmarks

CHANGELOG.md

@@ -22,6 +22,7 @@
 - [#2012](https://github.com/poanetwork/blockscout/pull/2012) - make all pages pagination async
 
 ### Fixes
+- [#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
 - [#2043](https://github.com/poanetwork/blockscout/pull/2043) - Fixed modal dialog width for 'verify other explorers'

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

@@ -5,6 +5,8 @@ $card-horizontal-padding: 30px;
 $card-vertical-padding: 30px;
 $card-background-1: $primary !default;
 $card-background-1-text-color: #fff !default;
+$card-tab-icon-color: #20b760 !default;
+$card-tab-icon-color-active: #20b760 !default;
 
 .card {
   background-color: $card-background-color;
@@ -158,40 +160,50 @@ $card-background-1-text-color: #fff !default;
   justify-content: flex-start;
   overflow: hidden;
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     flex-direction: column;
   }
 }
 
 .card-tab {
+  align-items: center;
   background-color: $card-background-color;
   color: #333;
   cursor: pointer;
+  display: flex;
   font-size: 14px;
   font-weight: normal;
   height: 70px;
-  line-height: 70px;
-  padding: 0 30px;
+  padding: 0 25px;
   text-align: center;
 
   &:hover {
     text-decoration: underline;
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     display: none;
     width: 100%;
   }
 
+  .fa-check-circle {
+    color: $card-tab-icon-color;
+    margin-left: 6px;
+  }
+
   &.active {
     background-color: $card-tab-active;
     color: #fff;
     cursor: default;
     text-decoration: none;
 
-    @include media-breakpoint-down(sm) {
+    .fa-check-circle {
+      color: $card-tab-icon-color-active;
+    }
+
+    @include media-breakpoint-down(md) {
       cursor: pointer;
-      display: block;
+      display: flex;
       order: -1;
 
       &::after {

apps/block_scout_web/assets/js/lib/card_tabs.js

@@ -17,7 +17,7 @@ $(function () {
       const siblings = $(this).siblings()
 
       if (siblings.is(':hidden')) {
-        siblings.show()
+        siblings.css({ 'display': 'flex' })
       } else {
         siblings.hide()
       }

apps/block_scout_web/lib/block_scout_web/templates/address/_tabs.html.eex

@@ -41,7 +41,7 @@
         class: "card-tab #{tab_status("contracts", @conn.request_path)}") do %>
         <%= gettext("Code") %>
       <%= if smart_contract_verified?(@address) do %>
-        <i class="far fa-check-circle text-success"></i>
+        <i class="far fa-check-circle"></i>
       <% end %>
     <% end %>
   <% end %>
@@ -50,7 +50,7 @@
         to: address_decompiled_contract_path(@conn, :index, @address.hash),
         class: "card-tab #{tab_status("decompiled_contracts", @conn.request_path)}") do %>
         <%= gettext("Decompiled code") %>
-        <i class="far fa-check-circle text-success"></i>
+        <i class="far fa-check-circle"></i>
     <% end %>
   <% end %>
   <%= if smart_contract_with_read_only_functions?(@address) do %>

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

@@ -121,7 +121,9 @@
             </span>
           <% end %>
           <!-- Verify in other explorers -->
+          <!--
           <%# <%= render "_verify_other_explorers.html", hash: @address.hash, type: "address" %> %>
+          -->
         </div>
       </div>
     </div>

apps/block_scout_web/priv/gettext/default.pot

@@ -207,8 +207,8 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address/_validator_metadata_modal.html.eex:37
-#: lib/block_scout_web/templates/address/overview.html.eex:142
-#: lib/block_scout_web/templates/address/overview.html.eex:150
+#: lib/block_scout_web/templates/address/overview.html.eex:144
+#: lib/block_scout_web/templates/address/overview.html.eex:152
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:106
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:114
 msgid "Close"
@@ -634,7 +634,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address/overview.html.eex:33
-#: lib/block_scout_web/templates/address/overview.html.eex:141
+#: lib/block_scout_web/templates/address/overview.html.eex:143
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:35
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:105
 msgid "QR Code"

apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po

@@ -207,8 +207,8 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address/_validator_metadata_modal.html.eex:37
-#: lib/block_scout_web/templates/address/overview.html.eex:142
-#: lib/block_scout_web/templates/address/overview.html.eex:150
+#: lib/block_scout_web/templates/address/overview.html.eex:144
+#: lib/block_scout_web/templates/address/overview.html.eex:152
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:106
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:114
 msgid "Close"
@@ -634,7 +634,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address/overview.html.eex:33
-#: lib/block_scout_web/templates/address/overview.html.eex:141
+#: lib/block_scout_web/templates/address/overview.html.eex:143
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:35
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:105
 msgid "QR Code"