Merge pull request #2090 from poanetwork/fix/etc-theme-fixes

(Fix) ETC theme fixes

CHANGELOG.md

@@ -33,6 +33,7 @@
 - [#2064](https://github.com/poanetwork/blockscout/pull/2064) - feat: add fields to tx apis, small cleanups
 
 ### Fixes
+- [#2090](https://github.com/poanetwork/blockscout/pull/2090) - updated some ETC theme colors
 - [#2099](https://github.com/poanetwork/blockscout/pull/2099) - logs search input width
 - [#2098](https://github.com/poanetwork/blockscout/pull/2098) - nav dropdown issue, logo size issue
 - [#2082](https://github.com/poanetwork/blockscout/pull/2082) - dropdown styles, tooltip gap fix, 404 page added

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

@@ -14,6 +14,8 @@ $tile-type-progress-bar-color: $primary !default;
 $tile-status-error-reason: #ff7986 !default;
 $tile-status-awaiting-internal-transactions: $warning !default;
 $tile-padding: 1rem;
+$tile-title-color: #333 !default;
+$tile-body-a-color: #5959d8 !default;
 
 @mixin generate-tile-block($prefix, $color, $label-color: false) {
   &#{ $prefix } {
@@ -23,8 +25,7 @@ $tile-padding: 1rem;
       a {
         @if ($label-color) {
           color: $label-color;
-        }
+        } @else {
-        @else {
           color: $color;
         }
       }
@@ -33,8 +34,7 @@ $tile-padding: 1rem;
     .tile-label {
       @if ($label-color) {
         color: $label-color;
-      }
+      } @else {
-      @else {
         color: $color;
       }
     }
@@ -42,8 +42,7 @@ $tile-padding: 1rem;
     .tile-status-label {
       @if ($label-color) {
         color: $label-color;
-      }
+      } @else {
-      @else {
         color: $color;
       }
     }
@@ -60,20 +59,6 @@ $tile-padding: 1rem;
 
 /*********************************************************************/
 
-.tile-title {
-  color: #333;
-  font-size: 12px;
-
-  &-hash {
-    font-weight: 300;
-  }
-
-  &-lg {
-    color: $body-color;
-    font-size: 16px;
-  }
-}
-
 .tile-label {
   font-size: 12px;
   font-weight: 700;
@@ -154,7 +139,6 @@ $tile-padding: 1rem;
 }
 
 .tile-function-response {
-
   span.function-response-item {
     display: block;
     margin-left: 1rem;
@@ -167,7 +151,6 @@ $tile-padding: 1rem;
   p {
     margin: 0;
   }
-
 }
 
 .tile-image {
@@ -176,6 +159,23 @@ $tile-padding: 1rem;
 }
 
 .tile {
+  .tile-body a {
+    color: $tile-body-a-color;
+  }
+
+  .tile-title {
+    color: $tile-title-color;
+    font-size: 12px;
+
+    &-hash {
+      font-weight: 300;
+    }
+
+    &-lg {
+      color: $body-color;
+      font-size: 16px;
+    }
+  }
   border-radius: 4px;
   border: 1px solid $border-color;
   color: $text-muted;
@@ -184,20 +184,57 @@ $tile-padding: 1rem;
   line-height: 1.4rem;
   padding: $tile-padding;
 
-  @include generate-tile-block('.tile-type-block', $tile-type-block-color, darken($tile-type-block-color, 20%));
+  @include generate-tile-block(
-  @include generate-tile-block('.tile-type-uncle', $tile-type-uncle-color);
+    ".tile-type-block",
-  @include generate-tile-block('.tile-type-reorg', $tile-type-reorg-color);
+    $tile-type-block-color,
-  @include generate-tile-block('.tile-type-emission-reward', $tile-type-emission-reward-color);
+    darken($tile-type-block-color, 20%)
-  @include generate-tile-block('.tile-type-transaction', $tile-type-transaction-color);
+  );
-  @include generate-tile-block('.tile-type-contract-call', $tile-type-contract-call-color);
+  @include generate-tile-block(".tile-type-uncle", $tile-type-uncle-color);
-  @include generate-tile-block('.tile-type-contract-creation', $tile-type-contract-creation-color);
+  @include generate-tile-block(".tile-type-reorg", $tile-type-reorg-color);
-  @include generate-tile-block('.tile-type-token-transfer', $tile-type-token-transfer-color);
+  @include generate-tile-block(
-  @include generate-tile-block('.tile-type-unique-token', $tile-type-unique-token-color);
+    ".tile-type-emission-reward",
-  @include generate-tile-block('.tile-type-unique-token-image', $tile-type-unique-token-image-color);
+    $tile-type-emission-reward-color
-  @include generate-tile-block('.tile-type-internal-transaction', $tile-type-internal-transaction-color);
+  );
-  @include generate-tile-block('.tile-type-api-documentation', $tile-type-api-documentation-color);
+  @include generate-tile-block(
-  @include generate-tile-block('[class*="status--error"]', $tile-status-error-reason);
+    ".tile-type-transaction",
-  @include generate-tile-block('.tile-status--awaiting-internal-transactions', $tile-status-awaiting-internal-transactions);
+    $tile-type-transaction-color
+  );
+  @include generate-tile-block(
+    ".tile-type-contract-call",
+    $tile-type-contract-call-color
+  );
+  @include generate-tile-block(
+    ".tile-type-contract-creation",
+    $tile-type-contract-creation-color
+  );
+  @include generate-tile-block(
+    ".tile-type-token-transfer",
+    $tile-type-token-transfer-color
+  );
+  @include generate-tile-block(
+    ".tile-type-unique-token",
+    $tile-type-unique-token-color
+  );
+  @include generate-tile-block(
+    ".tile-type-unique-token-image",
+    $tile-type-unique-token-image-color
+  );
+  @include generate-tile-block(
+    ".tile-type-internal-transaction",
+    $tile-type-internal-transaction-color
+  );
+  @include generate-tile-block(
+    ".tile-type-api-documentation",
+    $tile-type-api-documentation-color
+  );
+  @include generate-tile-block(
+    '[class*="status--error"]',
+    $tile-status-error-reason
+  );
+  @include generate-tile-block(
+    ".tile-status--awaiting-internal-transactions",
+    $tile-status-awaiting-internal-transactions
+  );
 
   &.n-p {
     padding: 0;
@@ -273,4 +310,4 @@ $tile-padding: 1rem;
       border-radius: 2px;
     }
   }
-}
+}

apps/block_scout_web/assets/css/theme/_base_variables.scss

@@ -3,6 +3,10 @@
 // Variables should follow the `$component-state-property-size` formula for
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
+$dashboard-line-color-price: #8286a9 !default;
+$base-border-color: #e2e5ec !default;
+$common-container-margin: 50px !default;
+
 // stylelint-disable
 $white: #fff !default;
 $gray-100: #f8f9fa !default;

apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss

@@ -9,29 +9,21 @@ $footer-background-color: $primary;
 $footer-title-color: #fff;
 $footer-text-color: $additional-font;
 $footer-item-disc-color: $tertiary;
-.footer-logo { filter: brightness(0) invert(1); }
+$footer-social-icon-color: #5959d8;
 
 // dashboard
-$dashboard-line-color-price: $tertiary; // price left border
+$dashboard-line-color-price: $secondary;
-
+$dashboard-line-color-market: $tertiary;
+$dashboard-banner-gradient-start: #1b1b39;
+$dashboard-banner-gradient-end: #27275f;
 $dashboard-banner-chart-legend-value-color: $additional-font; // chart labels
-
 $dashboard-stats-item-value-color: $additional-font; // stat values
-
 $dashboard-stats-item-border-color: $secondary; // stat border
-
-$dashboard-banner-gradient-start: $primary; // gradient begin
-
-$dashboard-banner-gradient-end: lighten($primary, 5); // gradient end
-
 $dashboard-banner-network-plain-container-background-color: #2d2d69; // stats bg
 
-
 // navigation
-.navbar { box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); } // header shadow
 $header-icon-border-color-hover: $tertiary; // top border on hover
 $header-icon-color-hover: $tertiary; // nav icon on hover
-.dropdown-item:hover, .dropdown-item:focus { background-color: $tertiary !important; } // dropdown item on hover
 
 // buttons
 $btn-line-bg: #fff; // button bg
@@ -39,12 +31,31 @@ $btn-line-color: #27275e; // button border and font color && hover bg color
 $btn-copy-color: #27275e; // btn copy
 $btn-qr-color: #27275e; // btn qr-code
 
-//links & tile
-.tile a { color: $tertiary !important; } // links color for badges
-.tile-type-block {
-    border-left: 4px solid #27275e;
-} // tab active bg
-
 // card
 $card-background-1: $tertiary;
 $card-tab-active: $tertiary;
+
+// ETC theme's idiosyncrasies
+.layout-container {
+  .navbar {
+    box-shadow: 0 0 30px 0 rgba(21, 53, 80, 0.12);
+  }
+
+  .dropdown-item:hover,
+  .dropdown-item.active,
+  .dropdown-item:focus {
+    background-color: $tertiary;
+  }
+
+  .dashboard-banner-container {
+    background-image: linear-gradient(
+      to bottom,
+      $dashboard-banner-gradient-start,
+      $dashboard-banner-gradient-end
+    );
+  }
+
+  .footer-logo {
+    filter: brightness(0) invert(1);
+  }
+}

apps/block_scout_web/assets/css/theme/_neutral_variables.scss

@@ -1,12 +1,3 @@
-// $primary: #262d62;
-// $secondary: #687bf6;
-// $tertiary: #687bf6;
-
-$dashboard-line-color-price: #8286a9 !default;
-
-$base-border-color: #e2e5ec !default;
-$common-container-margin: 50px !default;
-
 // general
 $primary: #5c34a2;
 $secondary: #87e1a9;