diff --git a/CHANGELOG.md b/CHANGELOG.md index 30c3dcb53f..07e601f20d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## Current ### Features +- [#2412](https://github.com/poanetwork/blockscout/pull/2412) - dark theme - [#2391](https://github.com/poanetwork/blockscout/pull/2391) - Controllers Improvements - [#2379](https://github.com/poanetwork/blockscout/pull/2379) - Disable network selector when is empty - [#2374](https://github.com/poanetwork/blockscout/pull/2374) - decode constructor arguments for verified smart contracts @@ -11,10 +12,13 @@ - [#2324](https://github.com/poanetwork/blockscout/pull/2324) - set timeout for loading message on the main page ### Fixes +- [#2416](https://github.com/poanetwork/blockscout/pull/2416) - Fix "page not found" handling in the router - [#2410](https://github.com/poanetwork/blockscout/pull/2410) - preload smart contract for logs decoding +- [#2405](https://github.com/poanetwork/blockscout/pull/2405) - added templates for table loader and tile loader - [#2398](https://github.com/poanetwork/blockscout/pull/2398) - show only one decoded candidate - [#2395](https://github.com/poanetwork/blockscout/pull/2395) - new block loading animation - [#2389](https://github.com/poanetwork/blockscout/pull/2389) - Reduce Lodash lib size (86% of lib methods are not used) +- [#2387](https://github.com/poanetwork/blockscout/pull/2387) - fix not existing keys in transaction json rpc - [#2378](https://github.com/poanetwork/blockscout/pull/2378) - Page performance: exclude moment.js localization files except EN, remove unused css - [#2368](https://github.com/poanetwork/blockscout/pull/2368) - add two columns of smart contract info - [#2375](https://github.com/poanetwork/blockscout/pull/2375) - Update created_contract_code_indexed_at on transaction import conflict diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss index cf79ee46e8..e91df91740 100644 --- a/apps/block_scout_web/assets/css/app.scss +++ b/apps/block_scout_web/assets/css/app.scss @@ -128,6 +128,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "components/new_smart_contract"; @import "components/radio_big"; @import "components/btn_no_border"; +@import "theme/dark-theme"; :export { dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color; @@ -135,4 +136,6 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; dashboardLineColorPrice: $dashboard-line-color-price; primary: $primary; secondary: $secondary; + darkprimary: $dark-primary; + darksecondary: $dark-secondary; } diff --git a/apps/block_scout_web/assets/css/components/_navbar.scss b/apps/block_scout_web/assets/css/components/_navbar.scss index 48c6c50f02..0d892b25ca 100644 --- a/apps/block_scout_web/assets/css/components/_navbar.scss +++ b/apps/block_scout_web/assets/css/components/_navbar.scss @@ -252,4 +252,10 @@ $navbar-logo-width: auto !default; @include media-breakpoint-up(xl) { padding-right: 0; } +} + +.nav-item-networks { + .topnav-nav-link { + transition: none !important; + } } \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_stakes_table.scss b/apps/block_scout_web/assets/css/components/_stakes_table.scss index 79cdc20b38..1831dc4d5b 100644 --- a/apps/block_scout_web/assets/css/components/_stakes_table.scss +++ b/apps/block_scout_web/assets/css/components/_stakes_table.scss @@ -26,6 +26,43 @@ $stakes-table-cell-separation: 25px !default; } } +// Loader +.table-content-loader { + display: inline-block; + height: 24px; + width: 100%; + border-radius: 4px; + background-color: #f5f6fa; + overflow: hidden; + position: relative; + &:before { + width: inherit; + height: inherit; + content: ''; + position: absolute; + background: linear-gradient(to right, #f5f6fa 2%, #eee 18%, #f5f6fa 33%); + animation-duration: 1.7s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-name: placeholderAnimate; + background-size: 1300px; + } +} + +@keyframes placeholderAnimate { + 0%{ background-position: -650px 0; } + 100% { background-position: 650px 0; } +} + +.table-content-pseudo { + td { + &:last-child { + padding-right: 24px !important; + } + } +} + .stakes-table { min-width: fit-content; width: 100%; diff --git a/apps/block_scout_web/assets/css/components/_tile.scss b/apps/block_scout_web/assets/css/components/_tile.scss index dbfd117875..501533ce05 100644 --- a/apps/block_scout_web/assets/css/components/_tile.scss +++ b/apps/block_scout_web/assets/css/components/_tile.scss @@ -349,6 +349,52 @@ $tile-body-a-color: #5959d8 !default; } } +// Loader +.tile-type-loading { + background-color: #fff; + padding-top: 30px; + padding-bottom: 28px; +} + +.tile-loader { + display: inline-block; + height: 20px; + width: 100%; + border-radius: 4px; + background-color: #f5f6fa; + overflow: hidden; + position: relative; + &:before { + width: inherit; + height: inherit; + content: ''; + position: absolute; + background: linear-gradient(to right, #f5f6fa 2%, #eee 18%, #f5f6fa 33%); + animation-duration: 1.7s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-name: tilePlaceholderAnimate; + background-size: 1300px; + } +} + +.tile-label-loader { + height: 14px; + width: 80px; +} + +.tile-address-loader { + & + .tile-address-loader { + margin-top: 6px; + } +} + +@keyframes tilePlaceholderAnimate { + 0%{ background-position: -650px 0; } + 100% { background-position: 650px 0; } +} + // Loading Animation @keyframes playBlockLoadingAnimation { @@ -512,4 +558,4 @@ $cube-quantity: 5; 100% { transform: scale(0); } -} \ No newline at end of file +} 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 9f1b82c887..2238327bd4 100644 --- a/apps/block_scout_web/assets/css/theme/_base_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_base_variables.scss @@ -70,7 +70,10 @@ $colors: map-merge( ); $primary: $indigo !default; +$dark-primary: #9b62ff !default; +$dark-primary-alternate: #9b62ff !default; $secondary: #7dd79f !default; +$dark-secondary: #87e1a9 !default; $tertiary: $purple !default; $success: $green !default; $info: $cyan !default; diff --git a/apps/block_scout_web/assets/css/theme/_dai_variables.scss b/apps/block_scout_web/assets/css/theme/_dai_variables.scss index 50cbcfa290..0c09660240 100644 --- a/apps/block_scout_web/assets/css/theme/_dai_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_dai_variables.scss @@ -62,4 +62,9 @@ $card-tab-active: $secondary; // Badges $badge-neutral-color: #20446e; $badge-neutral-background-color: rgba(#20446e, .1); -$api-text-monospace-color: #20446e; \ No newline at end of file +$api-text-monospace-color: #20446e; + +// Dark theme +$dark-primary: #15bba6; +$dark-secondary: #93d7ff; +$dark-primary-alternate: #15bba6; \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/theme/_dark-theme.scss b/apps/block_scout_web/assets/css/theme/_dark-theme.scss new file mode 100644 index 0000000000..e648e01982 --- /dev/null +++ b/apps/block_scout_web/assets/css/theme/_dark-theme.scss @@ -0,0 +1,470 @@ +$body-dark: #1c1d31; // body background +$dark-bg: #22223a; // hero shade +$dark-light-bg: #282945; // pills bg shade +$dark-light: #313355; // tile light top share +$labels-dark: #8a8dba; // header nav, labels + +// Switcher +.dark-mode-changer { + display: inline-flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + background: transparent; + border: none; + cursor: pointer; + margin-right: 5px; + outline: none !important; + box-shadow: none !important; + transition: .2s ease-in; + &:hover { + opacity: .8; + } + svg path { + fill: #828ba0; + } + &--dark { + svg path { + fill: $dark-primary; + } + } +} + +.dark-theme-applied { + color: #fff; + + // navbar + .navbar.navbar-primary { + background-color: $dark-light-bg; + } + .navbar-brand .navbar-logo { + filter: brightness(0) invert(1); + } + .navbar.navbar-primary .navbar-nav .nav-link { + color: $labels-dark; + .nav-link-icon { + svg path { + fill: $labels-dark; + } + } + &.active, &:hover { + .nav-link-icon { + svg path { + fill: $dark-primary; + } + } + &:before { + background-color: $dark-primary; + } + } + } + .navbar.navbar-primary .form-control { + background-color: $dark-bg; + border-color: $dark-bg; + color: #fff; + &::placeholder { + color: $labels-dark; + } + } + .navbar.navbar-primary .navbar-toggler .navbar-toggler-icon { + filter: invert(1); + } + + // footer + .footer { + background: $dark-light-bg; + color: $labels-dark; + } + .footer-social-icon, + .footer-link { + color: $labels-dark; + } + .footer-social-icon:hover, + .footer-link:hover { + color: #fff; + } + .footer-list ul li::before { + background-color: $dark-secondary; + } + + // hero stats + + .layout-container .dashboard-banner-container { + background-image: none; + background-color: $dark-bg; + } + .dashboard-banner-network-plain-container, + .dashboard-banner-network-plain-container::after { + background-color: $dark-light-bg; + } + .dashboard-banner-network-stats-label, + .dashboard-banner-chart-legend .dashboard-banner-chart-legend-label { + color: $labels-dark; + } + .dashboard-banner-chart-legend .dashboard-banner-chart-legend-item:nth-child(1)::before { + background-color: $dark-primary; + } + .dashboard-banner-network-stats-item::before { + background-color: $dark-secondary; + } + .dashboard-banner-chart-legend .dashboard-banner-chart-legend-item:nth-child(2)::before { + background-color: $dark-secondary; + } + + // main container, layout, cards + .layout-container main { + background-color: $body-dark; + } + + .card { + background-color: $dark-light-bg; + box-shadow: 0 0 30px 0 rgba(23, 24, 41, 0.5); + } + + .card-header { + border-bottom-color: darken($labels-dark, 30); + } + + .address-detail-hash-title { + color: #fff; + } + + .card-tabs { + border-bottom-color: darken($labels-dark, 30); + } + + .card-tab { + background-color: transparent; + &:hover:not(.active) { + background-color: rgba($dark-primary, .15); + color: $dark-primary; + } + &.active { + background-color: $dark-primary-alternate; + color: #fff; + } + } + + .card-background-1 { + background-color: $dark-primary-alternate; + } + + // Components + a { + color: $dark-primary; + } + + .tile { + border-top-color: $dark-light; + border-bottom-color: $dark-light; + border-right-color: $dark-light; + background-color: $dark-light; + color: $labels-dark; + &:not([class^="tile tile-type"]) { + border-left-color: $dark-light; + } + &.tile-type-coin-balance { + border-left-color: $dark-light; + } + .tile-title { + color: #fff; + } + .tile-transaction-type-block { + background-color: transparent; + } + } + .tile-bottom-contents { + background-color: $dark-bg; + } + a.tile-title { + color: #fff !important; + } + .tile.tile-type-block .tile-transaction-type-block a { + color: #fff; + } + .fade-up-blocks-chain .tile-type-block-animation { + background-color: $dark-light; + border-top-color: $dark-light; + border-right-color: $dark-light; + border-bottom-color: $dark-light; + } + .fade-up-blocks-chain .tile-type-block-animation:after { + background-color: $dark-light; + } + .cube-animation-title { + color: $labels-dark; + } + .tile .tile-body a, + .tile span[data-address-hash] { color: $dark-primary; } + .fade-up-blocks-chain .tile-type-block-animation .tile-type-line-up { + background-color: $dark-primary; + } + .tile.tile-type-block { + border-left-color: $dark-primary + } + .tile.tile-type-block .tile-status-label { + color: $dark-primary; + } + .tile.tile-type-block .tile-transaction-type-block { + border-right-color: $dark-primary; + border-top-color: $dark-primary; + border-bottom-color: $dark-primary; + } + .tile .progress { + background-color: rgba(#fff, .2); + } + .tile .progress .progress-bar { + background-color: $dark-primary; + } + .tile .tile-title-lg:not([data-balance-change-sign]) { + color: $dark-primary; + } + + // btns + + .btn-line { + background-color: transparent; + border-color: $dark-primary; + color: $dark-primary; + &:hover { + border-color: $dark-primary; + background-color: $dark-primary; + color: #fff; + } + } + + .btn-copy-icon, .btn-qr-icon { + border-color: $dark-primary; + path { + fill: $dark-primary; + } + &:hover { + background-color: $dark-primary; + path { + fill: #fff; + } + } + } + + // pagination + .pagination-container .pagination .page-link { + color: $labels-dark; + border-color: $dark-light; + background-color: $dark-light; + &:not(.no-hover):hover { + color: #fff; + background-color: $dark-primary; + path { + fill: #fff; + } + } + &[disabled] { + color: $labels-dark; + border-color: $dark-light; + background-color: $dark-light; + } + } + + // dropdown + .dropdown-menu { + background-color: $dark-light; + border-left-color: $dark-light; + border-right-color: $dark-light; + border-bottom-color: $dark-light; + } + + .dropdown-item { + color: #fff; + &:hover { + background-color: rgba(#fff, .1); + } + } + .dropdown-item.active { + background-color: $dark-primary; + } + .btn-dropdown-line { + background-color: $dark-light; + border-color: $dark-light; + color: $labels-dark; + } + + // table + .stakes-table-th { + background-color: $dark-light; + color: $labels-dark; + } + .stakes-td { + border-bottom-color: darken($labels-dark, 30); + } + .table th, .table td { + border-top-color: darken($labels-dark, 30); + } + hr { + border-top-color: darken($labels-dark, 30); + } + + // api's + .api-anchors-list { + background-color: $dark-light; + } + .api-doc-list-item { + border-bottom-color: darken($labels-dark, 30); + } + .card-subtitle, + .api-anchors-list-item-title, + .api-doc-list-item-title { + color: #fff; + } + .api-text-monospace { + color: $dark-primary; + } + .api-text-monospace-background { + background-color: rgba($dark-primary, .15); + } + .badge.badge-neutral { + background-color: rgba($dark-primary, .15); + color: $dark-primary; + } + + // download csv button + .download-all-transactions .download-all-transactions-link svg path { + fill: $dark-primary; + } + + //tooltips + .tooltip .arrow:before { + border-top-color: $dark-primary; + border-bottom-color: $dark-primary; + } + .tooltip > .tooltip-inner {background-color: $dark-primary;} + + //network select + .network-selector-overlay { + background-color: rgba($dark-bg, .9); + } + .network-selector { + background-color: $dark-light-bg; + } + .network-selector-title { + color: #fff; + } + .network-selector-text { + color: $labels-dark; + } + .network-selector-close path { + fill: #fff; + } + .network-selector-search-container { + background-color: $dark-light; + } + .network-selector-search-container path { + fill: $labels-dark; + } + .network-selector-search-input { + color: #fff !important; + &::placeholder { + color: $labels-dark; + } + } + .network-selector-tab { + color: $labels-dark; + &:hover, &.active { + color: #fff; + } + &.active { + &:after { + background-color: $dark-primary; + } + } + } + .network-selector-item, + .network-selector-tabs-container { + border-bottom-color: darken($labels-dark, 30); + } + .network-selector-item-title { + color: #fff; + } + .network-selector-item-type { + color: $labels-dark; + } + .radio .radio-icon { + border-color: $labels-dark + } + .network-selector-item-url:hover .network-selector-item-type { + color: #fff; + } + + //coin dropdown + .token-balance-dropdown.dropdown-menu { + border-color: $dark-light !important; + box-shadow: 0 0 30px 0 rgba(23, 24, 41, 0.5) !important; + } + .token-balance-dropdown .dropdown-search-icon path { + fill: $labels-dark; + } + .token-balance-dropdown .dropdown-search-field { + background-color: $dark-light; + border-color: $dark-light; + color: #fff; + &::placeholder { + color: $labels-dark; + } + } + .token-balance-dropdown[aria-labelledby="dropdown-tokens"] .dropdown-items .dropdown-item:hover { + color: #fff !important; + } + .dropdown-header { + color: $labels-dark; + } + .border-bottom { + border-bottom-color: darken($labels-dark, 30) !important; + } + + // coin balance history chart + .chartjs-render-monitor[data-chart="coinBalanceHistoryChart"] { + filter: brightness(0) invert(1) !important; + } + + // logs search + .logs-search-input, .logs-search-btn, .logs-search-btn-cancel { + background-color: $dark-light; + border-color: $dark-light; + color: #fff; + } + + .logs-search-btn { + color: $labels-dark; + } + + .logs-search-btn { + &:hover { + background-color: $dark-primary; + color: #fff; + } + } + + .logs-search-input { + &::placeholder { + color: $labels-dark; + } + } + + // code + pre { + color: #fff; + } + + // info allert + .alert-info { + color: $labels-dark; + background-color: $dark-light; + border-color: $dark-light; + } + + // dark text + .text-dark { + color: #fff; + } + +} \ No newline at end of file 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 68feab4dfc..dff677d7cc 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 @@ -74,4 +74,9 @@ $card-tab-active: $tertiary; // Badges $badge-neutral-color: $tertiary; $badge-neutral-background-color: rgba($tertiary, .1); -$api-text-monospace-color: $tertiary; \ No newline at end of file +$api-text-monospace-color: $tertiary; + +// Dark theme +$dark-primary: #8588ff; +$dark-secondary: #4ad7a7; +$dark-primary-alternate: #5b5ed8; \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/theme/_ethereum_variables.scss b/apps/block_scout_web/assets/css/theme/_ethereum_variables.scss index 0755d3e4b4..0b5cac0c43 100644 --- a/apps/block_scout_web/assets/css/theme/_ethereum_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_ethereum_variables.scss @@ -56,4 +56,18 @@ $card-tab-active: $secondary; $dashboard-banner-gradient-end ); } +} + +// Dark theme +$dark-primary: #49a2ee; +$dark-secondary: #4ad7a7; +$dark-primary-alternate: #49a2ee; + +.dark-theme-applied { + .dashboard-banner-chart-legend .dashboard-banner-chart-legend-item:nth-child(1)::before { + background-color: $dark-primary !important; + } + .dashboard-banner-chart-legend .dashboard-banner-chart-legend-item:nth-child(2)::before { + background-color: $dark-secondary !important; + } } \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/theme/_goerli_variables.scss b/apps/block_scout_web/assets/css/theme/_goerli_variables.scss index 7900dd4c3b..04f953b477 100644 --- a/apps/block_scout_web/assets/css/theme/_goerli_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_goerli_variables.scss @@ -78,3 +78,8 @@ $card-tab-active: $sub-accent-color; $badge-neutral-color: $sub-accent-color; $badge-neutral-background-color: rgba($sub-accent-color, .1); $api-text-monospace-color: $sub-accent-color; + +// Dark theme +$dark-primary: #e1995a; +$dark-secondary: #aeaeae; +$dark-primary-alternate: #e1995a; \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/theme/_kovan_variables.scss b/apps/block_scout_web/assets/css/theme/_kovan_variables.scss index 351f046726..a4edc629d0 100644 --- a/apps/block_scout_web/assets/css/theme/_kovan_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_kovan_variables.scss @@ -74,4 +74,9 @@ $badge-success-color: #15bba6; $badge-success-background-color: rgba(#15bba6, .1); $badge-neutral-color: $tertiary; $badge-neutral-background-color: rgba($tertiary, .1); -$api-text-monospace-color: $tertiary; \ No newline at end of file +$api-text-monospace-color: $tertiary; + +// Dark theme +$dark-primary: #42e2d7; +$dark-secondary: #1f857f; +$dark-primary-alternate: #1f857f; \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/theme/_lukso_variables.scss b/apps/block_scout_web/assets/css/theme/_lukso_variables.scss index 65f9a73b5f..a7b608bfa8 100644 --- a/apps/block_scout_web/assets/css/theme/_lukso_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_lukso_variables.scss @@ -151,3 +151,20 @@ $dashboard-banner-network-plain-container-height: 150px; $badge-neutral-color: $tertiary; $badge-neutral-background-color: rgba($tertiary, .1); $api-text-monospace-color: $tertiary; + +// Dark theme +$dark-primary: #fdcec4; +$dark-secondary: #a96c55; +$dark-primary-alternate: #a96c55; + +.dark-theme-applied { + .dashboard-banner-network-stats-value { + color: $dark-primary !important; + } + .layout-container .dashboard-banner-container { + background-color: #282945 !important; + } + .dashboard-banner-network-plain-container::after { + box-shadow: none !important; + } +} 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 4033934dd6..120a11c222 100644 --- a/apps/block_scout_web/assets/css/theme/_neutral_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_neutral_variables.scss @@ -71,4 +71,9 @@ $api-text-monospace-color: $primary; .dropdown-items .dropdown-item:hover { color: $primary !important; } -} \ No newline at end of file +} + +// Dark theme +$dark-primary: #9b62ff; +$dark-secondary: #87e1a9; +$dark-primary-alternate: #7e50d0; \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/theme/_poa_variables.scss b/apps/block_scout_web/assets/css/theme/_poa_variables.scss index 4033934dd6..120a11c222 100644 --- a/apps/block_scout_web/assets/css/theme/_poa_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_poa_variables.scss @@ -71,4 +71,9 @@ $api-text-monospace-color: $primary; .dropdown-items .dropdown-item:hover { color: $primary !important; } -} \ No newline at end of file +} + +// Dark theme +$dark-primary: #9b62ff; +$dark-secondary: #87e1a9; +$dark-primary-alternate: #7e50d0; \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/theme/_rinkeby_variables.scss b/apps/block_scout_web/assets/css/theme/_rinkeby_variables.scss index 1e62ea6d69..4fa700c50e 100644 --- a/apps/block_scout_web/assets/css/theme/_rinkeby_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_rinkeby_variables.scss @@ -57,3 +57,8 @@ $card-tab-active: $secondary; ); } } + +// Dark theme +$dark-primary: #38a9f5; +$dark-secondary: #76f1ff; +$dark-primary-alternate: #38a9f5; \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/theme/_ropsten_variables.scss b/apps/block_scout_web/assets/css/theme/_ropsten_variables.scss index 1e62ea6d69..4fa700c50e 100644 --- a/apps/block_scout_web/assets/css/theme/_ropsten_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_ropsten_variables.scss @@ -57,3 +57,8 @@ $card-tab-active: $secondary; ); } } + +// Dark theme +$dark-primary: #38a9f5; +$dark-secondary: #76f1ff; +$dark-primary-alternate: #38a9f5; \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/theme/_rsk_variables.scss b/apps/block_scout_web/assets/css/theme/_rsk_variables.scss index 76029e1a34..d33996a89e 100644 --- a/apps/block_scout_web/assets/css/theme/_rsk_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_rsk_variables.scss @@ -65,3 +65,8 @@ $card-tab-active: $secondary; // Badges $badge-neutral-color: #1a323b; $badge-neutral-background-color: rgba(#1a323b, .1); + +// Dark theme +$dark-primary: #38c5a4; +$dark-secondary: #e39a54; +$dark-primary-alternate: #30ab8d; diff --git a/apps/block_scout_web/assets/css/theme/_sokol_variables.scss b/apps/block_scout_web/assets/css/theme/_sokol_variables.scss index 444cdff178..8d479f397d 100644 --- a/apps/block_scout_web/assets/css/theme/_sokol_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_sokol_variables.scss @@ -72,4 +72,9 @@ $card-tab-active: $sub-accent-color; // Badges $badge-neutral-color: $tertiary; -$badge-neutral-background-color: rgba($tertiary, .1); \ No newline at end of file +$badge-neutral-background-color: rgba($tertiary, .1); + +// Dark theme +$dark-primary: #40bfb2; +$dark-secondary: #25c9ff; +$dark-primary-alternate: #1c9f90; \ No newline at end of file diff --git a/apps/block_scout_web/assets/js/app.js b/apps/block_scout_web/assets/js/app.js index 25de7b2688..89059dd306 100644 --- a/apps/block_scout_web/assets/js/app.js +++ b/apps/block_scout_web/assets/js/app.js @@ -35,6 +35,7 @@ import './pages/favorites' import './pages/network-search' import './pages/layout' import './pages/verification_form' +import './pages/dark-mode-switcher' import './pages/admin/tasks.js' diff --git a/apps/block_scout_web/assets/js/lib/market_history_chart.js b/apps/block_scout_web/assets/js/lib/market_history_chart.js index d54d998580..098faac0a8 100644 --- a/apps/block_scout_web/assets/js/lib/market_history_chart.js +++ b/apps/block_scout_web/assets/js/lib/market_history_chart.js @@ -88,6 +88,17 @@ function getMarketCapData (marketHistoryData, availableSupply) { } } +// colors for light and dark theme +var priceLineColor +var mcapLineColor +if (localStorage.getItem('current-color-mode') === 'dark') { + priceLineColor = sassVariables.darkprimary + mcapLineColor = sassVariables.darksecondary +} else { + priceLineColor = sassVariables.dashboardLineColorPrice + mcapLineColor = sassVariables.dashboardLineColorMarket +} + class MarketHistoryChart { constructor (el, availableSupply, marketHistoryData) { this.price = { @@ -96,8 +107,8 @@ class MarketHistoryChart { data: getPriceData(marketHistoryData), fill: false, pointRadius: 0, - backgroundColor: sassVariables.dashboardLineColorPrice, - borderColor: sassVariables.dashboardLineColorPrice, + backgroundColor: priceLineColor, + borderColor: priceLineColor, lineTension: 0 } this.marketCap = { @@ -106,8 +117,8 @@ class MarketHistoryChart { data: getMarketCapData(marketHistoryData, availableSupply), fill: false, pointRadius: 0, - backgroundColor: sassVariables.dashboardLineColorMarket, - borderColor: sassVariables.dashboardLineColorMarket, + backgroundColor: mcapLineColor, + borderColor: mcapLineColor, lineTension: 0 } this.availableSupply = availableSupply diff --git a/apps/block_scout_web/assets/js/pages/dark-mode-switcher.js b/apps/block_scout_web/assets/js/pages/dark-mode-switcher.js new file mode 100644 index 0000000000..e9e0bdc524 --- /dev/null +++ b/apps/block_scout_web/assets/js/pages/dark-mode-switcher.js @@ -0,0 +1,11 @@ +import $ from 'jquery' + +$('.dark-mode-changer').click(function () { + if (localStorage.getItem('current-color-mode') === 'dark') { + localStorage.setItem('current-color-mode', 'light') + } else { + localStorage.setItem('current-color-mode', 'dark') + } + // reload each theme switch + document.location.reload(true) +}) diff --git a/apps/block_scout_web/lib/block_scout_web/controllers/address_logs_controller.ex b/apps/block_scout_web/lib/block_scout_web/controllers/address_logs_controller.ex index 9e05643187..d3ea4e5303 100644 --- a/apps/block_scout_web/lib/block_scout_web/controllers/address_logs_controller.ex +++ b/apps/block_scout_web/lib/block_scout_web/controllers/address_logs_controller.ex @@ -115,4 +115,6 @@ defmodule BlockScoutWeb.AddressLogsController do not_found(conn) end end + + def search_logs(conn, _), do: not_found(conn) end diff --git a/apps/block_scout_web/lib/block_scout_web/controllers/address_transaction_controller.ex b/apps/block_scout_web/lib/block_scout_web/controllers/address_transaction_controller.ex index 1176e047f4..8f5e5d96d5 100644 --- a/apps/block_scout_web/lib/block_scout_web/controllers/address_transaction_controller.ex +++ b/apps/block_scout_web/lib/block_scout_web/controllers/address_transaction_controller.ex @@ -130,6 +130,8 @@ defmodule BlockScoutWeb.AddressTransactionController do end end + def token_transfers_csv(conn, _), do: not_found(conn) + def transactions_csv(conn, %{"address_id" => address_hash_string}) do with {:ok, address_hash} <- Chain.string_to_address_hash(address_hash_string), {:ok, address} <- Chain.hash_to_address(address_hash) do @@ -149,4 +151,6 @@ defmodule BlockScoutWeb.AddressTransactionController do not_found(conn) end end + + def transactions_csv(conn, _), do: not_found(conn) end diff --git a/apps/block_scout_web/lib/block_scout_web/controllers/chain_controller.ex b/apps/block_scout_web/lib/block_scout_web/controllers/chain_controller.ex index 2c16cd1b03..ba5d547cf0 100644 --- a/apps/block_scout_web/lib/block_scout_web/controllers/chain_controller.ex +++ b/apps/block_scout_web/lib/block_scout_web/controllers/chain_controller.ex @@ -52,6 +52,8 @@ defmodule BlockScoutWeb.ChainController do end end + def search(conn, _), do: not_found(conn) + def token_autocomplete(conn, %{"q" => term}) when is_binary(term) do if term == "" do json(conn, "{}") diff --git a/apps/block_scout_web/lib/block_scout_web/controllers/smart_contract_controller.ex b/apps/block_scout_web/lib/block_scout_web/controllers/smart_contract_controller.ex index 311feb4591..ff0a4e67aa 100644 --- a/apps/block_scout_web/lib/block_scout_web/controllers/smart_contract_controller.ex +++ b/apps/block_scout_web/lib/block_scout_web/controllers/smart_contract_controller.ex @@ -30,6 +30,8 @@ defmodule BlockScoutWeb.SmartContractController do end end + def index(conn, _), do: not_found(conn) + def show(conn, params) do with true <- ajax?(conn), {:ok, address_hash} <- Chain.string_to_address_hash(params["id"]), diff --git a/apps/block_scout_web/lib/block_scout_web/router.ex b/apps/block_scout_web/lib/block_scout_web/router.ex index 4f5a8e1bed..7a1f5b3ed9 100644 --- a/apps/block_scout_web/lib/block_scout_web/router.ex +++ b/apps/block_scout_web/lib/block_scout_web/router.ex @@ -261,6 +261,6 @@ defmodule BlockScoutWeb.Router do get("/api_docs", APIDocsController, :index) get("/eth_rpc_api_docs", APIDocsController, :eth_rpc) - get("/:page", PageNotFoundController, :index) + get("/*path", PageNotFoundController, :index) end end diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex index 3aaab46ad5..c594915d9f 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex @@ -38,7 +38,7 @@ - + <%= render BlockScoutWeb.CommonComponentsView, "_table-loader.html" %> diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_coin_balance/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_coin_balance/index.html.eex index 6b9459f5b3..2e71dd22ca 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address_coin_balance/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address_coin_balance/index.html.eex @@ -40,7 +40,9 @@ -
+
+ <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %> +
<%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %> diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_internal_transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_internal_transaction/index.html.eex index 3bc2e7fe9b..f18638db0d 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address_internal_transaction/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address_internal_transaction/index.html.eex @@ -66,7 +66,9 @@ -
+
+ <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %> +
<%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %> diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_logs/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_logs/index.html.eex index 3a44e0cb2d..fabbc7f7d8 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address_logs/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address_logs/index.html.eex @@ -27,7 +27,9 @@ -
+
+ <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %> +
<%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %> diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_token/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_token/index.html.eex index 840d9cc1da..8510bdca64 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address_token/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address_token/index.html.eex @@ -19,7 +19,9 @@ -
+
+ <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %> +
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_token_transfer/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_token_transfer/index.html.eex index c2ab502bf0..738d70883d 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address_token_transfer/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address_token_transfer/index.html.eex @@ -21,7 +21,9 @@ -
+
+ <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %> +
<%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %> diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex index c3a4c94129..83c5454627 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex @@ -65,7 +65,9 @@
-
+
+ <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %> +
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_validation/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_validation/index.html.eex index 3f85f03aba..03b37369bc 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address_validation/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address_validation/index.html.eex @@ -22,7 +22,9 @@ <%= gettext "Something went wrong, click to reload." %> -
+
+ <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %> +
<%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %> diff --git a/apps/block_scout_web/lib/block_scout_web/templates/block/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/block/index.html.eex index 92b91ce287..dd8a3ed093 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/block/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/block/index.html.eex @@ -11,7 +11,9 @@ <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %> -
+
+ <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %> +
<%= gettext "There are no blocks." %>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/block_transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/block_transaction/index.html.eex index a497ab1b7e..e0847cac86 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/block_transaction/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/block_transaction/index.html.eex @@ -29,7 +29,9 @@
-
+
+ <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %> +
<%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %> diff --git a/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex index 146d84f3c5..69d1f8b6ed 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex @@ -117,13 +117,7 @@ <%= gettext "Something went wrong, click to retry." %> - + <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %> diff --git a/apps/block_scout_web/lib/block_scout_web/templates/common_components/_table-loader.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_table-loader.html.eex new file mode 100644 index 0000000000..ac7cc71f56 --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_table-loader.html.eex @@ -0,0 +1,85 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/common_components/_tile-loader.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_tile-loader.html.eex new file mode 100644 index 0000000000..134613a5d1 --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_tile-loader.html.eex @@ -0,0 +1,72 @@ +
+
+
+ + + + + + +
+
+ + +
+
+ + + + + + +
+
+
+
+
+
+ + + + + + +
+
+ + +
+
+ + + + + + +
+
+
+
+
+
+ + + + + + +
+
+ + +
+
+ + + + + + +
+
+
\ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex index f965f20e0c..2c221e4471 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex @@ -1,8 +1,18 @@ -