Merge pull request #852 from poanetwork/755-highlight-transaction-status

Highlight transaction status

apps/block_scout_web/assets/css/_typography.scss

@@ -94,3 +94,11 @@ label, textarea.form-control {
       color: $teal;
     }
 }
+
+[data-transaction-status="Success"] {
+  color: $success;
+}
+
+[data-transaction-status^="Error"] {
+  color: $danger;
+}

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

@@ -109,18 +109,18 @@
 
   &-status {
     &--error--reason {
-      border-top: 1px solid lighten($danger, 10%);
+      border-top: 2px solid lighten($danger, 10%);
-      border-right: 1px solid lighten($danger, 10%);
+      border-right: 2px solid lighten($danger, 10%);
-      border-bottom: 1px solid lighten($danger, 10%);
+      border-bottom: 2px solid lighten($danger, 10%);
 
       .tile-status-label {
         color: $danger;
       }
     }
     &--awaiting-internal-transactions {
-      border-top: 1px solid lighten($warning, 10%);
+      border-top: 2px solid lighten($warning, 10%);
-      border-right: 1px solid lighten($warning, 10%);
+      border-right: 2px solid lighten($warning, 10%);
-      border-bottom: 1px solid lighten($warning, 10%);
+      border-bottom: 2px solid lighten($warning, 10%);
 
       .tile-status-label {
         color: $warning;

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

@@ -32,7 +32,7 @@
           </span>
           <div class="d-flex flex-row justify-content-start text-muted">
             <span class="mr-4 text-<%= BlockScoutWeb.TransactionView.type_suffix(@transaction) %>"><%= BlockScoutWeb.TransactionView.transaction_display_type(@transaction) %></span>
-            <span class="mr-4"><%= BlockScoutWeb.TransactionView.formatted_status(@transaction) %></span>
+            <span class="mr-4" data-transaction-status="<%= BlockScoutWeb.TransactionView.formatted_status(@transaction) %>"><%= BlockScoutWeb.TransactionView.formatted_status(@transaction) %></span>
             <span class="mr-4">
               <%= if block do %>
                 <span data-from-now="<%= @transaction.block.timestamp %>"></span>