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

(Fix) ETC theme fixes
6 years ago · 07398f7e22
parent 8f18db5904 a26204f614
commit 07398f7e22
5 changed files with 109 additions and 65 deletions
--- a/CHANGELOG.md
+++ b/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
--- a/apps/block_scout_web/assets/css/components/_tile.scss
+++ b/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('.tile-type-uncle', $tile-type-uncle-color);
-  @include generate-tile-block('.tile-type-reorg', $tile-type-reorg-color);
-  @include generate-tile-block('.tile-type-emission-reward', $tile-type-emission-reward-color);
-  @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-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);
+  @include generate-tile-block(
+    ".tile-type-block",
+    $tile-type-block-color,
+    darken($tile-type-block-color, 20%)
+  );
+  @include generate-tile-block(".tile-type-uncle", $tile-type-uncle-color);
+  @include generate-tile-block(".tile-type-reorg", $tile-type-reorg-color);
+  @include generate-tile-block(
+    ".tile-type-emission-reward",
+    $tile-type-emission-reward-color
+  );
+  @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-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;
    }
  }
-}
+}
--- a/apps/block_scout_web/assets/css/theme/_base_variables.scss
+++ b/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;
--- a/apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss
+++ b/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);
+  }
+}
--- a/apps/block_scout_web/assets/css/theme/_neutral_variables.scss
+++ b/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;