From 9432dee47b717bcd2e97963f2217fc17ccbb7632 Mon Sep 17 00:00:00 2001
From: katibest <katibest@gaslight.co>
Date: Mon, 16 Jul 2018 14:46:13 -0400
Subject: [PATCH] Tweaked the transaction panels for address and homepage/view
 all

---
 .../assets/css/components/_tile.scss          |  1 -
 .../assets/css/theme/_poa_variables.scss      |  2 +-
 .../address_transaction/_transaction.html.eex | 42 ++++++++++---------
 .../templates/chain/_transactions.html.eex    | 23 ++++++----
 .../templates/transaction/index.html.eex      | 19 +++++----
 5 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/apps/explorer_web/assets/css/components/_tile.scss b/apps/explorer_web/assets/css/components/_tile.scss
index 52a77c7b50..41fa5752f0 100644
--- a/apps/explorer_web/assets/css/components/_tile.scss
+++ b/apps/explorer_web/assets/css/components/_tile.scss
@@ -70,7 +70,6 @@
     font-weight: 600;
     color: $gray-700;
     margin-bottom: 0;
-    display: block;
   }
 }
 
diff --git a/apps/explorer_web/assets/css/theme/_poa_variables.scss b/apps/explorer_web/assets/css/theme/_poa_variables.scss
index b9571921bf..39a0559089 100644
--- a/apps/explorer_web/assets/css/theme/_poa_variables.scss
+++ b/apps/explorer_web/assets/css/theme/_poa_variables.scss
@@ -38,7 +38,7 @@ $blue:    #4786ff !default;
 $indigo:  #5b33a1 !default;
 $purple:  #9987fc !default;
 $pink:    #e83e8c !default;
-$red:     #dc3545 !default;
+$red:     #c74d39 !default;
 $orange:  #ef9a60 !default;
 $yellow:  #ffc107 !default;
 $green:   #20b760 !default;
diff --git a/apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex b/apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex
index 485be643f5..cf4071f68a 100644
--- a/apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex
@@ -1,12 +1,8 @@
 <div class="tile tile-type-<%= ExplorerWeb.TransactionView.type_suffix(@transaction) %> fade-in" data-transaction-hash="<%= @transaction.hash %>">
   <div class="row">
-    <div class="col-md-2 d-flex align-items-center justify-content-start justify-content-lg-center  tile-label">
-      <div class="col-md-1" data-test="transaction_status">
-        <div class="transaction__dot transaction__dot--<%= status(@transaction) %>" data-toggle="tooltip" title="<%= formatted_status(@transaction) %>"></div>
-      </div>
-      <div class="col-md-11">
-        <%= ExplorerWeb.TransactionView.transaction_display_type(@transaction) %>
-      </div>
+    <div class="pl-5 col-md-2 d-flex flex-column align-items-left justify-content-start justify-content-lg-center tile-label">
+      <%= ExplorerWeb.TransactionView.transaction_display_type(@transaction) %>
+      <div data-test="transaction_status" class="text-muted"><%= formatted_status(@transaction) %></div>
     </div>
     <div class="col-md-7 col-lg-8 d-flex flex-column">
       <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @transaction.hash %>
@@ -16,6 +12,7 @@
         <% else %>
           <%= render ExplorerWeb.AddressView, "_link.html", address_hash: @transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(@transaction.from_address), locale: @locale %>
         <% end %>
+
         &rarr;
         <%= if @address.hash == ExplorerWeb.TransactionView.to_address_hash(@transaction) do %>
           <%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: ExplorerWeb.TransactionView.to_address_hash(@transaction), contract: ExplorerWeb.AddressView.contract?(@transaction.to_address) %>
@@ -23,19 +20,26 @@
           <%= render ExplorerWeb.AddressView, "_link.html", address_hash: ExplorerWeb.TransactionView.to_address_hash(@transaction), contract: ExplorerWeb.AddressView.contract?(@transaction.to_address), locale: @locale %>
         <% end %>
       </span>
