Design cleanup

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

@@ -66,6 +66,11 @@
 .fade-up {
   will-change: transform, opacity, height;
   animation: fade-up 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+
+  @media (max-width: 767px) {
+    max-height: 234px;
+    animation: fade-up--mobile 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  }
 }
 
 .shrink-out {

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

@@ -147,16 +147,13 @@
   }
 }
 
-.nav-link.dropdown-toggle {
-  padding-right: 0 !important;
-}
-
 .dropdown-menu {
   padding: 0px;
 }
 
 .dropdown-item {
   padding: 10px 20px;
+  font-size: 12px;
 
   &:hover {
     background-color: $tertiary;

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

@@ -19,6 +19,26 @@
 
     &-block {
       border-left: 4px solid $primary;
+
+      .tile-label {
+        color: $primary;
+      }
+    }
+
+    &-uncle {
+      border-left: 4px solid $secondary;
+
+      .tile-label {
+        color: $secondary;
+      }
+    }
+
+    &-reorg {
+      border-left: 4px solid $tertiary;
+
+      .tile-label {
+        color: $tertiary;
+      }
     }
 
     &-transaction {

apps/block_scout_web/lib/block_scout_web/templates/block/_tile.html.eex

@@ -1,6 +1,11 @@
-<div class="tile tile-type-block fade-up" data-block-number="<%= to_string(@block.number) %>">
+<div class="tile tile-type-<%= String.downcase(@block_type) %> fade-up" data-block-number="<%= to_string(@block.number) %>">
   <div class="row">
-    <div class="col-md-8 col-lg-9">
+    <div class="col-md-2 d-flex flex-row flex-md-column align-items-left justify-content-start justify-content-lg-center mb-1 mb-md-0 pl-md-4">
+      <span class="tile-label" data-test="transaction_type">
+        <%= @block_type %>
+      </span>
+    </div>
+    <div class="col-md-6 col-lg-7">
       <!-- block height -->
       <%= if @block_type == "Block" do %>
         <%= link(

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

@@ -41,7 +41,7 @@
           </span>
         <% else %>
           <div class="tile tile-muted text-center">
-            <span data-selector="empty-transactions-list"><%= gettext "There are no transactions for this address." %></span>
+            <span data-selector="empty-transactions-list"><%= gettext "There are no transactions for this block." %></span>
           </div>
         <% end %>
 

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

@@ -8,13 +8,24 @@
     </button>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav mr-auto">
-        <li class="nav-item">
-          <%= link to: block_path(@conn, :index), class: "nav-link topnav-nav-link" do %>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarBlocksDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             <span class="nav-link-icon">
               <%= render BlockScoutWeb.IconsView, "_block_icon.html" %>
             </span>
             <%= gettext("Blocks") %>
+          </a>
+          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <%= link to: block_path(@conn, :index), class: "dropdown-item" do %>
+              <%= gettext("Blocks") %>
+            <% end %>
+            <%= link to: uncle_path(@conn, :uncle), class: "dropdown-item" do %>
+              <%= gettext("Uncles") %>
             <% end %>
+            <%= link to: reorg_path(@conn, :reorg), class: "dropdown-item" do %>
+              <%= gettext("Forked Blocks (Reorgs)") %>
+            <% end %>
+          </div>
         </li>
         <li class="nav-item">
           <%= link to: transaction_path(@conn, :index), class: "nav-link topnav-nav-link" do %>