Merge pull request #2110 from maxgrapps/master

Themes issues, ui issues

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Features
 
 ### Fixes
+- [#2110](https://github.com/poanetwork/blockscout/pull/2110) - themes colors issues, ui issues
 - [#2103](https://github.com/poanetwork/blockscout/pull/2103) - ui issues for all themes
 - [#2090](https://github.com/poanetwork/blockscout/pull/2090) - updated some ETC theme colors
 - [#2096](https://github.com/poanetwork/blockscout/pull/2096) - RSK theme fixes

apps/block_scout_web/assets/css/_mixins.scss

@@ -88,7 +88,7 @@
   outline: none;
   padding: 0 15px;
   text-decoration: none;
-  transition: all 0.15s;
+  transition: $transition-cont;
   white-space: nowrap;
   width: fit-content;
 
@@ -137,9 +137,10 @@
   outline: none;
   padding: 0 15px;
   text-decoration: none;
-  transition: all 0.15s;
+  transition: $transition-cont;
   white-space: nowrap;
   width: fit-content;
+  font-weight: 400;
 
   &:hover {
     background-color: $text-color;
@@ -182,7 +183,7 @@
   display: flex;
   height: $dimensions;
   justify-content: center;
-  transition: all 0.15s;
+  transition: $transition-cont;
   width: $dimensions;
 
   svg {
@@ -193,6 +194,7 @@
 
   path {
     fill: $color;
+    transition: $transition-cont;
   }
 
   &:hover {

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

@@ -1,5 +1,6 @@
 $btn-dropdown-line-bg: #fff !default;
 $btn-dropdown-line-color: #e2e5ec !default;
+$btn-dropdown-line-color-hover: #f5f6fa !default;
 $btn-dropdown-line-font: #333;
 
 .btn-dropdown-line {
@@ -9,8 +10,8 @@ $btn-dropdown-line-font: #333;
   outline: none !important;
 
   &:hover {
-    background-color: $btn-dropdown-line-color;
+    background-color: $btn-dropdown-line-color-hover;
-    border-color: $btn-dropdown-line-color;
+    border-color: $btn-dropdown-line-color-hover;
     color: $btn-dropdown-line-font;
   }
 }

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

@@ -3,5 +3,4 @@ $btn-qr-dimensions: 31px !default;
 
 .btn-qr-icon {
   @include square-icon-button($btn-qr-color, $btn-qr-dimensions);
-  transition: $transition-base !important;
 }

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

@@ -10,7 +10,7 @@ $button-secondary-color: $secondary !default;
   padding: 10px 16px;
   text-align: center;
   text-decoration: none;
-  transition: all 0.25s;
+  transition: $transition-cont;
   white-space: nowrap;
 
   &-primary {

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

@@ -176,10 +176,10 @@ $card-tab-icon-color-active: #20b760 !default;
   height: 70px;
   padding: 0 25px;
   text-align: center;
-  transition: $transition-base;
+  transition: $transition-cont;
 
   &:hover {
-    background-color: rgba($card-tab-active, .1);
+    background-color: rgba($card-tab-active, .15);
     color: $card-tab-active;
     text-decoration: none;
   }

apps/block_scout_web/assets/css/components/_dashboard-banner.scss

@@ -16,30 +16,15 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
 
 .dashboard-banner-container {
   @include gradient-container();
-
+  margin-bottom: 3rem;
+  overflow: hidden;
   padding: 0;
   position: relative;
-
-  &::after {
-    background-color: $dashboard-banner-network-plain-container-background-color;
-    bottom: 0;
-    content: "";
-    display: block;
-    height: $dashboard-banner-network-plain-container-height;
-    left: 70%;
-    position: absolute;
-    right: 0;
-
-    @include media-breakpoint-down(md) {
-      display: none;
-    }
-  }
 }
 
 .dashboard-banner {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 3rem;
   position: relative;
   z-index: 9;
 
@@ -148,6 +133,7 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
   max-width: 100%;
   padding: 30px 0 30px 60px;
   width: 750px;
+  position: relative;
 
   @include media-breakpoint-down(md) {
     border-top-right-radius: 10px;
@@ -158,11 +144,30 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
     max-width: 100%;
     padding: 20px 0 20px 20px;
     width: 250px;
+    box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.2);
   }
 
   @include media-breakpoint-down(sm) {
     width: 100%;
   }
+
+  &::after {
+    background-color: $dashboard-banner-network-plain-container-background-color;
+    bottom: 0;
+    content: "";
+    display: block;
+    height: $dashboard-banner-network-plain-container-height;
+    left: 0;
+    position: absolute;
+    width: 9999px;
+    z-index: -1;
+    box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.2);
+    border-top-left-radius: 10px;
+
+    @include media-breakpoint-down(md) {
+      display: none;
+    }
+  }
 }
 
 .dashboard-banner-network-stats {

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

@@ -1,12 +1,12 @@
 $dropdown-menu-item-color: #333 !default;
-$dropdown-menu-item-hover-color: $primary !default;
+$dropdown-menu-item-hover-color: $secondary !default;
-$dropdown-menu-item-hover-background: rgba($primary, .1) !default;
+$dropdown-menu-item-hover-background: rgba($secondary, .1) !default;
 
 // These styles extend the default Bootstrap styles
 .dropdown-menu {
   border-bottom: 1px solid #e2e5ec;
   border-left: 1px solid #e2e5ec;
-  border-radius: 0 0 8px 8px !important;
+  border-radius: 0 0 2px 2px !important;
   border-right: 1px solid #e2e5ec;
   border-top: none;
   box-shadow: $box-shadow;
@@ -34,13 +34,13 @@ $dropdown-menu-item-hover-background: rgba($primary, .1) !default;
   color: $dropdown-menu-item-color;
   font-size: 12px;
   padding: 10px 20px;
-  transition: $transition-base;
+  transition: $transition-cont;
 
   & {
     &.active,
     &:hover,
     &:focus {
-      background-color: $dropdown-menu-item-hover-background !important;
+      background-color: $dropdown-menu-item-hover-background;
       color: $dropdown-menu-item-hover-color;
     }
   }
@@ -51,8 +51,8 @@ $dropdown-menu-item-hover-background: rgba($primary, .1) !default;
   }
 
   &:last-child {
-    border-bottom-left-radius: 8px;
+    border-bottom-left-radius: 2px;
-    border-bottom-right-radius: 8px;
+    border-bottom-right-radius: 2px;
   }
 
   &.header {
@@ -72,6 +72,10 @@ $dropdown-menu-item-hover-background: rgba($primary, .1) !default;
   }
 }
 
+.navbar .dropdown-menu {
+  border: none;
+}
+
 .dropdown-search-icon {
   color: $gray-300;
   left: 8px;

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

@@ -4,7 +4,7 @@ $footer-text-color: rgba(#fff, 0.7) !default;
 $footer-link-color: $footer-text-color !default;
 $footer-item-disc-color: $primary !default;
 $footer-social-icon-color: $footer-text-color !default;
-$footer-logo-height: 18px !default;
+$footer-logo-height: 28px !default;
 $footer-logo-width: auto !default;
 
 .footer {
@@ -46,7 +46,7 @@ $footer-logo-width: auto !default;
   font-size: 22px;
   margin-right: 15px;
   text-decoration: none;
-  transition: $transition-base;
+  transition: $transition-cont;
 
   &:hover {
     color: #fff;
@@ -93,7 +93,7 @@ $footer-logo-width: auto !default;
       padding: 0;
 
       a {
-        transition: $transition-base;
+        transition: $transition-cont;
         &:hover {
           text-decoration: none;
           color: #fff;

apps/block_scout_web/assets/css/components/_log-search.scss

@@ -12,7 +12,7 @@
 .logs-search {
 	display: flex;
 	position: relative;
-	width: 52%;
+	flex: 2;
 	@media (max-width: 599px) {
 		margin-bottom: 30px;
 		width: 100%;
@@ -29,6 +29,7 @@
 	font-family: Nunito, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     font-size: 12px;
     font-weight: 600;
+    -webkit-appearance: none;
 }
 
 .logs-search-input {
@@ -36,8 +37,10 @@
     display: inline-flex;
     flex-grow: 2;
     min-width: 160px;
+    font-weight: 300 !important;
     &::placeholder {
-    	color: #a3a9b5; 
+    	color: #a3a9b5;
+    	font-weight: 300 !important;
     }
 }
 

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

@@ -46,4 +46,18 @@ $modal-gray-background: #f6f7f9 !default;
 .modal-content {
   border-radius: $modal-border-radius;
   position: relative;
+  .btn-primary {
+    box-shadow: none !important;
+    background-color: $btn-line-color;
+    border: 1px solid $btn-line-color;
+    &:hover {
+      background-color: $btn-line-color;
+      border-color: $btn-line-color;
+    }
+    &:focus,
+    &:active {
+      background-color: darken($btn-line-color, 10%) !important;
+      border-color: darken($btn-line-color, 10%) !important;
+    }
+  }
 }

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

@@ -3,14 +3,14 @@ $header-background-color: #fff !default;
 $header-links-color: #828ba0 !default;
 $header-links-color-active: #333 !default;
 $header-icon-color: $header-links-color !default;
-$header-icon-color-hover: #333 !default;
+$header-icon-color-hover: $secondary !default;
-$header-icon-border-color-hover: $primary !default;
+$header-icon-border-color-hover: $secondary !default;
 $header-toggler-icon: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{transparentize($primary, 0.5)}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E" !default;
 $header-textfield-text-color: $header-links-color !default;
 $header-textfield-background-color: #f5f6fa !default;
 $header-textfield-magnifier-color: $header-links-color !default;
 $header-link-horizontal-padding: 0.71rem;
-$navbar-logo-height: 18px !default;
+$navbar-logo-height: 28px !default;
 $navbar-logo-width: auto !default;
 
 .navbar.navbar-primary {
@@ -30,7 +30,7 @@ $navbar-logo-width: auto !default;
       display: flex;
       font-size: 14px;
       position: relative;
-      transition: $transition-base;
+      transition: $transition-cont;
 
       &:before {
         background-color: $header-icon-border-color-hover;
@@ -43,7 +43,7 @@ $navbar-logo-width: auto !default;
         position: absolute;
         top: -10px;
         transform: translateX(-50%);
-        transition: all 0.2s ease;
+        transition: $transition-cont;
         width: calc(
           100% - #{$header-link-horizontal-padding} - #{$header-link-horizontal-padding}
         );
@@ -78,7 +78,7 @@ $navbar-logo-width: auto !default;
 
         path {
           fill: $header-icon-color;
-          transition: $transition-base;
+          transition: $transition-cont;
         }
       }
     }

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

@@ -17,6 +17,10 @@ $pagination-page-link-color-active: #fff !default;
   display: flex;
   justify-content: space-between;
 
+  &[disabled] {
+    display: none;
+  }
+
   @include media-breakpoint-down(sm) {
     flex-direction: column;
   }
@@ -109,5 +113,10 @@ $pagination-page-link-color-active: #fff !default;
       }
     }
   }
+}
 
+.logs-topbar .pagination-container {
+  @media (min-width: 600px) {
+    margin-left: 80px;
+  }
 }

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

@@ -1,4 +1,4 @@
-$tooltip-background-color: $primary !default;
+$tooltip-background-color: $btn-line-color !default;
 $tooltip-color: #fff !default;
 
 .tooltip {

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

@@ -244,6 +244,7 @@ $caret-width: 0.3em !default;
 $transition-base: all 0.2s ease-in-out !default;
 $transition-fade: opacity 0.15s linear !default;
 $transition-collapse: height 0.35s ease !default;
+$transition-cont: all 0.4s ease-in-out !default;
 
 // Fonts
 //

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

@@ -2,21 +2,24 @@
 $primary: #17314f;
 $secondary: #69b9d7;
 $tertiary: #15bba6;
-$additional-font: #ffffff;
+$additional-font: #fff;
 
 // footer
 $footer-background-color: $primary;
 $footer-title-color: #fff;
-$footer-text-color: #909dab;
+$footer-text-color: #fff;
-$footer-item-disc-color: $tertiary;
+$footer-item-disc-color: $secondary;
 .footer-logo { filter: brightness(0) invert(1); }
 
 // dashboard
 $dashboard-line-color-price: $tertiary; // price left border
 
-$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels
+$dashboard-line-color-market: $secondary;
 
-$dashboard-stats-item-value-color: $additional-font; // stat values
+$dashboard-banner-chart-legend-label-color: $tertiary;
+$dashboard-stats-item-label-color: $tertiary;
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
 
 $dashboard-stats-item-border-color: $secondary; // stat border
 
@@ -29,22 +32,29 @@ $dashboard-banner-network-plain-container-background-color: #20446e; // stats bg
 
 // navigation
 .navbar { box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); } // header shadow
-$header-icon-border-color-hover: $secondary; // top border on hover
-$header-icon-color-hover: $secondary; // nav icon on hover
-.dropdown-item:hover, .dropdown-item:focus { background-color: $secondary !important; } // dropdown item on hover
 
 // buttons
 $btn-line-bg: #fff; // button bg
-$btn-line-color: $primary; // button border and font color && hover bg color
+$btn-line-color: $tertiary; // button border and font color && hover bg color
-$btn-copy-color: $primary; // btn copy
+$btn-copy-color: $tertiary; // btn copy
-$btn-qr-color: $primary; // btn qr-code
+$btn-qr-color: $tertiary; // btn qr-code
 
 //links & tile
-.tile a { color: $tertiary !important; } // links color for badges
+$tile-body-a-color: $tertiary;
-.tile-type-block {
+$tile-type-block-color: $tertiary;
-    border-left: 4px solid $primary;
+$tile-type-progress-bar-color: $tertiary;
-} // tab active bg
+a.tile-title { color: $tertiary !important; }
 
 // card
-$card-background-1: #1b395c;
+$card-background-1: $secondary;
-$card-tab-active: $tertiary;
+$card-tab-active: $secondary;
+
+.layout-container {
+	.dashboard-banner-container {
+	  background-image: linear-gradient(
+	    to bottom,
+	    $dashboard-banner-gradient-start,
+	    $dashboard-banner-gradient-end
+	  );
+	}
+}

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

@@ -16,8 +16,12 @@ $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-banner-chart-legend-label-color: $additional-font;
+$dashboard-stats-item-label-color: $additional-font;
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
+
 $dashboard-stats-item-border-color: $secondary; // stat border
 $dashboard-banner-network-plain-container-background-color: #2d2d69; // stats bg
 
@@ -27,9 +31,15 @@ $header-icon-color-hover: $tertiary; // nav icon on hover
 
 // buttons
 $btn-line-bg: #fff; // button bg
-$btn-line-color: #27275e; // button border and font color && hover bg color
+$btn-line-color: $tertiary; // button border and font color && hover bg color
-$btn-copy-color: #27275e; // btn copy
+$btn-copy-color: $tertiary; // btn copy
-$btn-qr-color: #27275e; // btn qr-code
+$btn-qr-color: $tertiary; // btn qr-code
+
+//links & tile
+$tile-body-a-color: $tertiary;
+$tile-type-block-color: $tertiary;
+$tile-type-progress-bar-color: $tertiary;
+a.tile-title { color: $tertiary !important; }
 
 // card
 $card-background-1: $tertiary;
@@ -44,7 +54,8 @@ $card-tab-active: $tertiary;
   .dropdown-item:hover,
   .dropdown-item.active,
   .dropdown-item:focus {
-    background-color: $tertiary;
+    background-color: rgba($tertiary, .1) !important;
+    color: $tertiary !important;
   }
 
   .dashboard-banner-container {

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

@@ -10,13 +10,15 @@ $footer-title-color: #fff;
 $footer-text-color: #89cae6;
 $footer-item-disc-color: $secondary;
 .footer-logo { filter: brightness(0) invert(1); }
+.footer-social-icons .footer-social-icon { color: $secondary; }
 
 // dashboard
 $dashboard-line-color-price: $tertiary; // price left border
 
-$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels
+$dashboard-banner-chart-legend-label-color: #89cae6;
-
+$dashboard-stats-item-label-color: #89cae6;
-$dashboard-stats-item-value-color: $additional-font; // stat values
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
 
 $dashboard-stats-item-border-color: $secondary; // stat border
 
@@ -29,9 +31,6 @@ $dashboard-banner-network-plain-container-background-color: #1c476c; // stats bg
 
 // navigation
 .navbar { box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); } // header shadow
-$header-icon-border-color-hover: $secondary; // top border on hover
-$header-icon-color-hover: $secondary; // nav icon on hover
-.dropdown-item:hover, .dropdown-item:focus { background-color: $secondary !important; } // dropdown item on hover
 
 // buttons
 $btn-line-bg: #fff; // button bg
@@ -40,11 +39,21 @@ $btn-copy-color: $secondary; // btn copy
 $btn-qr-color: $secondary; // btn qr-code
 
 //links & tile
-.tile a { color: $secondary !important; } // links color for badges
+$tile-body-a-color: $secondary;
-.tile-type-block {
+$tile-type-block-color: $secondary;
-    border-left: 4px solid $secondary;
+$tile-type-progress-bar-color: $secondary;
-} // tab active bg
+a.tile-title { color: $secondary !important; }
 
 // card
 $card-background-1: $secondary;
 $card-tab-active: $secondary;
+
+.layout-container {
+	.dashboard-banner-container {
+	  background-image: linear-gradient(
+	    to bottom,
+	    $dashboard-banner-gradient-start,
+	    $dashboard-banner-gradient-end
+	  );
+	}
+}

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

@@ -12,11 +12,14 @@ $footer-item-disc-color: $secondary;
 .footer-logo { filter: brightness(0) invert(1); }
 
 // dashboard
-$dashboard-line-color-price: $tertiary; // price left border
+$dashboard-line-color-price: $secondary;
 
-$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels
+$dashboard-line-color-market: $tertiary;
 
-$dashboard-stats-item-value-color: $additional-font; // stat values
+$dashboard-banner-chart-legend-label-color: $tertiary;
+$dashboard-stats-item-label-color: $tertiary;
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
 
 $dashboard-stats-item-border-color: $secondary; // stat border
 
@@ -29,22 +32,39 @@ $dashboard-banner-network-plain-container-background-color: #424242; // stats bg
 
 // navigation
 .navbar { box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); } // header shadow
-$header-icon-border-color-hover: $secondary; // top border on hover
-$header-icon-color-hover: $secondary; // nav icon on hover
-.dropdown-item:hover, .dropdown-item:focus { background-color: $secondary !important; } // dropdown item on hover
 
 // buttons
 $btn-line-bg: #fff; // button bg
-$btn-line-color: #424242; // button border and font color && hover bg color
+$btn-line-color: #a46f30; // button border and font color && hover bg color
-$btn-copy-color: #424242; // btn copy
+$btn-copy-color: #a46f30; // btn copy
-$btn-qr-color: #424242; // btn qr-code
+$btn-qr-color: #a46f30; // btn qr-code
 
 //links & tile
-.tile a { color: #a46f30 !important; } // links color for badges
+$tile-body-a-color: #a46f30;
-.tile-type-block {
+$tile-type-block-color: #a46f30;
-    border-left: 4px solid $secondary;
+$tile-type-progress-bar-color: #a46f30;
-} // tab active bg
+a.tile-title { color: #a46f30 !important; }
 
 // card
-$card-background-1: $secondary;
+$card-background-1: #a46f30;
-$card-tab-active: $secondary;
+$card-tab-active: #a46f30;
+
+// dropdown
+.dropdown-item {
+    &:hover,
+    &:active,
+    &.active {
+      background-color: rgba(#a46f30, .1) !important;
+      color: #a46f30 !important;
+    }
+}
+
+.layout-container {
+	.dashboard-banner-container {
+	  background-image: linear-gradient(
+	    to bottom,
+	    $dashboard-banner-gradient-start,
+	    $dashboard-banner-gradient-end
+	  );
+	}
+}

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

@@ -7,16 +7,17 @@ $additional-font: #99fff9;
 // footer
 $footer-background-color: $primary;
 $footer-title-color: #fff;
-$footer-text-color: $secondary;
+$footer-text-color: $additional-font;
-$footer-item-disc-color: $secondary;
+$footer-item-disc-color: $additional-font;
 .footer-logo { filter: brightness(0) invert(1); }
 
 // dashboard
 $dashboard-line-color-price: $tertiary; // price left border
 
-$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels
+$dashboard-banner-chart-legend-label-color: $additional-font;
-
+$dashboard-stats-item-label-color: $additional-font;
-$dashboard-stats-item-value-color: $additional-font; // stat values
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
 
 $dashboard-stats-item-border-color: $secondary; // stat border
 
@@ -29,9 +30,8 @@ $dashboard-banner-network-plain-container-background-color: #1a323b; // 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-border-color-hover: $tertiary;
-$header-icon-color-hover: $tertiary; // nav icon on hover
+$header-icon-color-hover: $tertiary;
-.dropdown-item:hover, .dropdown-item:focus { background-color: $tertiary !important; } // dropdown item on hover
 
 // buttons
 $btn-line-bg: #fff; // button bg
@@ -40,11 +40,31 @@ $btn-copy-color: $tertiary; // btn copy
 $btn-qr-color: $tertiary; // btn qr-code
 
 //links & tile
-.tile a { color: $tertiary !important; } // links color for badges
+$tile-body-a-color: $tertiary;
-.tile-type-block {
+$tile-type-block-color: $tertiary;
-    border-left: 4px solid $tertiary;
+$tile-type-progress-bar-color: $tertiary;
-} // tab active bg
+a.tile-title { color: $tertiary !important; }
 
 // card
-$card-background-1: $primary;
+$card-background-1: $tertiary;
-$card-tab-active: $primary;
+$card-tab-active: $tertiary;
+
+// dropdown
+.dropdown-item {
+    &:hover,
+    &:active,
+    &.active {
+      background-color: rgba($tertiary, .1) !important;
+      color: $tertiary !important;
+    }
+}
+
+.layout-container {
+	.dashboard-banner-container {
+	  background-image: linear-gradient(
+	    to bottom,
+	    $dashboard-banner-gradient-start,
+	    $dashboard-banner-gradient-end
+	  );
+	}
+}

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

@@ -14,9 +14,10 @@ $footer-item-disc-color: $secondary;
 // dashboard
 $dashboard-line-color-price: $tertiary; // price left border
 
-$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels
+$dashboard-banner-chart-legend-label-color: #dcc8ff;
-
+$dashboard-stats-item-label-color: $dashboard-banner-chart-legend-label-color;
-$dashboard-stats-item-value-color: $additional-font; // stat values
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
 
 $dashboard-stats-item-border-color: $secondary; // stat border
 
@@ -24,14 +25,15 @@ $dashboard-banner-gradient-start: $primary; // gradient begin
 
 $dashboard-banner-gradient-end: lighten($primary, 5); // gradient end
 
-$dashboard-banner-network-plain-container-background-color: #865bd4; // stats bg
+$dashboard-banner-network-plain-container-background-color: #8258cd; // stats bg
 
 
 // navigation
 .navbar { box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); } // header shadow
-$header-icon-border-color-hover: $primary; // top border on hover
+$dropdown-menu-item-hover-color: $primary !default;
-$header-icon-color-hover: $primary; // nav icon on hover
+$dropdown-menu-item-hover-background: rgba($primary, .1) !default;
-.dropdown-item:hover, .dropdown-item:focus { background-color: $primary !important; } // dropdown item on hover
+$header-icon-color-hover: $primary;
+$header-icon-border-color-hover: $primary;
 
 // buttons
 $btn-line-bg: #fff; // button bg
@@ -40,23 +42,21 @@ $btn-copy-color: $primary; // btn copy
 $btn-qr-color: $primary; // btn qr-code
 
 //links & tile
-.tile a { color: $primary !important; } // links color for badges
+$tile-body-a-color: $primary;
-.tile-type-block {
+$tile-type-block-color: $primary;
-    border-left: 4px solid $primary;
+$tile-type-progress-bar-color: $primary;
-} // tab active bg
+a.tile-title { color: $primary !important; }
 
 // card
 $card-background-1: $primary;
 $card-tab-active: $primary;
 
-.footer {
+.layout-container {
-  .tooltip {
+	.dashboard-banner-container {
-    .tooltip-inner  {
+	  background-image: linear-gradient(
-      background-color: darken($footer-background-color, 10) !important;
+	    to bottom,
-    }
+	    $dashboard-banner-gradient-start,
-    .arrow::before {
+	    $dashboard-banner-gradient-end
-      border-top-color: darken($footer-background-color, 10) !important;
+	  );
-      border-bottom-color: darken($footer-background-color, 10) !important;
+	}
-    }
+}
-  }
-}

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

@@ -14,9 +14,10 @@ $footer-item-disc-color: $secondary;
 // dashboard
 $dashboard-line-color-price: $tertiary; // price left border
 
-$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels
+$dashboard-banner-chart-legend-label-color: #dcc8ff;
-
+$dashboard-stats-item-label-color: $dashboard-banner-chart-legend-label-color;
-$dashboard-stats-item-value-color: $additional-font; // stat values
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
 
 $dashboard-stats-item-border-color: $secondary; // stat border
 
@@ -24,14 +25,15 @@ $dashboard-banner-gradient-start: $primary; // gradient begin
 
 $dashboard-banner-gradient-end: lighten($primary, 5); // gradient end
 
-$dashboard-banner-network-plain-container-background-color: #865bd4; // stats bg
+$dashboard-banner-network-plain-container-background-color: #8258cd; // stats bg
 
 
 // navigation
 .navbar { box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); } // header shadow
-$header-icon-border-color-hover: $primary; // top border on hover
+$dropdown-menu-item-hover-color: $primary !default;
-$header-icon-color-hover: $primary; // nav icon on hover
+$dropdown-menu-item-hover-background: rgba($primary, .1) !default;
-.dropdown-item:hover, .dropdown-item:focus { background-color: $primary !important; } // dropdown item on hover
+$header-icon-color-hover: $primary;
+$header-icon-border-color-hover: $primary;
 
 // buttons
 $btn-line-bg: #fff; // button bg
@@ -40,11 +42,21 @@ $btn-copy-color: $primary; // btn copy
 $btn-qr-color: $primary; // btn qr-code
 
 //links & tile
-.tile a { color: $primary !important; } // links color for badges
+$tile-body-a-color: $primary;
-.tile-type-block {
+$tile-type-block-color: $primary;
-    border-left: 4px solid $primary;
+$tile-type-progress-bar-color: $primary;
-} // tab active bg
+a.tile-title { color: $primary !important; }
 
 // card
 $card-background-1: $primary;
 $card-tab-active: $primary;
+
+.layout-container {
+	.dashboard-banner-container {
+	  background-image: linear-gradient(
+	    to bottom,
+	    $dashboard-banner-gradient-start,
+	    $dashboard-banner-gradient-end
+	  );
+	}
+}

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

@@ -14,9 +14,10 @@ $footer-item-disc-color: $additional-font;
 // dashboard
 $dashboard-line-color-price: $tertiary; // price left border
 
-$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels
+$dashboard-banner-chart-legend-label-color: $additional-font;
-
+$dashboard-stats-item-label-color: $additional-font;
-$dashboard-stats-item-value-color: $additional-font; // stat values
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
 
 $dashboard-stats-item-border-color: $tertiary; // stat border
 
@@ -29,9 +30,6 @@ $dashboard-banner-network-plain-container-background-color: #244468; // 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,11 +38,21 @@ $btn-copy-color: $tertiary; // btn copy
 $btn-qr-color: $tertiary; // btn qr-code
 
 //links & tile
-.tile a { color: $tertiary !important; } // links color for badges
+$tile-body-a-color: $tertiary;
-.tile-type-block {
+$tile-type-block-color: $tertiary;
-    border-left: 4px solid $tertiary;
+$tile-type-progress-bar-color: $tertiary;
-} // tab active bg
+a.tile-title { color: $tertiary !important; }
 
 // card
 $card-background-1: $secondary;
 $card-tab-active: $secondary;
+
+.layout-container {
+	.dashboard-banner-container {
+	  background-image: linear-gradient(
+	    to bottom,
+	    $dashboard-banner-gradient-start,
+	    $dashboard-banner-gradient-end
+	  );
+	}
+}

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

@@ -10,13 +10,15 @@ $footer-title-color: #fff;
 $footer-text-color: #89cae6;
 $footer-item-disc-color: $secondary;
 .footer-logo { filter: brightness(0) invert(1); }
+.footer-social-icons .footer-social-icon { color: $secondary; }
 
 // dashboard
 $dashboard-line-color-price: $tertiary; // price left border
 
-$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels
+$dashboard-banner-chart-legend-label-color: #89cae6;
-
+$dashboard-stats-item-label-color: #89cae6;
-$dashboard-stats-item-value-color: $additional-font; // stat values
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
 
 $dashboard-stats-item-border-color: $tertiary; // stat border
 
@@ -29,9 +31,6 @@ $dashboard-banner-network-plain-container-background-color: #1c476c; // stats bg
 
 // navigation
 .navbar { box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); } // header shadow
-$header-icon-border-color-hover: $secondary; // top border on hover
-$header-icon-color-hover: $secondary; // nav icon on hover
-.dropdown-item:hover, .dropdown-item:focus { background-color: $secondary !important; } // dropdown item on hover
 
 // buttons
 $btn-line-bg: #fff; // button bg
@@ -40,11 +39,21 @@ $btn-copy-color: $secondary; // btn copy
 $btn-qr-color: $secondary; // btn qr-code
 
 //links & tile
-.tile a { color: $secondary !important; } // links color for badges
+$tile-body-a-color: $secondary;
-.tile-type-block {
+$tile-type-block-color: $secondary;
-    border-left: 4px solid $secondary;
+$tile-type-progress-bar-color: $secondary;
-} // tab active bg
+a.tile-title { color: $secondary !important; }
 
 // card
 $card-background-1: $secondary;
 $card-tab-active: $secondary;
+
+.layout-container {
+	.dashboard-banner-container {
+	  background-image: linear-gradient(
+	    to bottom,
+	    $dashboard-banner-gradient-start,
+	    $dashboard-banner-gradient-end
+	  );
+	}
+}

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

@@ -6,8 +6,8 @@ $additional-font: #a1ded1;
 
 $tile-body-a-color: $secondary;
 $tile-type-block-color: $secondary;
-
 $tile-type-progress-bar-color: $secondary;
+a.tile-title { color: $secondary !important; }
 
 // footer
 $footer-background-color: $primary;
@@ -18,8 +18,12 @@ $footer-social-icon-color: $secondary;
 
 // dashboard
 $dashboard-line-color-price: $tertiary; // price left border
-$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels
+
-$dashboard-stats-item-value-color: $additional-font; // stat values
+$dashboard-banner-chart-legend-label-color: $additional-font;
+$dashboard-stats-item-label-color: $additional-font;
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
+
 $dashboard-stats-item-border-color: $secondary; // stat border
 $dashboard-banner-gradient-start: $primary; // gradient begin
 $dashboard-banner-gradient-end: #193039; // gradient end
@@ -34,7 +38,6 @@ $btn-line-bg: #fff; // button bg
 $btn-line-color: $secondary; // button border and font color && hover bg color
 $btn-copy-color: $secondary; // btn copy
 $btn-qr-color: $secondary; // btn qr-code
-$btn-dropdown-line-color: $secondary;
 
 // card
 $card-background-1: $secondary;
@@ -57,4 +60,4 @@ $card-tab-active: $secondary;
     .footer-logo {
       filter: brightness(0) invert(1);
     }
-  }
+}

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

@@ -7,17 +7,21 @@ $additional-font: #93e8dd;
 // footer
 $footer-background-color: $primary;
 $footer-title-color: #fff;
-$footer-text-color: #93e8dd;
+$footer-text-color: $additional-font;
-$footer-item-disc-color: $secondary;
+$footer-item-disc-color: $additional-font;
 .footer-logo { filter: brightness(0) invert(1); }
 
 // dashboard
 $dashboard-line-color-price: $tertiary; // price left border
 
+$dashboard-line-color-price: $secondary;
 
-$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels
+$dashboard-line-color-market: $tertiary;
 
-$dashboard-stats-item-value-color: $additional-font; // stat values
+$dashboard-banner-chart-legend-label-color: $additional-font;
+$dashboard-stats-item-label-color: $additional-font;
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
 
 $dashboard-stats-item-border-color: $secondary; // stat border
 
@@ -30,9 +34,6 @@ $dashboard-banner-network-plain-container-background-color: #0e534a; // stats bg
 
 // navigation
 .navbar { box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); } // header shadow
-$header-icon-border-color-hover: $secondary; // top border on hover
-$header-icon-color-hover: $secondary; // nav icon on hover
-.dropdown-item:hover, .dropdown-item:focus { background-color: $secondary !important; } // dropdown item on hover
 
 // buttons
 $btn-line-bg: #fff; // button bg
@@ -41,11 +42,21 @@ $btn-copy-color: #1c9f90; // btn copy
 $btn-qr-color: #1c9f90; // btn qr-code
 
 //links & tile
-.tile a { color: $secondary !important; } // links color for badges
+$tile-body-a-color: #1c9f90;
-.tile-type-block {
+$tile-type-block-color: #1c9f90;
-    border-left: 4px solid $secondary;
+$tile-type-progress-bar-color: #1c9f90;
-} // tab active bg
+a.tile-title { color: #1c9f90 !important; }
 
 // card
 $card-background-1: $secondary;
 $card-tab-active: $secondary;
+
+.layout-container {
+	.dashboard-banner-container {
+	  background-image: linear-gradient(
+	    to bottom,
+	    $dashboard-banner-gradient-start,
+	    $dashboard-banner-gradient-end
+	  );
+	}
+}

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

@@ -19,6 +19,7 @@
 // @import "sokol_variables";
 // @import "tobalaba_variables";
 // @import "tomochain_variables";
+// @import "rsk_variables";
 
 // responsive breakpoints
 $breakpoint-xs: 320px;
@@ -27,4 +28,4 @@ $breakpoint-md: 768px;
 $breakpoint-lg: 992px;
 $breakpoint-xl: 1024px;
 $breakpoint-xxl: 1280px;
-$breakpoint-xxxl: 1366px;
+$breakpoint-xxxl: 1366px;

apps/block_scout_web/lib/block_scout_web/templates/address_contract/index.html.eex

@@ -80,8 +80,8 @@
             </div>
           <% {:ok, contract_code} -> %>
             <div class="d-flex justify-content-between align-items-baseline">
-              <h3><%= gettext "Contract Byte Code" %></h3>
+              <h2 class="card-title"><%= gettext "Contract Byte Code" %></h2>
-              <button type="button" class="button button-secondary button-sm" id="button" data-clipboard-text="<%= contract_code %>" aria-label="copy contract creation code">
+              <button type="button" class="btn-line" id="button" data-clipboard-text="<%= contract_code %>" aria-label="copy contract creation code">
                 <%= gettext "Copy Contract Byte Code" %>
               </button>
             </div>

apps/block_scout_web/lib/block_scout_web/templates/common_components/_pagination_container.html.eex

@@ -1,4 +1,4 @@
-<div class='pagination-container <%= if assigns[:position] == "top" do %>position-top<% end %> <%= if assigns[:position] == "bottom" do %>position-bottom<% end %>'>
+<div class='pagination-container <%= if assigns[:position] == "top" do %>position-top<% end %> <%= if assigns[:position] == "bottom" do %>position-bottom<% end %>' <%= if !assigns[:next_page_path] do %>disabled<% end %>>
     <%= if false do %>
     <!-- Pagination limit -->
     <div class="pagination-limit">

apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex

@@ -83,7 +83,7 @@
             </span>
             <%= subnetwork_title() %>
           </a>
-          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
             <a class="dropdown-item header division">Mainnets</a>
             <%= for %{url: url, title: title} <- dropdown_head_main_nets() do %>
               <a class="dropdown-item" href="<%= url%>"><%= title %></a>

apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex

@@ -108,7 +108,7 @@
             <dl class="row">
               <dt class="col-sm-3 text-muted"><%= gettext "Raw Input" %></dt>
               <dd class="col-sm-9">
-                <div class="d-flex mb-1 justify-content-between">
+                <div class="d-flex mb-3 justify-content-between">
                   <!-- Dropdown -->
                   <div class="dropdown">
                     <button class="btn-dropdown-line dropdown-toggle" type="button" id="tx-input-decoding-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">