From 3fbab385bad021ca57019df9d7aff2500ef7b381 Mon Sep 17 00:00:00 2001
From: Gabriel Rodriguez Alsina <gabriel.rodriguez@altoros.com>
Date: Fri, 24 May 2019 16:43:06 -0300
Subject: [PATCH] (fix) txs errors color

---
 .../assets/css/components/_tile.scss          | 69 ++++++++-----------
 1 file changed, 27 insertions(+), 42 deletions(-)

diff --git a/apps/block_scout_web/assets/css/components/_tile.scss b/apps/block_scout_web/assets/css/components/_tile.scss
index 4ed5bc6515..99dd85006e 100644
--- a/apps/block_scout_web/assets/css/components/_tile.scss
+++ b/apps/block_scout_web/assets/css/components/_tile.scss
@@ -11,22 +11,25 @@ $tile-type-unique-token-image-color: $orange !default;
 $tile-type-internal-transaction-color: $teal !default;
 $tile-type-api-documentation-color: $primary !default;
 $tile-type-progress-bar-color: $primary !default;
+$tile-status-error-reason: #ff7986 !default;
+$tile-status-awaiting-internal-transactions: $warning !default;
 
 $tile-padding: 1rem;
 
 @mixin generate-tile-block($prefix, $color, $label-color: false) {
+  &.tile-#{ $prefix } {
+    border-left: 4px solid $color;
 
-  a {
-    @if ($label-color) {
-      color: $label-color;
-    }
-    @else {
-      color: $color;
+    .tile-transaction-type-block {
+      a {
+        @if ($label-color) {
+          color: $label-color;
+        }
+        @else {
+          color: $color;
+        }
+      }
     }
-  }
-
-  &.tile-type-#{ $prefix } {
-    border-left: 4px solid $color;
 
     .tile-label {
       @if ($label-color) {
@@ -182,18 +185,20 @@ $tile-padding: 1rem;
   line-height: 1.4rem;
   padding: $tile-padding;
 
-  @include generate-tile-block('block', $tile-type-block-color, darken($tile-type-block-color, 20%));
-  @include generate-tile-block('uncle', $tile-type-uncle-color);
-  @include generate-tile-block('reorg', $tile-type-reorg-color);
-  @include generate-tile-block('emission-reward', $tile-type-emission-reward-color);
-  @include generate-tile-block('transaction', $tile-type-transaction-color);
-  @include generate-tile-block('contract-call', $tile-type-contract-call-color);
-  @include generate-tile-block('contract-creation', $tile-type-contract-creation-color);
-  @include generate-tile-block('token-transfer', $tile-type-token-transfer-color);
-  @include generate-tile-block('unique-token', $tile-type-unique-token-color);
-  @include generate-tile-block('unique-token-image', $tile-type-unique-token-image-color);
-  @include generate-tile-block('internal-transaction', $tile-type-internal-transaction-color);
-  @include generate-tile-block('api-documentation', $tile-type-api-documentation-color);
+  @include generate-tile-block('type-block', $tile-type-block-color, darken($tile-type-block-color, 20%));
+  @include generate-tile-block('type-uncle', $tile-type-uncle-color);
+  @include generate-tile-block('type-reorg', $tile-type-reorg-color);
+  @include generate-tile-block('type-emission-reward', $tile-type-emission-reward-color);
+  @include generate-tile-block('type-transaction', $tile-type-transaction-color);
+  @include generate-tile-block('type-contract-call', $tile-type-contract-call-color);
+  @include generate-tile-block('type-contract-creation', $tile-type-contract-creation-color);
+  @include generate-tile-block('type-token-transfer', $tile-type-token-transfer-color);
+  @include generate-tile-block('type-unique-token', $tile-type-unique-token-color);
+  @include generate-tile-block('type-unique-token-image', $tile-type-unique-token-image-color);
+  @include generate-tile-block('type-internal-transaction', $tile-type-internal-transaction-color);
+  @include generate-tile-block('type-api-documentation', $tile-type-api-documentation-color);
+  @include generate-tile-block('status--error--reason', $tile-status-error-reason);
+  @include generate-tile-block('status--awaiting-internal-transactions', $tile-status-awaiting-internal-transactions);
 
   &.n-p {
     padding: 0;
@@ -256,26 +261,6 @@ $tile-padding: 1rem;
     width: 100%;
   }
 
-  .tile-status--error--reason {
-    border-bottom: 2px solid lighten($danger, 10%);
-    border-right: 2px solid lighten($danger, 10%);
-    border-top: 2px solid lighten($danger, 10%);
-
-    .tile-status-label {
-      color: $danger;
-    }
-  }
-
-  .tile-status--awaiting-internal-transactions {
-    border-bottom: 2px solid lighten($warning, 10%);
-    border-right: 2px solid lighten($warning, 10%);
-    border-top: 2px solid lighten($warning, 10%);
-
-    .tile-status-label {
-      color: $warning;
-    }
-  }
-
   /* Progress bar */
   .progress {
     background-color: #f5f6fa;