-      <%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %> POA
+      <span>
+        <%= if @address.hash == @transaction.from_address_hash do %>
+          <span class="badge badge-danger tile-badge">Out</span>
+        <% else %>
+          <span class="badge badge-success tile-badge">In</span>
+        <% end %>
+        <span class="ml-1" data-from-now="<%= @transaction.block.timestamp %>"></span>
+        <span class="ml-1">
+          <%= link(
+            gettext("Block #") <> "#{@transaction.block.number}",
+            to: block_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.block)
+          ) %>
+        </span>
+      </span>
     </div>
-    <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column justify-content-start justify-content-md-end align-items-end text-md-right">
-      <%= if @address.hash == @transaction.from_address_hash do %>
-        <span class="badge badge-warning tile-badge  mr-2 mr-md-0">OUT</span>
-      <% else %>
-        <span class="badge badge-success tile-badge mr-2 mr-md-0">IN</span>
-      <% end %>
-      <span class="mr-2 mr-sm-0" data-from-now="<%= @transaction.block.timestamp %>"></span>
-      <%= link(
-        gettext("Block #") <> "#{@transaction.block.number}",
-        to: block_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.block)
-      ) %>
+    <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column justify-content-start align-items-end text-md-right">
+      <span class="tile-title">
+        <%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %> POA
+      </span>
+      <span class="mr-2 mr-sm-0 text-muted"> <%= ExplorerWeb.TransactionView.formatted_fee(@transaction, denomination: :ether) %> <%= gettext "Fee" %></span>
     </div>
   </div>
 </div>
diff --git a/apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex b/apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex
index 3c1829de1b..1d77c1b21e 100644
--- a/apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex
@@ -12,20 +12,27 @@
           </div>
         </div>
         <div class="col-md-7 col-lg-8 d-flex flex-column">
-          <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: transaction.hash %>
+            <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: transaction.hash %>
           <span>
             <%= render ExplorerWeb.AddressView, "_link.html", address_hash: transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(transaction.from_address), locale: @locale %>
             &rarr;
             <%= render ExplorerWeb.AddressView, "_link.html", address_hash: ExplorerWeb.TransactionView.to_address_hash(transaction), contract: ExplorerWeb.AddressView.contract?(transaction.to_address), locale: @locale %>
           </span>
-          <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
+          <span>
+            <span class="ml-1" data-from-now="<%= transaction.block.timestamp %>"></span>
+            <span class="ml-1">
+              <%= link(
+                gettext("Block #") <> "#{transaction.block.number}",
+                to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
+              ) %>
+            </span>
+          </span>
         </div>
-        <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column justify-content-start justify-content-md-end text-md-right">
-          <span class="mr-2 mr-sm-0" data-from-now="<%= transaction.block.timestamp %>"></span>
-          <%= link(
-            gettext("Block #") <> "#{transaction.block.number}",
-            to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
-          ) %>
+        <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column justify-content-start text-md-right">
+          <span class="tile-title">
+            <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
+          </span>
+          <span><%= ExplorerWeb.TransactionView.formatted_fee(transaction, denomination: :ether) %> <%= gettext "Fee" %></span>
         </div>
       </div>
     </div>
diff --git a/apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex
index 7ae8e94178..62d0777e77 100644
--- a/apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex
@@ -40,14 +40,19 @@
                 &rarr;
                 <%= render ExplorerWeb.AddressView, "_link.html", address_hash: ExplorerWeb.TransactionView.to_address_hash(transaction), contract: ExplorerWeb.AddressView.contract?(transaction.to_address), locale: @locale %>
               </span>
-              <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
+              <span>
+                <span data-from-now="<%= transaction.block.timestamp %>"></span>
+                <span class="ml-1">
+                  <%= link(
+                    gettext("Block #") <> "#{transaction.block.number}",
+                    to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
+                  ) %>
+                </span>
+              </span>
             </div>
-            <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column justify-content-start justify-content-md-end text-md-right">
-              <span class="mr-2 mr-sm-0" data-from-now="<%= transaction.block.timestamp %>"></span>
-              <%= link(
-                gettext("Block #") <> "#{transaction.block.number}",
-                to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
-              ) %>
+            <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column justify-content-start text-md-right">
+              <span class="tile-title"><%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA</span>
+              <span> <%= ExplorerWeb.TransactionView.formatted_fee(transaction, denomination: :ether) %> <%= gettext "Fee" %></span>
             </div>
           </div>
         </div>