From 1bb1ad2dc71b0753c95342e6c75639116f369291 Mon Sep 17 00:00:00 2001 From: Gabriel Rodriguez Alsina Date: Mon, 3 Jun 2019 13:15:55 -0300 Subject: [PATCH 1/6] (fix) dashboard market cap / price colors --- .../assets/css/theme/_ethereum_classic_variables.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss b/apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss index 490ae2376b..6a26d25696 100644 --- a/apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss @@ -12,7 +12,8 @@ $footer-item-disc-color: $tertiary; .footer-logo { filter: brightness(0) invert(1); } // dashboard -$dashboard-line-color-price: $tertiary; // price left border +$dashboard-line-color-price: $secondary; +$dashboard-line-color-market: $tertiary; $dashboard-banner-chart-legend-value-color: $additional-font; // chart labels From 2fd7b666f6245efbbdd92c7cae558c42a14c5348 Mon Sep 17 00:00:00 2001 From: Gabriel Rodriguez Alsina Date: Mon, 3 Jun 2019 13:23:49 -0300 Subject: [PATCH 2/6] (fix) dashboard background color --- .../theme/_ethereum_classic_variables.scss | 49 ++++++++++++------- 1 file changed, 32 insertions(+), 17 deletions(-) diff --git a/apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss b/apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss index 6a26d25696..7d40780d2b 100644 --- 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,30 +9,24 @@ $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-logo { + filter: brightness(0) invert(1); +} // dashboard $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 @@ -40,12 +34,33 @@ $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; + +// CSS theme's idiosyncrasies +.layout-container { + .navbar { + box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); + } // header shadow + + .dropdown-item:hover, + .dropdown-item:focus { + background-color: $tertiary !important; + } // dropdown item on hover + + .dashboard-banner-container { + background-image: linear-gradient( + to bottom, + $dashboard-banner-gradient-start, + $dashboard-banner-gradient-end + ); + } + + .tile a { + color: $tertiary !important; + } + .tile-type-block { + border-left: 4px solid #27275e; + } +} From 3bf81cd233dd21d36465a51d14bdee754f6c98c5 Mon Sep 17 00:00:00 2001 From: Gabriel Rodriguez Alsina Date: Mon, 3 Jun 2019 15:25:46 -0300 Subject: [PATCH 3/6] (fix) moved base variables --- .../assets/css/theme/_base_variables.scss | 4 ++++ .../assets/css/theme/_neutral_variables.scss | 9 --------- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/apps/block_scout_web/assets/css/theme/_base_variables.scss b/apps/block_scout_web/assets/css/theme/_base_variables.scss index 0d428a7194..777b9bd063 100644 --- 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; diff --git a/apps/block_scout_web/assets/css/theme/_neutral_variables.scss b/apps/block_scout_web/assets/css/theme/_neutral_variables.scss index c2232fd0a8..40878c5402 100644 --- 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; From e2eb9542a1f304f154c91a49b17ae7799ed703c3 Mon Sep 17 00:00:00 2001 From: Gabriel Rodriguez Alsina Date: Mon, 3 Jun 2019 15:30:28 -0300 Subject: [PATCH 4/6] (fix) tile color --- .../assets/css/components/_tile.scss | 111 ++++++++++++------ 1 file changed, 74 insertions(+), 37 deletions(-) diff --git a/apps/block_scout_web/assets/css/components/_tile.scss b/apps/block_scout_web/assets/css/components/_tile.scss index 71cabbd1b3..0680729d1d 100644 --- 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; } } -} \ No newline at end of file +} From b3f8061bab386682fa8afff66cb4d11ae676b0e4 Mon Sep 17 00:00:00 2001 From: Gabriel Rodriguez Alsina Date: Mon, 3 Jun 2019 15:31:38 -0300 Subject: [PATCH 5/6] (update) etc styles --- .../theme/_ethereum_classic_variables.scss | 23 ++++++++----------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss b/apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss index 7d40780d2b..fadc5f2720 100644 --- 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,14 +9,11 @@ $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: $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 @@ -38,16 +35,17 @@ $btn-qr-color: #27275e; // btn qr-code $card-background-1: $tertiary; $card-tab-active: $tertiary; -// CSS theme's idiosyncrasies +// ETC theme's idiosyncrasies .layout-container { .navbar { - box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); - } // header shadow + box-shadow: 0 0 30px 0 rgba(21, 53, 80, 0.12); + } .dropdown-item:hover, + .dropdown-item.active, .dropdown-item:focus { - background-color: $tertiary !important; - } // dropdown item on hover + background-color: $tertiary; + } .dashboard-banner-container { background-image: linear-gradient( @@ -57,10 +55,7 @@ $card-tab-active: $tertiary; ); } - .tile a { - color: $tertiary !important; - } - .tile-type-block { - border-left: 4px solid #27275e; + .footer-logo { + filter: brightness(0) invert(1); } } From 135bc23b0baba45218cede552969b9acb14679f2 Mon Sep 17 00:00:00 2001 From: Gabriel Rodriguez Alsina Date: Mon, 3 Jun 2019 15:46:54 -0300 Subject: [PATCH 6/6] (update) changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f94e33f2b7..3a0a9f7c95 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,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 - [#2082](https://github.com/poanetwork/blockscout/pull/2082) - dropdown styles, tooltip gap fix, 404 page added - [#2077](https://github.com/poanetwork/blockscout/pull/2077) - ui issues - [#2072](https://github.com/poanetwork/blockscout/pull/2072) - Fixed checkmarks not showing correctly in tabs.