Fix UI issues

- Fix color of navbar submenus (Block, Transactions)
- Changed search field style
- Conditionally remove plus sign from counters
- Add borders to filters
- Fixed filters button style
- Replace loading spinners with "N/A"
- Add margin to filter button
- Add commas to stats numbers

Update gettext

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

@@ -23,6 +23,11 @@ $navbar-logo-width: 100% !default;
   }
 
   .navbar-nav {
+
+    .nav-submenu {
+      padding: 10px 20px;
+      color: $header-links-color; 
+    }
     
     .nav-link {
       outline: none;

apps/block_scout_web/assets/css/theme/_dark-theme.scss

@@ -43,6 +43,9 @@ $dark-stakes-banned-background: #3e314c;
 				background-color: $dark-light-bg;
 			}
 		}
+		.nav-submenu {
+			color: $labels-dark;
+		}
 	}
 	.navbar-brand .navbar-logo {
 		filter: brightness(0) invert(1);

apps/block_scout_web/assets/js/pages/verified_contracts.js

@@ -59,7 +59,7 @@ if ($('[data-page="verified-contracts-list"]').length) {
   const $element = $('[data-async-listing]')
 
   $element.on('click', '[data-next-page-button], [data-prev-page-button]', (event) => {
-    document.getElementById('verified-contratc-list').scrollIntoView()
+    document.getElementById('verified-contracts-list').scrollIntoView()
   })
 
   const store = createAsyncLoadStore(reducer, initialState, 'dataset.identifierHash')
@@ -79,13 +79,6 @@ if ($('[data-page="verified-contracts-list"]').length) {
     type: 'PAGE_LOAD'
   })
 
-  $element.on('click', '[data-search-button]', searchFunc)
-
-  $element.on('click', '[data-cancel-search-button]', (_event) => {
-    $('[data-search-field]').val('')
-    loadPage(store, window.location.pathname)
-  })
-
   $element.on('input keyup', '[data-search-field]', (event) => {
     if (event.type === 'input') {
       clearTimeout(timer)

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

@@ -29,13 +29,10 @@
               <%= gettext("Blockchain") %>
             </a>
             <div class="dropdown-menu" aria-labelledby="navbarBlockchainDropdown">
-              <div class="px-3 py-2">
-                <span class="mr-1">
+              <div class="nav-submenu">
+                <span>
                   <%= gettext("Blocks") %>
                 </span>
-                <span class="nav-link-icon">
-                  <%= render BlockScoutWeb.IconsView, "_block_icon.html" %>
-                </span>
               </div>
               <%= link(
                     gettext("Blocks"),
@@ -47,13 +44,10 @@
               <%= link(gettext("Forked Blocks (Reorgs)"),
                     to: reorg_path(@conn, :reorg),
                     class: "border-bottom dropdown-item #{tab_status("reorgs", @conn.request_path)}")%>
-              <div class="px-3 py-2">
-                <span class="mr-1">
+              <div class="nav-submenu">
+                <span>
                   <%= gettext("Transactions") %>
                 </span>
-                <span class="nav-link-icon">
-                  <%= render BlockScoutWeb.IconsView, "_transaction_icon.html" %>
-                </span>
               </div>
               <% json_rpc_named_arguments = Application.fetch_env!(:indexer, :json_rpc_named_arguments)%>
               <% variant = Keyword.fetch!(json_rpc_named_arguments, :variant) %>

apps/block_scout_web/lib/block_scout_web/templates/verified_contracts/_contract.html.eex

@@ -14,11 +14,13 @@
     </td>
     <!-- Txns -->
     <td class="stakes-td">
-        <%= if @contract.address.transactions_count do %>
-            <%= Number.Delimit.number_to_delimited(@contract.address.transactions_count, precision: 0) %>
-        <% else %>
-            <%= render BlockScoutWeb.CommonComponentsView, "_loading_spinner.html", loading_text: gettext("Fetching transactions...") %>
-        <% end %>
+        <span>
+            <%= if @contract.address.transactions_count do %>
+                <%= Number.Delimit.number_to_delimited(@contract.address.transactions_count, precision: 0) %>
+            <% else %>
+                <%= gettext "N/A" %>
+            <% end %>
+        </span>
     </td>
     <!-- Compiler -->
     <td class="stakes-td">

apps/block_scout_web/lib/block_scout_web/templates/verified_contracts/_stats.html.eex

@@ -5,11 +5,11 @@
           <h2 class="card-title list-title-description "><%= gettext "Contracts" %></h2>
           <div class="d-flex justify-content-around">
             <div class="d-flex flex-column">
-              <h1><%= @contracts_count %></h1>
+              <h1><%= BlockScoutWeb.Cldr.Number.to_string!(@contracts_count, format: "#,###") %></h1>
               <span class="text-muted"><%= gettext ("Total") %></span>
             </div>
             <div class="d-flex flex-column">
-              <h1 class="text-success">+<%= @new_contracts_count %></h1>
+              <h1 class="text-success"><%= if 0 |> Decimal.new() |> Decimal.lt?(@new_contracts_count), do: "+" %><%= BlockScoutWeb.Cldr.Number.to_string!(@new_contracts_count, format: "#,###") %></h1>
               <span class="text-muted"><%= gettext ("Last 24h") %></span>
             </div>
           </div>
@@ -18,11 +18,11 @@
           <h2 class="card-title list-title-description "><%= gettext "Verified Contracts" %></h2>
           <div class="d-flex justify-content-around">
             <div class="d-flex flex-column">
-              <h1><%= @verified_contracts_count %></h1>
+              <h1><%= BlockScoutWeb.Cldr.Number.to_string!(@verified_contracts_count, format: "#,###") %></h1>
               <span class="text-muted"><%= gettext ("Total") %></span>
             </div>
             <div class="d-flex flex-column">
-              <h1 class="text-success">+<%= @new_verified_contracts_count %></h1>
+              <h1 class="text-success"><%= if 0 |> Decimal.new() |> Decimal.lt?(@new_verified_contracts_count), do: "+" %><%= BlockScoutWeb.Cldr.Number.to_string!(@new_verified_contracts_count, format: "#,###") %></h1>
               <span class="text-muted"><%= gettext ("Last 24h") %></span>
             </div>
           </div>

apps/block_scout_web/lib/block_scout_web/templates/verified_contracts/index.html.eex

@@ -2,15 +2,15 @@
 <section class="container" data-page="verified-contracts-list">
   <%= render BlockScoutWeb.Advertisement.TextAdView, "index.html", conn: @conn %>
   <div class="card">
-    <div id="verified-contratc-list" class="card-body" data-async-load data-async-listing="<%= @current_path %>" data-no-self-calls>
+    <div id="verified-contracts-list" class="card-body" data-async-load data-async-listing="<%= @current_path %>" data-no-self-calls>
       <h1 class="card-title list-title-description d-inline-block"><%= gettext "Verified Contracts" %></h1>
 
       <div class="float-right">
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: @page_number, show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
       </div>
 
-      <div class="dropdown u-push-sm d-inline-block mb-2">
-        <button data-test="filter_dropdown" class="btn-dropdown-line dropdown-toggle" type="button"
+      <div class="dropdown u-push-sm d-inline-block mb-2 mr-5 ml-md-3">
+        <button data-test="filter_dropdown" class="btn-dropdown-line large no-rm dropdown-toggle" type="button"
           id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           <%= gettext "Filter by compiler:" %> <%= format_current_filter(@filter) %>
         </button>
@@ -19,13 +19,13 @@
           <%= link(
             gettext("All"),
             to: Helpers.verified_contracts_path(@conn, :index),
-            class: "address__link address__link--active dropdown-item",
+            class: "address__link address__link--active dropdown-item border-bottom",
             "data-test": "filter_option"
           ) %>
           <%= link(
             gettext("Solidity"),
             to: Helpers.verified_contracts_path(@conn, :index, filter: "solidity"),
-            class: "address__link address__link--active dropdown-item",
+            class: "address__link address__link--active dropdown-item border-bottom",
             "data-test": "filter_option"
           ) %>
           <%= link(