Restyled address links in tables through out site

apps/explorer_web/assets/css/components/_address_link.scss

@@ -1,13 +1,27 @@
 .address-link {
-  font-family: $font-family-monospace;
+  border: 1px solid $border-color;
+  white-space: nowrap;
+  display: inline-block;
+
+  &__font {
+    font-family: $font-family-monospace;
+  }
+
+  &__type {
+    padding: 0 3px;
+  }
 
   &__seperator {
     margin: 0 2px;
   }
 
-  &__copy-icon {
-    color: $gray-800;
+  &__copy-button {
+    background-color: $gray-100;
     appearance: none;
-    border: none;
+    border-color: transparent transparent transparent $border-color;
+
+    i {
+      color:$gray-500 !important;
+    }
   }
 }

apps/explorer_web/assets/css/components/_nav_tabs.scss

@@ -3,5 +3,6 @@
 
   .nav-link {
     border-color: $border-color $border-color $border-color;
+    margin-right: 5px;
   }
 }

apps/explorer_web/assets/css/explorer/_table.scss

@@ -19,3 +19,7 @@
     width: 35%;
   }
 }
+
+.address-cell {
+  width: 150px;
+}

apps/explorer_web/lib/explorer_web/templates/address/_link.html.eex

@@ -1,12 +1,15 @@
+<div class="address-link">
 <%= if @address do %>
+  <i class="address-link__type fas fa-file"></i>
   <%= link to: address_path(@conn, :show, @conn.assigns.locale, @address),
       "data-toggle": "tooltip",
       "data-placement": "top",
-      class: "address-link",
+      class: "address-link__font",
       title: @address do %>
     <%= @address |> hash |> String.slice(0..3) %><i class="fas fa-ellipsis-v address-link__seperator"></i><%= @address |> hash |> String.slice(-4..-1) %>
 <% end %>
-<button class="address-link__copy-icon" data-clipboard-text="<%= @address %>" aria-label="copy address">
-  <i class="fa fa-clipboard"></i>
+<button class="address-link__copy-button" data-clipboard-text="<%= @address %>" aria-label="copy address">
+  <i class="fa fa-copy"></i>
 </button>
 <% end %>
+</div>

apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex

@@ -69,6 +69,7 @@
             <th><%= gettext "Block" %></th>
             <th><%= gettext "Age" %></th>
             <th><%= gettext "From" %></th>
+            <th></th>
             <th><%= gettext "To" %></th>
             <th><%= gettext "Value" %> (<%= gettext "Ether" %>)</th>
             <th><%= gettext "Fee" %></th>
@@ -88,9 +89,10 @@
                     ) %>
               </td>
               <td><%= transaction.block.timestamp |> Timex.from_now %></td>
-              <td>
+              <td class="address-cell">
                 <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.from_address %>
               </td>
+              <td class="u-text-center"><i class="fas fa-arrow-circle-right"></i></td>
               <td>
                 <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.to_address %>
               </td>

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

@@ -134,6 +134,7 @@
             <th><%= gettext "Block" %></th>
             <th><%= gettext "Age" %></th>
             <th><%= gettext "From" %></th>
+            <th></th>
             <th><%= gettext "To" %></th>
             <th><%= gettext "Value" %></th>
           </tr>
@@ -156,11 +157,11 @@
               <td>
                 <%= transaction.block.timestamp |> Timex.from_now %>
               </td>
-              <td>
+              <td class="address-cell">
                 <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.from_address %>
               </td>
+              <td class="u-text-center"><i class="fas fa-arrow-circle-right"></i></td>
               <td>
-                <div>
                   <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.to_address %>
               </td>
               <td>

apps/explorer_web/lib/explorer_web/templates/chain/_blocks.html.eex

@@ -3,7 +3,7 @@
     <%= link(gettext("View All"), to: block_path(@conn, :index, Gettext.get_locale), class: "button button--secondary button--xsmall u-float-right") %>
     <h2 class="panels__title"><%= gettext "Blocks" %></h2>
   </div>
-  <table class="table table-font">
+  <table class="table table-font table-responsive-sm">
     <thead>
       <th><%= gettext "Height" %></th>
       <th><%= gettext "Age" %></th>

apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex

@@ -3,7 +3,7 @@
     <%= link(gettext("View All"), to: transaction_path(@conn, :index, Gettext.get_locale), class: "button button--secondary button--xsmall u-float-right") %>
     <h2 class="panels__title"><%= gettext "Transactions" %></h2>
   </div>
-  <table class="table table-font">
+  <table class="table table-font table-responsive-sm">
     <thead>
       <th><%= gettext "TX Hash" %></th>
       <th><%= gettext "From" %></th>